在工作当中,逐渐多的出现不使用页面展示数据,直接使用数据接口,这样的好处:
1、首先可以实现动静分离。将数据库和查询和页面渲染彻底分开。
2、网站可以支持脚本批量开发。
最原始的接口搭建是使用类视图搭建接口,后来发现接口规范很难约束。就有前辈写了接口框架,使用框架进行规范的接口开发。这个叫restful。django拥有restful的插件djangorestframework。
# 下载相应模块
Pip install djangorestframework
Pip install django-filter
Pip install Markdown
1,配置settings
2,使用接口需要有数据库模型
3,编写接口逻辑(路由 urls中)
from Store.models import Goods
from Store.models import GoodsType
from rest_framework import routers, serializers, viewsets
class UserSerializer(serializers.HyperlinkedModelSerializer):
"""
声明数据
"""
class Meta: #元类
model = Goods #要进行接口序列化的模型
fields = ['goods_name', 'goods_price', 'goods_number', 'goods_description'] #序列要返回的字段
# ViewSets define the view behavior.
class UserViewSet(viewsets.ModelViewSet):
queryset = Goods.objects.all() #具体返回的数据
serializer_class = UserSerializer #指定过滤的类
class GoodsTypeSerializer(serializers.HyperlinkedModelSerializer):
"""
声明查询的表和返回的字段
"""
class Meta:
model = GoodsType
fields = ["name","description"]
class TypeViewSet(viewsets.ModelViewSet):
"""
返回具体查询的内容
"""
queryset = GoodsType.objects.all()
serializer_class = GoodsTypeSerializer
router = routers.DefaultRouter() #声明一个默认的路由注册器
router.register(r"goods",UserViewSet) #注册写好的接口视图
router.register(r"goodsType",TypeViewSet) #注册写好的接口视图
urlpatterns = [
re_path('^API', include(router.urls)), #restful 的根路由
]
按照功能对项目进行划分
为保持项目的独立性,可移植性,按照功能对项目进行划分
1,创建serializers文件,用来存放接口的过滤器
2,在视图当中查询接口要返回的数据,并制定过滤器
3,在路由当中注册接口
4,在web端使用接口,通常要用到ajax和vue
数据通过接口返回,然后前端使用ajax进行请求,使用vue进行渲染
①数据绑定首先要解决django和vue的代码冲突问题
②解决绑定的范围问题
③Vue绑定的代码
{% extends 'shopapp/base.html' %}
{% block title %}
商品列表
{% endblock %}
{% block content %}
{% verbatim myblock %}
<div id="goods">
<table class="table table-bordered" >
<thead>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>出厂日期</th>
<th>保质期</th>
<th>操作</th>
</tr>
</thead>
<tbody >
<tr v-for='goods in goods_list'>
<td ><a href="/shop/gs/{{ goods.id }}/">{{ goods.goods_name }}</a></td>
<td>
<input type="text" v-bind:value='goods.goods_price'>
</td>
<td>{{ goods.goods_number }}</td>
<td>{{ goods.goods_date }}</td>
<td>{{ goods.goods_safeDate }}</td>
<td>
<a class="btn btn-danger" href="/shop/sg/down/?id={{ goods.id }}">下架</a>
</td>
</tr>
</tbody>
</table>
<div class="dataTables_paginate paging_simple_numbers">
<ul class="pagination">
<li class="paginate_button page-item" v-for="p in page_range">
<a class="page-link" href="#" v-on:click="get_page_data(p)">{{ p }}</a>
</li>
</ul>
</div>
</div>
{% endverbatim myblock %}
{% endblock %}
{% block script %}
<script src="/static/shopapp/js/vue.min.js"></script>
<script src="/static/shopapp/js/vue-resource.js"></script>
<script>
Vue.use(VueResource); // 使用vueresoure对象
var vue = new Vue(
{
el:'#goods', // 指定绑定的范围对象
data:{
goods_list:[],
page_range:[]
},// 具体绑定的数据对象
created:function () {
this.$http.get('/APIgoods/').then( //发起ajax get请求
function (data) {
this.goods_list = data.data.results; // 将接收的数据绑定到Vue对象
page_number = Math.ceil(data.data.count/5);
var page_range = Array.from({length:page_number},(item,index)=>index+1);
{#var page_range = [...new Array(page_number).keys()];#}
this.page_range = page_range;// 将接收的数据绑定到Vue对象
console.log(data.data);
},
function (error) {
console.log(error)
}
)
}, // 初始化方法
methods:{
get_page_data:function (page) {
this.$http.get('/APIgoods/?page='+page).then(
function (data) {
this.goods_list = data.data.results;
page_number = Math.ceil(data.data.count/5);
var page_range = Array.from({length:page_number},(item,index)=>index+1);{#分页,页面从1开始#}
{#var page_range = [...new Array(page_number).keys()]; // 魔术方法 分页,页面从0开始#}
this.page_range = page_range;
},
function (error) {
console.log(error)
}
)
} // 可以被v-on绑定的方法
}
}
)
</script>
{% endblock %}