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

文章目录

一、引入数据库

1.安装数据库

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

2. 安装mysql

win10 下安装、配置、启动mysql

3. MySQL客户端

操作 MySQL 有很多种方式，可以先用 Navicat
参考连接：

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:///POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http:///POM/4.0.0 https:///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-8
    driver-class-name: com.mysql.jdbc.Driver
    username: root
    password: root
  jpa:
    hibernate:
      ddl-auto:

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

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 {
    @Autowired
    UserDAO 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 {

    @Autowired
    UserService userService;

    @CrossOrigin
    @PostMapping(value = "/api/login")
    @ResponseBody
    public 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 优化前端的界面。