文章目录

一、引入数据库
- 1.安装数据库
- 2. 安装mysql
- 3. MySQL客户端
- 4. .使用 Navicat 创建数据库与表
二、使用数据库验证登录
- 1.项目相关配置
- 2.登录控制器
- - 2.1. User 类
  - 2.2. UserDAO
  - 2.3. UserService
  - 2.4. LoginController
  - 2.5. 测试

一、引入数据库

1.安装数据库

官网地址：https://dev.mysql.com/downloads/mysql/

2. 安装mysql

win10 下安装、配置、启动mysql
https://gblfy.blog.csdn.net/article/details/90112245

3. MySQL客户端

操作 MySQL 有很多种方式，可以先用 Navicat
参考连接：
https://gblfy.blog.csdn.net/article/details/90403214

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

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

-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (`id` int(11) unsigned NOT NULL AUTO_INCREMENT,`username` varchar(255) DEFAULT NULL,`password` varchar(255) DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES ('1', 'admin', '123');

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

安装完 MySQL 会有几个默认的数据库，这些不要动，我们在连接（即 WJ）上右键新建一个数据库，命名为 white_jotter，字符集选择 UTF-8，排序规则选择 utf8_general_ci 即可。

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

二、使用数据库验证登录

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

if (!Objects.equals("admin", username) || !Objects.equals("123456", requestUser.getPassword())) {String message = "账号密码错误";System.out.println("test");return new Result(400);} else {return new Result(200);}

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

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

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

1.项目相关配置

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

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.2.2.RELEASE</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.gblfy</groupId><artifactId>wj</artifactId><version>0.0.1-SNAPSHOT</version><name>wj</name><description>Demo project for Spring Boot</description><properties><java.version>1.8</java.version></properties><dependencies><!-- springboot web --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- springboot tomcat 支持 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-tomcat</artifactId><scope>provided</scope></dependency><!-- 热部署 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><optional>true</optional></dependency><!-- jpa--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId></dependency><!-- redis --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency><!-- springboot test --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><!-- thymeleaf --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><!-- elastic search --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-elasticsearch</artifactId></dependency><!-- 用了 elasticsearch 就要加这么一个，不然要com.sun.jna.Native 错误 --><dependency><groupId>com.sun.jna</groupId><artifactId>jna</artifactId><version>3.0.9</version></dependency><!-- thymeleaf legacyhtml5 模式支持 --><dependency><groupId>net.sourceforge.nekohtml</groupId><artifactId>nekohtml</artifactId><version>1.9.22</version></dependency><!-- 测试支持 --><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.12</version><scope>test</scope></dependency><!-- tomcat的支持.--><dependency><groupId>org.apache.tomcat.embed</groupId><artifactId>tomcat-embed-jasper</artifactId><version>8.5.23</version></dependency><!-- mysql--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.21</version></dependency><!-- junit --><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.12</version></dependency><!-- commons-lang --><dependency><groupId>commons-lang</groupId><artifactId>commons-lang</artifactId><version>2.6</version></dependency><!-- shiro --><dependency><groupId>org.apache.shiro</groupId><artifactId>shiro-spring</artifactId><version>1.3.2</version></dependency><!-- hsqldb --><dependency><groupId>org.hsqldb</groupId><artifactId>hsqldb</artifactId></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>

粘贴过去之后，IDE 会弹出提示，点击 Import Changes 或 Enable Auto-Import 都可以。
接下来就等待依赖的自动安装。过程可能比较长。如果自动安装的过程没有执行，可以在 pom.xml 上右键，选择 Maven -> Reimport 。

配置完依赖后，还需要配置数据库。打开 src\main\resources\application.yml，在原来的基础上，添加如下语句

spring:datasource:url: jdbc:mysql://127.0.0.1:3306/white_jotter?characterEncoding=UTF-8driver-class-name: com.mysql.jdbc.Driverusername: rootpassword: rootjpa:hibernate:ddl-auto: none

注意端口、数据库名、用户名、密码要与你想使用的数据库一致。

2.登录控制器

配置完成后，我们就可以完善登录控制器了。

2.1. User 类

首先，我们修改 User 类代码如下，以建立对数据库的映射。

package com.gblfy.wj.pojo;import com.fasterxml.jackson.annotation.JsonIgnoreProperties;import javax.persistence.*;@Entity
@Table(name = "user")
@JsonIgnoreProperties({"handler", "hibernateLazyInitializer"})
public class User {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)@Column(name = "id")int id;String username;String password;public int getId() {return id;}public void setId(int id) {this.id = id;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}
}

上面使用了一些注解，其中

@Entity 表示这是一个实体类
@Table(name=“user”) 表示对应的表名是 user

为了简化对数据库的操作，我们使用了 Java Persistence API（JPA），对于 @JsonIgnoreProperties({ “handler”,“hibernateLazyInitializer” })，解释起来比较复杂，下面的话看不懂可以忽略：

因为是做前后端分离，而前后端数据交互用的是 json 格式。那么 User 对象就会被转换为 json 数据。而本项目使用 jpa 来做实体类的持久化，jpa 默认会使用 hibernate, 在 jpa 工作过程中，就会创造代理类来继承 User ，并添加 handler 和 hibernateLazyInitializer 这两个无须 json 化的属性，所以这里需要用 JsonIgnoreProperties 把这两个属性忽略掉。

2.2. UserDAO

Data Access Object（数据访问对象，DAO）即用来操作数据库的对象，这个对象可以是我们自己开发的，也可以是框架提供的。这里我们通过继承 JpaRepository 的方式构建 DAO。

首先新建一个 package，命名为 dao，然后创建 Java Class，命名为 UserDAO，选择种类为 Interface

package com.gblfy.wj.dao;import com.gblfy.wj.pojo.User;
import org.springframework.data.jpa.repository.JpaRepository;public interface UserDAO extends JpaRepository<User, Integer> {User findByUsername(String username);User getByUsernameAndPassword(String username, String password);
}

这里关键的地方在于方法的名字。由于使用了 JPA，无需手动构建 SQL 语句，而只需要按照规范提供方法的名字即可实现对数据库的增删改查。

如 findByUsername，就是通过 username 字段查询到对应的行，并返回给 User 类。

这里我们构建了两个方法，一个是通过用户名查询，一个是通过用户名及密码查询。

2.3. UserService

新建 package，命名为 service，新建 Java Class，命名为 UserService，代码如下

package com.gblfy.wj.service;import com.gblfy.wj.dao.UserDAO;
import com.gblfy.wj.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;@Service
public class UserService {@AutowiredUserDAO userDAO;public boolean isExist(String username) {User user = getByName(username);return null != user;}public User getByName(String username) {return userDAO.findByUsername(username);}public User get(String username, String password) {return userDAO.getByUsernameAndPassword(username, password);}public void add(User user) {userDAO.save(user);}
}

这里实际上是对 UserDAO 进行了二次封装，一般来讲，我们在 DAO 中只定义基础的增删改查操作，而具体的操作，需要由 Service 来完成。当然，由于我们做的操作原本就比较简单，所以这里看起来只是简单地重命名了一下，比如把 “通过用户名及密码查询并获得对象” 这种方法命名为 get。

2.4. LoginController

登录控制器是我们功能的核心部分，尽管它十分简单。逻辑上面已经讲过了，具体的实现，就是通过 UserService 提供的 get 方法查询数据库，如果返回的对象为空，则验证失败，否则就验证成功。代码如下

package com.gblfy.wj.controller;import com.gblfy.wj.pojo.User;
import com.gblfy.wj.result.Result;
import com.gblfy.wj.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.util.HtmlUtils;@Controller
public class LoginController {@AutowiredUserService userService;@CrossOrigin@PostMapping(value = "/api/login")@ResponseBodypublic Result login(@RequestBody User requestUser) {String username = requestUser.getUsername();username = HtmlUtils.htmlEscape(username);User user = userService.get(username, requestUser.getPassword());if (null == user) {return new Result(400);} else {return new Result(200);}}
}

这个没有其它要说的，忘记了怎么回事的话可以回过头看下上一篇文章

2.5. 测试

同时运行前端项目 wj-vue 与后端项目 wj，

访问 http://localhost:8080/#/login，输入用户名 admin，密码 123456，我去，没进去！没进去就对了，因为数据库中 admin 的密码式 123 啊。

重新输入密码 123，成功进入 localhost:8080/#/index

OK，截至目前，前后端、数据库之间的关系都打通了。下一篇我打算讲讲怎么做表面功夫，即通过 Element 优化前端的界面。

Vue + Spring Boot 项目实战（五）：数据库的引入相关推荐

Vue + Spring Boot 项目实战（四）：数据库的引入
这一篇的主要内容是引入数据库并实现通过数据库验证用户名与密码. 本篇目录一.引入数据库 1.安装数据库 2.使用 Navicat 创建数据库与表二.使用数据库验证登录 1.项目相关配置 2.登录控 ...
Vue + Spring Boot 项目实战（十五）：动态加载后台菜单
重要链接: 「系列文章目录」「项目源码(GitHub)」本篇目录前言一.后端实现 1.表设计 2.pojo 3.菜单查询接口(树结构查询) 二.前端实现 1.后台页面设计 2.数据处理 3.添 ...
Vue + Spring Boot 项目实战（六）：前端路由与登录拦截器
本篇目录前言一.前端路由二.使用 History 模式三.后端登录拦截器 1.LoginController 2.LoginInterceptor 3.WebConfigurer 4.效果检验 ...
Vue + Spring Boot 项目实战（二十一）：缓存的应用
重要链接: 「系列文章目录」「项目源码(GitHub)」本篇目录前言一.缓存:工程思想的产物二.Web 中的缓存 1.缓存的工作模式 2.缓存的常见问题三.缓存应用实战 1.Redis 与 ...
Vue + Spring Boot 项目实战（三）：前后端结合测试（登录页面开发）
前面我们已经完成了前端项目 DEMO 的构建,这一篇文章主要目的如下: 一.打通前后端之间的联系,为接下来的开发打下基础二.登录页面的开发(无数据库情况下) 本篇目录前言:关于开发环境一.后端项 ...
Vue + Spring Boot 项目实战（九）：核心功能的前端实现
本篇目录前言一.代码部分 1.EditForm.vue(新增) 2.SearchBar.vue(新增) 3.Books.vue(修改) 4.LibraryIndex.vue(修改) 5.SideM ...
Vue + Spring Boot 项目实战（七）：导航栏与图书页面设计
本篇目录前言一.导航栏的实现 1.路由配置 2.使用 NavMenu 组件二.图书管理页面 1.LibraryIndex.vue 2.SideMenu.vue 3.Books.vue 前言之前 ...
Vue + Spring Boot 项目实战（十七）：后台角色、权限与菜单分配
重要链接: 「系列文章目录」「项目源码(GitHub)」本篇目录前言一.角色.权限分配 1.用户信息表与行数据获取 2.角色分配 3.权限分配二.菜单分配下一步前言有感于公司旁边的兰州 ...
Vue + Spring Boot 项目实战（二十一）：缓存的应用（转载）
重要链接: 「系列文章目录」「项目源码(GitHub)」本篇目录前言一.缓存:工程思想的产物二.Web 中的缓存 1.缓存的工作模式 2.缓存的常见问题三.缓存应用实战 1.Redis 与 ...

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