介绍
基于SpringBoot+Vue的外卖点餐系统:包含:前台外卖系统和后台数据管理系统。
🚀 软件架构
系统使用前后端分离,后端编写接口,提供数据。前端调用接口获取数据,根据要求在页面上进行渲染。
前后端分离,跨域访问的后端解决方式。
系统分为三种角色:
前台外卖系统:点餐者、商家;
后台数据管理系统:后台管理员。
点餐者:选店铺、菜品选择、点餐下单、订单的管理等功能。
商家:菜品管理、订单的管理、评论管理以及与客户的聊天。
系统管理员:只针对使用后台数据管理系统,可对系统发布公告、所有系统基础数据维护等功能。
🚀 开发环境
1.系统用Java语言开发,前端用Vue,后端用Spring Boot框架;
2.开发工具:IDEA、VSCode、Navicat Premium 15、Postman等;
3.技术:MySQL、Spring Boot、Vue、element-plus等
🚀 界面效果图
🎨 前台外卖系统登录(8081端口):
🎨 后台数据管理系统登录(8082端口):
🌈 商家:
🚀 商家的菜单管理:
🚀 评论管理:
🌈 消费者:
🚀外卖服务-点餐:
🚀 在购物车中下单结算:
🚀 已完成的订单进行评价:
🚀 店铺信息中可以看到评价记录
🚀 个人信息中看历史订单、修改密码、个人资料修改等功能
🌈 系统管理员:
功能很多就不截图了~
🚀项目结构
🌈 后端
🚀 代码实现:
🌈 登录:
@Log("用户通过密码登录")
@PostMapping("/consumer/login")
@ResponseBody
public ResponseBean consumerLogin(@RequestParam("username") String username,
@RequestParam("password") String password) throws Exception {
Consumer userBean = userService.queryConsumerByName(username);
if (userBean == null) {
throw new UnauthorizedException("没有此用户");
}
password = MD5Util.encrypt(username, password);
if (userBean.getPassword().equals(password)) {
ResponseBean responseBean = new ResponseBean();
responseBean = responseBean.message("Login success").data(JWTUtils.consumerSign(userBean, password));
responseBean.put("code", 200);
responseBean.put("info", userBean);
return responseBean;
} else {
throw new UnauthorizedException("密码错误");
}
}
🌈 图片上传功能前端部分代码
<template>
<div>
<el-upload
class="avatar-uploader"
action="http://localhost:8080/takeout/file/img/upload"
ref="upload"
name="picture"
list-type="picture-card"
:limit="1"
:file-list="fileList"
:on-exceed="onExceed"
:before-upload="beforeUpload"
:on-preview="handlePreview"
:on-success="handleSuccess"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
<el-dialog :visible.sync="dialogVisibleB">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
后面的就不再列举了,,
✨✨源码获取,看下面评论哦✨✨