数据管理模块

本期通过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图片[1]-数据管理模块-朝晞小屋图片[2]-数据管理模块-朝晞小屋图片[3]-数据管理模块-朝晞小屋图片[4]-数据管理模块-朝晞小屋图片[5]-数据管理模块-朝晞小屋图片[6]-数据管理模块-朝晞小屋图片[7]-数据管理模块-朝晞小屋图片[8]-数据管理模块-朝晞小屋图片[9]-数据管理模块-朝晞小屋

文章版权声明 1、本网站名称:朝晞小屋
2、本站永久网址:https://www.zxiyun.com/
3、更多有趣网站:http://dh.zxiyun.com/
4、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ2604140139进行删除处理。
5、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
6、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
7、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容