测试登录功能

打开终端

首先我们点击”终端”，然后新建一个终端。

进入后端目录

然后在终端中输入：

cd account-backend

启动后端服务

然后输入：

npm run dev

这样去启动一下后端服务。

发现错误

启动之后有报错，我们看一下：数据库连接失败。

打开配置文件

我们打开一下后端的配置文件 .env.development。

我们看一下这里的数据库配置：

DB_HOST=localhost
DB_PASSWORD=your-password

这个呢，都需要去改一下。

获取数据库信息

我们要将这些配置修改成之前在云服务器上部署的数据库的信息。

首先打开 Navicat，找到我们之前新建的连接，点击”编辑连接”。

然后复制一下主机地址：

• 主机：xxx.xxx.xxx.xxx（你的云服务器 IP）
• 用户名：root（不用改）
• 密码：老王369

创建数据库

数据库名是 account-dev，这个呢我们需要去新建一下。

双击连接，然后点击右键”新建数据库”。

在这里输入 account-dev。

字符集配置：

• 字符集：输入 UTF-8，然后选择 utf8mb4
• 排序规则：点击右侧的这个箭头，选择第一个 utf8mb4_0900_ai_ci

然后点击确定。

更新配置文件

修改 .env.development 文件：

DB_HOST=你的服务器IP
DB_PORT=3306
DB_USERNAME=root
DB_PASSWORD=老王369
DB_DATABASE=account-dev

停止服务

现在我们来重新启动一下后端。

点击当前终端右上角的这个 backend，然后选择”停止终端”。

重新启动

我们再点一下”终端”，新建终端。

cd account-backend
npm run dev

验证连接

我们可以看到数据库已经连接成功了！

查看自动创建的表

我们再次回到 Navicat，双击 account-dev。

我们可以看到，它已经帮我们自动新建了两张表：

1. 一张呢是用户表（user）
2. 另一张是验证码的表（sms_code）

新建终端

然后我们再启动一下客户端。

点击这个加号，新建一个终端。

进入客户端目录

这里面输入：

cd account-client

然后回车。

启动客户端

我们执行：

pnpm dev:h5

然后回车。

查看启动信息

我们看一下，现在客户端呢也启动好了，默认的端口是 9000。

然后我们再看一下上面的信息，我们看到这里有一个 VITE_SERVICE_BASE_URL 指向的是 3000，也就是我们的后端服务。

打开客户端界面

我们按住 Ctrl，然后鼠标左键点击 http://localhost:9000。

这样，我们就打开了我们的客户端的界面。

切换到手机模式

然后按住键盘上的 F12。

输入手机号

我们现在来测试一下登录的功能。

我们在这里输入一个手机号码，比如：13800138888。

获取验证码

然后点击”获取验证码”。

我们看到后端的控制台呢，已经输出了模拟短信服务的对应的验证码：244407。

输入验证码并登录

然后把验证码填到这里：244407。

点击”登录”。

登录成功

我们发现现在登录已经成功了！

自动注册说明

并且这个用户之前是不存在的，现在已经自动注册了。

自动注册之后呢，数据库里面就应该有一条这样的用户信息。

查看数据库记录

我们来看一下。

打开 Navicat，然后找到这个表 user 表，然后直接双击。

验证数据

我们看到数据库里面呢，已经有了这条用户信息：