VUE生命周期函数/axios与后端交互案例

axios发送ajax请求与后端交互

以后都用它，在vue上，第三方的模块

Axios 是一个基于 promise 的 HTTP 库，还是基于XMLHttpRequest封装的

# 跨越问题
	-浏览器的原因，只要向不是地址栏中的 [域：地址和端口]发送请求，拿的数据，浏览器就给拦截了
    
# 处理跨域问题
	-后端代码处理----》只需要在响应头中加入允许即可
      def list(self,request,*args,**kwargs):
        res = ListModelMixin.list(self,request,*args,**kwargs)
        res['Access-Control-Allow-Origin'] = '*'
        # 在请求头中加入
        return res

      created() {
            axios.get('http://127.0.0.1:8000/api/goods/').then(res => {
                console.log(res)
              
                this.goodList = res.data
            })
        }
  
  
  axios.get('http://127.0.0.1:8000/api/goods/').then(res => {
          res.data      }
  # 发送get请求到对应url ，
  # res.data 就是请求成功后返回的数据

电影数据案例

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name='keywords' content="查询关键字，可以填写多个">
    <meta name="description" content="网页简介">

    <script src="js/vue.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="js/axios.js"></script>
</head>

<body>
<div id="app">

<button @click="checkMovie">查看电影</button>

    <ul>
        <li v-for="obj in dataList">
          <!--将数据进行循环展示-->
            <h2>{{obj.name}}</h2>
            <img :src="obj.poster" alt="" width="300px" height="200px">
            <h3>{{obj.category}}</h3>
            <p>{{obj.synopsis}}</p>

        </li>
    </ul>


</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            dataList:[],
        },
        methods:{
         checkMovie(){
            axios.get('http://127.0.0.1:8001/api/goods/film/').then(res=>{
              <!--发送ajax get请求方式到接口，拿到后端返回的数据-->
                this.dataList = res.data.data.films

            })
         }
        }
    })
</script>
</html>

后端

    @action(methods=['GET'],detail=False)
    def film(self,request,*args,**kwargs):
        with open('app01/111.json','r',encoding='utf8')as f:
            res = json.load(f)
        res = Response(res)
        # 重点 先获取Response数据对象
        res['Access-Control-Allow-Origin'] = '*'
        # 然后在对象内添加属性 解决跨域问题
        return res

购物车案例

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name='keywords' content="查询关键字，可以填写多个">
    <meta name="description" content="网页简介">

    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>

<body>
<div id="app">
    <table class="table table-bordered" v-if="goodList.length>0">
        <thead>
        <tr>
            <th>商品编号</th>
            <th>商品名</th>
            <th>单价</th>
            <th>数量</th>
            <th>操作 全选<input type="checkbox" v-model="checkBox1" @change="handleChange"></th>
            <th>删除商品</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in goodList">
            <th scope="row">{{index + 1}}</th>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>
                <button @click="subtraction(item)">-</button>
                {{item.number}}
                <button @click="plusSign(item)">+</button>
            </td>
            <td><input type="checkbox" v-model="checkGroup" :value="item" @change="checkboxChange"></td>
            <td>
                <button :value="item" @click="delectClick(item,index)">删除商品</button>
            </td>
        </tr>
        </tbody>
    </table>
    <h3 v-else>暂无商品</h3>
    <br>
    总价格:{{totalPrices()}}
</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'moon',
            goodList: [],
            checkBox1: false,
            checkGroup: [],
        },
        methods: {
            totalPrices() {
              // 计算总价函数
              // 循环计算商品列表中每一个商品的总价，然后相加
                var total = 0
                for (item of this.checkGroup) {
                    total += item.price * item.number
                }
                return total
            },
            handleChange() {
              // 全选按钮/全不选
              // 如果点击了全选 则 选择商品列表和商品列表相同
                if (this.checkBox1) {
                    this.checkGroup = this.goodList
                } else {
                    this.checkGroup = []
                }
            },
            checkboxChange() {
              //每个商品的单选按钮
              //当点击时判断已选择列表是否等于商品列表，如果相同则全选按钮代表选中
              //如果不相等 则说明还没有全选
                if (this.checkGroup.length === this.goodList.length) {
                    this.checkBox1 = true
                } else {
                    this.checkBox1 = false
                }
            },
            plusSign(item) {
              // 数量增加函数，点击触发，判断是否大于库存
                if (item.number < item.repertory) {
                    item.number++
                } else {
                    alert('库存不足')
                }

            },
            subtraction(item) {
              // 商品减少函数，点击触发，判断是否小于1 最低要有一个
                if (item.number > 1) {
                    item.number--
                } else {
                    alert('商品数量最少为1')
                }

            },
            delectClick(item, index) {
              // 商品删除按钮，通过索引来确定删除的是商品列表中的哪一个商品
                this.goodList.splice(index, 1)
              // 对商品列表中的（索引位置，删除个数）
                var index1 = this.checkGroup.indexOf(item)
                // 通过数组内置方法.indexOf循环判断是否和准备删除的商品一致
                // 如果一致返回 该数据的索引位置，通过索引位置对已选中商品再进行删除
                if (index1 >= 0) {
                    this.checkGroup.splice(index1, 1)
                }

            },
        },
        created() {
            axios.get('http://127.0.0.1:8000/api/goods/').then(res => {
              //通过生命周期函数，对该页面加载时就触发，向后端地址发送 get请求，获得数据
              // 进行渲染
                console.log(res)
                this.goodList = res.data
            })
        }
    })
</script>
</html>

后端

class GoodsInfo(GenericViewSet, ListModelMixin, CreateModelMixin):
    queryset = Goods.objects.all()
    serializer_class = GoodsSerializers

    def list(self,request,*args,**kwargs):
        res = ListModelMixin.list(self,request,*args,**kwargs)
        res['Access-Control-Allow-Origin'] = '*'
        return res
      
 # 重点，要先拿到返回数据 然后再添加跨域校验

VUE生命周期钩子函数

钩子函数	描述
beforeCreate	创建Vue实例之前调用
created	创建Vue实例成功后调用（可以在此处发送异步请求后端数据）
beforeMount	渲染DOM之前调用
mounted	渲染DOM之后调用
beforeUpdate	重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
updated	重新渲染完成之后调用
beforeDestroy	销毁之前调用
destroyed	销毁之后调用

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            dataList:[],
        },
        methods:{},
        created(){
            axios.get('http://127.0.0.1:8001/api/goods/film/').then(res=>{
                this.dataList = res.data.data.films
            })
        },
        mounted(){},
    })
</script>

# vue生命周期函数可以直接通过mounted()直接编写，在打开页面时候会自动执行


	-1 用的最多的是created 打开页面立即发送ajax请求  
  -2 也比较多  有的人放在mounted中加载 先渲染一些静态页面然后加载数据 
	-3 关闭页面时触发  beforeDestroy
    举例：-组件一创建，created中启动一个定时器
         -组件被销毁,beforeDestroy销毁定时器
      
      
 # 实现实时聊天效果（在线聊天室）
	-轮询：定时器+ajax   http：http版本区别
    -长轮询：定时器+ajax  http
    -websocket协议：服务端主动推送消息
    https://zhuanlan.zhihu.com/p/371500343