vue前端框架 +Springboot 项目点餐系统详解_we_opkn的博客

项目介绍

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

系统分析

项目源码地址：源码地址

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

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

系统开发功能分析

顾客

1. 注册
2. 登录
3. 查看所有菜品列表
4. 下单功能（点餐）
5. 查看所有的历史订单
6. 查看某个订单的详情信息
7. 退出登录

商家

1. 登录
2. 菜品列表（菜品的添加和删除功能）
3. 查看所有人的订单信息
4. 每个订单的详情信息
5. 修改订单的状态
6. 退出登录

数据库设计

用户表

1. 主键ID（自增）
2. 用户名
3. 密码
4. 身份标识

订单表

1. 订单主键ID（自增）
2. 用户ID
3. 订单创建时间
4. 状态（0：未完成 1：已完成）

菜品表

1. 主键ID（自增）
2. 菜品名
3. 价格

订单详情表（关联菜品表和订单表：多对多的关系）

1. 订单表ID
2. 菜品表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 ResopnseBody<UserInfo>login (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<UserInfo> getUserList();

    public UserInfo login(UserInfo userInfo);
}

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

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.ordersys.mapper.UserMapper">
    <insert id="register">
        insert into userinfo(username,password,isadmin)
        values(#{username},#{password},0)
    </insert>
    <select id="getUserList" resultType="com.example.ordersys.model.UserInfo">
        select * from userinfo
    </select>
    <select id="login" resultType="com.example.ordersys.model.UserInfo">
        select * from userinfo where
        username = #{username} and password = #{password}
    </select>
</mapper>