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