ssm基于MVC构架的网上食品店+vue

第5章系统实现

一、技术路线：

开发语言：Java

前端技术：JavaScript、VUE.js（2.X）、css3

数据库：MySQL 5.7

数据库管理工具：Navicat或sqlyog

开发工具：IDEA或Ecplise

二、项目介绍：

https://www.bilibili.com/video/BV1k84y197x4/

三、运行截图：

3.1用户注册功能的界面实现

   用户注册功能设计的目的是实现用户的操作。系统中想要进行操作就需要先成为注册用户，游客只能浏览信息。用户注册功能界面中设置了用户的资料字段，本界面的数据和用户信息表相连，当游客在本界面里注册成功，所填写的资料会保存到用户信息表中。用户注册功能的运行界面如下图3-1所示：

图3-1用户注册功能的运行界面

3.2登录功能的界面实现

用户注册成功后，需要登录。登录界面设计的目的是保证当前的使用角色等级。管理员同样需要登录后才可以进行操作。用户登录和管理员登录的界面分为两个，在登录时只需要填写用户账号和密码就可以实现。用户登录的运行界面如下图3-2所示：

图3-2用户登录的运行界面

管理员登录的界面中包含的元素有系统题目、输入框、登录按钮。管理员登录的条件是需要账号、密码、身份。管理员登录的运行界面如下图3-3所示：

图3-3管理员登录运行界面

3.3管理员功能的设计实现

3.3.1用户管理功能的实现界面

用户注册后的资料管理员可以在注册用户管理功能里看到，本功能设计的目的是审核注册用户的资料，当发现不当的使用用户可以删除其账号。当删除注册用户信息后相对应的用户信息表里的信息也会随着删除掉。用户管理功能的运行界面如下图3-4所示：

图3-4用户管理功能的运行界面

3.3.2 个人中心管理功能的实现界面

   本功能可以实现对管理员登录密码、资料的修改。个人信息管理功能的运行界面如下图3-5所示：

图3-5个人信息管理功能的运行界面

3.3.3轮播图管理功能的实现界面

   用户浏览的轮播图都是由管理员在此功能里进行维护添加的，同样当管理员添加、编辑轮播图信息后，数据库表中的轮播图信息表也会发生改变。轮播图管理功能的运行界面如下图3-6所示：

图3-6轮播图管理功能的运行界面

3.3.4 基础数据管理功能的实现界面

    本功能可以管理分类信息、地区信息、公告类型信息、适宜人群信息，商品类型实现商品的条理管理。商品类型管理功能的运行界面如下图3-7所示：

图3-7商品类型管理运行界面

地区管理运行界面如下图3-8所示：

图3-8地区管理的运行界面展示

公告类型管理功能的实现界面如下图3-9所示：

图3-9公告类型管理功能的实现

适宜人群管理功能的实现界面如下图3-10所示：

图3-10查询适宜人群信息的实现

3.3.5 订单管理功能的实现界面

用户下订单后，管理员都可以在本功能里收到。当审核订单无误后可以进行下一步操作。本功能还可以看到用户否支付。订单管理功能的运行界面如下图3-11所示：

图3-11订单管理功能的运行界面

3.3.6 商品信息管理功能的界面实现

   商品信息由管理员进行更新，在发布商品信息时可以显示发布时间。商品信息管理的运行界面如下图3-12所示：

图3-12商品信息管理功能的运行界面

3.3.7商品评价管理功能的实现

　　管理员可以查看和管理用户的评论信息，还可以回复，商品评价实现界面如下图3-13所示：

图3-13商品评价管理的实现界面

3.3.8论坛管理功能的实现

管理员可以审核用户的帖子以及回复用户的帖子。实现界面如下图3-14所示：

图3-14回复帖子管理功能的实现界面

3.3.9公告管理功能的实现界面

    管理员可以新增和删除、修改公告内容。管理员查询公告信息的实现界面如下图3-15所示：

图3-15查询公告信息的实现

3.4用户角色功能的界面实现

3.3.1商品信息浏览功能的界面实现

   用户的功能主要展示在前台，在前台可以浏览所有分类的商品。商品详情中主要展示商品的图片、价格、标题。商品信息浏览功能的运行界面如下图3-16所示：

图3-16浏览商品运行界面

商品详情的实现界面如下图3-17所示：

图3-17商品详情的实现界面

3.3.2提交订单功能的实现界面

    选择商品点击购买可以跳转到提交订单界面，在本界面里需要收货地址。提交订单功能的运行界面如下图3-18所示：

图3-18用户提交订单的运行界面

3.3.3订单管理功能的实现界面

用户在提交订单后可以在个人后台里看到订单后的订单信息，可以进行一定的修改。订单管理功能的运行界面如下图3-19所示：

图3-19订单管理功能的运行界面

3.3.4购物车管理功能的界面实现

用户可以在购物车里修改购买的数量和删除商品、进行结账。购物车管理功能的实现界面如下图3-20所示：

图3-20购物车管理功能的实现界面

3.3.5用户个人中心功能的实现界面

用户可以进入个人中心修改查看自己的个人信息等，实现界面如下图3-21所示：

图3-21用户个人中心的实现界面

3.3.6收货地址管理功能的实现

    用户可以设置自己的收货地址并修改和删除。实现界面如下图3-22所示：

图3-22收货地址管理功能的实现界面

3.3.7用户后台功能的实现

    在用户的后台里可以管理自己的帖子信息和订单信息、评论信息、收藏信息。实现界面如下图3-23所示：

图3-23用户后台功能的实现界面

3.3.8论坛功能的实现界面

    用户在前台可以浏览论坛帖子内容并可以发表自己的帖子，实现界面如下图3-24所示：

图3-24发布帖子的信息实现

3.3.9公告信息功能的实现

    用户在前台可以浏览公告信息，公告信息也分为不同的分类方便用户查询。公告信息的实现界面如下图3-25所示：

图3-25公告信息的实现界面