前后端分离-Ajax和Vue
一、Ajax
1.基础理论
Ajax(Asynchronous JavaScript and XML):异步的 JavaScript 和 XML。
用JavaScript语言与服务器进行异步交互，传输的数据为XML(不只是XML，现在XML用的较少)，还有json数据。
特点：当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。
ajax.png
2.简单应用
前端代码：
<script>
$(function() {
$.ajax({
url: '/ajaxTestDemo/', //请求到后台的路由
type: 'get', //请求方式
//访问成功时执行的函数
//后台传过来的数据传给了参数result
success: function(result){
alert('success');
console.log(result);
console.log(result.status); //数据
},
//访问失败时执行的函数
error: function (result) {
alert('error');
}
})
})
</script>
后台代码
from flask import jsonify
@userbp.route('/ajaxTestDemo/')
def ajaxtest():
# 返回json数据
dic = {'status': 'ok'}
print('xxxxxxx')
return jsonify(dic)
二、Vue
1.基础理论
使用ajax将后台传入的数据展示在页面时，需要使用传统的js方法：text、innerHtml、append等，比较麻烦，所以使用Vue框架。
Vue是一套用于构建用户界面的JavaScript框架，前端使用Vue的目的就是将ajax里面的数据绑定到前端。
2.简单应用：
（1）下载引入
参考vue官网教程
-
vue.min.js/vue.js
vue下载.png
-
vue-resource
vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。（有了vue-resource插件才能像ajax一样与后台进行交互）。
vue-resource下载网址
可以直接使用<script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/0.1.0/vue-resource.js"></script>标签，也可以复制链接另存为，下载.js文件。
vue-resource官网截图.png
vue-resource下载完成.png
2.简单应用
（1）Django的模板中使用vue时，语法冲突，需要增加标签verbatim处理。
{% verbatim %}
<div id='app'>
{{ message }}
</div>
{% endverbatim %}
（2）vue基本语法
vue使用时由两个部分组成：一个是页面上的html代码，另一部分是脚本。脚本内的变量只能在选择器范围内（选定的html代码区域）使用。
- 变量：双大括号语法（mustache） {{ demomessage }}
- v-bind：mustache不能作用在HTML attribute（属性）上，此时需要使用v-bind
例如：img的src属性，a标签的href属性 - v-if：判断，当
v-if="true"时，内容被渲染 - v-for：循环
- v-on：监听DOM事件，并在出发时运行一些js代码。例如click事件。
应用举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue使用</title>
<script src="/static/buyer/js/jquery.min.js"></script>
<script src="/static/buyer/js/vue.min.js"></script>
</head>
<body>
<h1>vue使用</h1>
<!--告诉django 不要解析 里面的内容-->
{% verbatim %}
<div id="app">
<!--变量显示-->
{{ msg }}
<!--绑定属性-->
<a v-bind:href="url">百度</a>
<a href="http://www.baidu.com">百度</a> <br/>
<!-- 判断-->
<p v-if="flag">
哈哈
</p>
<!--for循环-->
<ul>
<li v-for="game in gameList">{{ game }}</li>
</ul>
<button v-on:click="test">按钮</button>
</div>
{% endverbatim %}
</body>
<script>
$(function () {
new Vue({
el: "#app", // element 绑定页面的范围
data: { // 接受数据
msg: 'hello vue',
url: 'http://www.baidu.com',
flag: true,
gameList: ['LOL', 'CF', 'COC', 'DNF']
},
methods: {
// 绑定事件
test: function () {
alert('我是弹框...');
}
},
// 创建方法。
created: function () {
alert('创建完成了...');
}
})
})
</script>
</html>
（3）vue向后台请求数据简单应用
- vue脚本代码
<script src="/static/buyer/js/jquery.min.js"></script>
<script src="/static/buyer/js/vue.min.js"></script>
<script src="/static/buyer/js/vue-resource.js"></script>
<script>
$(function () {
new Vue({
el: "#app",
data: {
goodsList: []
},
created: function () {
// 发送ajax 请求
var goodstype_id = $("#goodstype_id").val();
var url = '/buyer/more_goods_list_ajax/?goodstype_id=' + goodstype_id;
this.$http.get(url).then(
function (result) {// 成功执行
alert('ok...');
//console.log(result);
//console.log(result.data);
this.goodsList = result.data;
},
function (result) {// 失败执行
alert('error');
}
)
}
})
})
</script>
- 后台发送数据(django框架中的应用举例)
from django.http import JsonResponse
# 接受ajax 请求
def more_goods_list_ajax(request):
# 1.查询所有的商品
goodstype_id = request.GET.get('goodstype_id')
# print(goodstype_id)
# 2.查询数据库数据
goods_obj_list = models.Goods.objects.filter(goodstype_id=goodstype_id)
# print(goods_obj_list)
# 3.重新组织数据结构 [{'name':'','path','','price':''},{},{}]
goods_dic_list = []
for goods_obj in goods_obj_list:
dic = {}
dic['name'] = goods_obj.name
dic['image'] = goods_obj.image.name
dic['price'] = goods_obj.price
goods_dic_list.append(dic)
# 3.返回数据
return JsonResponse(goods_dic_list, safe=False) # 可以放列表，默认只能放字典
如有不妥，欢迎指正。
