一传统的开发模式
django的MVT设置模式，的请求 流程
请求-》路由-》 视图 -》 模型 -》 模板 -》返回响应
二，前后端分离
三 JSON
JSON和XML（不用）
JSON：一种轻量级的数据交换格式
支持多种Python的数据类型
四 Django JSON
from django.http import JsonResponse
def jsontest(request):
res = {"code":1000}
return JsonResponse(res)
返回某个用户的用户信息
def getuserinfo(request):
result = {
"code":"10000",
"msg":"请求成功",
"data":{
}
}
userid = request.GET.get("id") # 用户id
person = QUser.objects.filter(id = userid).first()
result["data"] = {
"username":person.username,
"password":person.password,
"nickname":person.nickname,
"gender":person.gender,
"picture":str(person.picture), # imagefiled 不能转json
}
return JsonResponse(result)
五 Ajax
功能：
发送一个异步请求
局部刷新
$.ajax({
url:"", // 请求路径
type:"", // 请求方式
data:"", // 请求数据，在post请求中使用
success:function (data) { // 请求成功之后执行的方法
// data 请求成功获取到数据
},
error:function (error) {
// 请求失败之后执行
// error 请求失败之后的信息
}
}
使用ajax获取数据，并绑定，完成用户中心的案例
<table id="content">
</table>
<script>
$.ajax({
url:"/getuserinfo/?id=1", // 请求路径
type:"get", // 请求方式
data:"", // 请求数据，在post请求中使用
success:function (data) { // 请求成功之后执行的方法
// data 请求成功获到数据
console.log(data.data)
var html = " <tr>\n" +
" <td>" + data.data.username + "</td>\n" +
" <td>" + data.data.password + "</td>\n" +
" <td>" + data.data.nick_name + "</td>\n" +
" <td>" + '<img src="/static/' + data.data.picture +' " alt=""> ' + "</td>\n" +
" </tr>"
$("#content").html(html)
},
error:function (error) {
// 请求失败之后执行
// error 请求失败之后的信息
console.log(error)
}
})
</script>
个人中心案列，模拟第三种方式
跨域
跨域：基于浏览器的同源策略，指的是浏览器访问另外一个域下的内容，默认认为不安全，浏览器只允许访问当前域的内容。同源：指的是具有相同的协议，host，port
跨域：请求的地址中只要协议，host，port中有一个不同，即为跨域请求
解决：设置响应头，允许访问的域
六 Vue
（一）Vue简单使用
<!-- 1、导入js包-->
<script src="/static/js/vue.min.js"></script>
</head>
<body>
{% verbatim %} <!-- 标签内的内容，django模板语法失效 -->
<!-- 2、创建容器 -->
<div id="content">
{
{ msg }}
</div>
{% endverbatim %}
<script>
new Vue( // 3、创建vue对象
{
el:"#content", // 绑定元素对象
data:{ // 要绑定的数据
msg:"hello world"
}
}
)
</script>
（二）基本语法
1，插值操作
2属性绑定 V-bind
3判断绑定 V-if
v-if值为true显示，false隐藏
4循环绑定 V-for
5事件绑定
6初始化方法
当页面被加载的时候，触发执行的方法
七 REST
API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
例程是某个系统对外提供的功能接口或服务的集合
REST（Representational State Transfer的简称，中文翻译为“表现层状态转移”）与技术无关，
是一种软件架构风格、设计风格，而不是标准，只是提供了一组设计原则和约束条件。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。
满足这些约束条件和原则的应用程序或设计就是 RESTful。
REST需要遵循如下10条规则：
1、协议
API与用户的通信协议，总是使用HTTPS协议。
2、域名
在域名上进行区分，例如
子域名方式：
www.ujiuye.com 所有人都知道这是访问网站
api.ujiuye.com（cts.ujiuye.com） 看到这个网站就就知道返回json、xml数据。
Url上区分：
www.ujiuye.com/
www.ujiuye.com/api/ （添加一个api 目录，让人一看到就知道是一个接口）
3、版本
因为项目存在着版本迭代更新，因此建议在url上添加版本
www.ujiuye.com/api/v1/
http://www.example.com/app/1.0/foo
v1、1.0: 就是代表第一版。
4、路径
网络上任何东西都是资源，均使用名词表示（可复数）
通俗来说，URL不应该使用动作来描述。例如，下面是一些不符合统一接口 要求的URI:
GET：/getUser/1、 POST：/createUser、PUT：/updateUser/1 、DELETE：/deleteUser/1
建议使用 /user/1
5、HTTP动词
对于资源的具体操作类型，由HTTP动词表示。
常用的HTTP动词有下面四个（括号里是对应的SQL命令）。
GET（SELECT）：从服务器取出资源（一项或多项）。
POST（CREATE）：在服务器新建一个资源。
PUT（UPDATE）：在服务器更新资源（客户端提供改变后的完整资源）。
DELETE（DELETE）：从服务器删除资源。
还有三个不常用的HTTP动词。
PATCH（UPDATE）：在服务器更新(更新)资源（客户端提供改变的属性）。
HEAD：获取资源的元数据。
OPTIONS：获取信息，关于资源的哪些属性是客户端可以访问改变的。
下面是一些例子。
GET /zoos：列出所有动物园
POST /zoos：新建一个动物园（上传文件）
GET /zoos/ID：获取某个指定动物园的信息
PUT /zoos/ID：更新某个指定动物园的信息（提供该动物园的全部信息）
PATCH /zoos/ID：更新某个指定动物园的信息（提供该动物园的部分信息）
DELETE /zoos/ID：删除某个动物园
GET /zoos/ID/animals：列出某个指定动物园的所有动物
DELETE /zoos/ID/animals/ID：删除某个指定动物园的指定动物
6、过滤信息
如果记录数量很多，服务器不可能都将它们返回给用户。API应该提供参数，过滤返回结果。
下面是一些常见的参数。
?limit=10：指定返回记录的数量
?offset=10：指定返回记录的开始位置。
?page=2&per_page=100：指定第几页，以及每页的记录数。
?sortby=name&order=asc：指定返回结果按照哪个属性排序，以及排序顺序。
?animal_type_id=1：指定筛选条件
参数的设计允许存在冗余，即允许API路径和URL参数偶尔有重复。比如：
GET /zoos/ID/animals
GET /animals?zoo_id=ID
二者含义是相同的
7、状态码
服务器向用户返回的状态码和提示信息，常见的有以下一些（方括号中是该状态码对应的HTTP动词）。
200 OK - [GET]：服务器成功返回用户请求的数据
201 CREATED - [POST/PUT/PATCH]：用户新建或修改数据成功。
202 Accepted - [*]：表示一个请求已经进入后台排队（异步任务）
204 NO CONTENT - [DELETE]：用户删除数据成功。
400 INVALID REQUEST - [POST/PUT/PATCH]：用户发出的请求有错误，服务器没有进行新建或修改数据的操作
401 Unauthorized - [*]：表示用户没有权限（令牌、用户名、密码错误）。
403 Forbidden - [*] 表示用户得到授权（与401错误相对），但是访问是被禁止的。
404 NOT FOUND - [*]：用户发出的请求针对的是不存在的记录，服务器没有进行操作，该操作是幂等的。
406 Not Acceptable - [GET]：用户请求的格式不可得（比如用户请求JSON格式，但是只有XML格式）。
410 Gone -[GET]：用户请求的资源被永久删除，且不会再得到的。
422 Unprocesable entity - [POST/PUT/PATCH] 当创建一个对象时，发生一个验证错误。
500 INTERNAL SERVER ERROR - [*]：服务器发生错误，用户将无法判断发出的请求是否成功。
8、错误处理
如果状态码是4xx，服务器就应该向用户返回出错信息。一般来说，返回的信息中将error作为键名，出错信息作为键值即可。
{error: "Invalid API key"}
9、返回结果
针对不同操作，服务器向用户返回的结果应该符合以下规范。
GET /collection：返回资源对象的列表（数组）
GET /collection/resource：返回单个资源对象
POST /collection：返回新生成的资源对象
PUT /collection/resource：返回完整的资源对象
PATCH /collection/resource：返回完整的资源对象
DELETE /collection/resource：返回一个空文档
10、超媒体
RESTful API最好做到Hypermedia（即返回结果中提供链接，连向其他API方法），使得用户不查文档，也知道下一步应该做什么。
比如，Github的API就是这种设计，访问api.github.com会得到一个所有可用API的网址列表。
{
"current_user_url": "https://api.github.com/user",
"authorizations_url": "https://api.github.com/authorizations",
// ...
}
从上面可以看到，如果想获取当前用户的信息，应该去访问api.github.com/user，然后就得到了下面结果。
{
"message": "Requires authentication",
"documentation_url": "https://developer.github.com/v3"
}
上面代码表示，服务器给出了提示信息，以及文档的网址。
11、其他
服务器返回的数据格式，应该尽量使用JSON，避免使用XML。
八、前后端分离
（一）静态页面
商品列表页面
修改list.html中的静态文件路径
（二）使用Vue绑定静态数据
导入 Vue
2增加容器
3增加标签，避免和Django模板语法冲突
Vue绑定静态数据
<script>
new Vue({
el:"#content",
data:{
goods_list:[
{"goods_name":"进口柠檬1","goods_price":"3.90","goods_picture":"images/goods/goods001.jpg"},
{"goods_name":"进口柠檬2","goods_price":"3.90","goods_picture":"images/goods/goods001.jpg"},
{"goods_name":"进口柠檬3","goods_price":"3.90","goods_picture":"images/goods/goods003.jpg"},
{"goods_name":"进口柠檬4","goods_price":"3.90","goods_picture":"images/goods/goods001.jpg"},
{"goods_name":"进口柠檬5","goods_price":"3.90","goods_picture":"images/goods/goods001.jpg"},
{"goods_name":"进口柠檬6","goods_price":"3.90","goods_picture":"images/goods/goods001.jpg"},
{"goods_name":"进口柠檬7","goods_price":"3.90","goods_picture":"images/goods/goods001.jpg"},
{"goods_name":"进口柠檬8","goods_price":"3.90","goods_picture":"images/goods/goods001.jpg"}
]
}
})
</script>
绑定
