springboot+Vue的电商应用系统

一、技术路线:

开发语言:Java

使用框架:spring boot

前端技术:JavaScript、VUE.js(2.X)、css3

数据库:MySQL 5.7

数据库管理工具:Navicat或sqlyog

开发工具:IDEA或Ecplise

二、项目介绍:

https://www.bilibili.com/video/BV1np4y1L7YH?t=31.4


三、运行截图:

系统实现部分就是将系统分析,系统设计部分的内容通过编码进行功能实现,以一个实际应用系统的形式展示系统分析与系统设计的结果。前面提到的系统分析,系统设计最主要还是进行功能,系统操作逻辑的设计,也包括了存储数据的数据库方面的设计等内容,系统实现就是一个最终的实施阶段,将前面的设计成果进行物理转化,最终出具可以运用于实际的软件系统。

3.1 管理员功能介绍

3.1.1 管理员管理

如图3.1显示的就是管理员管理页面,管理员可以对管理员信息进行添加,修改,删除,查询操作。

95063fddbae3c9836e6386224545c270.jpeg


图3.1 管理员管理页面

3.1.2 公告类型管理

如图3.2显示的就是公告类型管理页面,管理员可以对公告类型信息进行添加,修改,删除,查询操作。

df9b28dc2c65ae0ce00533e7c6413cd5.jpeg


图3.2 公告类型管理页面

3.1.3 论坛管理

如图3.3显示的就是论坛管理页面,管理员可以对论坛信息进行添加,修改,删除,查询操作。

a330137511d349eab431c2b180ae1251.jpeg


图3.3 论坛管理页面

3.1.4 商品类型管理

如图3.4显示的就是商品类型管理页面,管理员可以对商品类型信息进行添加,修改,删除,查询操作。

f2623917c58efb403fb1a5fd4097cb06.jpeg


图3.4 商品类型管理页面

3.1.5 商品信息管理

如图3.5显示的就是商品信息页面,管理员可以对商品信息进行添加,修改,删除,查询操作。

e9af4ce8023a1aa6c60d9d1dd9d67ac3.jpeg


图3.5 商品信息管理页面

3.1.6 轮播图管理

如图3.6显示的就是轮播图管理页面,管理员可以对轮播图信息进行添加,修改,删除,查询操作。

508a9f18684beb2939121e707880d9e6.jpeg


图3.6 轮播图管理页面

3.1.7 公告信息管理

如图3.7显示的就是公告信息管理页面,管理员可以对公告信息进行添加,修改,删除,查询操作。

9155e415c0f0584f723cf8f59c1fc847.jpeg


图3.7 公告信息管理页面

3.1.8 用户信息管理

如图3.8显示的就是用户信息页面,管理员可以对用户信息进行添加,修改,删除,查询操作。

ea964fd314c5f3451da82a89d9c210f2.jpeg


图3.8 用户信息管理页面

3.2 用户功能介绍

3.2.1 个人中心

如图3.9显示的就是个人中心页面,用户注册登录后点击个人中心可以修改个人资料和查看自己的收藏信息。

c536f44ced455bef118ceafc26481f5d.jpeg


图3.9 个人中心页面

3.2.2 公告信息

如图3.10显示的就是公告信息页面,用户可以在公告信息界面查看公告信息。

0c373ead662a2bc3eca27fe6b5f04668.jpeg


图3.10 公告信息页面

3.2.3 商品信息

如图3.11显示的就是商品信息页面,用户点击商品信息可以查看商品信息,可以添加到购物车和立即购买。

9f1da6a37aa5bae5d7492d4a8cfa2f5e.jpeg


图3.11 商品信息页面

3.2.4 购物车

如图3.12显示的就是购物车页面,用户登录后可以点击购物车,可以看到已经加入购物车的商品,可以对这些商品进行删除和修改数量以及点击购买操作。

522227bb77549a57e9fcbd4723b4ae15.jpeg


图3.12 购物车页面

3.2.5 我的订单

如图3.13显示的就是我的订单页面,用户登录后可以点击我的订单,可以看到自己的订单状态。

ebadaeb766cbdb1bd60d9e26ea3b1890.jpeg


图3.13 我的订单页面

一个完整的外卖系统,包括手机端,后台管理,api 基于spring boot和vue的前后端分离的外卖系统 包含完整的手机端,后台管理功能 技术选型 核心框架:Spring Boot 数据库层:Spring data jpa/Spring data mongodb 数据库连接池:Druid 缓存:Ehcache 前端:Vue.js 数据库:mysql5.5以上,Mongodb4.0(不要使用最新版4.2) 模块 flash-waimai-mobile 手机端站点 flash-waimai-manage后台管理系统 flash-waimai-api java接口服务 flash-waimai-core 底层核心模块 flash-waimai-generate 代码生成模块 快速开始 数据存储采用了mysql和mongodb,其中基础管理配置功能数据使用mysql,业务数据使用mongodb存储。 创建mysql数据库 CREATE DATABASE IF NOT EXISTS waimai DEFAULT CHARSET utf8 COLLATE utf8_general_ci; CREATE USER 'waimai'@'%' IDENTIFIED BY 'waimai123'; GRANT ALL privileges ON waimai.* TO 'waimai'@'%'; flush privileges; mysql数据库创建好了之后,启动flash-waimai-api服务,会自动初始化数据,无需开发人员自己手动初始化数据 安装mongodb并创建数据库:flash-waimai 使用mongorestore命令 导入mongodb数据,由于测试数据量较大,打包放在了百度云盘:链接:https://pan.baidu.com/s/1mfO7yckFL7lMb_O0BPsviw 提取码:apgd 下载后将文件解压到d:\elm,如下命令导入数据: mongorestore.exe -d flash-waimai d:\\elm 下载项目测试数据的图片(商家和食品图片):链接:https://pan.baidu.com/s/1rvZDspoapWa6rEq2D_5kzw 提取码:urzw ,将图片存放到t_sys_cfg表中system.file.upload.path配置的目录下 启动管理平台:进入flash-waimai-manage目录:运行 npm install --registry=https://registry.npm.taobao.org运行npm run dev启动成功后访问 http://localhost:9528 ,登录,用户名密码:admin/admin 启动手机端:进入flash-waimai-mobile目录:运行 npm install --registry=https://registry.npm.taobao.org运行npm run local启动成功后访问 http://localhost:8000
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值