基于Vue+Django技术的电商网站的设计与实现.docx

《基于Vue+Django技术的电商网站的设计与实现.docx》由会员分享，可在线阅读，更多相关《基于Vue+Django技术的电商网站的设计与实现.docx（47页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、摘要该电商网站使用python框架django-rest-framework和前端框架vuejs开发，采用现在市面上大多数系统流行的浏览器/服务器模式结构。该项目需要使用vuejs框架开发前端界面，而所有的数据逻辑均在python框架搭建的服务器后台运行。天天生鲜市场项目高度模块化，前端与后台明确分离，对后期维护和二次开发十分友好。在该项目，不管是前端用户界面的设计还是后端数据库操作、接口的设计，对于开发者都是十分具有优势的，开发使用到的技术虽说都是近几年出现的，学习资源还是比较丰富的。在开发的过程中，我意识到了大学所学基础知识的重要性。该网站的前端用户界面主要功能有：登录注册、商品列表、购物

2、车等面向消费者的功能。而后端功能则主要面向系统管理人员，则所具有的功能为：商品管理、交易管理、用户操作管理等等。从一开始的研究项目背景和意义到最后的项目总结都是为了提升自身，项目开发经验是一部分，更重要的是通过该电商网站各种功能的实现，让自己有更充足的开发意识和能力。作为一个电商项目，通过不断查找网上电商网站，然后找到具体需求，进行各种模块分析，最终通过框架，用代码来实现它。关键词：电商市场 数据库 VueAbstractThe e-commerce site is developed using the python framework djanjan-rest-framework and

3、the front-end framework vuejs, using the popular browser/server model structure of most systems in 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 mar

4、ket project is highly modular, the front end is clearly separated from the back end, and it is very 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

5、 is very advantageous for developers. Although the technologies used in the development are all in 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 inter

6、face of the website are: login and registration, list of goods, shopping cart and other consumer-oriented 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

7、of the research project background and significance to the final project summary are to improve themselves, 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 d

8、evelop.As an e-commerce project, through constantly looking for online e-commerce sites, and then find 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 课题研究

9、现状11.4论文结构安排2第二章 网站开发工具和技术简介32.1 Django RESTframework简介32.2 vuejs32.3 前后端分离42.4Visual studio code和JetBrains 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图

10、144.3.2 数据表214.4 系统流程设计22第五章 项目详细设计245.1 项目主要功能245.2 系统各个功能模块实现245.2.1 数据库连接设计实现245.2.2 登录设计实现255.2.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 选题背景天天生鲜市场网站可以为用户提供各种饮食上的需求，据具体数据分析，淘宝、京东、云集等平

11、台在电商市场具有非常大的地位，那么，很多用户就会反应一件烦心事，那就是自己买点什么东西，店铺太多，以至于自己在挑选产品时浪费大量的时间，并且购买到货的商品还可能不是自己满意度，这也就是说，现在的电商市场更需要自身提供的产品就是高质量的，不需要在挑店铺中浪费时间，而是当用户想要买指定产品，用户直接找到就可以买的。而日常的饮食就是一种产品类型。天天生鲜市场网站就是为用户网购食品的一个不错的平台。1.2 研究意义随着互联网技术的发展以及人们对网购日益增加的需求，各种电商网站不断涌入市场，同时随着人们在电商网站购买食品的日益需求，越来越多的人们更注重食品透明度以及相关安全问题。日益剧增的电商网站确实增

12、加了用户对食品购买的选择，但网站上产品太多并且商品需求供应太多，所以，这个时候，针对性地开发食品相关的购物网站已成必然。因此，根据国内大多数平台不能够满足人们对食品需求以及食品安全的知情权，面对这一现状，开发一个针对食品购物、增加食品透明度的食品购物网站具有实际的研究意义。1.3 课题研究现状日前，使用计算机开发的电商网站随着人们对产品需求的日益上升而不短增加，但产品只定位在食品网站确又不多，所以，针对用户的具体需求，开发一个比较针对性的食品购物网站具有重大意义。但对于那些要求商品种类更多的用户可能就不适用了。首先，食品购物网站是以食品为主的电商购物网站，开发者可以实现以食品为主的分类，尽可能

13、地满足用户在食品这方面的购物需求。其次，因为供应供应量和用户需求以及季节、节日等时间因素，食品价格也会不断发生变化。另外，由于食品购物网站针对的用户比较广，后台管理人员以及普通用户使用操作网站，都可能存在一定的复杂性，所以尽可能多方面考虑这些复杂性也是网站设计过程中需要考虑的一方面。所以，基于以上多中情况的考虑，研发一款针对性的，提高用户购物体验的食品购物网站具有深刻意义。因为二十一世纪以来，互联网技术的迅速发展，尤其是电商网站，而日前，大型的电商网站，比如淘宝、京东、云集等平台，在商品这方面，都具有全面性、面向用户、系统化等特点。具体来说，就是尽可能满足用户需求，尽可能提前知道用户想要的，然

14、后给予推荐，让用户尽快满足购物需求。然而，事实上，这可能并不能达到用户真正的需求，有时候用户会冲动消费心理，购买不必要的商品，当用户不能买到真正需要的商品的时候，商品在没有实现最终价值的情况下就被扔掉了，从而造成资源浪费。所以在这里，开发一款具有针对食品方面的食品购物网站，让用户能够理性消费非常重要。1.4论文结构安排论文结构安排，也就是从第二章开始，主要描述关于整个项目的技术支持和一些技术相关的具体概念，技术了解清楚之后，第三章开始，主要描述项目的需求分析，包括项目的可行性分析、功能需求分析、用例分析和业务流程分析；第四章就与技术挂钩，包括项目功能模块设计、数据库设计、E-R图设计、数据表，

15、这些准备也是为了后面项目通过代码实现做足了充分的准备；第五章是项目详细设计，包括用户管理和后台管理两部分，用户管理包括登录、注册、查看商品信息 、用户收藏、购物车管理、订单管理、支付管理，后台管理就包括商品管理等等；第六章是编码与测试实现，既是电商网站实现的最重要的一步也是最基础的一步；第七章是关于项目特色和创新，任何一个技术学习者从一开始都是模仿阶段，但为了能够充分掌握相关技术的知识点就必须得利用所学的知识进行创新；第八章结论也就是最后一部分。第二章 网站开发工具和技术简介2.1 Django RESTframework简介Django Rest Framework 是基于python语法使

16、用的后端框架，是一个强大且灵活的工具包，用以构建Web API。Django REST Framework可以在Django的基础上迅速实现API，并且自身还带有WEB的测试页面，可以方便的测试自己的API，主要运用于前后端分离的WEB应用中。该框架还可以用于数据库表的生成，并且各种用户核心功能的实现都离不开。2.2 vuejs从网站刚开始出现到现在，我们的网页越来越强大并且更加动态化，我们从学习过程中就发现或者了解过不少框架和插件，使用过的人一定会发现，框架和插件使用起来非常方便快速，并且重用性高、兼容性好并且稳定性强，维护成本也越来越低。前端插件或者框架的出现，也是因为Javascript

17、的强大，在很久之前的大型网站项目的开发过程中，总是不断出现问题，html网页结构频繁出现累赘，css样式也比较庞大，资源浪费已成常态，性能低下而且体验又很差，由于工作量非常大，所以维护成本比较高，再加上没有正规的组织出现，所以IT界的大佬们为了解决传统开发项目导致的问题，被人们熟知的前端三大框架也 就出现了，其中就包括Vue.js。当下前端主流框架有Vue、React和Angular,而Vue.js作为一大框架，它却有它独有的特色，Vue.js是一套用于构建用户界面的渐进式框架，跟其他两个框架对比，Vue.js比较轻量级，它的开发者将React和Angular的核心编程功能给提取出来，比如组件

18、化开发、双向数据绑定等等，不过Vue的核心库只关注视图层，所以相对而言比较容易学习，与其他已经开发出来的项目或者其他库进行整合也比较方便，另外Vue在其生态系统支持的库开发复杂页面应用和采用单文件组件上完全有能力进行驱动。详细描述一下Vue.js与其他两大框架的对比，首先他们都是组件化开发思想；模板的使用和数据渲染都非常灵活，层次结构鲜明；语法很简单并且能够简单快速搭建一个项目；轻量级并且渲染速度更快；Vue采用的脚手架工具是vue-cli；Vue最初的开发维护者是尤雨溪，而现在更是成立了团队组织一起提供技术进行迭代更新并且维护；Vue中指令和组件分得很清晰，指令只封装DOM操作，而组件却代表

19、一个了独立的单元，它能够拥有自己的视图样式和数据逻辑。而Vue的实现原理是MVVM,即Model-View-ViewModel，模型-视图-视图模型。模型指的是后端传递的数据，视图指的是用户所看到的页面，视图模式则是连接view和model的核心，它一共有两个方向，一个就是后端数据转换成用户看到的页面，另一个就是页面转换成后端的数据，而这样实现的效果，叫做数据的双向绑定，实现这样的方法叫做DOM事件监听。在该原理下，视图和模型直接相互通信是实现不了的，他们都必须通过ViewModel来进行通信，在通信的时候还需要一个观察者observer，当视图或者模型的数据发生变化的时候，observer都

20、能够非常准确地监听到他们的变化，然后通知对应的模型或者视图做一个自动更新，这样就实现了双向数据绑定原理。双向数据绑定原理如图2.1。图 2.1双向数据绑定原理2.3 前后端分离整个项目在开发过程中，首先得把前端的页面给作出来，网站有什么元素，如果有表单的话，考虑表单有什么内容，还有考虑应该设计什么组件，界面怎么设计交互才会更加友好，如果这些提前设计好并使用vuejs把它的网页设计出来后，后端的开发就会比较方便，因为后端的接口开发都是依照前端各种组件或者表单元素开发的；接下来是利用django-restful-framework开发后端接口，该框架主要考虑的文件有models.py，主要用于定义

21、项目各种类的属性，最终生成数据库表格；serializers.py用于类的序列化；views.py主要处理各种视图；settings.py主要用于配置各种公共类，数据库等等；urls.py主要用于处理网站各种路由。前后端分离如图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项目的跨平台源代码编辑器，而

22、在本次项目中，主要用于前端vue代码的实现，具备了很多特点，比如语法高亮显示，可定值快捷键，实现代码片段收集等等，方便用来管理项目前端代码。如图2.4是Visual Studio Code的logo:图 2.4Visual Studio Code而JetBrains PyCharm则是针对Python的IDE，它可以帮助用户使用python开发项目时提高效率，包括语法高亮显示、项目管理、版本控制、单元测试等等，由于该集成开发环境为了支持框架Django的一些专业Web项目开发，所以还提供了一些高级功能。如图2.5是JetBrains PyCharms的logo:图 2.5JetBrains P

23、yCharms总而言之，这两个集成开发环境对于本次项目的开发非常重要。2.5 MySQL数据库简介数据库一般包括关系型数据库和非关系型数据库，而MySQL则属于传统的关系型数据库产品，因为MySQL数据库比较开放，而且不用付费，是广大用户的首选，并且随着数据库技术的越发成熟，数据库支持的功能也全面，性能也在一直提高，对平台的兼容支持也在不断增加，另外，数据库的维护工作也特别重要，MySQL数据库社区的开发人和维护人数量也不少。该数据库的功能非常强大、性能上也非常好，只要保证它遵守指定协议，用户就可以进行各种操作，其中最为常见的就包括增删改查，可见它十分深受用户欢迎。MySQL作为一门关系型数据

24、库，它可以将存有不同数据的表放到不同定义好的数据库，所以可以将数据进行分类，而不是放到一块，在读取方面可以增加MySQL的速度，并且，这也使用户管理起来更加方便，提高用户管理的灵活性。大多数数据库都有一套通用的数据库操作语言，并且官方定义它为SQL，中国的程序员称之为结构化查询语言。这套查询语言大大方便了用户进行增删改查的操作。任何一个完整的PC端网站项目开发都离不开数据库。数据库可以用来处理大量网站数据，这也就让用户浏览网页时实现满足用户体验得到了保障，倘若连基本的数据都没有的话，更不用提什么用户体验，当然如果只是静态网页的话，面对广大的互联网用户很难会有市场。对于该项目使用MySQL作为数

25、据库，因为其具备了很多优点，包括运行速度块，使用成本低，使用方便，可移植性强，适用更多用户。MySQL的多种功能，适用于中小型企业甚至大型网站应用。2.6 Navicat Premium数据库管理工具简介Navicat Premium作为一项强大的数据库管理工具，在本次项目开发中的地位也十分重要，它主要是让开发者能够观察到项目数据库的变化，并且用户进行数据操作的记录也能通过数据库保存到数据表里面，十分方便用户进行数据管理。当然，本次项目的数据主要通过python框架Django使用makemigrations和migrate进行生成的，生成之后就通过Navicat进行查看，所以Navicat在

26、本次网站项目开发过程中必不可少。第三章 项目需求分析3.1 可行性分析3.1.1 经济可行性该项目主要是考察毕业生的基础知识的掌握和自学能力的体现，因此，在经济可行性方面并没有考虑太多，而在开发电商网站，运用前后端分离的知识与技术，一步一个脚印把项目开发出来，让毕业生能够体验这个过程，才是开发这个项目的重点。而由于该项目的整个开发过程只需用一台电脑开发，不管测试，还是开发后的使用都是用开发者一台电脑，这里的经济可行性更加不用放在考虑范围之中。3.1.2 技术可行性该网站项目主要采用前后端分离的技术去开发，前端使用vuejs搭建，后端则用python框架django-rest-framework

27、搭建，而数据库则用mysql,mysql又是通过navicat fot MySql工具进行管理。由于现在几乎所有IT行业都使用框架开发已是常态，那么，在项目开发过程中，开发者能够在网上找到各种技术支持资源，包括视频教程资源、技术博客、技术文档说明等等，在技术可行性也有了一定的保障。3.1.3 运行可行性该网站项目是基于python语言和前端框架VUE进行开发的，由于后端的数据库设计和接口设计都是根据前端用户界面进行设计的，所以，如果所有的用户界面都已经确定下来的话，那么，后端的接口和数据库表等都可以根据用户界面慢慢设计。这里的数据库表是根据用户需求设计好的各种类，基本上每一个功能模块都可以设计

28、成一个类，而django-rest-framework是根据每个类通过model.py文件，然后执行makemigrations和migrate命令自动生成数据表，而后台管理也是通过框架xadmin进行开发。总而言之，由于现在技术的便利性，所以在运行可行性也具有一定的把握。3.2 功能需求分析使用自上往下的方法对本网站项目进行需求分析。了解该网站的需求后，基本定位下面的功能：本课题要求实现一套楼盘销售系统，同时系统要明确开发前台与后台两个不同部分面向不同的用户类群。前台主要包括新闻资讯、房产分类、购物车等功能模块。后台主要面向管理员用户。所以其主要的功能有咨询管理、会员管理、房产管理、房产类别

29、管理、订单管理等功能模块。（1）交易管理表3-1 交易管理用例分析（2）商品管理表3-2 商品管理用例分析用例名称用例简介前置条件商品管理将网站中所有提供给消费者的内容进行管理，包括商品，商品类别，轮播商品，品牌，热搜词，首页商品类别广告项目服务器开启，资源渲染完成，管理员登录网站主要操作商品管理明细：(1)管理员进入后台。(2)点击商品。(3)查看所有商品列表内容。(4)按提示，选择商品添加、修改、删除等操作。(5)保存商品类别管理明细：(1)管理员进入后台。(2)点击商品类别。(3)查看所有商品类别列表内容。(4)按提示，选择商品类别添加、修改、删除等操作。(5)保存品牌管理明细：(1)管

30、理员进入后台。(2)点击品牌。(3)查看所有品牌列表内容。(4)按提示，选择品牌类别添加、修改、删除等操作。(5)保存热搜词管理明细：(1)管理员进入后台。(2)点击热搜词。(3)查看所有热搜词列表内容。(4)按提示，选择热搜词添加、修改、删除等操作。(5)保存首页商品类别广告管理明细：(1)管理员进入后台。(2)点击商品子模块。(3)查看所有商品列表内容。(4)按提示，选择商品类别广告添加、修改、删除等操作。(5)保存（3）用户操作管理用例名称用例简介前置条件用户操作管理将网站中所有用户操作进行管理，包括用户收藏、收货地址、用户留言项目服务器开启，资源渲染完成，管理员登录网站主要操作用户收藏

31、管理明细：(1)管理员进入后台。(2)点击用户收藏。(3)查看所有用户收藏内容。(4)按提示，选择商品收藏内容添加、修改、删除等操作。(5)保存收货地址管理明细：(1)管理员进入后台。(2)点击收获地址。(3)查看所有收获地址内容。(4)按提示，选择收货地址添加、修改、删除等操作。(5)保存用户留言管理明细：(1)管理员进入后台。(2)点击用户留言。(3)查看所有用户留言内容。(4)按提示，选择用户留言添加、修改、删除等操作。(5)保存表3-3 用户操作管理用例分析3.3 项目运行环境运行环境：CPU：英特尔i7-3.5GHZ内存：4G以上硬盘：500G操作系统：Windows 10开发工具：

32、PyCharm、Visual Studio Code、navicat for MySql数据库：MySQL第四章 系统设计4.1 系统架构设计目标1. 可靠性。不管对开发者和用户而言，项目系统的总体可靠性非常重要，也就是说，系统的架构设计方面需要具备一定的可靠性。2安全性。项目在运行过程中，由于大量用户的存在，用户所产生的数据就会比较多，那么，用户的隐私问题也就非常重要，所以在项目系统的设计过程中，需要考虑用户数据的安全问题。3可定制化。由于网站的用户包括管理员和普通用户，但随着使用的推广，系统面临的人群可能会存在各种需求，所以可定制化的特性是网站建设必不可少的内容。4可扩展性。在网站的使用过

33、程中，新的技术，新的需求都会出现，在网站项目中运用新的技术和新的功能也是必不可少的。5可维护性。网站在使用过程中，随着用户的增加和数据的变化，再加上未来其他功能的扩展，为了方便技术人员的扩展，网站的可维护性也是必须考虑的。6可升级性。网站项目开发过程中，由于前后端各种依赖包会不断更新，那么，为了确保依赖包更新后不会对网站产生影响，技术人员更加应该考虑网站项目的可升级性。7可操作性。随着互联网时代的发展，越来越多用户基本上都会使用计算机，操作网站，但也存在不懂使用计算机的用户，所以在系统开发过程中，还需考虑网站项目的可操作性。4.2 系统架构设计在系统的架构设计。就包括业务层逻辑、用户界面层、数

34、据访问层三层，根据这三层，网站所涉及到的具体内容包括用户界面、权限管理、数据访问和异常处理以及业务逻辑，其系统功能模块图如下图。图4.1 系统功能模块包图4.3 数据库设计4.3.1 e-r图关系型数据库（本系统采用的MySQL数据库为一种轻量级关系型数据库）是目前应用市面上的系统中使用比较频繁的一种数据库。本系统使用python语言，采用了django框架技术，绝大部分面向对象系统设计，因此数据库的设计和其他的一样也是面向对象的。E-R模型图如下图4.2所示：图4.2数据库E-R图根据网站项目功能的需求，下面的的实体-关系模型为进行细化系统中的E-R图后的模型：（1）商品类别实体属性如图4.

35、3所示。图4.3商品类别类实体属性图（2）商品名类实体属性图，如图4.4所示。图4.4商品名类实体属性图（3）商品类实体属性图，如图4.5所示。图4.5商品类实体属性图（4）订单的商品详情类实体属性图，如图4.6所示。图4.6订单的商品详情类实体属性图（5）用户收藏类实体属性图，如图4.7所示。图4.7用户收藏类实体属性图（6）轮播的商品证码类实体属性图，如图4.8所示。图4.8轮播的商品类实体属性图（7）热搜词类实体属性图，如图4.9所示。图4.9热搜词类实体属性图（8）购物车类实体属性图，如图4.10所示。图4.10购物车类实体属性图（9）订单类实体属性图，如图4.11所示。图4.11订单

36、类实体属性图（10）订单的商品详情类实体属性图，如图4.12所示。图4.12订单的商品详情类实体属性图（11）用户留言类实体属性图，如图4.13所示。图4.13用户留言类实体属性图（12）用户收货地址类实体属性图，如图4.14所示。图4.14用户收货类实体属性图（13）用户类实体属性图，如图4.15所示。图4.15用户类实体属性图（14）短信验证码类实体属性图，如图4.16所示。图4.16短信验证码类实体属性图4.3.2 数据表建好的数据库名为yansenshop，使用MySQL数据库管理系统，并且使用navicat for MySql进行管理。系统中使用到的主要数据表有商品r表、订单表、用户

37、收货地址表、用户表等等。具体表结构如下：表4-1 商品表表4-2 订单表 表4-3 用户收货地址表表4-4 用户表4.4 系统流程设计流程图是将一个操作的各个顺序步骤按照一定的逻辑展示出来的一个图形。只要这个操作有过程，那么肯定有一个流程。流程图就是对于描述这个操作的解释。流程图对于我们进行现行的过程或者根据需要进行新的改进的时候有着非常重要的作用。本系统流程设计如下图4.17所示。图4.17系统流程设计图第五章 项目详细设计5.1 项目主要功能网站的需求进行了详细的分析，由于需要调研了当前电商网站的热度。该网站是基于django-rest-framework搭建后台，vue搭建前台，mysq

38、l作为数据库的天天生鲜市场电商网站，项目主要分未前台和后台两个模块，前台包括登录、注册、商品搜索、购物车、会员中心等功能模块；交易管理、商品管理、用户管理、用户操作管理等功能模块作为后台主要功能。其功能结构图如下图5.1所示：图5.1系统功能结构图5.2 系统各个功能模块实现5.2.1 数据库连接设计实现数据库是在django框架的settings文件中a进行数据库连接配置。实现代码图5.2如下：图5.2数据库连接代码图5.2.2 登录设计实现当用户在浏览器输入网站url地址访问时，需要用户输入之前成功注册过的账号、密码进行用户信息校验。用户输入完成并提交，网站才会将用户登录填写的表单数据发送

39、到后台数据库进行校验，如果数据库用户表里的信息匹配成功，确认有该用户，那么就能返回一个登录成功的反馈，否则登录就失败。如下图5.3所示。图5.3 系统登录界面5.2.3 前台功能模块设计实现前台模块主要包含了用户登录与注册、首页的展示、商品搜索、购物车、会员中心。（1）首页模块项目首页运行界面如图5.5所示。图5.4首页实现界面（2）用户注册功能模块的实现用户注册分为会员注册和商家注册，注册界面如图5.5所示。图5.5用户注册实现界面（3）商品搜索功能模块的实现当用户想到要买的商品的时候都可以通过搜索框把需要的产品给搜索出来，搜索功能如图所示5.6所示。图5.6用户注册实现界面（4）购物车功能

40、模块的实现当用户根据提示确定商品数量和商品价格，把它添加到购物车当中，这个时候，购物车就会形成一定数量的商品列表，用户添加购物车和购物车列表如图所示5.75.9所示。图5.7添加购物车实现界面图5.8购物车实现界面图5.9确定下单实现界面（5）用户中心功能模块的实现：用户中心中的我的订单，实现页面效果如图5.105.14。图5.10添加购物车实现界面图5.11会员中心收货地址实现界面图5.12会员中心用户信息实现界面图5.13会员中心用户收藏实现界面图5.14会员中心用户留言实现界面5.2.4 后台功能模块设计实现后台模块功能的设计主要包括管理员对网站的商品信息、用户信息、用户操作信息、交易信

41、息进行管理以及前端的接口设计。（1）管理员管理后台的功能实现：管理员对商品信息、用户信息、用户操作信息、交易信息进行增删查改等操作是此模块主要实现的功能。该模块的使用页面如图5.15所示：图5.15管理员管理后台模块界面（2）接口设计模块功能实现前端页面需要通过接口来添加数据并将数据加载到页面上，所以接口的设计是对于前端是非常重要的一部分，但由于接口设计是由后端语言pyhon设计的，所以接口设计放在后端这边讲，后端接口设计如图会员管理模块界面如图5.16所示。图5.16接口设计管理模块实现界面第六章 系统测试任何一个IT项目在上线面向用户之前都必须经过大量测试，所以项目测试在项目开发流程中起到

42、至关重要的地步。对于该项目，最基本的，我们需要检测网站的功能性，也就是网站的每个功能模块的使用情况，当然，检测网站的功能性如果过关的话，那么，网站的 可用性就有保障了。然后还需要检测其稳定性，只有通过大量有逻辑有目标性的测试，我们才有机会降低项目运行时的出错率。6.1 功能测试适用性、准确性、可操作性、依从性、安全性是本网站进行功能性测试的主要内容。本网站功能测试如表6-1所示：表6-1 网站功能测试6.2 安全测试具体测试方面如表6-2所示。表6-2安全测试6.3 用例测试具体测试方面如下表所示。表6-3 网站可用性测试序号用例名称用例操作预期结果测试结果1用户注册输入用户名、密码、验证码输

43、入正确的用户名、密码、验证码后跳转到登录页符合预期2用户登录输入用户名、密码输入正确的用户名、密码后跳到网站首页符合预期3用户添加商品收藏进入网站后，用户点击指定的产品，并把确定好数量的商品添加到购物车中商品收藏添加正常符合预期4用户添加收货地址点击会员中心，添加收货地址添加收货地址正常符合预期5用户修改收货地址点击会员中心，修改收货地址修改收货地址正常符合预期6用户添加留言点击会员中心，添加用户留言添加用户留言正常符合预期7用户删除留言点击会员中心，删除用户留言删除用户留言正常符合预期8用户查看订单点击会员中心，查看我的订单，看看订单列表显示是否正常订单列表显示正常符合预期9用户修改用户信息

44、点击会员中心，修改用户信息用户信息修改正常符合预期10用户使用购物车点击指定商品，添加至购物车商品添加购物车正常符合预期11管理员后台登录输入账号、密码输入正确的用户名、密码后跳到网站后台符合预期12管理员后台管理商品进入后台，点击商品，对商品进行查询、添加、修改、删除商品管理操作正常符合预期13管理员后台管理订单进入后台，点击订单，对订单进行查询、添加、修改、删除订单管理正常符合预期14管理员后台管理购物车进入后台，点击购物车，对购物车进行查询、添加、修改删除购物车管理正常符合预期15管理员后台管理用户进入后台，点击用户，对用户进行查询、添加、修改删除用户管理正常符合预期16管理员后台管理用

45、户操作进入后台，点击用户操作，对用户操作进行查询、添加、修改删除用户操作管理正常符合预期表6-4 网站用例测试6.4 性能测试模拟使用多台计算机操作网站的情景，对网站进行性能测试，看看所测试的内容是否达到可接受的范围。测试结果如图6-5。表6-5性能测试6.5 测试结果分析经过对该网站进行多个方面的分析和测试，该网站针对电商网站中的所有业务基本上已经实现，而却测试过程中并未发现异常，全部符合预期结果，并且操作起来十分见到、产品性能稳定，可以在互联网市场中推广使用。第七章 系统特色与创新7.1数据请求优化在该网站的数据请求接口开发过程中，尽量减少http请求，以访影响用户访问网站的性能，而该在该项目中，用户使用一个功能就访问一个API，不会涉及到太多的接口，所以不管是性能上，还是开发维护上，都比较方便。当用户访问网站时，一个模块功能对应着一个API接口，包括商品、商品类别、验证码、热搜、用户、商品收藏、留言、收货地址、购物车、订单、轮播图、商品搜索。7.2创新功能相信每一个网站开发都有它的独特之处，为了能够让整个网站具有特色，提升户体验，所以我这里网站布局上添加了轻松的绿色主题，使用户能够在浏览该网站时，放松个人心情，增加用户在网站停留的时间，那么用户的购买欲