W.W后端部署与接口测试教程

原创已于 2024-11-22 00:29:29 修改 · 618 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #node.js #express #mysql

于 2024-11-21 23:56:03 首次发布

W.W 专栏收录该内容

2 篇文章

订阅专栏

本篇为WanderWiser后端&数据库部署、链接、测试与运行笔记，供小组成员参考与浏览本地实现。

一. 环境配置

VSCode：确保已经配置好nodejs和npm（IDEA应该也没问题，但这里只展示vscode

Navicat：安装并连接MySQL。教程参考：

MySQL & NaviCat 安装及配置教程（Windows）【安装】_navicat下载安装和配置-优快云博客

Navicat的安装与mysql数据库的连接保姆级教程_navicat kingbase-优快云博客

MySQL：安装并与Nodejs连接。下面的教程提供了连接方法和一个简单的测试用例：

Node.js 连接 mysql 数据库（Navicat）超详细！！！_如何使用 navicat 运行 .js脚本-优快云博客

注：

1. 使用时需要修改程序中root的密码为你自己设置的；

2. 测试时需要确认MySQL服务已经打开；

3. 测试的时候除了Postman也可以直接用浏览器运行，但Postman这个工具还有很多其他好用的功能，下面的测试也会用到，建议配置；

（2024/11/14：项目api测试和管理现在计划使用Apifox，不过Postman作为一个个人开发轻量化的api测试工具也挺好用的。）

数据库文件（wanderwiser.sql）在github后端项目的根目录中，注意保持更新。

版本时间	更新内容
2024/10	初稿
2024/11	后端框架大修，更新url
2024/11/14	更新apifox说明、sql文件等说明

二. 后端接口测试

在确认MySQL和nodejs能够正常连接，能够正常运行上面第三个链接中的用例不报错，并且正确导入数据库文件后就可以开始后端接口的测试了。

数据库配置成功参考(后端需要及时更新数据库文件，每次更新数据库建议先完全删除原来的数据库文件)：

2.1 开启MySQL服务

方法一（首推）：控制台命令

（如果进行过PATH环境变量设置，可以省去这一步）打开cmd进入mySQL的安装目录下bin文件夹位置（我这里就是默认安装位置）

cd C:\Program Files\MySQL\MySQL Server 8.0\bin

以root身份登入：

mysql -h localhost -u root -p

输入你自己预先设置的密码，出现以下信息即开启成功：

方法二：MySQL Command Line

在开始界面输入MySQL，找到Command Line，和上面一样输入密码登录即可。

方法三：服务

打开“服务”功能。

可以通过win+R快捷键，输入“services.mvc”，回车；

也可以通过开始界面直接搜索“服务”（win11）打开。

打开后找到MySQL80服务，点击左边的启动或右键该服务点击启动，这一步也可以用于检查MySQL或其他服务是否在正常运行。如果发现自己无法通过命令行输入密码打开mysql服务，也需要首先在这个服务界面手动检查并开启mySQL服务。

（为了不拖慢开机速度所以笔者设置的是手动启动，当然你也可以图省事改成自动）

2.2 后端初始化

将后端代码所在的文件夹用VSCode打开，暂时不用管任何有关unknown的报错。

如果要在自己的电脑上运行，首先需要找到config目录下的dbconfig.js，将此处的数据库账号和密码改为自己的设置（通常账号名为root）。

在正式测试功能前，因为程序运行环境有所变动，为确保不会报错，在正式开发之前，我们先安装当前项目所需要的依赖（在每次进行github项目更新时执行一次）。

// 安装当前项目所需依赖
npm install

注意：安装依赖之后就可以正常运行当前项目了！

只有当进行项目的后续开发、需要添加新的依赖时，才需要安装需要的新依赖（这里以cors为例）并更新package.json和package-lock.json文件。

在VSCode终端按顺序运行以下命令：

// 项目第一次使用这些依赖时执行一次，以安装依赖
npm i cors

// 更新package.json
npm init -y

// 更新package-lock.json
npm install --package-lock-only

// 安装依赖
npm install

// 如果有提示信息，建议运行npm audit fix --force的话就自己多执行一个此命令

命令结束界面大致这样（旧版本代码的测试图，主要关注终端输出）：

2.3 使用Postman进行API测试（登录与注册功能）

在VSCode终端执行app.js文件（node [文件相对/绝对路径]）：

node app

可以看到我们在端口3000上启用了该服务：

如果没有在3000端口上正常运行，可能是有其他程序占用了端口。

解决方法：

打开cmd，查询3000端口占用情况并停用该进程：

// 指定端口占用（例如3000）PID情况
netstat -aon|findstr "3000"
// 根据pid结束对应进程（根据具体情况修改pid
taskkill /T /F /PID 19812

示例：

当需要修改后端代码，但程序正在端口上运行时，同样可以用这种方式暂停进程后进行更新（如图，已退出不可执行终端命令的状态。但其实更推荐直接在VSCode终端使用快捷键Ctrl+C！

当然，对于最后一种情况，直接粗暴地关掉VSCode再重新打开也是可以的......╮(╯▽╰)╭

回到正题。成功在本地端口（这里设置的是3000）上运行后，打开postman。

注册功能接口测试

选择动词为POST，输入url为，同时添加请求主体（body），设置类型raw、语言JSON。你可以对username和password的内容做自由修改。

{
  "username": "233",
  "password": "233"
}

点击Send。下方可以看到后端返回的信息。如果出现错误则会有其他提示，一些小bug和优化方案见代码注释，这里不多赘述。

打开navicat，刷新数据库userAccount表信息,可以看到新user已经成功插入了。

登录功能接口测试

同理，这里就不演示了。

2.4 前端与后端的跨域通信

与其他项目不同的是，本项目目前的前后端需要在同一台电脑、不同端口上运行（也可简单理解为：因为前端和后端分别运行在HBuilderX和VSCode两个不同的软件上，只能占用不同的本地端口（本项目中前端占用端口5173，后端监听3000））。

因此，在前端更新正确格式的请求体的同时，后端需要额外启用cor中间件以支持跨域请求，如下所示：

import cors from 'cors';
app.use(cors({
  // 允许前端来源
    origin: 'http://localhost:5173',
  // 允许的HTTP方法
    methods: ['GET', 'POST','PUT', 'DELETE', 'OPTIONS'], 
    // 如后续对前端运行端口或使用的HTTP方法需要更新，请在这里进行修改,该中间件申明需要置于其他中间件和路由申明之前
}));

注：

1. 这部分代码已经在后端文件app.js中，测试本功能时不需要修改；

2. 如后续对前端运行端口或使用的HTTP方法需要更新，请在这里进行修改；

3. 该中间件申明需要置于其他中间件和路由申明之前。

*等前端优化完再补充前端运行说明（其实把后端和数据库服务打开后，前端直接运行就可以了

当前端、Postman、Apifox等向后端监听的3000端口发送请求时，报错等信息均可以在VSCode终端中看到（全局默认提示只有请求方式+url+返回状态，实际可以自己在对应的控制器函数中额外定义提示信息，方便调试。