基于SpringBoot+Vue的外卖点餐系统

介绍

基于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>

后面的就不再列举了，，

✨✨源码获取，看下面评论哦✨✨