SpringBoot+Vue实现前后端分离的餐饮点餐系统

于 2024-05-05 20:22:26 发布
阅读量634 收藏 24
点赞数 23
分类专栏： 毕设 源码 文章标签： spring boot vue.js 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/syxiaomin/article/details/138472983
版权
毕设 同时被 2 个专栏收录
419 篇文章 2 订阅
订阅专栏
源码
276 篇文章 0 订阅
订阅专栏
目录

一、前言介绍 

二、系统需求分析

三、系统前台模块

3.1系统首页页面

3.2订餐资讯页面 

3.3菜单页面 

3.4菜品详情页面 

3.5我的页面

3.6支付页面 

四、管理员功能模块

4.1系统首页页面 

4.2用户管理页面 

4.3资讯管理页面

4.4菜品管理页面

4.5订单列表管理页面

4.6订单统计管理页面

五、部分核心代码

5.1订餐资讯的逻辑代码 

5.2订餐资讯分类管理逻辑代码

5.3菜品管理的关键代码

5.4订单信息管理关键代码

5.5用户管理关键代码

5.6用户功能关键代码

5.7订单信息的关键代码

一、前言介绍 

科技进步带来的生产力的发展，其本质上是生产效率的提高。在社会快速发展的今天，效率永远是衡量一款产品的重要标准。在生活中，我们常常遇到这样的问题:上班期间，由于中午休息的时间基本一致，在一座写字楼中就往往会出现这样的问题，即在中午的某个时间段内将会出现人流的高度集中，大家选择在同一时间去食堂或者楼下的餐厅吃饭。这无疑会大大降低人们对于这段时间的利用效率。这时，人们可能会采取一种方式来回避高峰期，那就是叫外卖点餐。传统的外卖方式就是打电话预定，然而，在这种方式中，顾客往往通过餐厅散发的传单来获取餐厅的相关信息，通过电话来传达自己的订单信息，餐厅方面通过电话接受订单后，一般通过手写来记录，最后通过口头确认才算完成一份订单的提交，之后就是订单的完成和食品的递交。显然，在传统外卖流程中，顾客通过传单来接收信息，所能获得的信息太少，而且印发传单成本高昂，无疑那些面对大众的中低档餐厅不会或者很少印发传单；其次通过电话来接收订单，效率很低，耗时至少5到10分钟;最后，口头确认存在出错的风险，无法保证订单的有效性。而点餐系统或称之为餐饮点餐系统，将完美的解决以上的所有问题。

二、系统需求分析

餐饮点餐系统需要满足的需求有以下几个：

1.信息获取方便，用户可在网页上快速浏览到新的信息

2.查看菜品详情，单独查看某一个菜品信息，获取好评等。

3.注册登录，餐饮需要吸引客户，即通过注册来提高用户的存留率。

4.历史记录，用户可以查看自己订餐信息以及其他操作。

5.修改用户信息，可以修改用户密码或者用户名等一些个性化操作。

6.管理员功能，管理员可以对用户或者点餐进行管理。

7.系统安全，操作简便，不过于复杂。

8.系统可以稳定运行，不存在卡顿等问题造成用户反感。

三、系统前台模块

3.1系统首页页面

3.2订餐资讯页面 

3.3菜单页面 

3.4菜品详情页面 

3.5我的页面

3.6支付页面 

四、管理员功能模块

4.1系统首页页面 

4.2用户管理页面 

4.3资讯管理页面

4.4菜品管理页面

4.5订单列表管理页面

4.6订单统计管理页面

五、部分核心代码

5.1订餐资讯的逻辑代码 

 @RequestMapping("/get_obj")
 
    public Map<String, Object> obj(HttpServletRequest request) {
 
        Query select = service.select(service.readQuery(request), service.readConfig(request));
 
        List resultList = select.getResultList();
 
        if (resultList.size() > 0) {
 
            JSONObject jsonObject = new JSONObject();
 
            jsonObject.put("obj",resultList.get(0));
 
            return success(jsonObject);
 
        } else {
 
            return success(null);
 
        }
 
}
 
 public Query select(Map<String,String> query,Map<String,String> config){
 
        StringBuffer sql = new StringBuffer("select ");
 
        sql.append(config.get(FindConfig.FIELD) == null || "".equals(config.get(FindConfig.FIELD)) ? "*" : config.get(FindConfig.FIELD)).append(" ");
 
        sql.append("from ").append("`").append(table).append("`").append(toWhereSql(query, "0".equals(config.get(FindConfig.LIKE))));
 
        if (config.get(FindConfig.GROUP_BY) != null && !"".equals(config.get(FindConfig.GROUP_BY))){
 
            sql.append("group by ").append(config.get(FindConfig.GROUP_BY)).append(" ");
 
        }
 
        if (config.get(FindConfig.ORDER_BY) != null && !"".equals(config.get(FindConfig.ORDER_BY))){
 
            sql.append("order by ").append(config.get(FindConfig.ORDER_BY)).append(" ");
 
        }
 
        if (config.get(FindConfig.PAGE) != null && !"".equals(config.get(FindConfig.PAGE))){
 
            int page = config.get(FindConfig.PAGE) != null && !"".equals(config.get(FindConfig.PAGE)) ? Integer.parseInt(config.get(FindConfig.PAGE)) : 1;
 
            int limit = config.get(FindConfig.SIZE) != null && !"".equals(config.get(FindConfig.SIZE)) ? Integer.parseInt(config.get(FindConfig.SIZE)) : 10;
 
            sql.append(" limit ").append( (page-1)*limit ).append(" , ").append(limit);
 
        }
 
        log.info("[{}] - 查询操作，sql: {}",table,sql);
 
        return runEntitySql(sql.toString());
 
    }

5.2订餐资讯分类管理逻辑代码

 @RequestMapping("/get_list")
 
    public Map<String, Object> getList(HttpServletRequest request) {
 
        Map<String, Object> map = service.selectToPage(service.readQuery(request), service.readConfig(request));
 
        return success(map);
 
}

5.3菜品管理的关键代码

 @PostMapping("/add")
 
    @Transactional
 
    public Map<String, Object> add(HttpServletRequest request) throws IOException {
 
        service.insert(service.readBody(request.getReader()));
 
        return success(1);
 
    }
 
    @Transactional
 
    public Map<String, Object> addMap(Map<String,Object> map){
 
        service.insert(map);
 
        return success(1);
 
}
 
    public Map<String,Object> readBody(BufferedReader reader){
 
        BufferedReader br = null;
 
        StringBuilder sb = new StringBuilder("");
 
        try{
 
            br = reader;
 
            String str;
 
            while ((str = br.readLine()) != null){
 
                sb.append(str);
 
            }
 
            br.close();
 
            String json = sb.toString();
 
            return JSONObject.parseObject(json, Map.class);
 
        }catch (IOException e){
 
            e.printStackTrace();
 
        }finally{
 
            if (null != br){
 
                try{
 
                    br.close();
 
                }catch (IOException e){
 
                    e.printStackTrace();
 
                }
 
            }
 
        }
 
        return null;
 
}
 
    public void insert(Map<String,Object> body){
 
        StringBuffer sql = new StringBuffer("INSERT INTO ");
 
        sql.append("`").append(table).append("`").append(" (");
 
        for (Map.Entry<String,Object> entry:body.entrySet()){
 
            sql.append("`"+humpToLine(entry.getKey())+"`").append(",");
 
        }
 
        sql.deleteCharAt(sql.length()-1);
 
        sql.append(") VALUES (");
 
        for (Map.Entry<String,Object> entry:body.entrySet()){
 
            Object value = entry.getValue();
 
            if (value instanceof String){
 
                sql.append("'").append(entry.getValue()).append("'").append(",");
 
            }else {
 
                sql.append(entry.getValue()).append(",");
 
            }
 
        }
 
        sql.deleteCharAt(sql.length() - 1);
 
        sql.append(")");
 
        log.info("[{}] - 插入操作：{}",table,sql);
 
        Query query = runCountSql(sql.toString());
 
        query.executeUpdate();
 
    }

5.4订单信息管理关键代码

@RequestMapping(value = {"/avg_group", "/avg"})
 
public Map<String, Object> avg(HttpServletRequest request) {
 
        Query count = service.avg(service.readQuery(request), service.readConfig(request));
 
        return success(count.getResultList());
 
}

5.5用户管理关键代码

@PostMapping("/add")
 
    @Transactional
 
    public Map<String, Object> add(HttpServletRequest request) throws IOException {
 
        service.insert(service.readBody(request.getReader()));
 
        return success(1);
 
    }
 
    @Transactional
 
    public Map<String, Object> addMap(Map<String,Object> map){
 
        service.insert(map);
 
        return success(1);
 
}
 
    public Map<String,Object> readBody(BufferedReader reader){
 
        BufferedReader br = null;
 
        StringBuilder sb = new StringBuilder("");
 
        try{
 
            br = reader;
 
            String str;
 
            while ((str = br.readLine()) != null){
 
                sb.append(str);
 
            }
 
            br.close();
 
            String json = sb.toString();
 
            return JSONObject.parseObject(json, Map.class);
 
        }catch (IOException e){
 
            e.printStackTrace();
 
        }finally{
 
            if (null != br){
 
                try{
 
                    br.close();
 
                }catch (IOException e){
 
                    e.printStackTrace();
 
                }
 
            }
 
        }
 
        return null;
 
}
 
    public void insert(Map<String,Object> body){
 
        StringBuffer sql = new StringBuffer("INSERT INTO ");
 
        sql.append("`").append(table).append("`").append(" (");
 
        for (Map.Entry<String,Object> entry:body.entrySet()){
 
            sql.append("`"+humpToLine(entry.getKey())+"`").append(",");
 
        }
 
        sql.deleteCharAt(sql.length()-1);
 
        sql.append(") VALUES (");
 
        for (Map.Entry<String,Object> entry:body.entrySet()){
 
            Object value = entry.getValue();
 
            if (value instanceof String){
 
                sql.append("'").append(entry.getValue()).append("'").append(",");
 
            }else {
 
                sql.append(entry.getValue()).append(",");
 
            }
 
        }
 
        sql.deleteCharAt(sql.length() - 1);
 
        sql.append(")");
 
        log.info("[{}] - 插入操作：{}",table,sql);
 
        Query query = runCountSql(sql.toString());
 
        query.executeUpdate();
 
    }

5.6用户功能关键代码

@RequestMapping("/get_obj")
 
    public Map<String, Object> obj(HttpServletRequest request) {
 
        Query select = service.select(service.readQuery(request), service.readConfig(request));
 
        List resultList = select.getResultList();
 
        if (resultList.size() > 0) {
 
            JSONObject jsonObject = new JSONObject();
 
            jsonObject.put("obj",resultList.get(0));
 
            return success(jsonObject);
 
        } else {
 
            return success(null);
 
        }
 
}
 
 public Query select(Map<String,String> query,Map<String,String> config){
 
        StringBuffer sql = new StringBuffer("select ");
 
        sql.append(config.get(FindConfig.FIELD) == null || "".equals(config.get(FindConfig.FIELD)) ? "*" : config.get(FindConfig.FIELD)).append(" ");
 
        sql.append("from ").append("`").append(table).append("`").append(toWhereSql(query, "0".equals(config.get(FindConfig.LIKE))));
 
        if (config.get(FindConfig.GROUP_BY) != null && !"".equals(config.get(FindConfig.GROUP_BY))){
 
            sql.append("group by ").append(config.get(FindConfig.GROUP_BY)).append(" ");
 
        }
 
        if (config.get(FindConfig.ORDER_BY) != null && !"".equals(config.get(FindConfig.ORDER_BY))){
 
            sql.append("order by ").append(config.get(FindConfig.ORDER_BY)).append(" ");
 
        }
 
        if (config.get(FindConfig.PAGE) != null && !"".equals(config.get(FindConfig.PAGE))){
 
            int page = config.get(FindConfig.PAGE) != null && !"".equals(config.get(FindConfig.PAGE)) ? Integer.parseInt(config.get(FindConfig.PAGE)) : 1;
 
            int limit = config.get(FindConfig.SIZE) != null && !"".equals(config.get(FindConfig.SIZE)) ? Integer.parseInt(config.get(FindConfig.SIZE)) : 10;
 
            sql.append(" limit ").append( (page-1)*limit ).append(" , ").append(limit);
 
        }
 
        log.info("[{}] - 查询操作，sql: {}",table,sql);
 
        return runEntitySql(sql.toString());
 
    }

5.7订单信息的关键代码

@RestController
 
@RequestMapping("auth")
 
public class AuthController extends BaseController<Auth, AuthService> {
 
    /**

     * 服务对象

     */
 
    @Autowired
 
    public AuthController(AuthService service) {
 
        setService(service);
 
    }
 
}

 

此源码非开源，若需要此源码可扫码添加微信或者qq：2214904953进行咨询！

2600多套项目欢迎咨询

源码好优多
关注
  • 23
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于springboot+vue的网上点餐系统(前后端分离)
weixin_mtyeducation
01-22 806
本系统适合选题：毕业设计、网上点餐、点餐、前后端分离等。系统采用springboot+vue整合开发，前端框架主要使用了element-ui框架、数据层采用mybatis，功能齐全，界面美观。
SSM+Vue+Element-UI实现外卖点餐系统
分享技术热点，看天下大事
08-18 2322
随着网络不断的普及发展，外卖点餐系统依靠网络技术的支持得到了快速的发展，首先要从用户的实际需求出发，通过了解用户的需求开发出具有针对性的用户、餐厅、菜品、订单评价、订单等功能，利用目前网络给用户带来的方便快捷这一特点对系统进行调整，设计的系统让用户的使用起来更加方便，本系统的主要目的就是给用户带来快捷与高效、安全，用户只要在家中就可以进行操作。同时随着电子商务的发展外卖点餐系统已经受到广大用户的关注。互联网发展至今，已经解决了很多我们解决不了的难题，使得我们工作更加便捷，提高了我们的工作效率。...
vue.js毕业设计，基于vue.js前后端分离外卖点餐系统（H5移动项目） 开题报告
杭州.黄老师
11-24 2010
vue.js毕业设计，基于vue.js前后端分离外卖点餐系统（H5移动项目） 开题报告
基于Java+SpringBoot+Vue+uniapp微信小程序外卖系统设计和实现
热门推荐
java李阳勇的博客
07-10 1万+
外卖系统小程序主要功能模块包括首页、轮播图、公告消息、资源管理（美食资讯、资讯分类）商城管理（菜品信息、分类列表、订单列表）系统用户（管理员、注册用户、员工）模块管理（口味管理、套餐信息、套餐分类、订单信息、订单退款、订单状态、已完成订单），采取面对对象的开发模式进行软件的开发和硬体的架设，能很好的满足实际使用的需求，完善了对应的软体架设以及程序编码的工作。本次报告，首先分析了研究的背景、作用、意义，为研究工作的合理性打下了基础。针对商家内部订餐管理系统的各项需求以及技术问题进行分析，证明了系统的必要性和技
SpringBoot+Vue校园外卖配送系统
分享技术热点，看天下大事
07-06 768
随着社会的发展，社会的方方面面都在利用信息化时代的优势。互联网的优势和普及使各种系统的开发成为时代节奏的步伐。本文以实际运用为开发背景，运用软件工程原理和开发方法，它主要是采用java语言技术和mysql数据库来完成对系统的设计。整个开发过程首先对校园外卖配送系统进行需求分析，得出校园外卖配送系统主要功能。接着对校园外卖配送系统进行总体设计和详细设计。总体设计主要包括首页、系统用户（管理员、配送员）、模块管理（配送订单、配送接单、取消配送、送达信息、收入提现、通知公告）等；
SpringBoot(SSM)+Vue外卖点餐网站平台系统 美食配送系统 校园食堂配餐Java（code&LW）
kirito的个人博客
07-25 47
完整的视频演示网址 ：【SpringBoot(SSM)+Vue外卖点餐网站平台系统 美食配送系统 校园食堂配餐】 https://www.bilibili.com/video/BV1Xx4y1o7Te/?return R.ok("密码已重置为：123456");return R.error("账号或密码不正确");return R.error("用户已存在");return R.error("账号不存在");return R.error("用户已存在");return R.ok("退出成功");
影视评论系统Springboot+Vue（前后端分离）
06-16
Springboot+Vue影视评论系统（前后端分离），完整项目可以直接导入使用，可参考，可使用
springboot +vue3 前后端分离
08-17
Spring boot+mybatis+shiro+mysql+jwt+quartz+swagger2+easyexcel 等框架搭建的后端服务，前端使用vue3+typescript+andtdesgin 等技术 实现了前后端分离，该项目更细度的控制了权限，实现了细度的RBAC功能.
基于SpringBoot+Vue的前后端分离仓储管理系统设计与实现
11-29
功能及截图：https://blog.csdn.net/qq_37740841/article/details/121615212
springboot + ssm +mysql+vue实现前后端分离ERP系统
06-22
springboot + ssm +mysql+vue实现前后端分离ERP系统 ，有完整前后台源码，系统经多次测试，运行无误，大家放心下载
订货.html vue jquery 制作点餐界面
12-23
html 订货.html vue jquery 制作点餐界面
vue项目仿美团点餐、评论、选项卡、
06-23
最近项目需要实现评论功能，此代码实现vue仿美团点餐、评论、选项卡等功能
基于SpringBoot+Vue的前后端分离客户关系管理系统源码.zip
05-21
基于SpringBoot+Vue的前后端分离客户关系管理系统源码.zip
基于springboot,vue网上订餐系统
IT教程资源
07-09 1667
服务端技术：springboot+mybatis+redis。3.我的订单、个人资料、退出登录、取消订单、评价等。6.订单管理：修改状态、查询详情、分页查询、删除。4.商品分类管理：新增、修改、分页查询、删除。2.购物车、商品详情、搜索商品、结算功能。2.用户管理：新增、修改、分页查询、删除。3.角色管理：新增、修改、分页查询、删除。5.商品管理：新增、修改、分页查询、删除。前端技术 ：Vue+ElementUI。7.评论管理：分页查询、查看详情、回复。1.登录、首页、退出登录。1.登录、注册、首页。
用vue3写出一个完整的点菜界面
CXLYYDS1124的博客
08-18 309
这是一个简单的点菜界面的示例代码，使用了Vue3和Vue Router，希望可以帮助到各位
java毕业设计 Vue网上购物商城系统(含源码+论文)
2301_76591273的博客
03-22 1306
Hi，各位同学好呀，这里是M学姐！今天向大家分享一个今年(2022)最新完成的毕业设计项目作品，【基于SSM的网上购物商城】学姐根据实现的难度和等级对项目进行评分(最低0分，满分5分)难度系数：3分工作量：5分创新点：3分界面美化：5分界面美化的补充说明：使用vue的基本都能达到5分本项目完成于2022年6月份，包含内容 : 源码 + 论文 + 答辩PPT本文研究的网上购物商城基于当前较为流行的B/S结构，采用Java技术和MYSQL数据库进行开发设计。
计算机毕业设计Node.js+Vue的网上点餐系统（程序+源码+LW+部署)
Nodejs洋洋 程序
02-14 247
页面可以对订单编号、商品名称、商品图片、购买数量、价格/积分、折扣价格、总价格/总积分、折扣总价格、支付类型、状态、地址、电话、收货人、下单时间等内容进行。页面可以对菜品编号、菜品名称、菜品分类、口味、图片、上架日期、价格、单限、库存等内容进行。或者 Mac OS；查看菜品编号、菜品名称、菜品分类、口味、图片、上架日期、价格、单限、库存。
springboot+vue实现前后端分离具体框架代码
最新发布
09-14
### 回答1： 可以使用 Spring Boot + Vue + Webpack 来实现前后端分离的框架，具体代码如下：Spring Boot：<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>Vue：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>Webpack：const path = require('path'); const webpack = require('webpack');module.exports = { entry: './src/js/app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ] }; ### 回答2： 要实现Spring Boot和Vue的前后端分离，可以使用以下具体的框架和代码： 1. 后端使用Spring Boot框架实现RESTful API： - 创建一个Spring Boot项目，添加所需的依赖（如Spring Web、Spring Data JPA等）。 - 在项目中创建一个Controller类，使用`@RestController`注解标记。 - 编写各个API接口对应的方法，并使用`@RequestMapping`等注解进行路由映射。 - 可以使用Spring Data JPA来简化数据库操作，创建实体类和对应的Repository接口。 - 通过`@CrossOrigin`注解允许跨域请求。 2. 前端使用Vue框架实现单页应用： - 创建一个Vue项目，可以使用Vue CLI工具进行脚手架搭建。 - 在项目中创建相应的组件，用于展示数据和处理用户交互。 - 使用Vue Router进行前端路由管理。 - 使用Axios库进行前后端数据交互，发送HTTP请求获取后端API返回的数据。 - 使用Vue的生命周期钩子函数和Vue的数据绑定特性来处理页面逻辑。 3. 连接前后端： - 在Vue的组件中使用Axios发送请求到后端API。 - 接收后端返回的数据，并在页面上进行展示。 - 在触发某些事件时，调用Axios发送请求到后端API来更新数据。 这样，就可以实现前后端分离的架构。后端通过Spring Boot框架提供RESTful API，前端使用Vue框架构建单页应用，并通过Axios库发送HTTP请求和后端进行数据交互。通过这种方式，前后端可以独立开发和部署，提高了开发效率和灵活性。 ### 回答3： 要实现Spring Boot和Vue的前后端分离，可以采用以下具体的框架和代码实现。 1. 后端框架：Spring Boot Spring Boot是一种用于构建独立的、基于Spring的Java应用程序的框架。它可以简化Spring应用程序的配置和部署，并提供了可集成的开发和测试工具。使用Spring Boot可以快速搭建后端API服务。 2. 前端框架：Vue.js Vue.js是一种用于构建用户界面的JavaScript框架，它可以实现响应式的数据绑定和组件化的开发。Vue.js使用简洁的语法和强大的生态系统，使得前端开发更加高效和可维护。 3. 框架整合 在实现前后端分离的过程中，可以通过Restful API进行前后端数据交互。后端使用Spring Boot提供API接口，前端使用Vue.js发起HTTP请求获取数据。 典型的框架代码结构如下： - 后端代码结构 - src/main/java - com.example.demo - controller - UserController.java：定义用户相关的API接口，处理HTTP请求。 - model - User.java：定义用户类，包含用户的属性和方法。 - service - UserService.java：定义用户相关的业务逻辑，如用户的增删改查。 - UserServiceImpl.java：实现UserService接口的具体逻辑。 - repository - UserRepository.java：定义用户数据的访问方式，如数据库操作。 - src/main/resources - application.properties：配置Spring Boot应用的相关属性。 - 前端代码结构 - src - components - UserList.vue：用户列表组件，展示后端返回的用户数据。 - views - User.vue：用户界面，包含用户的增删改查等操作。 - router - index.js：前端路由配置文件，定义前端路由和页面的映射关系。 - App.vue：根组件，包含整个前端应用的布局和共享逻辑。 - main.js：入口文件，初始化Vue应用。 以上是一个简单的示例，可以根据实际需求和复杂程度进行相应的调整。通过Spring Boot提供API接口，Vue.js发起HTTP请求获取数据，实现了前后端分离的开发模式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值