Vue生命周期与后端交互实现流程详解
皮糖小王子 人气:0表单控制
1.input:checkbox(单选,多选),radio(单选)
2.代码展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <h1>表单控制</h1> <p>用户名:<input type="text" v-model="name"></p> <p>密码:<input type="text" v-model="password"></p> <p><input type="checkbox" v-model="isRemember">记住密码</p> <p> <input type="radio" v-model="gender" value="1">男 <input type="radio" v-model="gender" value="2">女 <input type="radio" v-model="gender" value="0">未知 </p> <p> 爱好: <input type="checkbox" value="篮球" v-model="hobby">篮球 <input type="checkbox" value="足球" v-model="hobby">足球 <input type="checkbox" value="乒乓球" v-model="hobby">乒乓球 <input type="checkbox" value="排球" v-model="hobby">排球 </p> {{hobby}} </div> </body> <script> new Vue({ el:'#app', data:{ name:'', password:'', isRemember:false, //checkbox单选,使用布尔类型 gender:'', //radio单选,使用字符串 hobby:[] //checkbox多选使用数组 } }) </script> </html>
购物车案例
1.python中只有基于迭代的循环可没有基于索引的循环
2.js,java,go基于迭代和索引的两种
3.js中for循环
- for(i=0;i<checkGroup.length;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.基本购物车代码展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <link rel="stylesheet" >href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" > </head> <body> <div id="app"> <div class="container-fluid"> <h1 class="text-center">购物车</h1> <div class="row"> <div class="col-md-6 col-md-offset-3"> <table class="table table-bordered"> <thead> <tr> <th>商品id</th> <th>商品名字</th> <th>商品价格</th> <th>商品数量</th> </tr> </thead> <tbody> <tr v-for="good in goodList"> <th>{{good.id}}</th> <td>{{good.name}}</td> <td>{{good.price}}</td> <td>{{good.count}}</td> <td><input type="checkbox" v-model="checkGroup" :value="good"></td> </tr> </tbody> </table> <hr> 选中的商品是:{{checkGroup}} <br> 总价格是:{{getPrice()}} </div> </div> </div> </div> </body> <script> new Vue({ el: '#app', data: { goodList: [ {id: 1, name: '小汽车', price: 1200000, count: 1}, {id: 2, name: '钢笔', price: 12, count: 34}, {id: 3, name: '鸡蛋', price: 2, count: 4}, {id: 4, name: '面包', price: 9, count: 10}, ], checkGroup: [] }, methods: { getPrice() { // 取出checkGroup中得商品数量和商品价格相乘 做累加 // js 中 for 循环 var total = 0 for (item of this.checkGroup) { total += item.price * item.count } return total } } }) var goodList = [ {id: 1, name: '小汽车', price: 1200000, count: 1}, {id: 2, name: '钢笔', price: 12, count: 34}, {id: 3, name: '鸡蛋', price: 2, count: 4}, {id: 4, name: '面包', price: 9, count: 10}, ] </script> </html>
5.带加减的购物车代码展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" > </head> <body> <div id="app"> <div class="container-fluid"> <h1 class="text-center">购物车</h1> <div class="row"> <div class="col-md-6 col-md-offset-3"> <table class="table table-bordered"> <thead> <tr> <th>商品id</th> <th>商品名字</th> <th>商品价格</th> <th>商品数量</th> <th><input type="checkbox" v-model="checkAll" @change="handleChange">全选/全不选</th> </tr> </thead> <tbody> <tr v-for="good in goodList"> <th>{{good.id}}</th> <td>{{good.name}}</td> <td>{{good.price}}</td> <td><span class="btn link btn-sm" @click="handleDown(good)">-</span>{{good.count}}<span class="btn link btn-sm" @click="good.count++">+</span> </td> <td><input type="checkbox" v-model="checkGroup" :value="good" @change="handleCheckOne"></td> </tr> </tbody> </table> <hr> 选中的商品是:{{checkGroup}} <br> 总价格是:{{getPrice()}} </div> </div> </div> </div> </body> <script> new Vue({ el: '#app', data: { goodList: [ {id: 1, name: '小汽车', price: 1200000, count: 1}, {id: 2, name: '钢笔', price: 12, count: 34}, {id: 3, name: '鸡蛋', price: 2, count: 4}, {id: 4, name: '面包', price: 9, count: 10}, ], checkGroup: [], checkAll: false, }, methods: { getPrice() { var total = 0 for (item of this.checkGroup) { total += item.price * item.count } return total }, handleChange() { if (this.checkAll) { this.checkGroup = this.goodList } else { this.checkGroup = [] } }, handleCheckOne() { // 如果checkGroup的长度等于goodList的长度,说明全选了,checkAll就应该变为true,否则就是false // if (this.checkGroup.length == this.goodList.length) { // this.checkAll = true // } else { // this.checkAll = false // } // 变短 this.checkAll = this.checkGroup.length == this.goodList.length }, handleDown(good) { if (good.count > 1) { good.count-- } else { alert('不能再少了,受不了了') } } } }) </script> </html>
v-model进阶(了解)
1.v-model 之 lazy、number、trim
- lazy:等待input框的数据绑定时区焦点之后在变化;
- number:数字开头,只保留数字,后面的字母不保留;字母开头都保留。
- trim:取出首位的空格。
2.代码展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h1>v-model进阶</h1> <input type="text" v-model.lazy ="name1">----->{{name1}} <br> <input type="text" v-model.number ="name2">----->{{name2}} <br> <input type="text" v-model.trim ="name3">----->{{name3}} </div> </body> <script> var vm = new Vue({ el: '#app', data: { name1: '', name2:'', name3:'', }, }) </script> </html>
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,查询是否秒到;
代码展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h1>vue声明周期</h1> <button @click="handleShow">点我组件显示和消失</button> <hr> <child v-if="show"></child> <hr> </div> </body> <script> // 定义一个全局组件 Vue.component('child', { template: ` <div> <button>后退</button> {{ title }} <button @click="handleClick">前进</button> </div>`, data() { return { title: '好看的首页', t:'' } }, methods: { handleClick() { // alert('前进') this.title = 'lqz' } }, beforeCreate() { console.log('beforeCreate') console.log(this.$data) console.log(this.$el) }, created() { console.log('created') console.log(this.$data) console.log(this.$el) // 开启定时器,每隔3s,打印hello this.t=setInterval(()=>{ console.log('hello') },3000) }, beforeMount() { console.log('beforeMount') console.log(this.$data) console.log(this.$el) }, mounted() { console.log('mounted') console.log(this.$data) console.log(this.$el) }, beforeUpdate() { console.log('beforeUpdate') }, updated() { console.log('updated') }, beforeDestroy() { console.log('当前状态:beforeDestroy') }, destroyed() { console.log('当前状态:destroyed') // 销毁定时器 clearInterval(this.t) this.t=null }, }) var vm = new Vue({ el: '#app', data: { show: true }, methods: { handleShow() { this.show = !this.show } } }) </script> </html>
与后端交互
1.发展过程
- js原生发送ajax请求:new XMLHttpRequest(),浏览器兼容性不好,于是jquery基于它做了封装出了jquery的ajax方法,XMLHttpRequest中存在很多bug;
- jquery的ajax,vue中用的很少;
- js原生提供的fetch,现在官方主推这个,缺点是不执行ie浏览器;
- axios:vue中常用的,它是封装了XMLHttpRequest
2.代码展示
前端页面:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <div id="app"> <h1>jquery的ajax与后端交互</h1> <!-- <button @click="handleLoad1">点击加载数据</button>--> <!-- <br>--> <!-- <p>名字是:{{name}}</p>--> <!-- <p>年龄是:{{age}}</p>--> <!-- <hr>--> <h1>js原生的fetch与后端交互</h1> <!-- <button @click="handleLoad2">点击加载数据</button>--> <!-- <br>--> <!-- <p>名字是:{{name}}</p>--> <!-- <p>年龄是:{{age}}</p>--> <!-- <hr>--> <h1>axios与后端交互</h1> <button @click="handleLoad3">点击加载数据</button> <br> <p>名字是:{{name}}</p> <p>年龄是:{{age}}</p> <hr> </div> </body> <script> var vm = new Vue({ el: '#app', data: { name: '', age: 0 }, methods: { handleLoad1() { $.ajax({ url: "http://127.0.0.1:5000/", type: 'get', success: data => { console.log(typeof data) data = JSON.parse(data) // data 是字符串类型,需要转成对象类型 console.log(typeof data) this.name = data.name this.age = data.age } }) }, handleLoad2() { // 用的很少 fetch('http://127.0.0.1:5000/').then(res => res.json()).then(res => { console.log(res) console.log(typeof res) this.name = res.name this.age = res.age }) }, handleLoad3() { // 用的很少 axios.get('http://127.0.0.1:5000/').then(res => { console.log(res.data) // 后端真正的数据在res.data中 this.name = res.data.name this.age = res.data.age }) }, } }) </script> </html>
后端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()
电影案例
前端页面展示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <h1>电影小案例</h1> <ul> <li v-for="film in filmList"> <h2>电影名:{{film.name}}</h2> <img :src="film.poster" alt="" height="400px" width="300px"> </li> </ul> </div> </body> <script> var vm = new Vue({ el: '#app', data: { filmList: [] }, created() { axios.get('http://127.0.0.1:5000/films').then(res => { this.filmList = res.data.data.films }) } }) </script> </html>
后盾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()
加载全部内容