基于Java+SpringBoot+vue+element实现前后端分离蛋糕商城系统详细设计
Posted java李杨勇
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于Java+SpringBoot+vue+element实现前后端分离蛋糕商城系统详细设计相关的知识,希望对你有一定的参考价值。
博主介绍:✌公司项目主程、全网粉丝15W+,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,CSDN博客之星TOP100、掘金/华为云/阿里云/InfoQ/51CTO等平台优质作者、专注于Java技术领域和毕业设计✌
公众号:java李杨勇 简历模板、学习资料、面试题库等都给你💪
🍅文末获取源码联系🍅
前言介绍:
随着社会的快速发展,计算机的影响是全面且深入的。人们生活水平的不断提高,日常生活中用户对网上蛋糕商城方面的要求也在不断提高,网上蛋糕商城得到广大用户的青睐,使得网上蛋糕商城的开发成为必需而且紧迫的事情。网上蛋糕商城主要是借助计算机,通过对网上蛋糕商城所需的信息管理,增加用户的选择,同时也方便对广大用户信息的及时查询、修改以及对用户信息的及时了解。网上蛋糕商城对用户带来了更多的便利,该系统通过和数据库管理系统软件协作来满足用户的需求。计算机技术在现代管理中的应用,使计算机成为人们应用现代技术的重要工具。能够有效的解决获取信息便捷化、全面化的问题,提高效率。
流程分析:
系统开发流程
网上蛋糕商城系统开发时,首先进行需求分析,进而对系统进行总体的设计规划,设计系统功能模块,数据库的选择等,本系统的开发流程如图所示
图系统开发流程图
用户登录流程
为了保证系统的安全性,要使用本系统对系统信息进行管理,必须先登陆到系统中。如图所示。
图登录流程图
系统操作流程
用户打开并进入系统后,会先显示登录界面,输入正确的用户名和密码,系统自动检测信息,若信息无误,则用户会进入系统功能界面,进行操作,否则会提示错误无法登录,操作流程如图3-3所示。
图系统操作流程图
功能截图:
用户前台展示:
系统首页:
用户登陆注册:用户要想实现蛋糕购买操作必须进行登录系统,用户登录界面展示如图用户登录界面图所示;在用户信息添加界面,填写信息后,通过客户端验证后,提交数据到数据库。后台对用户信息进行保存操作,保存数据就,在数据库中可以查看到刚才录入的数据。用户注册在操作上属于数据的插入操作,用户注册前,需要验证该用户是否存在数据库,如果有这个用户,就不能继续注册
商家店铺信息:
店铺详情信息:
蛋糕商品展示:用户在蛋糕详情界面可查看家具详情,可点击购买按钮进行购买操作,蛋糕详情界面展示如图所示
商品详情信息:
加入购物车:用户可进购物车界面查看购物车蛋糕信息,购物车界面展示如图所示。点击收银台按钮时进入地址填写界面。
购买和订单管理:在用户点击加入购物车后,通过客户端验证后,提交数据到数据库。后台对用户信息进行保存操作,保存数据就,在数据库中可以查看到刚才插入的数据。
用户在我的订单界面可查看订单信息,对已发货的订单可进行确认收货操作,我的订单界面展示如图我的订单界面图所示。
蛋糕资讯:
个人中心管理:
普通用户后台管理:
管理员后台管理:
管理员要想进入系统后台对系统进行管理操作,必须进行登录,管理员登录界面展示如图所示
用户管理:管理员可查看所有会员信息,并可修改会员资料以及删除操作,会员管理界面展示如图所示
蛋糕商家管理:
蛋糕类型管理:管理员可添加、编辑和删除蛋糕分类信息,蛋糕分类管理界面展示如图所示点击蛋糕分类管理链接,录入蛋糕分类信息。在蛋糕分类信息添加界面,填写信息后,通过客户端验证后,提交数据到数据库。后台对蛋糕分类信息进行保存操作,保存数据就,在数据库中可以查看到刚才录入的数据。录入蛋糕分类信息后,在蛋糕分类列表中,通过后台查询方法,把所有的蛋糕分类信息读取到集合对象,把集合对象通过html的方式显示到界面。查询有两种类型,一个是查询所有的蛋糕分类集合,也可以通过条件查询蛋糕分类,实现的sql语句不同而已,最终实现的流程一样。在列表中,可以对蛋糕分类信息进行删除,删除前,需要提示信息,是否确定删除。这一步骤的提示属于客户端控制,当确定删除后,调用服务器端删除方法,实现数据库数据删除,并刷新蛋糕分类列表。
蛋糕商品详情:管理员可进行蛋糕管理操作,可添加、删除和编辑蛋糕信息,蛋糕管理界面展示如图所示
订单信息管理:管理员可进行订单管理操作,可查看所有订单信息,并可对其订单进行发货和删除操作,订单管理界面展示如图所示。
蛋糕资讯以及系统轮播图等维护管理:
数据设计:
本系统采用mysql数据库作为数据存储,下面介绍数据库中的各个表的详细信息。
管理员表是保存在线蛋糕销售的用户信息表,其中表结构如4.1所示。
表4-1 admin管理员表
列名 | 解释 | 类型 | 大小 | 主键 | 空 |
Idyaopin | 主键 | int | 4 | 是主键 | 不能为空 |
Usernameyaopin | 用户名 | varchar | 50 | 不是 | 可以为空 |
Passwordyaopin | 密码 | varchar | 50 | 不是 | 可以为空 |
typeyaopin | 类型 | varchar | 30 | 不是 | 可以为空 |
订单表是保存在线蛋糕销售的订单信息表,其中id为主键,表结构如4.2所示。
表4-2 orders订单表
列名 | 解释 | 类型 | 大小 | 主键 | 空 |
idyaopin | 主键 | int | 11 | 是主键 | 不能为空 |
onumberyaopin | 订单号 | varchar | 50 | 不是 | 可以为空 |
Spcyaopin | 商品 | varchar | 50 | 不是 | 可以为空 |
Slcyaopin | 数量 | varchar | 50 | 不是 | 可以为空 |
addressyaopin | 地址 | varchar | 50 | 不是 | 可以为空 |
teyaopin | 电话 | varchar | 13 | 不是 | 可以为空 |
emailyaopin | 用户邮箱 | varchar | 20 | 不是 | 可以为空 |
shffyaopin | 收货 | varchar | 60 | 不是 | 可以为空 |
zfffyaopin | 用户支付 | varchar | 10 | 不是 | 可以为空 |
leavewordyaopin | 用户留言 | varchar | 2000 | 不是 | 可以为空 |
addtimeyaopin | 日期 | time | 不是 | 可以为空 | |
xnameyaopin | 下单人 | varchar | 10 | 不是 | 可以为空 |
ztyaopin | 订单的状态 | varchar | 2 | 不是 | 可以为空 |
totalyaopin | 总价格 | varchar | 10 | 不是 | 可以为空 |
kuaidiyaopin | 快递名称 | varchar | 20 | 不是 | 可以为空 |
knumberyaopin | 单号 | int | 20 | 不是 | 可以为空 |
Receiveryaopin | 收货人姓名 | varchar | 10 | 不是 | 可以为空 |
类别表是保存蛋糕销售的类别信息表,其中id为主键,表结构如4.3所示。
表4-3 category类别表
列名 | 解释 | 类型 | 大小 | 主键 | 空 |
idyaopin | 主键 | int | 4 | 是主键 | 不能为空 |
pidyaopin | 分类类型 | int | 6 | 不是 | 可以为空 |
titleyaopin | 分类名称 | varchar | 60 | 不是 | 可以为空 |
商品表是保存蛋糕销售的商品信息表,其中id为主键,表结构如4.4所示。
表4-4 goods商品表
列名 | 解释 | 类型 | 大小 | 主键 | 空 |
idyaopin | 主键 | int | 4 | 是主键 | 不能为空 |
pidyaopin | 类型编号 | int | 4 | 不是 | 可以为空 |
categoryidyaopin | 分类编号 | int | 4 | 不是 | 可以为空 |
pnumberyaopin | 商品的编号 | varchar | 10 | 不是 | 可以为空 |
titleyaopin | 商品的名称 | varchar | 10 | 不是 | 可以为空 |
amountyaopin | 库存数量 | int | 10 | 不是 | 可以为空 |
cishuyaopin | 销量 | int | 10 | 不是 | 可以为空 |
mpriceyaopin | 市场的价格 | decimal | 10 | 不是 | 可以为空 |
spriceyaopin | 会员的价格 | decimal | 10 | 不是 | 可以为空 |
contentyaopin | 详细介绍 | text | 不是 | 可以为空 | |
apvyaopin | 点击 | int | 4 | 不是 | 可以为空 |
imgyaopin | 图片 | varchar | 50 | 不是 | 可以为空 |
statusyaopin | 状态 | int | 2 | 不是 | 可以为空 |
addtimeyaopin | 添加时间 | timestamp | 不是 | 可以为空 |
部分代码:
/**
* 订单
* 后端接口
* @author
* @email
* @date 2022-03-27 17:11:41
*/
@RestController
@RequestMapping("/orders")
public class OrdersController
@Autowired
private OrdersService ordersService;
/**
* 后端列表
*/
@RequestMapping("/page")
public R page(@RequestParam Map<String, Object> params,OrdersEntity orders,
HttpServletRequest request)
if(!request.getSession().getAttribute("role").toString().equals("管理员"))
orders.setUserid((Long)request.getSession().getAttribute("userId"));
EntityWrapper<OrdersEntity> ew = new EntityWrapper<OrdersEntity>();
PageUtils page = ordersService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, orders), params), params));
return R.ok().put("data", page);
/**
* 前端列表
*/
@RequestMapping("/list")
public R list(@RequestParam Map<String, Object> params,OrdersEntity orders, HttpServletRequest request)
EntityWrapper<OrdersEntity> ew = new EntityWrapper<OrdersEntity>();
PageUtils page = ordersService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, orders), params), params));
return R.ok().put("data", page);
/**
* 列表
*/
@RequestMapping("/lists")
public R list( OrdersEntity orders)
EntityWrapper<OrdersEntity> ew = new EntityWrapper<OrdersEntity>();
ew.allEq(MPUtil.allEQMapPre( orders, "orders"));
return R.ok().put("data", ordersService.selectListView(ew));
/**
* 查询
*/
@RequestMapping("/query")
public R query(OrdersEntity orders)
EntityWrapper< OrdersEntity> ew = new EntityWrapper< OrdersEntity>();
ew.allEq(MPUtil.allEQMapPre( orders, "orders"));
OrdersView ordersView = ordersService.selectView(ew);
return R.ok("查询订单成功").put("data", ordersView);
/**
* 后端详情
*/
@RequestMapping("/info/id")
public R info(@PathVariable("id") Long id)
OrdersEntity orders = ordersService.selectById(id);
return R.ok().put("data", orders);
/**
* 前端详情
*/
@RequestMapping("/detail/id")
public R detail(@PathVariable("id") Long id)
OrdersEntity orders = ordersService.selectById(id);
return R.ok().put("data", orders);
/**
* 后端保存
*/
@RequestMapping("/save")
public R save(@RequestBody OrdersEntity orders, HttpServletRequest request)
orders.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
//ValidatorUtils.validateEntity(orders);
orders.setUserid((Long)request.getSession().getAttribute("userId"));
ordersService.insert(orders);
return R.ok();
/**
* 前端保存
*/
@RequestMapping("/add")
public R add(@RequestBody OrdersEntity orders, HttpServletRequest request)
orders.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
//ValidatorUtils.validateEntity(orders);
ordersService.insert(orders);
return R.ok();
/**
* 修改
*/
@RequestMapping("/update")
public R update(@RequestBody OrdersEntity orders, HttpServletRequest request)
//ValidatorUtils.validateEntity(orders);
ordersService.updateById(orders);//全部更新
return R.ok();
/**
* 删除
*/
@RequestMapping("/delete")
public R delete(@RequestBody Long[] ids)
ordersService.deleteBatchIds(Arrays.asList(ids));
return R.ok();
/**
* 提醒接口
*/
@RequestMapping("/remind/columnName/type")
public R remindCount(@PathVariable("columnName") String columnName, HttpServletRequest request,
@PathVariable("type") String type,@RequestParam Map<String, Object> map)
map.put("column", columnName);
map.put("type", type);
if(type.equals("2"))
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
Calendar c = Calendar.getInstance();
Date remindStartDate = null;
Date remindEndDate = null;
if(map.get("remindstart")!=null)
Integer remindStart = Integer.parseInt(map.get("remindstart").toString());
c.setTime(new Date());
c.add(Calendar.DAY_OF_MONTH,remindStart);
remindStartDate = c.getTime();
map.put("remindstart", sdf.format(remindStartDate));
if(map.get("remindend")!=null)
Integer remindEnd = Integer.parseInt(map.get("remindend").toString());
c.setTime(new Date());
c.add(Calendar.DAY_OF_MONTH,remindEnd);
remindEndDate = c.getTime();
map.put("remindend", sdf.format(remindEndDate));
Wrapper<OrdersEntity> wrapper = new EntityWrapper<OrdersEntity>();
if(map.get("remindstart")!=null)
wrapper.ge(columnName, map.get("remindstart"));
if(map.get("remindend")!=null)
wrapper.le(columnName, map.get("remindend"));
if(!request.getSession().getAttribute("role").toString().equals("管理员"))
wrapper.eq("userid", (Long)request.getSession().getAttribute("userId"));
int count = ordersService.selectCount(wrapper);
return R.ok().put("count", count);
@Service("ordersService")
public class OrdersServiceImpl extends ServiceImpl<OrdersDao, OrdersEntity> implements OrdersService
@Override
public PageUtils queryPage(Map<String, Object> params)
Page<OrdersEntity> page = this.selectPage(
new Query<OrdersEntity>(params).getPage(),
new EntityWrapper<OrdersEntity>()
);
return new PageUtils(page);
@Override
public PageUtils queryPage(Map<String, Object> params, Wrapper<OrdersEntity> wrapper)
Page<OrdersView> page =new Query<OrdersView>(params).getPage();
page.setRecords(baseMapper.selectListView(page,wrapper));
PageUtils pageUtil = new PageUtils(page);
return pageUtil;
@Override
public List<OrdersVO> selectListVO(Wrapper<OrdersEntity> wrapper)
return baseMapper.selectListVO(wrapper);
@Override
public OrdersVO selectVO(Wrapper<OrdersEntity> wrapper)
return baseMapper.selectVO(wrapper);
@Override
public List<OrdersView> selectListView(Wrapper<OrdersEntity> wrapper)
return baseMapper.selectListView(wrapper);
@Override
public OrdersView selectView(Wrapper<OrdersEntity> wrapper)
return baseMapper.selectView(wrapper);
获取源码:
大家点赞、收藏、关注、评论啦 、查看👇🏻👇🏻👇🏻微信公众号获取联系方式👇🏻👇🏻👇🏻
打卡 文章 更新 245/ 365天
精彩专栏推荐订阅:在下方专栏👇🏻👇🏻👇🏻👇🏻
以上是关于基于Java+SpringBoot+vue+element实现前后端分离蛋糕商城系统详细设计的主要内容,如果未能解决你的问题,请参考以下文章
Vue项目安装流程(vue+ele+mongodb+axios)
Java+MySQL 基于Springboot+vue的旧物置换网站#毕业设计
Java+MySQL 基于Springboot+vue的疫情网课管理系统#毕业设计
Java+MySQL基于Springboot+vue的酒店民宿管理系统前后台#毕业设计