當前位置：首頁 > 前端技术 > vue >内容正文

vue

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

發布時間：2024/9/27 vue 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue + Spring Boot 项目实战（五）：数据库的引入小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

一、引入數據庫
- 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/> </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><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><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><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-elasticsearch</artifactId></dependency><dependency><groupId>com.sun.jna</groupId><artifactId>jna</artifactId><version>3.0.9</version></dependency><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><dependency><groupId>org.apache.tomcat.embed</groupId><artifactId>tomcat-embed-jasper</artifactId><version>8.5.23</version></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.21</version></dependency><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.12</version></dependency><dependency><groupId>commons-lang</groupId><artifactId>commons-lang</artifactId><version>2.6</version></dependency><dependency><groupId>org.apache.shiro</groupId><artifactId>shiro-spring</artifactId><version>1.3.2</version></dependency><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 项目实战（五）：数据库的引入的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：计算属性的setter和getter
下一篇： Git添加为远程仓库