购物车案例
<!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"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-lg-offset-3">
<div class="text-center">
<h1>购物车</h1>
</div>
<div>
<table class="table">
<thead>
<tr>
<th>id</th>
<th>商品名</th>
<th>价格</th>
<th>数量</th>
<th><input type="checkbox" @change="handleClick" v-model="v" class="text-left">全选/全不选</th>
</tr>
</thead>
<tbody>
<tr v-for="(item) in good_list">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="handleDown(item)">-</button>
{{item.number}}
<button @click="handleUp(item)">+</button>
</td>
<td><input type="checkbox" @change="handleClickOne" v-model="a" :value="item"></td>
<td>
<button @click="handlerDelete(item)">删除</button>
</td>
</tr>
</tbody>
</table>
商品: {{a}}
<br>
总价:{{get_price()}}
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
a: [],
v: false,
good_list: [
{'id': 1, 'name': '钢笔', 'price': 1, 'number': 10, 'kc': 10},
{'id': 2, 'name': '铅笔', 'price': 29, 'number': 10, 'kc': 10},
{'id': 3, 'name': '文具盒', 'price': 298, 'number': 10, 'kc': 10},
{'id': 4, 'name': '彩笔', 'price': 29, 'number': 10, 'kc': 10},
],
},
methods: {
get_price() {
var total = 0
for (item of this.a) {
total += item.price * item.number
}
return total
},
handleClick() {
if (this.v) {
this.a = this.good_list
} else {
this.a = []
}
},
handleClickOne() {
if (this.a.length == this.good_list.length) {
this.v = true
} else {
this.v = false
}
},
handleDown(item) {
if (item.number > 1) {
item.number--
item.kc++
} else {
alert('不可减少')
}
},
handleUp(item) {
if ( item.kc >0 ) {
item.number++
item.kc--
} else {
alert('库存不足')
}
},
handlerDelete(item)
{
this.good_list = this.good_list.filter(value => value != item)
this.a = this.a.filter(value => value != item)
}
}
})
</script>
</html>
python中没有值类型和引用类型的叫法
因为python一切皆对象，对象都是地址都是引用
-可变类型当参数传到函数中，在函数中修改会影响原来的
-不可变类型当参数传到函数中，在函数中修改不会影响原来的
但在js中 传入了'对象'，在函数中修改，会影响原来的本身
-js的对象是引用类型
v-model进阶
lazy：等待input框的数据绑定时区焦点之后在变化
<h1>lazy</h1>
<input type="text" v-model.lazy="myText">---->{{myText}}
<script>
var vm = new Vue({
el: '.app',
data: {myText: '',}
})
</script>
number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
<h1>number</h1>
<input type="text" v-model.number="myNumber">---->{{myNumber}}
<script>
var vm = new Vue({
el: '.app',
data: {myNumber: '',}
})
</script>
trim：去除首位的空格
<h1>trim</h1>
<input type="text" v-model.trim="myTrim">---->{{myTrim}}
<script>
var vm = new Vue({
el: '.app',
data: {myTrim: '',}
})
</script>
Vue与后端交互
前端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue/vue.js"></script>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="jquery-3.5.1/jquery-3.5.1.min.js"></script>
</head>
<body>
<div id="app">
<h1>后端交互测试</h1>
<button @click="handelInfo" class="btn btn-success">点击展示信息</button>
<br>
<br>
<div v-if="age!=0">
<p>姓名:{{name}}</p>
<p>年龄:{{age}}</p>
<p>性别:{{gender}}</p>
</div>
<div v-else>
暂无用户信息
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{name:'',age:0,gender:'未知'},
methods:{
handelInfo(){
$.ajax({
url:'http://127.0.0.1:8000/collection/',
type:'get',
success:data=>{
this.name = data.name
this.age = data.age
this.gender = data.gender
}
})
}
} },
)
</script>
</html>
后端：
视图层
from rest_framework.response import Response
from rest_framework.views import APIView
class CollectionView(APIView):
def get(self,request):
print(request.query_params)
back_dict = {'name':'lyf','age':20,'gender':'女'}
return Response(back_dict)
路由层
from django.contrib import admin
from django.urls import path
from app01 import views
urlpatterns = [
path('admin/', admin.site.urls),
path('collection/', views.CollectionView.as_view()),
]
跨域问题：
浏览器原因，只要向不是地址栏中的[域：地址和端口]发送请求，拿到的数据就会被浏览器拦截
处理跨域问题
后端通过在响应头中加入允许即可
CORS：服务器设置HTTP响应头中 Access-Control-Allow-Origin值，解除跨域限制
跨域问题前端解决方案参考
http://http://www.javashuo.com/article/p-hjjfpciv-nv.html
跨域问题后端解决方案参考
https://blog.csdn.net/qq991658923/article/details/121293506
我上面的代码使用的是jQuery的Ajax
发的是简单的get请求，后端通过添加键值对，解决跨域问题
fetch发送ajax请求
# fetch 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应
-新的发送ajax 接口
-用起来比较方便
-支持promise写法[最新的异步写法]
-解决了原生的XMLHttpRequest兼容性的问题
-不是所有浏览器都支持
-主流现在是用axios[第三方]发送请求
# XMLHttpRequest: 原生js提供的
-比较老，不同浏览器需要做一些兼容性的处理，写起来比较麻烦
-jq基于它做了封装
# 发送ajax请求，
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue/vue.js"></script>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="jquery-3.5.1/jquery-3.5.1.min.js"></script>
</head>
<body>
<div id="app">
<h1>后端交互测试</h1>
<button @click="handelInfo" class="btn btn-success">点击展示信息</button>
<br>
<br>
<div v-if="age!=0">
<p>姓名:{{name}}</p>
<p>年龄:{{age}}</p>
<p>性别:{{gender}}</p>
</div>
<div v-else>
暂无用户信息
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{name:'',age:0,gender:'未知'},
methods:{
handelInfo(){
// $.ajax({
// url:'http://127.0.0.1:8000/collection/',
// type:'get',
// success:data=>{
// this.name = data.name
// this.age = data.age
// this.gender = data.gender
// }
// })
fetch('http://127.0.0.1:8000/collection/').then(reponse=>reponse.json()).then(
res=>{
console.log(res)
this.name = res.name
this.age = res.age
this.gender = res.gender
}
)
}
} },
)
</script>
</html>
axios发送ajax请求
CDN使用
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> //cdn引入
下载
点击查看代码``
我们以后会经常使用vue上的axios
来向后端发送ajax请求，
Axios 是一个基于promise 的HTTP库，还是基于XMLHttpRequest封装的
我们提交请求后得到该数据:注意这个数据本身就是data,我们自己的数据也叫做data，
相当于对象里面又套了对象，我们通过句点符的形式取出我们所需要的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue/vue.js"></script>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="vue/axios.js"></script>
</head>
<body>
<div id="app">
<h1>后端交互测试</h1>
<button @click="handelInfo" class="btn btn-success">点击展示信息</button>
<br>
<br>
<div v-if="age!=0">
<p>姓名:{{name}}</p>
<p>年龄:{{age}}</p>
<p>性别:{{gender}}</p>
</div>
<div v-else>
暂无用户信息
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{name:'',age:0,gender:'未知'},
methods:{
handelInfo(){
axios.get('http://127.0.0.1:8000/collection/').then(
res =>{
console.log(res)
this.name = res.data.name
this.age = res.data.age
this.gender = res.data.gender
}
)
}
} },
)
</script>
</html>
小电影案例练习
网址:https://m.maizuo.com/v5/?co=mzmovie#/films/nowPlaying
抓数据
右键复制obj到 https://www.json.cn/ 中
创建文件.json格式将内容复制到文件中即可！~
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue/vue.js"></script>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>后端交互测试</h1>
<button @click="handelInfo" class="btn btn-success">点击展示电影信息</button>
<ul>
<li v-for="item in dataList">
<h2>名字：{{item.name}}</h2>
<h3>导演：{{item.director}}</h3>
<h3>类型：{{item.category}}</h3>
<p>简介：{{item.synopsis}}</p>
<img :src="item.poster" alt="" height="300px" width="200px">
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{dataList:[]},
methods:{
handelInfo(){
axios.get('http://127.0.0.1:8000/collection/').then(
res =>{
console.log(res)
this.dataList = res.data.data.films
}
)
}
} },
)
</script>
</html>
后端
视图层
django-drf
from rest_framework.response import Response
from rest_framework.views import APIView
class CollectionView(APIView):
def get(self,request):
with open(r'D:\vuecollections\info.json','r',encoding='utf-8') as f:
back_dict = json.load(f)
obj = Response(back_dict)
obj['Access-Control-Allow-Origin'] = '*' # 针对简单请求
return obj
路由层
from django.contrib import admin
from django.urls import path
from app01 import views
urlpatterns = [
path('admin/', admin.site.urls),
path('collection/', views.CollectionView.as_view()),
]
Vue生命周期
从Vue实例创建开始，到实例被销毁
总共经历了8个生命周期(钩子函数)
钩子:如 反序列化验证 ---> 钩子函数
专业名称: 面向切面编程(AOP)
OOP:面向对象编程
# 8个生命周期钩子函数
beforeCreate 创建Vue实例之前调用
created 创建Vue实例成功后调用（可以在此处发送异步请求后端数据）
beforeMount 渲染DOM之前调用
mounted 渲染DOM之后调用
beforeUpdate 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
updated 重新渲染完成之后调用
beforeDestroy 销毁之前调用
destroyed 销毁之后调用
# 重点：
-1 用的最多的，created 发送ajax请求----》有的人放在mounted中加载
区别在于 created时还没有数据,有人放在mounted中加载
-2 beforeDestroy
-组件一创建，created中启动一个定时器
-组件被销毁,beforeDestroy销毁定时器
http协议是只能通过请求发送，得到响应，
这也就意味着服务端并不能主动的推送数据给客户端，
我们获取数据就是基于请求而已
如果我们想要实现实时聊天的效果(在线聊天室)
轮询: 定时器+ajax ---知识点 http---版本区别
长轮询: 定时器+ ajax
websocket协议：服务端主动推送消息
参考博客: https://zhuanlan.zhihu.com/p/371500343
# 1 轮询：
客户端向服务端无限循环发送http请求，一旦服务端有最新消息，从当次http响应中带回，客户端就能收到变化
# 2 长轮回（web版微信采用此方式）
客户端和服务端保持一个长连接（http），等服务端有消息返回就断开，
如果没有消息，就会hold住，等待一定时间，然后再重新连接，也是个循环的过程
# 3 websocket协议
客户端发起HTTP握手，告诉服务端进行WebSocket协议通讯，并告知WebSocket协议版本。
服务端确认协议版本，升级为WebSocket协议。之后如果有数据需要推送，会主动推送给客户端
Vue组件
组件化开发的好处:重用代码(方便、提升编写效率)
组件分类:
全局组件:在任意组件中都可以使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue/vue.js"></script>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<h1>定义全局组件</h1>
<child></child> <!--直接在此编写标签就可以使用全局组件-->
</body>
<script>
Vue.component(
'child', {
'template': `
<div>
<button @click="handleDown">后退</button>
<span style="font-size: 40px">首页--{{ name }}</span>
<button @click="handleFor">前进</button>
</div>`,//在template中编写 html代码即可
data() {
return {
name: '刘亦菲,', age: 17
}
},
methods: {
handleFor() {
this.name = '霸天帅~'
},
handleDown() {
this.name = '刘亦菲'
}
}
}
)
var vm = new Vue({
el: "#app",
data: {},
methods: {}
})
</script>
</html>
全局组件写法
在Vue实例中 编写:
Vue.component(
'组件名字',{
'template':{
`使用反引号写html标签部分内容，并且可以使用vue功能`
},
data(){
return{ # 此处必须要进行return,因为js语法都是引用，如果不return的话，可能会将数据进行改变 相当于python中的可变类型！
}
},
methods:{
函数方法编写在此处，与vue中的methods一样！
}
}
)
