vue前端框架 +Springboot 项目点餐系统详解 您所在的位置:网站首页 餐馆订单模板 vue前端框架 +Springboot 项目点餐系统详解

vue前端框架 +Springboot 项目点餐系统详解

2023-12-25 04:22| 来源: 网络整理| 查看: 265

项目介绍

项目介绍:该项目采用前后端分离的技术,前端运用vue框架,后端采用springboot相关技术栈。订餐系统分为两种角色,客户和管理员,主要模块有客户点餐和管理员出餐、修改菜品信息和修改订单状态。客户通过点餐系统看到菜品然后进行点餐,商家通过管理员账号登录后可以看到顾客的个人信息和点单情况并进行处理,采用线下支付的方式完成订单。

系统分析

项目源码地址:源码地址

顾客:通过网页实现点餐,所有订单列表

管理员:商家。可以看到所有人的订单,修改订单状态,维护菜品信息

系统开发功能分析

顾客

注册登录查看所有菜品列表下单功能(点餐)查看所有的历史订单查看某个订单的详情信息退出登录

商家

登录菜品列表(菜品的添加和删除功能)查看所有人的订单信息每个订单的详情信息修改订单的状态退出登录

系统设计图

在这里插入图片描述

数据库设计

用户表

主键ID(自增)用户名密码身份标识

订单表

订单主键ID(自增)用户ID订单创建时间状态(0:未完成 1:已完成)

数据库设计表 这里插入图片描述

菜品表

主键ID(自增)菜品名价格

订单详情表(关联菜品表和订单表:多对多的关系)

订单表ID菜品表ID 页面截图

管理员页面

在这里插入图片描述

订单状态噶案例和查看详情

管理员功能有登录,退出登录,菜品信息管理,订单管理,

用户页面

在这里插入图片描述

在这里插入图片描述 在这里插入图片描述 用户管理页面功能有注册 登录 点餐 查看订单 详情 退出登录等模块

整体项目结构为 在这里插入图片描述

后端基本逻辑:

以用户登录功能为例子,前端通过jQuery访问后端controller类

jQuery.getJSON("/user/login",{ "username":username, "password":password },function (result) { if(result != null && result.data != null &&result.data.id>0){ alert("登录成功"); //隐藏左侧未登录之前的导航显示欢迎信息 app.login.isLogin = true; //隐藏登陆窗体 app.login.showLoginDialog = false; //请求后端得到菜品列表 jQuery.getJSON("/dish/list",{},function (result){ if(result != null && result.data != null){ app.dishes = result.data; } }); }else{ //用户名或密码错误请重新输入 alert("用户名或密码错误请重新输入"); } });

controller类

/** * 登陆方法 * @return */ @RequestMapping("/login") public ResopnseBodylogin (UserInfo userInfo, HttpServletRequest request){ UserInfo user = userMapper.login(userInfo); if(user != null && user.getId() > 0){ //登录成功,存储session信息 HttpSession session = request.getSession(); session.setAttribute(AppFinal.USERINFO_SESSION_KEY,user); } return new ResopnseBody(0,"",user); }

然后调用mapper映射

@Mapper public interface UserMapper { //注册 public int register(UserInfo userInfo); public List getUserList(); public UserInfo login(UserInfo userInfo); }

在mapper.xml中执行数据库相关操作(此处是select id="login)

insert into userinfo(username,password,isadmin) values(#{username},#{password},0) select * from userinfo select * from userinfo where username = #{username} and password = #{password}


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有