django+mysql+vue 从零开始到上线一个Demo下载网站（附源码）--（三） 与django后端集成

第一章 开发环境准备

第二章 vue纯前端开发​​​​​​​​​​​​​​​​​​​​​

第三章 vue前端与django后端集成

第四章 上线发布  ​​​​​​​

本章介绍

完成vue前端与django后端结合，vue通过axios的get,post请求，django接受请求整理数据返回给前端展示

涉及技术点

axios之get,post请求，django允许跨域、数据分批加载、vue数据绑定

正文

安装axios

npm install axios

参考链接：Vue3 Ajax(axios) | 菜鸟教程

创建一个http工具类，注意 post方式 url 后面要加 ‘/‘，否则报错

配置 django 允许跨域 

pip install django-cors-headers

setting配置文件加入两行代码

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

Install_apps 增加
corsheaders

middleware增加
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',

分批加载数据，因为不能一次性把数据全部加载，因为这样在数据多的时候会影响效率

修改视图文件

obj = models.Demos.objects.filter(title__icontains=title, type__icontains= type, id__gt=lastId)[:5];

filter的过滤语法参考：【django查询】模糊查询_myt2000的博客-CSDN博客_django 模糊查询 

[:5]             #效果等同于  mysql的 limit 5

body = request.body.decode('utf-8’)  

客户端传参是json格式要用 request.body接收

decode('utf-8’)   加上他就不会出现中文乱码

return HttpResponse(json.dumps(result,ensure_ascii=False));

json.dumps  将对象转成字符串

ensure_ascii=False   如果要显示汉字需要加该参数

引入请求工具类，定义data数据

该方法记录查询出来的最后一条记录的id, 并判断是否最后一页 

afterLoad(data) {
    if (data.length > 0) {
        this.lastId = data[data.length-1].id;
    }
    this.isEnd = data.length < this.pageSize;
    console.log("lastid", this.lastId)
},

对图片路径进行处理

setImagePath(data) {
    data.forEach((i,index) => {

        if (i.cover != null) {
            i.cover = require("@/assets/images/demo/" + i.cover);//这里演示用的是本地路径
            //i.cover = "http://xxx.com/images/" + i.cover;//发布时改为远程路径
        }
    })
}

点击更多代码

more() {


    let params = {"title":this.searchText, "type": this.demoType, "lastId":this.lastId}
    utils.httpPost("http://127.0.0.1:8000/find_demo", params).then((res) => {
        this.setImagePath(res.data.result);
            res.data.result.forEach((i,index) => {
            this.demos.push(i);
        })
        this.afterLoad(res.data.result);
    })
},

vue的页面处理

视图 通过 v-if 看看数据是否全部加载完

最终分批加载效果如下：

 

本章小结

1、axios 之 get, post请求

2、vue 如何创建自己的工具类，如何引入

3、django如何接收客户端的 get post请求，如何允许跨域访问， 如何接收和返回中文信息

4、django如何通过filter方法查询数据，如何分批取数据

5、vue页面如何分配加载数据

Demo下载地址：

vue纯前端代码：点击下载

前后端完整代码： 点击下载 

上一章 vue纯前端开发​​​​​​​​​​​​​​​​​​​​​​​​​​​​

下一章 上线发布  ​​​​​​​