前言

这是一个练练手的项目，开发起始时间为2024.10.29
尽量赶在一周内完成该项目的开发。
项目——连锁餐厅管理系统
采用前后端分离的方式创建系统，首先前端打算采用Vue 2 + Vuex + Vue Router。

计划临时有变，新的更改为全栈采用node.js

实践-前端

1.基础配置

1.首先安装Node.js和npm。此处略过….

使用 Vue CLI创建Vue项目。

2.安装 Vue CL：

npm install -g @vue/cli
# 或者
yarn global add @vue/cli

在webstrome里创建一个新的项目。此处要设置为

vue/cli vue。一定要是这个，不然后面会有冲突版本的。

3.安装 Element UI：

npm install element-ui
# 或者
yarn add element-ui

项目引入

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

4.配置Vue Router和Vuex

安装

npm install vue-router vuex
# 或者
yarn add vue-router vuex

修正一下：

上述命令与Vue2不兼容调整为：

npm install vuex@3

配置Vue Router：

// src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';

import Home from '../views/Home.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // 更多路由
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

配置Vuex：

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {}
});

5.关于对Vuex的一些理解：

比喻：餐厅服务

想象一下你在一家大型连锁餐厅吃饭，这家餐厅有许多桌子，每桌都有顾客。这些顾客是你的 Vue 组件。他们可能需要点餐（获取数据）、改变订单（更新数据）或者要求结账（删除数据）。

没有 Vuex 的情况：
每个服务员（组件）需要记住每个顾客的所有请求和特殊需求，并且每次服务都需要单独处理，包括去厨房传达信息。如果一桌顾客要改变他们的订单，服务员需要再次跑到厨房去更新信息。这在几桌顾客的情况下可能可行，但想象一下如果有上百桌顾客，这将是多么混乱和容易出错！

有了 Vuex 的情况：
现在，餐厅引入了一个中央订单系统（Vuex）。所有的服务员（组件）通过这个系统来处理订单。当一个顾客要点餐时，服务员只需将请求输入到这个中央系统。如果顾客想要修改订单，服务员只需在系统中更新即可，而不需要记住每一个细节或亲自去厨房。

这个系统确保了所有的信息都在一个地方集中管理，所有的服务员都可以实时看到最新的订单状态，整个过程变得更高效和有序。此外，如果需要对订单进行任何统计或报告，系统可以轻松提供这些信息。

Vuex 在 Vue 应用中的具体作用：

集中管理状态：Vuex 为所有组件提供一个集中的状态存储，所有状态的变更都是可预测和可追踪的。
维护状态的一致性：在多个组件和页面之间共享数据时，Vuex 确保数据状态的一致性，无需手动同步各个组件之间的数据。
调试工具：Vuex 支持时光旅行调试，可以帮助你在开发过程中轻松追踪数据的变化和状态的变更。

通过上述比喻和解释，希望你能更清楚地理解 Vuex 在管理和维护大型 Vue 应用中的重要性和便利性。简而言之，Vuex 就像一个使所有部分都有序运作的中央大脑，使得数据管理变得清晰和高效。

2.编写组件

3.路由管理

实践-后端

1.express

安装express

npm i express

安装nodemon

npm i nodemon

编写server.js

const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;

// 中间件：解析 JSON 请求体
app.use(express.json());

// 测试路由
app.get('/', (req, res) => {
    res.send('欢迎来到我的后端服务器！');
});

// 启动服务器
app.listen(PORT, () => {
    console.log(`服务器正在运行，监听端口'Server is running on http://localhost:3000' ${PORT}`);
});

搭建web服务框架及相关端口

2.数据库mysql

采用mysql2模块。mysql出现错误

经查阅是npm包mysql的问题

MySQL 8 支持可插拔身份验证方法。默认情况下，使用名为 caching_sha2_password 的其中一个，而不是我们良好的旧mysql_native_password （source）。很明显，使用带有多次握手的加密算法比已经存在了 24 年的普通密码传递更安全！

现在，问题是 Node 中的 mysqljs（您使用 npm i mysql 安装并在 Node 代码中使用它的包）尚不支持 MySQL 8 的这种新的默认身份验证方法。问题就在这里。

具体可以参考大佬的总结：https://stackoverflow.com/questions/50093144/mysql-8-0-client-does-not-support-authentication-protocol-requested-by-server

实践-

1.创建数据库名及表名称

create database 'resturantsystem'

根据要完成的内容构建数据库表

人员信息表
公告表
菜品表
订单表
餐厅表
···

人员信息表考虑到需要验证其身份。

发现自己做的太复杂，最后定义为以下几个表：
- 人员信息表
- 管理员表
- 公告表
- 轮播图表
- 菜品表
- 菜品分类表
- 订单表

基于node.js开发的项目开发历程

前言