数据管理模块

本期通过django + vue简单实现前后端分离的数据管理模块，教程代码仅供参考，非完整代码，感兴趣的读者可以自行补全

新来的可以从首期开始看

由于文章引用数量限制，目录【不再】进行更新，得劳烦诸位自行在帖子中查询

本期会超出一篇文章图片最大上传数量，其余图片会在评论区逐步补全[玫瑰]

总结下用到的框架
前端：vue，axios，ant design，echarts
后端：django，django-cors-headers，pymongo

本文默认读者已具备基础开发能力，所以基本操作【不会】进行过多讲解，同时文章重心在django处理数据，会相对删减前端部分，以免喧宾夺主

❤️前端部分
项目结构参考【图一】

首先是样式简单搭建（可参考自己使用的ui框架实现，不是重点不做详细讲解）【图二】【图三】【图四】【图五】

这时我们所使用的都是假数据，最终项目应该通过后端接口获取数据

然后开始进入后端开发，后续我们还需要在前端调用后端的接口获取实际数据渲染

❤️后端部分（重点）
项目结构参考【图六】

django项目通过manage.py进行管理，这种管理模式在laravel中也能见到，java则是maven，前端是npm

首先我们先创建django项目crawlerbackend（如果你还不知道如何创建，建议先掌握django基础开发再回头阅读），并且再创建一个应用crawlerhandle

本文出现的项目（project）和应用（app）是django中的特殊定义，而不是广义上的概念

然后是定义路由和视图，我们在项目urls.py中定义路由【图七】，在应用views.py中定义视图【图八】，数据库链接在【图九】

这里算错了，图九在图八里，所以下面所有图片都往回看一张即可，例如查询首页实际应该在【图九】

然后是实现功能点：
查询首页数据【图十】
分页查询商品【图十一】
删改【图十二】【图十三】

数据是爬虫获取的，所以不需要做新增功能

最终还需要做跨域（两种方式，一个通过中间件，一个是使用django-cors-headers）

跨域是一种浏览器同源策略产生的限制，即不同域名或不同请求协议的域名或不同端口的域名不能互相访问

这种情况在【前后端分离】的项目中较为常见，本文作为拓展知识，简单介绍

上述两种方式我最终选择了中间件，因为那个框架的配置似乎在django2.0不生效，我没仔细搜寻官方文档，干脆使用中间件，直截了当【图十四】

中间件写好了，还需要引入注册【图十五】

❤️前端部分

现在后端开发完毕，让我们重新回到前端，这次需要获取接口的真实数据并渲染了，因为不是重点，所以只提供部分参考

获取首页数据【图十六】

分页获取数据【图十五】

更新商品【图十六】

删除商品【图十七】

这样一个爬虫项目的简单构型就出现了，当然，这个只是教学项目，离实战项目的复杂度还是差了许多，我们也没有考虑项目的部署以及其他问题

道阻且长，前路还得诸位自行在实践中学习了[玫瑰]

至此爬虫系列完结

[彩虹]pluie
[彩虹]2023-04-08

源码UI-官方 钻石

分享到：