基于 SpringBoot + Vue 在线点餐系统(前后端分离)

大家好，今天给大家带来一个超级简单的 在线外卖点餐项目。大家可用学习下系统的设计和源码风格。

视频演示

在线点餐系统

图片演示

技术栈

后端

技术框架：JDK8+SpringBoot2

数据库：Mysql8

用户token： JWT

用户菜单权限管理 ： shiro

聊天： websocket

前端

- Vue.js 2.5.2 - 主要的前端框架
- Vue Router 3.0.1 - 单页面应用路由管理
- Vuex 3.1.1 - 状态管理

UI 组件库
- Element UI 2.9.1 - 基于 Vue 的桌面端组件库，提供丰富的 UI 组件

网络请求
- Axios 0.19.0 - HTTP 客户端，用于与后端 API 通信
- JWT Decode 2.2.0 - JWT token 解析

实时通信
- WebSocket - 实现实时聊天功能和订单通知

系统功能概述

整个系统分为管理平台和商家，用户端。

商家端

商家入驻： 相当于注册商家，商家提供手机号，营业执照等信息既可以入驻成为商家。

商家登录：通过店铺名称和密码进行登录。

菜单管理： 可以修改，上架，删除店铺内的菜品。菜品分为“主食”，“饮料”，“小吃”三大类。

评论管理： 可以显示用户对店铺的评论列表，每个评论支持商家二次回复。多次回复，以树形形式展示。

订单管理：可以查看用户下单的订单，然后对订单进行接单等操作。订单的状态分为“未完成”，“待评价”，“已完成”，“已取消”。

店铺管理：店铺管理又分为“店铺资料”，“历史订单”，“顾客互动”，“修改密码”，“账号设置”。

店铺资料： 可以查看 店铺姓名，联系方式，店铺地址，店主姓名，店主邮箱，评分0 分。

历史订单： 可以查询到店铺内所有的历史订单，支持商品名称 关键字进行模糊搜索。

顾客互动： 以类似qq，微信等聊天的样式展示与客户聊天的消息，消息是通过websocket技术实时推送过来的。

修改密码： 支持修改店铺的登录密码。

账号设置： 修改店铺信息。

用户端

用户注册： 用户通过用户名，密码，手机号进行注册成为平台用户。

用户登录：通过用户名和密码进行登录。

外卖服务： 显示平台内所有正常商家的店铺，每个店铺以卡片的形式展示，字段有：“店铺图”，“店铺名称”，“店铺评分”。

店铺点餐： 点击某个店铺后，会展示店铺内所有上架的菜品。菜品按”主食“，”饮料“，”小吃“进行分类显示。还可以进行商品名称搜索。

用户选中好菜品后，可以进行加入购物车和直接购买下单。

联系客服：用户进入店铺，可以点击左边的联系，与商家进行在线实时沟通。以类似qq，微信等聊天的样式展示与客户聊天的消息，消息是通过websocket技术实时推送过来的。

订单管理：可以查看用户下单的订单，然后对订单进行接单等操作。订单的状态分为“未完成”，“待评价”，“已完成”，“已取消”。

个人中心：个人中心又分为“个人资料”，“历史订单”，“店家互动”，“修改密码”，“账号设置”。

历史订单： 可以查询到用户所有的历史订单，支持商品名称 关键字进行模糊搜索。

商家互动： 与商家进行聊天。以类似qq，微信等聊天的样式展示与客户聊天的消息，消息是通过websocket技术实时推送过来的。

修改密码： 支持修改店铺的登录密码。

账号设置： 修改用户信息。

管理平台

用户管理： 支持对平台内用户进行查询，删除，修改，编辑等。

商家管理：支持对平台内商家进行查询，删除，修改，编辑等。

订单管理：支持订单按用户，商家等关键词进行搜索。

系统日志： 记录商家的入驻，登录。用户的注册，登录等详细信息日志。

系统部署

执行sql

用户需要自己安装好mysql数据库，注意，必须是mysql8 ，否则代码运行会出错。
然后用navicate等连接工具，连接到mysql服务，然后新建一个 hadluo-takeout 数据库， 然后执行 “hadluo-takeout.sql” 里面的表创建和数据导入。

前端部署

管理端部署

前端的项目必须没有中文，否则启动会报错！！

安装node ， 版本：v14.21.3 ， 安装完成后。 进入到项目 hadluo-admin-vue目录下，这个项目是vue的管理平台， 右键，运行cmd，运行下面命令：

npm run dev

由于我已经跟你npm install好了，所以你无需执行，直接run就可以了！！

用户端部署

然后进入到项目 hadluo-vue目录下，这个项目是vue的用户+商家端， 右键，运行cmd，运行下面命令：

npm run dev

由于我已经跟你npm install好了，所以你无需执行，直接run就可以了！！

到此前端项目部署完成。

启动后端项目

将maven设置的settings.xml改成你自己的配置。

然后刷新maven，等待项目下载依赖包完成。。。。。

然后部署后端 ， 打开idea， 导入maven工程 hadluo-server。

打开resources目录， 修改 application.yml 配置文件，主要修改下面几个信息：
数据库信息：

spring:datasource:url: jdbc:mysql://127.0.0.1:3306/wxhadluo-fresh?characterEncoding=UTF8&serverTimezone=Asia/Shanghaiusername: rootpassword: qq123456

然后启动 main 启动类 ：TakeoutApplication.class

浏览器访问

管理后端：http://localhost:8082/

管理员的账号密码 ： admin/123456

用户+商家端：http://localhost:8081/

注意用户和商家端 的浏览器不能是同一个，否则会串token数据。