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

时间  2020-01-13 标签 vue spring boot 项目 实战 四 数据库 引入

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

本篇目录

1、引入数据库

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

1.安装数据库

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

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

目前最新的版本是 8.0，也能够下载最新版本，使用最新版本须要作三处修改：
1、修改后端项目 pom.xml 的 mysql 依赖配置
2、为数据库设置一个长密码，而不能用简单的 admin 等
3、修改 mysql 的时区为 +8:00java

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

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

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

-- ----------------------------
-- 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，新建数据库链接
在这里插入图片描述
在弹出的界面中配置相关信息，若是以前安装数据库是按照上面的教程来的话，链接名随便起一个，主机名、端口、用户名都不用修改，密码是 root，其实我习惯设置成 admin，但看上面的教程是 root，这个项目无所谓，但记住实际的项目千万不要设置这么简单的密码，有很多企业的数据库密码还真就是 admin，被脱裤了才反应过来。。。redis

输入以后能够点击测试链接按钮测试一下，而后肯定。
在这里插入图片描述
双击在左侧出现的链接 WJ，就打开了这个链接。安装完 MySQL 会有几个默认的数据库，这些不要动，咱们在链接（即 WJ）上右键新建一个数据库，命名为 white_jotter，字符集选择 UTF-8，排序规则选择 utf8_general_ci 便可。
在这里插入图片描述
建立以后左侧就会出现一个名为 white_jotter 的数据库，双击它，点击“表”，而后点击“新建表”按钮，就进入了表设计界面。spring

为了完成登陆验证，咱们须要一个用户表，通常命名为 user，表里面暂定设计 3 个字段，分别是 id、username、password。sql

表设计界面默认有一个“栏位”，咱们能够在这个栏位中加入第一个须要的字段，即用户的 id，其设置以下
在这里插入图片描述
箭头指向的地方不要漏了。最后那把小钥匙的意思是主键，能够点击上面的主键按钮或者直接点击这个空白的栏位设置。

而后再添加第2、三个栏位，配置以下：
在这里插入图片描述
在这里插入图片描述
最后点击保存，把表命名为 user，这样咱们就有了第一张表。以后也能够在对象界面中选中表并点击“设计表”按钮从新设计。

接下来，咱们双击 user 表，进入表中，添加一行用户信息，id 为 1，帐号是 admin，密码是 123，也能够随便按照本身喜爱添加。
在这里插入图片描述
能够看到下面自动执行了一条 SQL 语句。这里多说一句，真实的项目中，用户信息可不能这么存，直接把帐号密码写上去太危险了，通常的作法是存储密码等信息的 hash 值。

OK，到如今为止，数据库的操做就完成了。

2、使用数据库验证登陆

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

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，配置咱们须要的依赖。为了方便之后的开发，我直接把个人配置粘贴上来，你们能够把原来的全部配置删除掉，再粘贴个人。

<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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.evan</groupId>
	<artifactId>wj</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>wj</name>
	<description>White Jotter - Your Mind Palace</description>
	<packaging>war</packaging>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.1.1.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<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>
	<properties>
		<java.version>1.8</java.version>
	</properties>
	<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.properties ，在原来的基础上，添加以下语句

spring.datasource.url=jdbc:mysql://127.0.0.1:3306/white_jotter?characterEncoding=UTF-8
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.jpa.hibernate.ddl-auto = none

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

2.登陆控制器

配置完成后，咱们就能够完善登陆控制器了。

User 类

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

package com.evan.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 把这两个属性忽略掉。

UserDAO

Data Access Object（数据访问对象，DAO）即用来操做数据库的对象，这个对象能够是咱们本身开发的，也能够是框架提供的。这里咱们经过继承 JpaRepository 的方式构建 DAO。

首先新建一个 package，命名为 dao，而后建立 Java Class，命名为 UserDAO，选择种类为 Interface
在这里插入图片描述
代码以下

package com.evan.wj.dao;

import com.evan.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 类。

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

UserService

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

package com.evan.wj.service;

import com.evan.wj.dao.UserDAO;
import com.evan.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。

LoginController

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

package com.evan.wj.controller;

import com.evan.wj.pojo.User;
import com.evan.wj.result.Result;
import com.evan.wj.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
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);
        }
    }
}

这个没有其它要说的，忘记了怎么回事的话能够回过头看下上一篇文章
Vue.js + Spring Boot 先后端分离项目实践（三）：先后端结合测试（登陆页面开发）

3.测试

同时运行前端项目 wj-vue 与后端项目 wj，访问 http://localhost:8080/#/login，输入用户名 admin，密码 123456，我去，没进去！没进去就对了，由于数据库中 admin 的密码式 123 啊。

从新输入密码 123，成功进入 localhost:8080/#/index
在这里插入图片描述
OK，截至目前，先后端、数据库之间的关系都打通了。下一篇我打算讲讲怎么作表面功夫，即经过 Element 优化前端的界面。

查看系列文章目录：
https://learner.blog.csdn.net/article/details/88925013

上一篇：Vue + Spring Boot 项目实战（三）：先后端结合测试（登陆页面开发）

下一篇：Vue + Spring Boot 项目实战（五）：使用 Element 辅助前端开发

联系我们 沪ICP备2021010478号-7