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

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

2024-09-23

# 搭建本地测试数据库

# 安装 MySQL 并启动

下载 MySQL，以在本地搭建测试数据库。

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

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

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

# 创建 MySQL 数据库

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

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

2. 创建一个新的数据库：

   CREATE DATABASE admarker_db;

3. 切换到新创建的数据库：

   USE admarker_db;

# 向数据库中添加数据

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

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

   	CREATE TABLE biomarkers (
   	ID INT AUTO_INCREMENT PRIMARY KEY,
   	Biomarker VARCHAR(255) NOT NULL,
   	PMID INT NOT NULL,
   	Description TEXT,
   	Application VARCHAR(255)
   	);

2. 使用 INSERT INTO 语句插入数据

   	INSERT INTO biomarkers (Biomarker, PMID, Description, Application)
   	VALUES ('Biomarker1', 12345678, 'This is a description for Biomarker1.', 'Cancer Diagnosis');

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

喜大普奔：2024 年 6 月 Navicat 推出了一款免费的产品 ——Navicat Premium Lite。Navicat Premium Lite 是 Navicat 的精简版，拥有基本数据库操作所需的核心功能。

# 搭建后端服务

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

ADDB/

├── .vscode/                # 存放 VS Code 配置文件

├── node_modules/           # 存放项目依赖包

├── public/                 # 存放静态资源，如 HTML、favicon

├── src/                    # 源代码目录

│   ├── assets/             # 存放静态资源，如图片、字体

│   ├── components/         # 存放可复用的 Vue 组件

│   ├── router/             # 存放 Vue Router 配置

│   ├── stores/             # 存放状态管理配置（Pinia）

│   ├── views/              # 存放不同页面的 Vue 组件

│   ├── App.vue             # 根组件

│   ├── main.js             # 应用入口文件

├── .eslintrc.cjs           # ESLint 配置文件

├── .gitignore              # Git 忽略文件列表

├── .prettierrc.json        # Prettier 配置文件

├── index.html              # 主 HTML 模板文件

├── jsconfig.json           # JavaScript 项目配置文件

├── package.json            # 项目配置文件，记录依赖及脚本

├── pnpm-lock.yaml          # pnpm 锁定文件，确保依赖版本一致

├── README.md               # 项目的自述文档

├── vite.config.js          # Vite 配置文件

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

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

# 全局安装 express-generator

使用 pnpm 全局安装 express-generator ：

pnpm add -g express-generator

# 使用 express-generator 创建项目

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

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

cd ADDB

express --no-view backend

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

# 安装依赖

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

cd backend

pnpm install

# express-generator 生成的目录结构

生成的目录结构如下：

backend/

├── bin/                 # 存放启动脚本，如 www

├── public/              # 存放静态资源

├── routes/              # 路由目录

├── app.js               # Express 应用入口文件

├── package.json         # 项目依赖配置文件

└── node_modules/        # 存放依赖包

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

# 切换到 ES 模块语法

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

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

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

{

    ...

    "type": "module",

    ...

}

# 配置数据库连接

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

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

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

// db.js

const mysql = require('mysql2');

// 创建数据库连接池

const pool = mysql.createPool({

  host: 'localhost',

  user: 'root',

  password: 'password',

  database: 'database',

  waitForConnections: true,

  connectionLimit: 10,

  queueLimit: 0

});

// 导出查询方法

const db = pool.promise();

module.exports = db;

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