基于 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/Shanghai
    username: root
    password: qq123456

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

浏览器访问

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

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

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

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

相关推荐
光依旧7 小时前
MCP实战手记系列(十):MCP Server高可用实战
spring boot·高可用·nginx负载均衡·redis哨兵·mcp·微服务容错·resilience4j熔断
志尊宝8 小时前
Vue3 零基础每日笔记(073):keep-alive 页面缓存实战——列表页返回不丢状态
vue.js·笔记·缓存·#vue #前端 #前端开发·#javascript·#vue.js
刚子编程9 小时前
我用 ASP.NET Core 做了个水稻病虫害检查系统
后端·asp.net
谢亮_vipxieliang9 小时前
用 PHP 构建轻量级 REST API:从路由到鉴权的完整实践
开发语言·后端·php
省钱兄--zs10 小时前
西安24小时自助健身房解决方案实战:系统开发与部署全流程指南
java·spring boot·系统架构·intellij-idea·需求分析
码事漫谈12 小时前
三步改掉 AI 味,附可直接复制的去 AI 味提示词
后端
IT_陈寒12 小时前
Redis卡顿的锅,这次真不是大key的错
前端·人工智能·后端
可乐鸡翅yeah_12 小时前
video.js 集成 hls.js 开发 M3U8 播放器,新手高频踩坑
开发语言·前端·javascript·后端·ecmascript·m3u8·音视频在线播放
ly768912 小时前
Spring Boot 集成 Elasticsearch 的生产实践:客户端选型、索引生命周期与批量写入容错
spring boot·elasticsearch·索引生命周期·java api client·批量写入