使用 Vue 3 + Element Plus 从头开始写一个数据库网站-04-后端服务搭建准备

由于 PrismJS 尚不支持 Vue 的语法高亮，因此 Vue 代码块均先使用 HTML 的高亮

2024-09-23

搭建本地测试数据库

安装 MySQL 并启动

下载 [MySQL](https://dev.mysql.com/downloads/mysql/)，以在本地搭建测试数据库。

以 8.4.2 LTS 版本为例，使用 MSI Installer 进行安装对新手来说比较便捷。

安装完成后，windows + R 输入 services.msc 打开服务，找到 MySQL84，右键启动

如果在安装过程中选择了启动 MySQL 服务，那么这个服务应该已经在运行了，但当我们下次再启动 MySQL 时，仍需先启动 MySQL 服务，否则输入密码后会闪退

创建 MySQL 数据库

按照以下步骤创建 MySQL 数据库和表：

打开 MySQL 命令行客户端（名为 `MySQL 8.4 Command Line Client`）并登录（密码应该已经在安装过程中被设置）

创建一个新的数据库：

切换到新创建的数据库：

向数据库中添加数据

如果数据比较少，可以手动添加

创建一个用于存储生物标志物信息的表：

使用 `INSERT INTO` 语句插入数据

如果数据比较多，可以使用数据库管理工具例如 phpMyAdmin（免费）、Navicat（付费）等来导入

喜大普奔：2024 年 6 月 Navicat 推出了一款免费的产品——[Navicat Premium Lite](https://www.navicat.com.cn/download/navicat-premium-lite)。Navicat Premium Lite 是 Navicat 的精简版，拥有基本数据库操作所需的核心功能。

搭建后端服务

在之前的教程中，我们已经了解了目录结构：

接下来我们使用 express-generator 生成后端项目骨架。

`express-generator` 可以快速创建一个基本的 Express 项目骨架，免去手动配置项目结构的麻烦。

全局安装 `express-generator`

使用 pnpm 全局安装 `express-generator`：

使用 `express-generator` 创建项目

后端项目可以根据你的需求放在与 Vue 3 项目根目录 `ADDB` 并列的层级，也可以放在 `ADDB` 下

以放在 `ADDB` 下为例，在 `ADDB` 目录下，使用 `express-generator` 来创建后端项目：

`--no-view`：该选项表示不使用任何模板引擎（如 Pug），仅生成基本的 API 项目。如果你打算为项目添加视图层，可以选择合适的模板引擎（如 Pug、EJS、Handlebars 等）。

安装依赖

创建项目后，进入 `backend` 目录并安装依赖：

`express-generator` 生成的目录结构

生成的目录结构如下：

生成的骨架代码已经包含基本的路由、静态资源、错误处理和日志等配置，可以根据需要进行扩展。

切换到 ES 模块语法

现代的 Node.js 项目，尤其是与 Vite 或其他现代打包工具一起使用时，通常使用的是 ES 模块规范 (ESM)，例如 Vue 3 使用 ES6 语法。

与之相对的是 CommonJS 模块系统，这是 Node.js 的传统模块系统，在 Node.js 中默认使用。

为保持一致性，我们在 `package.json` 文件中加一行来切换到 ES 模块语法

配置数据库连接

在 `backend` 项目中，通常在 `app.js` 中配置数据库连接，或者我们可以提取到一个独立的文件中。

为了项目结构清晰，我们可以在 `backend` 目录下创建一个 `db.js` 文件来管理数据库连接。

在 `backend` 目录下创建 `db.js` 文件并写入：

这里我们使用了连接池，以提高数据库查询的性能。