Vue + Spring Boot 项目实战（四）：数据库的引入

这一篇的主要内容是引入数据库并实现通过数据库验证用户名与密码。

本篇目录

• 一、引入数据库
• • 1.安装数据库
  • 2.使用 Navicat 创建数据库与表
• 二、使用数据库验证登录
• • 1.项目相关配置
  • 2.登录控制器
  • • User 类
    • UserDAO
    • UserService
    • LoginController
  • 3.测试

一、引入数据库

之前说过数据库的采用是 MySQL，算是比较主流的选择，从性能和体量等方面都比较优秀，当然也有一些弊端，但数据库不是我们这里讨论的重点，暂时能用就行。

1.安装数据库

我的 MySQL 版本是 5.7，官方下载页面是
https://dev.mysql.com/downloads/mysql/5.7.html#downloads

安装教程我随便搜了一篇，可以参考
https://blog.csdn.net/ma524654165/article/details/77855431

目前最新的版本是 8.0，也可以下载最新版本，使用最新版本需要做三处修改：
一、修改后端项目 的 mysql 依赖配置
二、为数据库设置一个长密码，而不能用简单的 等
三、修改 mysql 的时区为 +8:00

操作 MySQL 有很多种方式，可以用官方的 Command Line Client、Workbench，也可以用其它的一些界面化软件，比如 Navicat 等。如果之前没有接触过数据库，可以先用 Navicat，比较直观。安装方法参照这个博文：
https://blog.csdn.net/wypersist/article/details/79834490
我真是个好人啊，到处推荐别人的文章。。。

2.使用 Navicat 创建数据库与表

下面的内容主要针对初次使用数据库的读者，有经验的读者可以直接执行下面的 sql 语句，记得先新建一个数据库，名称最好叫 white_jotter，方便以后的配置。

按照上面贴出来的教程安装完 MySQL 和 Navicat 后，打开 Navicat，点击连接 -> MySQL，新建数据库连接

然后再添加第二、三个栏位，配置如下：

接下来，我们双击 user 表，进入表中，添加一行用户信息，id 为 1，账 是 admin，密码是 123，也可以随便按照自己喜好添加。

OK，到现在为止，数据库的操作就完成了。

二、使用数据库验证登录

上一篇中我们直接在后端的控制器中用如下语句判断了用户名和密码的正确性：

使用数据库验证的逻辑其实也类似，大概是如下过程：

第一步，获得前端发送过来的用户名和密码信息
第二步，查询数据库中是否存在相同的一对用户名和密码
第三步，如果存在，返回成功代码（200），如果不存在，返回失败代码（400）

这里的语句很简单，但在修改之前还需要一些准备工作。

1.项目相关配置

打开我们的后端项目 ，首先修改 ，配置我们需要的依赖。为了方便以后的开发，我直接把我的配置粘贴上来，大家可以把原来的所有配置删除掉，再粘贴我的。