vue前端框架 +Springboot 專案點餐系統詳解

專案介紹

專案介紹：該專案采用前后端分離的技術，前端運用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>