本期通过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
暂无评论内容