在21世纪的信息时代,随着互联网技术的快速发展和普及,人们的日常生活方式也发生了深刻的变化。其中,外卖服务逐渐成为现代生活中不可或缺的一部分,外卖系统作为数字化城市的重要组成部分,已经深入到人们的日常生活中,为消费者提供了极大的便利。
本文提出的外卖系统是一款基于VUE + Node的外卖系统。本文将主要阐述使用VUE.JS和Node.JS构建外卖系统的设计与实现过程。VUE.JS作为一种前端框架,其组件化的开发方式可以极大地提高开发效率和代码复用性,同时,Node.JS作为后端框架,具有非阻塞I/O模型和强大的性能,适合处理外卖系统的大量并发请求。本文首先介绍了这一系统的研究背景和意义、然后对系统的可行性分析、功能性分析、系统的架构设计、系统的数据库设计等内容进行阐述,最后对系统的实现过程和测试结果进行描述。结果表明通过这种方式实现的外卖系统,不仅具有高度的可扩展性和可维护性,而且在实际运行中表现出了良好的性能和稳定性。
关键词:外卖系统;VUE.JS;Node.JS
Abstract
In the information age of the 21st century, with the rapid development and popularization of internet technology, people's daily lifestyles have also undergone profound changes. Among them, food delivery services have gradually become an indispensable part of modern life. As an important component of digital cities, food delivery systems have penetrated into people's daily lives and provided great convenience for consumers.
The delivery system proposed in this article is a delivery system based on VUE+Node. This article will mainly elaborate on using VUE JS and Node The design and implementation process of building a delivery system using JS. VUE As a front-end framework, JS's componentized development approach can greatly improve development efficiency and code reusability. At the same time, Node JS, as a backend framework, has a non blocking I/O model and powerful performance, making it suitable for handling a large number of concurrent requests in food delivery systems. This article first introduces the research background and significance of this system, then elaborates on the feasibility analysis, functional analysis, system architecture design, system database design, and other contents of the system. Finally, the implementation process and test results of the system are described. The results indicate that the delivery system implemented in this way not only has high scalability and maintainability, but also demonstrates good performance and stability in actual operation.
Keywords: food delivery system; VUE JS; Node JS
第一章 绪 论
1.1选题背景
随着人们生活节奏的加快,外卖服务的需求越来越大。与此同时,外卖行业的竞争也日趋激烈,这要求外卖服务提供商不断创新和优化服务,以满足消费者的需求。外卖系统的开发是提高服务效率和用户体验的关键。随着前端框架(如VUE.JS)和后端技术(如Node.JS)的日益成熟,快速构建复杂的单页面应用程序已经成为可能。此外,这些技术的普及和发展使得前端和后端的开发可以更加独立和高效地进行,这为外卖系统的开发提供了技术支持。通过基于VUE+ Node的外卖系统,可以为用户提供更加便捷、高效的外卖订购体验,同时为商家提供更加智能、自动化的订单管理功能。此外,该系统还可以帮助外卖服务提供商降低运营成本,提高市场竞争力。
1.2选题意义
首先,可以提高用户体验:通过VUE.JS可以构建一个用户界面友好、响应速度快、交互体验良好的外卖系统。这有助于使用户能够更快速、更方便地完成订餐过程,提高用户满意度。
其次,可以提升运营效率:外卖系统能够自动化处理订单、结算等流程,减少人工干预,提高外卖业务的运营效率。这种自动化的处理方式不仅能够节省人力成本,还可以减少错误率,提高工作效率。
最后,可以提供决策支持:通过系统的数据分析功能,商家可以获得关于用户行为、销售情况等方面的深入洞察,从而做出更明智的商业决策。这有助于提高业务效率和盈利能力。
1.3论文结构与章节安排
本文共分为六章,章节内容安排如下:
第一章为绪论,主要介绍系统的研究背景和意义,同时进行了论文整体框架的结构的简要介绍。
第二章为系统分析,主要对系统进行可行性技术、系统功能分析、角色用例等进行分析。
第三章为系统总体设计,主要是对系统架构、系统功能结构、系统数据库进行设计。
第四章为系统详细设计与实现,根据系统功能的划分,分别的对系统所需要实现的用户功能和管理员功能进行了分析和说明。
第五章:系统测试。主要对系统的部分界面进行展示并对主要功能进行测试。
第六章:总结。主要对系统的开发设计工作进行总结。
第二章 系统分析
2.1可行性分析
2.1.1技术可行性
VUE.JS和Node.JS是现代Web开发中非常流行的技术组合。VUE是一个前端框架,能够提供丰富的组件和简洁的API,使开发者可以快速构建用户界面。Node.JS则是一个运行在服务器端的JavaScript运行环境,可以处理后端逻辑和与数据库交互。外卖系统作为一个Web应用,使用VUE可以轻松构建出用户友好的界面,而Node.JS则能够处理后端逻辑和与外卖配送相关的复杂计算。因此从技术层面上分析是可行的。
2.1.2经济可行性
使用VUE.JS 和 Node.JS 进行开发意味着可以利用大量的开源库和工具,这有助于降低开发成本。由于VUE.JS 和 Node.JS都是成熟的框架和语言,维护起来相对容易。因此从经济角度分析是可行的。
2.1.3社会可行性
随着科技的发展和人们生活节奏的加快,外卖服务逐渐成为现代生活中不可或缺的一部分。无论是早餐、午餐还是晚餐,甚至是夜宵,都有人选择外卖来解决饮食问题。而基于VUE+ Node的外卖系统,其界面友好、操作简便的特点,使得用户可以更加方便快捷地完成点餐操作。因此从社会角度分析是可行的。
2.2系统功能分析
2.2.1 功能性分析
按照基于VUE + Node的外卖系统的角色,划分了买家用户、管理员、卖家用户和配送员用户这四大模块、各模块功能如下。
- 买家用户功能:
- 首页:用户可以查看系统首页展示的轮播图、外卖信息、外卖资讯等信息。
- 注册登录:访客可以通过注册成为系统用户,用户注册后可以通过账号和密码进行登录。
- 通知公告:用户可以查看系统发布的通知公告信息。
- 外卖资讯:用户可以查看外卖资讯列表中的某一资讯详情并可以进行点赞、收藏和发表评论操作:
- 外卖信息:用户可以查看外卖信息列表中的某一外卖详情并可以进行点赞、加入购物车或立即购买操作
- 商城管理:用户可以查看和管理我的购物车、我的订单和我的地址信息。
- 我的:用户可以修改个人资料和登录密码,可以查看和管理配送订单、订单配送、收藏信息。
- 管理员功能:
- 后台首页:管理员可以查看后台首页展示的信息。
- 系统用户:管理员可以对系统用户信息进行查询、添加和删除操作。
- 配送订单管理:管理员可以查看和管理配送订单信息。
- 系统管理:可以对系统轮播图信息进行查询、添加和删除操作。
- 通知公告管理:管理员可以对通知公告信息进行查询、添加和删除操作。
- 资源管理:管理员可以添加资讯分类信息,可以对外卖资讯信息进行查询、添加和删除操作。
- 商城管理:管理员可以查看和管理外卖信息、分类信息、订单列表和订单配送信息。
- 我的:用户可以修改个人信息和登录密码。
- 卖家用户功能:
- 注册登录:用户可以通过注册成为系统用户,注册后可以通过账号和密码进行登录。
- 后台首页:用户可以查看后台首页展示的商品销售金额、商品销售数量等统计图信息。
- 配送订单管理:用户可以添加配送订单信息,可以查询配送订单列表中某一配送订单的详情。
- 商城管理:用户可以查看和管理外卖信息、订单列表和订单配送信息。
- 我的:用户可以修改个人信息和登录密码。
- 配送员用户功能:
- 注册登录:用户可以通过注册成为系统用户,注册后可以通过账号密码进行登录。
- 后台首页:用户可以查看后台首页展示的信息。
- 配送订单管理: 用户可以查看配送订单列表中某一订单详情并提交配送状态和配送描述信息,
- 我的:用户可以修改个人信息和登录密码。
2.2.2 非功能性分析
基于VUE + Node的外卖系统的非功能性需求比如基于VUE + Node的外卖系统的安全性怎么样,可靠性怎么样,性能怎么样,可拓展性怎么样等。具体可以表示在如下2-1表格中:
表2-1基于VUE + Node的外卖系统非功能需求表
安全性 | 主要指基于VUE + Node的外卖系统数据库的安装,数据库的使用和密码的设定必须合乎规范。 |
可靠性 | 可靠性是指基于VUE + Node的外卖系统能够安装用户的指示进行操作,经过测试,可靠性90%以上。 |
性能 | 性能是影响基于VUE + Node的外卖系统占据市场的必要条件,所以性能最好要佳才好。 |
可扩展性 | 比如数据库预留多个属性,比如接口的使用等确保了系统的非功能性需求。 |
易用性 | 用户只要跟着基于VUE + Node的外卖系统的页面展示内容进行操作,就可以了。 |
可维护性 | 基于VUE + Node的外卖系统开发的可维护性是非常重要的,经过测试,可维护性没有问题 |
2.3系统操作流程
2.3.1数据新增流程
用户成功登入系统后就能够实现增加数据的操作,新增的数据的编号由系统生成,除了编号以外,其他增加信息用户自己填写,填写后的信息经过系统验证,验证通过后即可完成数据的新增,数据新增的流程如下图2-1所示:
![](https://i-blog.csdnimg.cn/direct/26eb648a0bf4438898166a0c4e9388ba.png)
图2-1数据新增流程图
2.3.2数据删除流程
如果系统里面存在一些没有用的数据,相关的管理人员还可以对这些数据进行删除,数据删除的流程如下图2-2所示。
![](https://i-blog.csdnimg.cn/direct/ad7394148e744ec18bbe863c7b0d3c93.png)
图2-2数据删除流程图
2.4 系统用例分析
通过2.2功能的分析,得出了基于VUE + Node的外卖系统的用例图:
买家用户角色用例如图2-3所示。
![](https://i-blog.csdnimg.cn/direct/b6d5a4276ac145dc93f0243d2dc763fd.png)
图2-3买家用户角色用例图
管理员角色用例如图2-4所示。
![](https://i-blog.csdnimg.cn/direct/3ca59bf3dd7d4f6cbad9251763c8b4a5.png)
卖家用户角色用例如图2-5所示。
![](https://i-blog.csdnimg.cn/direct/c00ab7887e8f44599821e7f0413371e3.png)
图2-5卖家用户角色用例图
配送员用户角色用例如图2-6所示。
![](https://i-blog.csdnimg.cn/direct/bc02b8f6ba4e450a8a57f87f685ae80f.png)
图2-6配送员用户角色用例图
第三章 系统总体设计
3.1系统架构设计
本基于VUE + Node的外卖系统从架构上分为三层:表现层(UI)、业务逻辑层(BLL)以及数据层(DL)。
![](https://i-blog.csdnimg.cn/direct/1d380d9e8fe94a35a255f66bee457086.png)
图3-1系统架构设计图
表现层(UI):又称UI层,主要完成本基于VUE + Node的外卖系统的UI交互功能,一个良好的UI可以打打提高用户的用户体验,增强用户使用本基于VUE + Node的外卖系统时的舒适度。UI的界面设计也要适应不同版本的基于VUE + Node的外卖系统以及不同尺寸的分辨率,以做到良好的兼容性。UI交互功能要求合理,用户进行交互操作时必须要得到与之相符的交互结果,这就要求表现层要与业务逻辑层进行良好的对接。
业务逻辑层(BLL):主要完成本基于VUE + Node的外卖系统的数据处理功能。用户从表现层传输过来的数据经过业务逻辑层进行处理交付给数据层,系统从数据层读取的数据经过业务逻辑层进行处理交付给表现层。
数据层(DL):由于本基于VUE + Node的外卖系统的数据是放在服务端的MySQL数据库中,因此本属于服务层的部分可以直接整合在业务逻辑层中,所以数据层中只有数据库,其主要完成本基于VUE + Node的外卖系统的数据存储和管理功能。
3.2 系统功能设计
在上一章节中主要对系统的功能性需求和非功能性需求进行分析,并且根据需求分析了本系统的用户角色用例。接下来开始对本系统的整体功能和数据库进行设计。根据前面章节的需求分析得出,系统功能结构下图3-2所示。
![](https://i-blog.csdnimg.cn/direct/88320e625a1f458ca08a5fc4f93cebca.png)
图3-2系统功能结构图
3.3数据库设计
3.3.1数据库概念设计
数据库是整个软件编程中最重要的一个步骤,对于数据库问题主要是判定数据库的数量和结构公式的创建。展示系统使用的是MySQL进行对数据库进行管理,进行保证数据的安全性、稳定性等。
概念模型的设计是为了抽象真实世界的信息,并对信息世界进行建模。它是数据库设计的强大工具。数据库概念模型设计可以通过E-R图描述现实世界的概念模型。系统的E-R图显示了系统中实体之间的链接。而且MySQL数据库是自我保护能力比较强的数据库,主要是数据库实体的E-R图如下图3-3所示:
![](https://i-blog.csdnimg.cn/direct/53ac85ba725f44bd914525fbd804a51b.png)
图3-3实体的E-R图
3.3.2数据库表
我们可以根据数据结构的详细分析要求,我们根据输入和输出数据量的要求进行分析,确定什么表表,结构之间的关系,我们可以验证,调整和完善,查询和浏览过程,可以实现数据库,以使用户对数据和功能有更多要求。
基于系统使用的数据库管理系统的特点,对数据库的概念模型进行了转换和构建。但是,这个系统只需要充分考虑基于VUE + Node的外卖系统的功能,而且组织比较清晰。数据表如下。
表access_token (登陆访问时长)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | token_id | int | 10 | 0 | N | Y | 临时访问牌ID | |
2 | token | varchar | 64 | 0 | Y | N | 临时访问牌 | |
3 | info | text | 65535 | 0 | Y | N | ||
4 | maxage | int | 10 | 0 | N | N | 2 | 最大寿命:默认2小时 |
5 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
6 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
7 | user_id | int | 10 | 0 | N | N | 0 | 用户编号: |
表address (收货地址:)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | address_id | int | 10 | 0 | N | Y | 收货地址: | |
2 | name | varchar | 32 | 0 | Y | N | 姓名: | |
3 | phone | varchar | 13 | 0 | Y | N | 手机: | |
4 | postcode | varchar | 8 | 0 | Y | N | 邮编: | |
5 | address | varchar | 255 | 0 | N | N | 地址: | |
6 | user_id | mediumint | 8 | 0 | N | N | 用户ID:[0,8388607]用户获取其他与用户相关的数据 | |
7 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
8 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
9 | default | bit | 1 | 0 | N | N | 0 | 默认判断 |
表article (文章:用于内容管理系统的文章)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | article_id | mediumint | 8 | 0 | N | Y | 文章id:[0,8388607] | |
2 | title | varchar | 125 | 0 | N | Y | 标题:[0,125]用于文章和html的title标签中 | |
3 | type | varchar | 64 | 0 | N | N | 0 | 文章分类:[0,1000]用来搜索指定类型的文章 |
4 | hits | int | 10 | 0 | N | N | 0 | 点击数:[0,1000000000]访问这篇文章的人次 |
5 | praise_len | int | 10 | 0 | N | N | 0 | 点赞数 |
6 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
7 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
8 | source | varchar | 255 | 0 | Y | N | 来源:[0,255]文章的出处 | |
9 | url | varchar | 255 | 0 | Y | N | 来源地址:[0,255]用于跳转到发布该文章的网站 | |
10 | tag | varchar | 255 | 0 | Y | N | 标签:[0,255]用于标注文章所属相关内容,多个标签用空格隔开 | |
11 | content | longtext | 2147483647 | 0 | Y | N | 正文:文章的主体内容 | |
12 | img | varchar | 255 | 0 | Y | N | 封面图 | |
13 | description | text | 65535 | 0 | Y | N | 文章描述 |
表article_type (文章分类)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | type_id | smallint | 5 | 0 | N | Y | 分类ID:[0,10000] | |
2 | display | smallint | 5 | 0 | N | N | 100 | 显示顺序:[0,1000]决定分类显示的先后顺序 |
3 | name | varchar | 16 | 0 | N | N | 分类名称:[2,16] | |
4 | father_id | smallint | 5 | 0 | N | N | 0 | 上级分类ID:[0,32767] |
5 | description | varchar | 255 | 0 | Y | N | 描述:[0,255]描述该分类的作用 | |
6 | icon | text | 65535 | 0 | Y | N | 分类图标: | |
7 | url | varchar | 255 | 0 | Y | N | 外链地址:[0,255]如果该分类是跳转到其他网站的情况下,就在该URL上设置 | |
8 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
9 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
表auth (用户权限管理)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | auth_id | int | 10 | 0 | N | Y | 授权ID: | |
2 | user_group | varchar | 64 | 0 | Y | N | 用户组: | |
3 | mod_name | varchar | 64 | 0 | Y | N | 模块名: | |
4 | table_name | varchar | 64 | 0 | Y | N | 表名: | |
5 | page_title | varchar | 255 | 0 | Y | N | 页面标题: | |
6 | path | varchar | 255 | 0 | Y | N | 路由路径: | |
7 | position | varchar | 32 | 0 | Y | N | 位置: | |
8 | mode | varchar | 32 | 0 | N | N | _blank | 跳转方式: |
9 | add | tinyint | 3 | 0 | N | N | 1 | 是否可增加: |
10 | del | tinyint | 3 | 0 | N | N | 1 | 是否可删除: |
11 | set | tinyint | 3 | 0 | N | N | 1 | 是否可修改: |
12 | get | tinyint | 3 | 0 | N | N | 1 | 是否可查看: |
13 | field_add | text | 65535 | 0 | Y | N | 添加字段: | |
14 | field_set | text | 65535 | 0 | Y | N | 修改字段: | |
15 | field_get | text | 65535 | 0 | Y | N | 查询字段: | |
16 | table_nav_name | varchar | 500 | 0 | Y | N | 跨表导航名称: | |
17 | table_nav | varchar | 500 | 0 | Y | N | 跨表导航: | |
18 | option | text | 65535 | 0 | Y | N | 配置: | |
19 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
20 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
表buyer (买家)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | buyer_id | int | 10 | 0 | N | Y | 买家ID | |
2 | buyer_name | varchar | 64 | 0 | Y | N | 买家姓名 | |
3 | buyer_gender | varchar | 64 | 0 | Y | N | 买家性别 | |
4 | contact_number | varchar | 16 | 0 | Y | N | 联系电话 | |
5 | examine_state | varchar | 16 | 0 | N | N | 已通过 | 审核状态 |
6 | user_id | int | 10 | 0 | N | N | 0 | 用户ID |
7 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
8 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间 |
表cart (购物车)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | cart_id | int | 10 | 0 | N | Y | 购物车ID: | |
2 | title | varchar | 64 | 0 | Y | N | 标题: | |
3 | img | varchar | 255 | 0 | N | N | 0 | 图片: |
4 | user_id | int | 10 | 0 | N | N | 0 | 用户ID: |
5 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
6 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
7 | state | int | 10 | 0 | N | N | 0 | 状态:使用中,已失效 |
8 | price | double | 9 | 2 | N | N | 0.00 | 单价: |
9 | price_ago | double | 9 | 2 | N | N | 0.00 | 原价: |
10 | price_count | double | 11 | 2 | N | N | 0.00 | 总价: |
11 | num | int | 10 | 0 | N | N | 1 | 数量: |
12 | goods_id | mediumint | 8 | 0 | N | N | 商品id:[0,8388607] | |
13 | type | varchar | 64 | 0 | N | N | 未分类 | 商品分类: |
14 | description | varchar | 255 | 0 | Y | N | 描述:[0,255]用于产品规格描述 |
表collect (收藏)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | collect_id | int | 10 | 0 | N | Y | 收藏ID: | |
2 | user_id | int | 10 | 0 | N | N | 0 | 收藏人ID: |
3 | source_table | varchar | 255 | 0 | Y | N | 来源表: | |
4 | source_field | varchar | 255 | 0 | Y | N | 来源字段: | |
5 | source_id | int | 10 | 0 | N | N | 0 | 来源ID: |
6 | title | varchar | 255 | 0 | Y | N | 标题: | |
7 | img | varchar | 255 | 0 | Y | N | 封面: | |
8 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
9 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
表comment (评论)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | comment_id | int | 10 | 0 | N | Y | 评论ID: | |
2 | user_id | int | 10 | 0 | N | N | 0 | 评论人ID: |
3 | reply_to_id | int | 10 | 0 | N | N | 0 | 回复评论ID:空为0 |
4 | content | longtext | 2147483647 | 0 | Y | N | 内容: | |
5 | nickname | varchar | 255 | 0 | Y | N | 昵称: | |
6 | avatar | varchar | 255 | 0 | Y | N | 头像地址:[0,255] | |
7 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
8 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
9 | source_table | varchar | 255 | 0 | Y | N | 来源表: | |
10 | source_field | varchar | 255 | 0 | Y | N | 来源字段: | |
11 | source_id | int | 10 | 0 | N | N | 0 | 来源ID: |
表delivery_information (外卖信息)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | delivery_information_id | int | 10 | 0 | N | Y | 外卖信息ID | |
2 | store_name | varchar | 64 | 0 | Y | N | 店铺名称 | |
3 | seller_customers | int | 10 | 0 | Y | N | 0 | 卖家用户 |
4 | cart_title | varchar | 125 | 0 | Y | N | 标题:[0,125]用于产品html的标签中 | |
5 | cart_img | text | 65535 | 0 | Y | N | 封面图:用于显示于产品列表页 | |
6 | cart_description | varchar | 255 | 0 | Y | N | 描述:[0,255]用于产品规格描述 | |
7 | cart_price_ago | double | 8 | 2 | N | N | 0.00 | 原价:[1] |
8 | cart_price | double | 8 | 2 | N | N | 0.00 | 卖价:[1] |
9 | cart_inventory | int | 10 | 0 | N | N | 0 | 商品库存 |
10 | cart_type | varchar | 64 | 0 | N | N | 未分类 | 商品分类: |
11 | cart_content | longtext | 2147483647 | 0 | Y | N | 正文:产品的主体内容 | |
12 | cart_img_1 | text | 65535 | 0 | Y | N | 主图1: | |
13 | cart_img_2 | text | 65535 | 0 | Y | N | 主图2: | |
14 | cart_img_3 | text | 65535 | 0 | Y | N | 主图3: | |
15 | cart_img_4 | text | 65535 | 0 | Y | N | 主图4: | |
16 | cart_img_5 | text | 65535 | 0 | Y | N | 主图5: | |
17 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
18 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间 |
表delivery_order (配送订单)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | delivery_order_id | int | 10 | 0 | N | Y | 配送订单ID | |
2 | order_number | varchar | 64 | 0 | Y | N | 订单编号 | |
3 | store_name | varchar | 64 | 0 | Y | N | 店铺名称 | |
4 | seller_customers | int | 10 | 0 | Y | N | 0 | 卖家用户 |
5 | delivery_users | int | 10 | 0 | Y | N | 0 | 配送用户 |
6 | buyer_user | int | 10 | 0 | Y | N | 0 | 买家用户 |
7 | product_name | varchar | 64 | 0 | Y | N | 商品名称 | |
8 | product_quantity | varchar | 64 | 0 | Y | N | 商品数量 | |
9 | total_price_of_goods | varchar | 64 | 0 | Y | N | 商品总价 | |
10 | buyers_phone_number | varchar | 64 | 0 | Y | N | 买家电话 | |
11 | buyer_address | text | 65535 | 0 | Y | N | 买家地址 | |
12 | delivery_status | varchar | 64 | 0 | Y | N | 配送状态 | |
13 | delivery_description | text | 65535 | 0 | Y | N | 配送描述 | |
14 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
15 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间 |
表delivery_personnel (配送员)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | delivery_personnel_id | int | 10 | 0 | N | Y | 配送员ID | |
2 | user_name | varchar | 64 | 0 | Y | N | 用户姓名 | |
3 | user_gender | varchar | 64 | 0 | Y | N | 用户性别 | |
4 | contact_phone_number | varchar | 16 | 0 | Y | N | 联系电话 | |
5 | examine_state | varchar | 16 | 0 | N | N | 已通过 | 审核状态 |
6 | user_id | int | 10 | 0 | N | N | 0 | 用户ID |
7 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
8 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间 |
表goods (商品信息)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | goods_id | mediumint | 8 | 0 | N | Y | 产品id:[0,8388607] | |
2 | title | varchar | 125 | 0 | Y | N | 标题:[0,125]用于产品和html的<title>标签中 | |
3 | img | text | 65535 | 0 | Y | N | 封面图:用于显示于产品列表页 | |
4 | description | varchar | 255 | 0 | Y | N | 描述:[0,255]用于产品规格描述 | |
5 | price_ago | double | 8 | 2 | N | N | 0.00 | 原价:[1] |
6 | price | double | 8 | 2 | N | N | 0.00 | 卖价:[1] |
7 | sales | int | 10 | 0 | N | N | 0 | 销量:[0,1000000000] |
8 | inventory | int | 10 | 0 | N | N | 0 | 商品库存 |
9 | type | varchar | 64 | 0 | N | N | 商品分类: | |
10 | hits | int | 10 | 0 | N | N | 0 | 点击量:[0,1000000000]访问这篇产品的人次 |
11 | content | longtext | 2147483647 | 0 | Y | N | 正文:产品的主体内容 | |
12 | img_1 | text | 65535 | 0 | Y | N | 主图1: | |
13 | img_2 | text | 65535 | 0 | Y | N | 主图2: | |
14 | img_3 | text | 65535 | 0 | Y | N | 主图3: | |
15 | img_4 | text | 65535 | 0 | Y | N | 主图4: | |
16 | img_5 | text | 65535 | 0 | Y | N | 主图5: | |
17 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
18 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
19 | customize_field | text | 65535 | 0 | Y | N | 自定义字段 | |
20 | source_table | varchar | 255 | 0 | Y | N | 来源表: | |
21 | source_field | varchar | 255 | 0 | Y | N | 来源字段: | |
22 | source_id | int | 10 | 0 | N | N | 0 | 来源ID: |
23 | user_id | int | 10 | 0 | Y | N | 0 | 添加人 |
表goods_type (商品类型)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | type_id | int | 10 | 0 | N | Y | 商品分类ID: | |
2 | father_id | smallint | 5 | 0 | N | N | 0 | 上级分类ID:[0,32767] |
3 | name | varchar | 255 | 0 | Y | N | 商品名称: | |
4 | desc | varchar | 255 | 0 | Y | N | 描述: | |
5 | icon | varchar | 255 | 0 | Y | N | 图标: | |
6 | source_table | varchar | 255 | 0 | Y | N | 来源表: | |
7 | source_field | varchar | 255 | 0 | Y | N | 来源字段: | |
8 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
9 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
表hits (用户点击)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | hits_id | int | 10 | 0 | N | Y | 点赞ID: | |
2 | user_id | int | 10 | 0 | N | N | 0 | 点赞人: |
3 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
4 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
5 | source_table | varchar | 255 | 0 | Y | N | 来源表: | |
6 | source_field | varchar | 255 | 0 | Y | N | 来源字段: | |
7 | source_id | int | 10 | 0 | N | N | 0 | 来源ID: |
表logistics_delivery (物流配送)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | logistics_delivery_id | int | 10 | 0 | N | Y | 物流配送ID | |
2 | order_number | varchar | 64 | 0 | Y | N | 订单号 | |
3 | product_name | varchar | 64 | 0 | Y | N | 商品名称 | |
4 | purchase_quantity | varchar | 64 | 0 | Y | N | 购买数量 | |
5 | total_transaction_amount | double | 11 | 2 | Y | N | 0.00 | 交易总额 |
6 | the_date_of_issuance | date | 10 | 0 | Y | N | 发货日期 | |
7 | delivery_number | varchar | 30 | 0 | Y | N | 配送订单 | |
8 | ordinary_users | int | 10 | 0 | Y | N | 0 | 普通用户 |
9 | shipping_address | varchar | 64 | 0 | Y | N | 收货地址 | |
10 | delivery_status | varchar | 64 | 0 | Y | N | 配送状态 | |
11 | signing_status | varchar | 64 | 0 | Y | N | 签收状态 | |
12 | recommend | int | 10 | 0 | N | N | 0 | 智能推荐 |
13 | contact_name | varchar | 255 | 0 | Y | N | 联系人名字 | |
14 | merchant_id | int | 10 | 0 | Y | N | 商家id | |
15 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
16 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间 |
表notice (公告)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | notice_id | mediumint | 8 | 0 | N | Y | 公告id: | |
2 | title | varchar | 125 | 0 | N | N | 标题: | |
3 | content | longtext | 2147483647 | 0 | Y | N | 正文: | |
4 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
5 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
表order (订单)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | order_id | int | 10 | 0 | N | Y | 订单ID: | |
2 | order_number | varchar | 64 | 0 | Y | N | 订单号: | |
3 | goods_id | mediumint | 8 | 0 | N | N | 商品id:[0,8388607] | |
4 | title | varchar | 32 | 0 | Y | N | 商品标题: | |
5 | img | varchar | 255 | 0 | Y | N | 商品图片: | |
6 | price | double | 10 | 2 | N | N | 0.00 | 价格: |
7 | price_ago | double | 10 | 2 | N | N | 0.00 | 原价: |
8 | num | int | 10 | 0 | N | N | 1 | 数量: |
9 | price_count | double | 8 | 2 | N | N | 0.00 | 总价: |
10 | norms | varchar | 255 | 0 | Y | N | 规格: | |
11 | type | varchar | 64 | 0 | N | N | 未分类 | 商品分类: |
12 | contact_name | varchar | 32 | 0 | Y | N | 联系人姓名: | |
13 | contact_email | varchar | 125 | 0 | Y | N | 联系人邮箱: | |
14 | contact_phone | varchar | 11 | 0 | Y | N | 联系人手机: | |
15 | contact_address | varchar | 255 | 0 | Y | N | 收件地址: | |
16 | postal_code | varchar | 9 | 0 | Y | N | 邮政编码: | |
17 | user_id | int | 10 | 0 | N | N | 0 | 买家ID: |
18 | merchant_id | mediumint | 8 | 0 | N | N | 0 | 商家ID: |
19 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
20 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
21 | description | varchar | 255 | 0 | Y | N | 描述:[0,255]用于产品规格描述 | |
22 | state | varchar | 16 | 0 | N | N | 待付款 | 订单状态:待付款,待发货,待签收,已签收,待退款,已退款,已拒绝,已完成 |
23 | remark | text | 65535 | 0 | Y | N | 订单备注 | |
24 | delivery_state | varchar | 16 | 0 | Y | N | 未配送 | 发货状态:未配送,已配送 |
表praise (点赞)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | praise_id | int | 10 | 0 | N | Y | 点赞ID: | |
2 | user_id | int | 10 | 0 | N | N | 0 | 点赞人: |
3 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
4 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
5 | source_table | varchar | 255 | 0 | Y | N | 来源表: | |
6 | source_field | varchar | 255 | 0 | Y | N | 来源字段: | |
7 | source_id | int | 10 | 0 | N | N | 0 | 来源ID: |
8 | status | bit | 1 | 0 | N | N | 1 | 点赞状态:1为点赞,0已取消 |
表seller (卖家)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | seller_id | int | 10 | 0 | N | Y | 卖家ID | |
2 | store_name | varchar | 64 | 0 | Y | N | 店铺名称 | |
3 | seller_name | varchar | 64 | 0 | Y | N | 卖家姓名 | |
4 | seller_gender | varchar | 64 | 0 | Y | N | 卖家性别 | |
5 | contact_phone_number | varchar | 16 | 0 | Y | N | 联系电话 | |
6 | examine_state | varchar | 16 | 0 | N | N | 已通过 | 审核状态 |
7 | user_id | int | 10 | 0 | N | N | 0 | 用户ID |
8 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
9 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间 |
表sensitive_vocabulary (敏感词汇)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | sensitive_vocabulary_id | int | 10 | 0 | N | Y | 敏感词汇ID | |
2 | sensitive_vocabulary | varchar | 64 | 0 | Y | N | 敏感词汇 | |
3 | create_time | datetime | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间 |
4 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间 |
表slides (轮播图)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | slides_id | int | 10 | 0 | N | Y | 轮播图ID: | |
2 | title | varchar | 64 | 0 | Y | N | 标题: | |
3 | content | varchar | 255 | 0 | Y | N | 内容: | |
4 | url | varchar | 255 | 0 | Y | N | 链接: | |
5 | img | varchar | 255 | 0 | Y | N | 轮播图: | |
6 | hits | int | 10 | 0 | N | N | 0 | 点击量: |
7 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
8 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
表upload (文件上传)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | upload_id | int | 10 | 0 | N | Y | 上传ID | |
2 | name | varchar | 64 | 0 | Y | N | 文件名 | |
3 | path | varchar | 255 | 0 | Y | N | 访问路径 | |
4 | file | varchar | 255 | 0 | Y | N | 文件路径 | |
5 | display | varchar | 255 | 0 | Y | N | 显示顺序 | |
6 | father_id | int | 10 | 0 | Y | N | 0 | 父级ID |
7 | dir | varchar | 255 | 0 | Y | N | 文件夹 | |
8 | type | varchar | 32 | 0 | Y | N | 文件类型 |
表user (用户账户:用于保存用户登录信息)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | user_id | mediumint | 8 | 0 | N | Y | 用户ID:[0,8388607]用户获取其他与用户相关的数据 | |
2 | state | smallint | 5 | 0 | N | N | 1 | 账户状态:[0,10](1可用|2异常|3已冻结|4已注销) |
3 | user_group | varchar | 32 | 0 | Y | N | 所在用户组:[0,32767]决定用户身份和权限 | |
4 | login_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 上次登录时间: |
5 | phone | varchar | 11 | 0 | Y | N | 手机号码:[0,11]用户的手机号码,用于找回密码时或登录时 | |
6 | phone_state | smallint | 5 | 0 | N | N | 0 | 手机认证:[0,1](0未认证|1审核中|2已认证) |
7 | username | varchar | 16 | 0 | N | N | 用户名:[0,16]用户登录时所用的账户名称 | |
8 | nickname | varchar | 16 | 0 | Y | N | 昵称:[0,16] | |
9 | password | varchar | 64 | 0 | N | N | 密码:[0,32]用户登录所需的密码,由6-16位数字或英文组成 | |
10 | | varchar | 64 | 0 | Y | N | 邮箱:[0,64]用户的邮箱,用于找回密码时或登录时 | |
11 | email_state | smallint | 5 | 0 | N | N | 0 | 邮箱认证:[0,1](0未认证|1审核中|2已认证) |
12 | avatar | varchar | 255 | 0 | Y | N | 头像地址:[0,255] | |
13 | open_id | varchar | 255 | 0 | Y | N | 针对获取用户信息字段 | |
14 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
表user_group (用户组:用于用户前端身份和鉴权)
编号 | 名称 | 数据类型 | 长度 | 小数位 | 允许空值 | 主键 | 默认值 | 说明 |
1 | group_id | mediumint | 8 | 0 | N | Y | 用户组ID:[0,8388607] | |
2 | display | smallint | 5 | 0 | N | N | 100 | 显示顺序:[0,1000] |
3 | name | varchar | 16 | 0 | N | N | 名称:[0,16] | |
4 | description | varchar | 255 | 0 | Y | N | 描述:[0,255]描述该用户组的特点或权限范围 | |
5 | source_table | varchar | 255 | 0 | Y | N | 来源表: | |
6 | source_field | varchar | 255 | 0 | Y | N | 来源字段: | |
7 | source_id | int | 10 | 0 | N | N | 0 | 来源ID: |
8 | register | smallint | 5 | 0 | Y | N | 0 | 注册位置: |
9 | create_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 创建时间: |
10 | update_time | timestamp | 19 | 0 | N | N | CURRENT_TIMESTAMP | 更新时间: |
第四章 系统详细设计与实现
4.1用户端-买家用户功能模块
4.1.1前台首页界面
系统首页以上中下的布局进行展示,正上方是系统的导航栏,中间是轮播图,下面是外卖信息、外卖资讯等信息,其界面展示如下图4-1所示。
![](https://i-blog.csdnimg.cn/direct/664c375b69844e8fae855d3793a45d7d.png)
图4-1前台首页界面图
4.1.2用户注册界面
用户点击右上角的“注册”进入注册页面,填写账号、密码、昵称、邮箱等信息后点击“立即注册”,系统会对输入的信息进行验证,验证通过后即可完成注册,其界面展示如下图4-2所示。
![](https://i-blog.csdnimg.cn/direct/14b8f718420640708dcc377ca7c929fa.png)
图4-2用户注册界面图
注册的关键代码如下:
Register.prototype.index = async function(ctx) {
var group_list = await $.services["user_group"].get_list({}, Object.assign({}, this.config));
return await ctx.render(this.config.tpl + "index.html", {
group_list
});
};
Register.prototype.api = async function(ctx) {
var user = $.services.user;
var body = ctx.request.body;
var username = body.username;
var obj = await user.get_obj({
username
});
if (obj) {
return {
error: {
code: 70000,
message: "账户名已存在",
},
};
} else {
var password = md5(body.password);
var nickname = body.nickname;
var user_group = body.user_group;
var email = body.email;
var email_state= body.hasOwnProperty('email_state') ? body.email_state : 0;
var phone = body.phone;
var phone_state= body.hasOwnProperty('phone_state') ? body.phone_state : 0;
var avatar = body.avatar;
var bl_reg = await user.add({
username,
password,
nickname,
user_group,
email,
email_state,
phone,
phone_state,
avatar
});
if (bl_reg) {
return {
result: "注册成功"
};
} else {
return {
error: {
code: 70000,
message: "注册失败",
},
};
}
}
};
4.1.3用户登录界面
已注册用户可以通过账号密码进行登录,系统会验证输入的信息与数据库中当前保存的用户信息是否一致,验证通过后即可完成登录,其界面展示如下图4-3所示。
![](https://i-blog.csdnimg.cn/direct/ae3c12e1f456444c808c1eb2f6b8f3a6.png)
图4-3用户登录界面图
登录的关键代码如下:
const md5 = require("md5");
var Controller = require("../core/controller.js");
class Login extends Controller {
constructor(config) {
super(
Object.assign({
tpl: "./login/",
service: "user",
},
config
)
);
}
}
Login.prototype.api = async function(ctx) {
var body = ctx.request.body;
var obj = await $.services["user"].get_obj({
username: body.username
},{like:false});
if (obj) {
var group = await $.services["user_group"].get_obj({
name:obj.user_group
})
if (group){
if (group.name!=="管理员"){
var sql = "select examine_state from "+ group.source_table +" WHERE user_id = " + obj.user_id;
var userExamine = await $.mysql.run(sql);
if (userExamine && userExamine.length > 0 && userExamine[0].examine_state!=="已通过"){
return {
error: {
code: 70000,
message: "该用户审核未通过"
},
};
}
}
if (obj.state!==1){
return {
error: {
code: 70000,
message: "用户非可用状态,不能登录"
},
};
}
var password = md5(body.password);
if (password === obj.password) {
ctx.session.user = obj;
var date = Date.parse(new Date());
var token = md5(obj.user_id + "_" + date);
await $.services["access_token"].add({
token,
info: JSON.stringify(obj),
user_id:obj.user_id
});
obj.token = token;
return {
result: {obj}
};
} else {
return {
error: {
code: 70000,
message: "密码错误"
},
};
}
}else {
return {
error: {
code: 70000,
message: "用户组不存在"
},
};
}
} else {
return {
error: {
code: 70000,
message: "账户不存在"
}
};
}
};
4.1.4外卖资讯界面
用户可以查看外卖资讯列表中的某一资讯详情并可以进行点赞、收藏和发表评论操作,其界面展示如下图4-4所示。
![](https://i-blog.csdnimg.cn/direct/d3153c29025945d6b7070cf8fd7b4c7e.png)
图4-4外卖资讯界面图
4.1.5外卖信息界面
用户可以查看外卖信息列表中的某一外卖详情并可以进行点赞、加入购物车或立即购买操作,其界面展示如下图4-5所示。
![](https://i-blog.csdnimg.cn/direct/960667f6a6f54b14a6e6174911c7190e.png)
图4-5外卖信息界面图
4.1.6商城管理界面
用户可以查看和管理我的购物车、我的订单和我的地址信息,其界面展示如下图4-6所示。
![](https://i-blog.csdnimg.cn/direct/ee16b7cc1be24e808c4857150a02163f.png)
图4-6商城管理界面图
4.1.7个人中心界面
用户可以查看和管理配送订单、订单配送、收藏信息,其界面展示如下图4-7所示。
![](https://i-blog.csdnimg.cn/direct/8b494700503d4ec994415fb02f6eefd6.png)
图4-7个人中心界面图
4.2 后台端-管理员功能模块
4.2.1系统用户界面
管理员可以查看某一用户信息详情,可以对系统用户信息进行查询、添加和删除操作,其界面展示如下图4-8所示。
![](https://i-blog.csdnimg.cn/direct/06418a86041748699b970613fb23fd88.png)
图4-8系统用户界面图
添加的关键代码如下:
Controller.prototype.add = async function(ctx) {
var result = await this.service.add(ctx.request.body, this.config);
if (this.service.error) {
return {
error: this.service.error,
};
}
return {
result,
};
};
删除的关键代码如下:
Controller.prototype.del = async function(ctx) {
if (!Object.keys(ctx.query).length) {
return {
code: 30000,
message: "删除条件不能为空!",
};
}
var result = await this.service.del(ctx.request.query, this.config);
if (this.service.error) {
return {
error: this.service.error,
};
}
return {
result,
};
};
4.2.2系统管理界面
管理员可以查看轮播图列表中的某一轮播图信息详情,可以对系统轮播图信息进行查询、添加和删除操作,其界面如下图4-9所示。
![](https://i-blog.csdnimg.cn/direct/130e98ee41644c7cbc2bf53742de518b.png)
图4-9系统管理界面图
图片上传的关键代码如下:
Controller.prototype.upload = async function(ctx) {
var req = ctx.request;
var query = req.query;
var url = "";
if (req.files && req.files.file) {
var f = req.files.file;
const render = fs.createReadStream(f.path);
var name = f.name;
var dir = f.dir || "";
var file = _dir + dir + name;
try {
if (fs.existsSync(file)) {
var arr = name.split(".");
name = arr[0];
var extension = arr[arr.length - 1];
var num = 10000;
for (var i = 0; i < num; i++) {
var na = name + "_" + (i + 1) + "." + extension;
file = path.join(_dir, na);
if (!fs.existsSync(file)) {
name = na;
break;
}
}
}
const upStream = fs.createWriteStream(file);
render.pipe(upStream);
url = _path + name;
} catch (e) {
console.log("上传失败:", e);
}
return {
result: {
url
}
};
} else {
return {
code: 10000,
message: "上传的文件(file)不能为空!",
};
}
};
4.2.4通知公告管理界面
管理员可以查看通知公告列表中的某一通知公告信息详情,可以对通知公告信息进行查询、添加和删除操作,其界面如下图4-10所示:
![](https://i-blog.csdnimg.cn/direct/bf4193156cd341a996dcc4dafd03dfb3.png)
图4-10通知公告管理界面图
4.2.5资源管理界面
管理员可以添加资讯分类信息,可以查看外卖资讯列表中的某一资讯信息详情和评论,可以对外卖资讯信息进行查询、添加和删除操作,其界面如下图4-11所示:
![](https://i-blog.csdnimg.cn/direct/0e42829c5e5641f8aae017315a618410.png)
图4-11资源管理界面图
4.2.6商城管理界面
管理员可以查看和管理外卖信息、分类信息、订单列表和订单配送信息,其界面如下图4-12所示:
![](https://i-blog.csdnimg.cn/direct/52ac04156288408c94c7b3672ed05bfe.png)
图4-12资源管理界面图
4.3 后台端-卖家功能模块
4.3.1后台首页界面
用户可以查看后台首页展示的商品销售金额、商品销售数量等统计图信息,其界面如下图4-13所示。
![](https://i-blog.csdnimg.cn/direct/f55a82a28f0f48c7a87acefc77233e65.png)
图4-13后台首页界面图
4.3.2商城管理界面
用户可以对外卖信息进行查询、添加和删除操作,可以查看和管理订单列表和订单配送信息,其界面如下图4-14所示。
![](https://i-blog.csdnimg.cn/direct/413f2e4b06f4415e950b274abed5cfd9.png)
图4-14商城管理界面图
4.4 后台端-配送员功能模块
4.4.1配送订单管理界面
用户可以查看配送订单列表中某一订单详情并提交配送状态和配送描述信息,其界面如下图4-15所示:
![](https://i-blog.csdnimg.cn/direct/ce2e7b9c28a34a74bb63ebdc23145f1a.png)
图4-15配送订单管理界面图
第五章 系统测试
系统开发到了最后一个阶段那就是系统测试,系统测试对软件的开发其实是非常有必要的。因为没什么系统一经开发出来就可能会尽善尽美,再厉害的系统开发工程师也会在系统开发的时候出现纰漏,系统测试能够较好的改正一些错误,为后期系统的维护性提供很好的支持。通过系统测试,开发人员也可以建立自己对系统的信心,为后期的系统版本的跟新提供支持。
5.2 测试用例
系统测试包括:用户登录功能测试、外卖信息查看功能、管理员删除系统用户功能、卖家添加外卖信息功能、配送员修改配送订单状态功能、密码修改功能测试,如表5-1、5-2、5-3、5-4、5-5、5-6所示:
表5-1 用户登录功能测试表
用例名称 | 用户登录系统 |
目的 | 测试买家用户登录功能 |
前提 | 未登录的情况下 |
测试流程 | 1) 进入登录页面 2) 输入正确的用户名和密码 |
预期结果 | 用户名和密码正确的时候,跳转到登录成功界面,反之则显示错误信息,提示重新输入 |
实际结果 | 实际结果与预期结果一致 |
外卖信息查看功能测试:
表5-2 外卖信息查看功能测试表
用例名称 | 外卖信息查看 |
目的 | 测试外卖信息查看功能 |
前提 | 买家用户登录 |
测试流程 | 点击导航栏的外卖信息 |
预期结果 | 可以查看到所有外卖信息 |
实际结果 | 实际结果与预期结果一致 |
管理员删除系统用户界面测试:
表5-3 管理员删除系统用户界面测试表
用例名称 | 删除系统用户测试用例 |
目的 | 测试系统用户删除功能 |
前提 | 管理员正常登录情况下 |
测试流程 | 1)点击系统用户,然后选择要删除的用户信息。 2)点击删除。 |
预期结果 | 提交以后,用户列表将不再显示此用户的信息 |
实际结果 | 实际结果与预期结果一致 |
卖家添加外卖信息界面测试:
表5-4 卖家添加外卖信息界面测试表
用例名称 | 添加外卖信息测试用例 |
目的 | 测试外卖信息添加功能 |
前提 | 卖家正常登录情况下 |
测试流程 | 1)点击商城管理下方的外卖信息,然后点击外卖信息添加。 2)填写外卖信息并提交。 |
预期结果 | 提交以后,买家用户可以在外面信息列表看到新增的外卖信息 |
实际结果 | 实际结果与预期结果一致 |
配送员修改配送状态界面测试:
表5-5 配送员修改配送状态界面测试表
用例名称 | 修改配送状态测试用例 |
目的 | 测试修改配送状态功能 |
前提 | 配送员正常登录情况下 |
测试流程 | 1)点击配送订单管理,然后配送订单列表中某一订单信息详情。 2)修改订单状态并提交。 |
预期结果 | 买家用户列表可以在个人中心的配送订单中看到配送状态 |
实际结果 | 实际结果与预期结果一致 |
密码修改功能测试:
表5-6密码修改功能测试表
用例名称 | 密码修改测试用例 |
目的 | 测试买家用户密码修改功能 |
前提 | 买家用户正常登录情况下 |
测试流程 | 1)买家用户点“我的”下方的“我的账户”进入页面,点击密码修改并完成填写。 2)点击进行提交。 |
预期结果 | 使用新的密码可以登录 |
实际结果 | 实际结果与预期结果一致 |
通过编写基于VUE + Node的外卖系统的测试用例,已经检测完毕用户登录功能测试、外卖信息查看功能、管理员删除系统用户功能、卖家添加外卖信息功能、配送员修改配送订单状态功能、密码修改功能测试通过这些测试为基于VUE + Node的外卖系统的后期推广运营提供了强力的技术支撑。
第六章 结 论
在开发基于VUE + Node的外卖系统之前,需对用户的实际需求进行分析。这不仅包括对系统的可行性研究,还包括对功能需求和其他需求的详细分析。在可行性分析阶段,本人从技术性和经济性等多个角度对系统实现的可能性进行了全面评估,结果表明,该系统的实施是可行的。
本文首先概述了基于VUE + Node的外卖系统开发的背景及其意义,接着详细阐述了系统的具体业务需求,并根据这些需求对系统的结构以及功能模块进行了精细的设计。这个系统划分为多个独特的功能模块,每个模块都具有其独特的功能和作用。
在深入分析系统功能需求的过程中,本人对系统的总体架构和功能模块进行了深入研究,并选择了最适合的系统开发技术来完成各个模块的开发工作。系统开发完成后进行了系统的测试。测试结果表明,该系统在功能和性能方面都满足了预期的要求,具有极高的稳定性和可靠性。
参考文献
[1]冯爱兰,周映雪,龚艳茹等.抢派结合模式下外卖配送问题研究[J/OL].控制与决策,2022.
[2]Changliang G .Design and Application of a Multi-Semantic Art Education Communication Platform[J].International Journal of Web-Based Learning and Teaching Technologies (IJWLTT),2023,18(2):1-17.
[3]刘鑫.基于用户体验的外卖平台适老化设计研究[D].山东大学,2023.
[4]张猛,何姗姗.基于Vue+Node.js的智能小区数据管理系统设计与实现[J].电脑知识与技术,2023,19(14):46-49+53.
[5]李娟.基于Vue+Node的高职院校学生成绩管理系统设计与实现[J].现代信息科技,2023,7(09):115-117.
[6]孟帅.外卖订单分配及路径优化问题研究[D].兰州交通大学,2023.
[7]潘茂盛.AL公司外卖平台运营管理优化研究[D].桂林理工大学,2023.
[8]杭州市网络餐饮外卖配送监督管理办法[J].杭州市人民政府公报,2023,(03):3-5.
[9]盖露阳,李锦凯,李函之.基于模糊分析法的外卖骑手送餐模式探索[J].高等数学研究,2023,26(02):35-40.
[10]倪寒飞.美团外卖——我国外卖行业的新星[J].商业观察,2023,9(07):18-20.
[11]毕东海,茆正平.关于当下如何推动外卖行业发展的分析[J].内蒙古科技与经济,2023,(04):77-79+118.
[12]Reid B ,D'Amorim M ,Wagner M , et al.NCQ: Code Reuse Support for Node.js Developers[J].IEEE Transactions on Software Engineering,2023,49(5):3205-3225.
[13]刘仁华.O2O模式下基于VUE + Node的外卖系统订单分配与路径优化研究[D].兰州交通大学,2022.
[14]李心宇.基于排队论的供需匹配视角下外卖订单众包配送效率优化研究[D].江汉大学,2021.
[15]郑云祥,张心怡,邹林等.无接触智能外卖配送系统设计[J].电子制作,2021,(09):35-37+25.
[16]Nian L ,Bo Z .The Research on Single Page Application Front-end development Based on Vue[J].Journal of Physics: Conference Series,2021,1883(1):
[17]Mathematics; Study Findings from Lanzhou Jiaotong University Broaden Understanding of Mathematics (Research on Coordination and Optimization of Order Allocation and Delivery Route Planning in Take-Out System)[J].Journal of Mathematics,2020,1229-.
[18]胡新敏.Vue框架的渲染算法优化[D].大连理工大学,2020.
[19]Guofeng S ,Zhiqiang T ,Renhua L , et al.Research on Coordination and Optimization of Order Allocation and Delivery Route Planning in Take-Out System[J].Mathematical Problems in Engineering,2020,2020
[20]朱君,赵梓同.基于Node.js的旅游资源可视化构建平台设计与实现[J].电子技术与软件工程,2022,(03):62-66.
致 谢
首先,我要感谢我的论文指导老师。在论文完成的整个过程中,指导老师始终给予我无微不至的关爱与指导。在论文写作的过程中,导师那耐心细致的指导,以及提出的具有建设性的意见,都给予了我极大的帮助,让我受益匪浅。导师严谨的治学态度、敬业精神以及高水平的教学能力,都给我树立了追求卓越的典范,这对我以后的人生道路和学业成就都产生了极大的积极影响。
此外,我还要感谢我班的同学们,他们既是我的同窗好友,又是我的良师益友。正是由于你们的支持和关怀,使得我在大学期间的学习和生活都变得异常充实。感谢那些在大学期间给予我帮助的所有老师和同学们,是你们给予了我在学业道路上的前进动力。
最后,我要感谢我的父母,是他们用无私的爱抚养我成人。你们的养育之恩我将永生难忘,将来我一定会用我的成绩回报你们。在成长的道路上,我会不断努力,不负众望,用实际行动来回报你们对我的期望。
请关注点赞+私信博主,免费领取项目源码