Vue生命周期与后端交互实现流程详解

目录

• 表单控制
• 购物车案例
• v-model进阶（了解）
• vue生命周期
• 与后端交互
• 电影案例

表单控制

1.input：checkbox（单选，多选），radio（单选）

2.代码展示

   
   
   



   
表单控制
   
用户名：
   
密码：
   
记住密码
   

       男
       女
       未知
   
   

       爱好：
       篮球
       足球
       乒乓球
       排球
   
   {{hobby}}

购物车案例

1.python中只有基于迭代的循环可没有基于索引的循环

2.js，java，go基于迭代和索引的两种

3.js中for循环

• for(i=0;i
• for(i in checkGroup) # 基于迭代的循环
• for(i of checkGroup) # es6中的循环
• 数组内置方法.forEach()
• jquery $.each循环

代码展示：

   1 方式一：js的基于索引的循环
   for (var i = 0; i< goodList.length; i++) {
       console.log(goodList[i])
   }
   2 方式二：基于迭代的循环
   for (i in goodList){
       console.log(goodList[i])
   }
   3 方式三：of 循环，基于迭代的
     for (i of goodList){
       console.log(i)
   }
   4 方式四：数组的循环方法
   goodList.forEach(item => {
       console.log('---', item)
   })
   5 jquery:引入
   $.each(goodList, (i, v) => {
       console.log(v)
   })

4.基本购物车代码展示

   
   
   
   
   href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="external nofollow"  rel="external nofollow" >



   

       
购物车
       

           

               

                   

                   

                       
商品id
                       
商品名字
                       
商品价格
                       
商品数量
                   
                   
                   

                   

                       
{{good.id}}
                       
{{good.name}}
                       
{{good.price}}
                       
{{good.count}}
                       

                   
                   
               
               

               选中的商品是：{{checkGroup}}
               

               总价格是：{{getPrice()}}
           
       
   

5.带加减的购物车代码展示

   
   
   
   



   

       
购物车
       

           

               

                   

                   

                       
商品id
                       
商品名字
                       
商品价格
                       
商品数量
                       
全选/全不选
                   
                   
                   

                   

                       
{{good.id}}
                       
{{good.name}}
                       
{{good.price}}
                       
-{{good.count}}+
                       
                       

                   
                   
               
               

               选中的商品是：{{checkGroup}}
               

               总价格是：{{getPrice()}}

           
       
   

v-model进阶（了解）

1.v-model 之 lazy、number、trim

• lazy：等待input框的数据绑定时区焦点之后在变化；
• number：数字开头，只保留数字，后面的字母不保留；字母开头都保留。
• trim：取出首位的空格。

2.代码展示

   
   
   



   
v-model进阶
   ----->{{name1}}
   

   ----->{{name2}}
   

  ----->{{name3}}

vue生命周期

1.var vm=new Vue实例（）

四个过程：

• 实例创建，数据放到实例中；
• 挂在模板：el====》div；
• 改页面，改变量，都会相互影响，update；
• 销毁实例

2.八个钩子函数

4个过程对应八个函数，依次执行（到某个过程就会执行某个函数）

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

钩子函数（hook），AOP的体现：面向切面编程----》装饰器实现aop；

3.学习生命周期需要掌握

• 组件想后端发送请求，获取数据，应该放在created写，此时data已经有数据；
• destroyed做一些资源请理性的工作。

4.小案例：

组件创建，开启定时器，不停的打印hello，在destroyed中对定时器进行销毁。 补充之js定时任务和延时任务： 延时任务：

setTimeout(()=>{
	console.log('3s后执行我')
},3000)

定时任务：

setInterval(()=>{
		console.log('hello')
},3000)

什么场景下要用定时任务？

(1)实时跟后端交互，基于http+定时任务（websocket协议：服务端主动推送消息，手机app的消息推送）

(2)秒杀场景，先提交秒杀请求，每隔3s，查询是否秒到；

代码展示

   
   
   



   
vue声明周期
   点我组件显示和消失
   

   
   

与后端交互

1.发展过程

• js原生发送ajax请求：new XMLHttpRequest()，浏览器兼容性不好，于是jquery基于它做了封装出了jquery的ajax方法，XMLHttpRequest中存在很多bug；
• jquery的ajax，vue中用的很少；
• js原生提供的fetch，现在官方主推这个，缺点是不执行ie浏览器；
• axios：vue中常用的，它是封装了XMLHttpRequest

2.代码展示

前端页面：

   
   
   
   
   



   
jquery的ajax与后端交互
   
   
   
   
   
   
js原生的fetch与后端交互
   
   
   
   
   
   
axios与后端交互
   点击加载数据
   

   
名字是：{{name}}
   
年龄是：{{age}}
   

后端Flask框架：

from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/')
def index():
   res = jsonify({'name': 'lqz', 'age': 19})
   # 处理了跨域（）  在响应头中加入 django写后端 {'Access-Control-Allow-Origin': '*'}
   res.headers = {'Access-Control-Allow-Origin': '*'}
   return res
if __name__ == '__main__':
   app.run()

电影案例

前端页面展示：

   
   
   
   



   
电影小案例
   

       

           
电影名：{{film.name}}
           
       
   

后盾Flask框架：

from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/films')
def films():
   with open('./film.json', 'r', encoding='utf-8') as f:
       data = json.load(f)
   res = jsonify(data)
   res.headers = {'Access-Control-Allow-Origin': '*'}
   return res
if __name__ == '__main__':
   app.run()

到此这篇关于Vue生命周期与后端交互实现流程详解的文章就介绍到这了,更多相关Vue生命周期与后端交互内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！