软件工程 基于Vue+Django技术的电商网站的设计与实现.docx
《软件工程 基于Vue+Django技术的电商网站的设计与实现.docx》由会员分享,可在线阅读,更多相关《软件工程 基于Vue+Django技术的电商网站的设计与实现.docx(56页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、本科毕业设计(论文)基于Vue+Django技术的电商网站的设计与实现Design and implementation of electronic business website based on Vue+Django technologies院 (系)计算机科学与技术系专 业软件工程班 级软件工程十一班学 号16210121111学生姓名陈艳森指导教师李志中提交日期2020年 4 月 24 日摘要该电商网站使用python框架django-rest-framework和前端框架vuejs开发,采用现在市面上大多数系统流行的浏览器/服务器模式结构。该项目需要使用vuejs框架开发前端界面,
2、而所有的数据逻辑均在python框架搭建的服务器后台运行。天天生鲜市场项目高度模块化,前端与后台明确分离,对后期维护和二次开发十分友好。在该项目,不管是前端用户界面的设计还是后端数据库操作、接口的设计,对于开发者都是十分具有优势的,开发使用到的技术虽说都是近几年出现的,学习资源还是比较丰富的。在开发的过程中,我意识到了大学所学基础知识的重要性。该网站的前端用户界面主要功能有:登录注册、商品列表、购物车等面向消费者的功能。而后端功能则主要面向系统管理人员,则所具有的功能为:商品管理、交易管理、用户操作管理等等。从一开始的研究项目背景和意义到最后的项目总结都是为了提升自身,项目开发经验是一部分,更
3、重要的是通过该电商网站各种功能的实现,让自己有更充足的开发意识和能力。作为一个电商项目,通过不断查找网上电商网站,然后找到具体需求,进行各种模块分析,最终通过框架,用代码来实现它。关键词:电商市场 数据库 VueAbstractThe e-commerce site is developed using the python framework djanjan-rest-framework and the front-end framework vuejs, using the popular browser/server model structure of most systems in
4、the market.This project needs to use the vuejs framework to develop the front-end interface, and all the data logic runs in the background of the server built by the python framework.Tiantian fresh market project is highly modular, the front end is clearly separated from the back end, and it is very
5、 friendly to the later maintenance and secondary development.In this project, whether it is the design of the front-end user interface or the design of the back-end database operation and interface, it is very advantageous for developers. Although the technologies used in the development are all in
6、recent years, the learning resources are relatively rich.In the process of development, I realized the importance of basic knowledge learned in university.The main functions of the front-end user interface of the website are: login and registration, list of goods, shopping cart and other consumer-or
7、iented functions.The back-end functions are mainly for system administrators, and the functions are commodity management, transaction management, user operation management and so on.From the beginning of the research project background and significance to the final project summary are to improve the
8、mselves, project development experience is part of the more important is through the realization of the various functions of the e-commerce site, so that I have more adequate awareness and ability to develop.As an e-commerce project, through constantly looking for online e-commerce sites, and then f
9、ind specific requirements, various module analysis, and finally through the framework, with code to achieve it.Keywords: e-commerce market database Vue广东东软学院本科毕业设计(论文)目录第1章绪论11.1 选题背景11.2 研究意义11.3 课题研究现状11.4论文结构安排2第二章 网站开发工具和技术简介32.1 Django RESTframework简介32.2 vuejs32.3 前后端分离42.4Visual studio code和J
10、etBrains PyCharm 简介52.5 MySQL数据库简介62.6 Navicat Premium数据库管理工具简介7第三章 项目需求分析83.1 可行性分析83.1.1 经济可行性83.1.2 技术可行性83.1.3 运行可行性83.2 功能需求分析83.3 项目运行环境12第四章 系统设计134.1 系统架构设计目标134.2 系统架构设计134.3 数据库设计144.3.1 e-r图144.3.2 数据表214.4 系统流程设计22第五章 项目详细设计245.1 项目主要功能245.2 系统各个功能模块实现245.2.1 数据库连接设计实现245.2.2 登录设计实现255.2
11、.3 前台功能模块设计实现255.2.4 后台功能模块设计实现32第六章 系统测试346.1 功能测试346.2 安全测试346.3 用例测试346.4 性能测试376.5 测试结果分析37第七章 系统特色与创新387.1数据请求优化387.2创新功能38第八章 结论39参考文献41致谢43第1章绪论1.1 选题背景天天生鲜市场网站可以为用户提供各种饮食上的需求,据具体数据分析,淘宝、京东、云集等平台在电商市场具有非常大的地位,那么,很多用户就会反应一件烦心事,那就是自己买点什么东西,店铺太多,以至于自己在挑选产品时浪费大量的时间,并且购买到货的商品还可能不是自己满意度,这也就是说,现在的电商
12、市场更需要自身提供的产品就是高质量的,不需要在挑店铺中浪费时间,而是当用户想要买指定产品,用户直接找到就可以买的。而日常的饮食就是一种产品类型。天天生鲜市场网站就是为用户网购食品的一个不错的平台。1.2 研究意义随着互联网技术的发展以及人们对网购日益增加的需求,各种电商网站不断涌入市场,同时随着人们在电商网站购买食品的日益需求,越来越多的人们更注重食品透明度以及相关安全问题。日益剧增的电商网站确实增加了用户对食品购买的选择,但网站上产品太多并且商品需求供应太多,所以,这个时候,针对性地开发食品相关的购物网站已成必然。因此,根据国内大多数平台不能够满足人们对食品需求以及食品安全的知情权,面对这一
13、现状,开发一个针对食品购物、增加食品透明度的食品购物网站具有实际的研究意义。1.3 课题研究现状日前,使用计算机开发的电商网站随着人们对产品需求的日益上升而不短增加,但产品只定位在食品网站确又不多,所以,针对用户的具体需求,开发一个比较针对性的食品购物网站具有重大意义。但对于那些要求商品种类更多的用户可能就不适用了。首先,食品购物网站是以食品为主的电商购物网站,开发者可以实现以食品为主的分类,尽可能地满足用户在食品这方面的购物需求。其次,因为供应供应量和用户需求以及季节、节日等时间因素,食品价格也会不断发生变化。另外,由于食品购物网站针对的用户比较广,后台管理人员以及普通用户使用操作网站,都可
14、能存在一定的复杂性,所以尽可能多方面考虑这些复杂性也是网站设计过程中需要考虑的一方面。所以,基于以上多中情况的考虑,研发一款针对性的,提高用户购物体验的食品购物网站具有深刻意义。因为二十一世纪以来,互联网技术的迅速发展,尤其是电商网站,而日前,大型的电商网站,比如淘宝、京东、云集等平台,在商品这方面,都具有全面性、面向用户、系统化等特点。具体来说,就是尽可能满足用户需求,尽可能提前知道用户想要的,然后给予推荐,让用户尽快满足购物需求。然而,事实上,这可能并不能达到用户真正的需求,有时候用户会冲动消费心理,购买不必要的商品,当用户不能买到真正需要的商品的时候,商品在没有实现最终价值的情况下就被扔
15、掉了,从而造成资源浪费。所以在这里,开发一款具有针对食品方面的食品购物网站,让用户能够理性消费非常重要。1.4论文结构安排论文结构安排,也就是从第二章开始,主要描述关于整个项目的技术支持和一些技术相关的具体概念,技术了解清楚之后,第三章开始,主要描述项目的需求分析,包括项目的可行性分析、功能需求分析、用例分析和业务流程分析;第四章就与技术挂钩,包括项目功能模块设计、数据库设计、E-R图设计、数据表,这些准备也是为了后面项目通过代码实现做足了充分的准备;第五章是项目详细设计,包括用户管理和后台管理两部分,用户管理包括登录、注册、查看商品信息 、用户收藏、购物车管理、订单管理、支付管理,后台管理就
16、包括商品管理等等;第六章是编码与测试实现,既是电商网站实现的最重要的一步也是最基础的一步;第七章是关于项目特色和创新,任何一个技术学习者从一开始都是模仿阶段,但为了能够充分掌握相关技术的知识点就必须得利用所学的知识进行创新;第八章结论也就是最后一部分。第二章 网站开发工具和技术简介2.1 Django RESTframework简介Django Rest Framework 是基于python语法使用的后端框架,是一个强大且灵活的工具包,用以构建Web API。Django REST Framework可以在Django的基础上迅速实现API,并且自身还带有WEB的测试页面,可以方便的测试自己
17、的API,主要运用于前后端分离的WEB应用中。该框架还可以用于数据库表的生成,并且各种用户核心功能的实现都离不开。2.2 vuejs从网站刚开始出现到现在,我们的网页越来越强大并且更加动态化,我们从学习过程中就发现或者了解过不少框架和插件,使用过的人一定会发现,框架和插件使用起来非常方便快速,并且重用性高、兼容性好并且稳定性强,维护成本也越来越低。前端插件或者框架的出现,也是因为Javascript的强大,在很久之前的大型网站项目的开发过程中,总是不断出现问题,html网页结构频繁出现累赘,css样式也比较庞大,资源浪费已成常态,性能低下而且体验又很差,由于工作量非常大,所以维护成本比较高,再
18、加上没有正规的组织出现,所以IT界的大佬们为了解决传统开发项目导致的问题,被人们熟知的前端三大框架也 就出现了,其中就包括Vue.js。当下前端主流框架有Vue、React和Angular,而Vue.js作为一大框架,它却有它独有的特色,Vue.js是一套用于构建用户界面的渐进式框架,跟其他两个框架对比,Vue.js比较轻量级,它的开发者将React和Angular的核心编程功能给提取出来,比如组件化开发、双向数据绑定等等,不过Vue的核心库只关注视图层,所以相对而言比较容易学习,与其他已经开发出来的项目或者其他库进行整合也比较方便,另外Vue在其生态系统支持的库开发复杂页面应用和采用单文件组
19、件上完全有能力进行驱动。详细描述一下Vue.js与其他两大框架的对比,首先他们都是组件化开发思想;模板的使用和数据渲染都非常灵活,层次结构鲜明;语法很简单并且能够简单快速搭建一个项目;轻量级并且渲染速度更快;Vue采用的脚手架工具是vue-cli;Vue最初的开发维护者是尤雨溪,而现在更是成立了团队组织一起提供技术进行迭代更新并且维护;Vue中指令和组件分得很清晰,指令只封装DOM操作,而组件却代表一个了独立的单元,它能够拥有自己的视图样式和数据逻辑。而Vue的实现原理是MVVM,即Model-View-ViewModel,模型-视图-视图模型。模型指的是后端传递的数据,视图指的是用户所看到的
20、页面,视图模式则是连接view和model的核心,它一共有两个方向,一个就是后端数据转换成用户看到的页面,另一个就是页面转换成后端的数据,而这样实现的效果,叫做数据的双向绑定,实现这样的方法叫做DOM事件监听。在该原理下,视图和模型直接相互通信是实现不了的,他们都必须通过ViewModel来进行通信,在通信的时候还需要一个观察者observer,当视图或者模型的数据发生变化的时候,observer都能够非常准确地监听到他们的变化,然后通知对应的模型或者视图做一个自动更新,这样就实现了双向数据绑定原理。双向数据绑定原理如图2.1。图 2.1双向数据绑定原理2.3 前后端分离整个项目在开发过程中,
21、首先得把前端的页面给作出来,网站有什么元素,如果有表单的话,考虑表单有什么内容,还有考虑应该设计什么组件,界面怎么设计交互才会更加友好,如果这些提前设计好并使用vuejs把它的网页设计出来后,后端的开发就会比较方便,因为后端的接口开发都是依照前端各种组件或者表单元素开发的;接下来是利用django-restful-framework开发后端接口,该框架主要考虑的文件有models.py,主要用于定义项目各种类的属性,最终生成数据库表格;serializers.py用于类的序列化;views.py主要处理各种视图;settings.py主要用于配置各种公共类,数据库等等;urls.py主要用于处
22、理网站各种路由。前后端分离如图2.2和图2.3。图 2.2Vue开发前端图 2.3DJANGO REST framework开发后端2.4Visual studio code和JetBrains PyCharm 简介Visual studio code和JetBrains PyCharm都属于本次项目开发的集成开发环境。Visual studio code是针对编写web项目的跨平台源代码编辑器,而在本次项目中,主要用于前端vue代码的实现,具备了很多特点,比如语法高亮显示,可定值快捷键,实现代码片段收集等等,方便用来管理项目前端代码。如图2.4是Visual Studio Code的logo
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 软件工程 基于Vue+Django技术的电商网站的设计与实现 基于 Vue Django 技术 网站 设计 实现
限制150内