restaurant-frontend/package-lock.json

@@ -11,11 +11,12 @@
         "axios": "^1.7.9",
         "element-plus": "^2.9.1",
         "pinia": "^2.3.0",
-        "vue": "^3.2.45"
+        "vue": "^3.2.45",
+        "vue-router": "^4.2.0"
       },
       "devDependencies": {
-        "@vitejs/plugin-vue": "^4.0.0",
+        "@vitejs/plugin-vue": "^4.6.2",
-        "vite": "^4.1.0"
+        "vite": "^4.5.5"
       }
     },
     "node_modules/@babel/helper-string-parser": {
@@ -521,7 +522,7 @@
     },
     "node_modules/@vitejs/plugin-vue": {
       "version": "4.6.2",
-      "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-4.6.2.tgz",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@vitejs/plugin-vue/-/plugin-vue-4.6.2.tgz",
       "integrity": "sha512-kqf7SGFoG+80aZG6Pf+gsZIVvGSCKE98JbiWqcCV9cThtg91Jav0yvYFC9Zb+jKetNGF6ZKeoaxgZfND21fWKw==",
       "dev": true,
       "license": "MIT",
@@ -1041,7 +1042,7 @@
     },
     "node_modules/vite": {
       "version": "4.5.5",
-      "resolved": "https://registry.npmmirror.com/vite/-/vite-4.5.5.tgz",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/vite/-/vite-4.5.5.tgz",
       "integrity": "sha512-ifW3Lb2sMdX+WU91s3R0FyQlAyLxOzCSCP37ujw0+r5POeHPwe6udWVIElKQq8gk3t7b8rkmvqC6IHBpCff4GQ==",
       "dev": true,
       "license": "MIT",
@@ -1141,6 +1142,21 @@
           "optional": true
         }
       }
+    },
+    "node_modules/vue-router": {
+      "version": "4.2.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/vue-router/-/vue-router-4.2.0.tgz",
+      "integrity": "sha512-c+usESa6ZoWsm4PPdzRSyenp5A4dsUtnDJnrI03fY1IpIihA9TK3x5ffgkFDpjhLJZewsXoKURapNLFdZjuqTg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
     }
   }
 }

restaurant-frontend/package.json

@@ -12,10 +12,11 @@
     "axios": "^1.7.9",
     "element-plus": "^2.9.1",
     "pinia": "^2.3.0",
-    "vue": "^3.2.45"
+    "vue": "^3.2.45",
+    "vue-router": "^4.2.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue": "^4.6.2",
-    "vite": "^4.1.0"
+    "vite": "^4.5.5"
   }
 }

restaurant-frontend/src/App.vue

@@ -0,0 +1,11 @@
+<script setup>
+// import HelloWorld from './components/inventory.vue'
+// import login from "./components/login.vue";
+</script>
+
+<template>
+  <!-- <login /> -->
+  <div>
+    <router-view></router-view>
+  </div>
+</template>

restaurant-frontend/src/components/login.vue

@@ -0,0 +1,50 @@
+<template>
+  <el-form ref="form" :model="form" label-width="80px">
+    <el-form-item label="账号">
+      <el-input v-model="form.name"></el-input>
+    </el-form-item>
+    <el-form-item label="密码">
+      <el-input v-model="form.password" type="password"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <!-- <el-button type="primary" @click="onSubmit">登录</el-button> -->
+      <RouterLink
+        to="/order"
+        @click="
+          (e) => {
+            if (!form.name || !form.password) {
+              e.preventDefault();
+              ElMessage({
+                message: '请输入正确的账号或者密码',
+                type: 'error',
+              });
+            }
+          }
+        "
+        >登录</RouterLink
+      >
+      <!-- <el-button>注册</el-button> -->
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+import { ElMessage } from "element-plus";
+import { RouterLink } from "vue-router";
+
+export default {
+  data() {
+    return {
+      form: {
+        name: "",
+        password: "",
+      },
+    };
+  },
+  methods: {
+    onSubmit() {
+      console.log("submit!");
+      this.$router.push("/Inventory");
+    },
+  },
+};
+</script>

restaurant-frontend/src/components/order.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import axios from "axios";
+import { onMounted, ref, onBeforeMount } from "vue";
+import { useInventoryStore } from "../store/inventoryStore";
+import req from "../request";
+import { ElMessage } from "element-plus";
+import { RouterLink } from "vue-router";
+
+const order = ref([]);
+
+const inventoryStore = useInventoryStore();
+
+onBeforeMount(async () => {
+  await inventoryStore.getInventoryList();
+});
+
+const addToOrder = (row) => {
+  console.log(row);
+  if (!row.num)
+    return ElMessage({
+      message: "请输入数量",
+      type: "error",
+    });
+  const {
+    id,
+    num: quantity = 0,
+    price,
+    dishName,
+    userId = "111",
+    orderDate = Date.now(),
+    status = "是",
+  } = row;
+  req
+    .post("/order/", {
+      id,
+      userId,
+      dishName,
+      quantity,
+      totalAmount: quantity * price,
+      status,
+      orderDate,
+    })
+    .then((data) => {
+      if (data.data.code == 0) {
+        ElMessage({
+          message: "提交成功",
+          type: "success",
+        });
+      }
+    });
+};
+
+const submitOrder = () => {
+  // 提交订单的逻辑
+  console.log("订单已提交:", order.value);
+  // 清空订单
+  order.value = [];
+};
+
+const data = ref([]);
+
+onMounted(async () => {
+  try {
+    const newData = await req.get("/order");
+    if (newData.data.code !== 0) throw new Error();
+    const res = newData.data.data;
+    data.value = res;
+  } catch {}
+});
+</script>
+
+<template>
+  <div id="orderContainer">
+    <h2>点餐系统 <RouterLink to="/inventory">返回库存</RouterLink></h2>
+    <el-table
+      :data="inventoryStore.inventoryListGetter"
+      border
+      style="width: 100%; height: 100%"
+    >
+      <el-table-column prop="id" label="ID" width="200" />
+      <el-table-column prop="dishName" label="菜品名称" width="300" />
+      <el-table-column prop="price" label="价格"> </el-table-column>
+      <el-table-column prop="num" label="数量">
+        <template #default="scope">
+          <el-input v-model="scope.row.num" style="width: 80px"></el-input>
+        </template>
+      </el-table-column>
+      <el-table-column label="总额" width="200">
+        <template #default="scope">
+          {{ (scope.row.num || 0) * scope.row.price }} 元
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="120">
+        <template #default="scope">
+          <el-button type="primary" @click="addToOrder(scope.row)"
+            >添加到订单</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- <div v-if="data.length > 0">
+      <h3>订单摘要</h3>
+      <ul>
+        <li v-for="item in data" :key="item.id">
+          {{ item.dishName }} - 数量: {{ item.quantity }} - 总价:
+          {{ item.totalAmount }}元
+        </li>
+      </ul>
+      <el-button type="success" @click="submitOrder">提交订单</el-button>
+    </div> -->
+  </div>
+</template>
+
+<style scoped>
+#orderContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  width: 90vw;
+}
+</style>

restaurant-frontend/src/main.js

@@ -0,0 +1,19 @@
+import { createApp } from "vue";
+import "./style.css";
+import App from "./App.vue";
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+import axios from "axios";
+import { createPinia } from "pinia";
+import router from "./router";
+
+createApp(App).config.globalProperties.$axios = axios;
+const pinia = createPinia();
+// createApp(App).use(pinia).use(ElementPlus).mount("#app");
+
+// createApp(App).mount('#app')
+const app = createApp(App);
+app.use(router);
+app.use(ElementPlus);
+app.use(pinia);
+app.mount("#app");

restaurant-frontend/src/request.js

@@ -0,0 +1,20 @@
+import axios from "axios";
+
+const req = axios.create({
+	baseURL: "http://localhost:3000",
+	timeout: 2000
+})
+// 添加请求拦截器
+req.interceptors.request.use(function (config) {
+	// 在发送请求之前做些什么
+	if (localStorage.getItem("token")) {
+		//有token，则默认发送给服务器
+		config.headers.Authorization = `Bearer ${localStorage.getItem("token")}`
+	}
+	return config;
+}, function (error) {
+	// 对请求错误做些什么
+	return Promise.reject(error);
+});
+
+export default req

restaurant-frontend/src/router/index.js

@@ -0,0 +1,33 @@
+import { createRouter, createWebHashHistory } from "vue-router";
+
+// 1. 定义路由组件.
+// 2. 定义路由表
+const routes = [
+  {
+    name: "index",
+    path: "/",
+    component: () => import("../components/login.vue"),
+  },
+  {
+    name: "login",
+    path: "/login",
+    component: () => import("../components/login.vue"),
+  },
+  {
+    name: "order",
+    path: "/order",
+    component: () => import("../components/order.vue"),
+  },
+  {
+    name: "Inventory",
+    path: "/Inventory",
+    component: () => import("../components/Inventory.vue"),
+  },
+];
+// 3. 创建路由实例(路由器)
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+});
+
+export default router;

restaurant-frontend/src/store/inventoryStore.js

@@ -0,0 +1,50 @@
+import { defineStore } from "pinia";
+import req from "../request";
+import { ElMessage } from "element-plus";
+
+export const useInventoryStore = defineStore("inventoryStore", {
+  state: () => ({
+    inventoryList: [],
+  }),
+  getters: {
+    inventoryListGetter() {
+      return this.inventoryList;
+    },
+  },
+  actions: {
+    getInventoryList() {
+      console.log(111);
+      req({
+        method: "get",
+        url: "/inventory",
+      }).then(({ data }) => {
+        if (data.code === 0) {
+          this.setInventoryList(data.data);
+          ElMessage({
+            message: "获取成功",
+            type: "success",
+          });
+        }
+      });
+    },
+    setInventoryList(data) {
+      this.inventoryList = data;
+      console.log(this.inventoryList, "inventoryStoreData");
+    },
+    updateInventoryList(data) {
+      req({
+        method: "put",
+        url: "/inventory",
+        data,
+      }).then(({ data }) => {
+        if (data.code === 0) {
+          this.setInventoryList(data.data, "changedInventory");
+          ElMessage({
+            message: "修改成功",
+            type: "success",
+          });
+        }
+      });
+    },
+  },
+});

restaurant-frontend/vite.config.js

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from "vite";
-import vue from '@vitejs/plugin-vue'
+import vue from "@vitejs/plugin-vue";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
-})
+});

src/App.vue

@@ -1,7 +0,0 @@
-<script setup>
-import Inventory from './components/Inventory.vue'
-</script>
-
-<template>
-  <Inventory msg="Vite + Vue" />
-</template>

src/main.js

@@ -1,12 +0,0 @@
-import {
-    createApp
-} from 'vue'
-import './style.css'
-import App from './App.vue'
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-import {
-    createPinia
-} from 'pinia'
-const pinia = createPinia()
-createApp(App).use(pinia).use(ElementPlus).mount('#app')