springboot?vue測(cè)試平臺(tái)開(kāi)發(fā)調(diào)通前后端環(huán)境實(shí)現(xiàn)登錄
基于 springboot+vue的測(cè)試平臺(tái)開(kāi)發(fā)
一、前端環(huán)境搭建
在前端框架vue-element-admin這個(gè)項(xiàng)目中，有一個(gè)簡(jiǎn)潔輕量型的項(xiàng)目vue-admin-template，這里面初始化的內(nèi)容少，適合初學(xué)者，防止一上來(lái)就被那么多的代碼弄暈。
快速安裝
# 克隆項(xiàng)目 git clone https://github.com/PanJiaChen/vue-admin-template.git # 進(jìn)入項(xiàng)目目錄 cd vue-element-admin # 安裝依賴(lài) npm install # 可以通過(guò)如下操作解決 npm 下載速度慢的問(wèn)題 npm install --registry=https://registry.npm.taobao.org # 本地開(kāi)發(fā) 啟動(dòng)項(xiàng)目 npm run dev
2 個(gè)npm install的任意選擇一個(gè)即可，下面的使用的是國(guó)內(nèi)的淘寶鏡像，速度會(huì)更快些。
啟動(dòng)之后就會(huì)看到登錄頁(yè)，說(shuō)明安裝成功。
點(diǎn)擊登錄進(jìn)去，就可以看到首頁(yè)了。
但是我們還沒(méi)實(shí)現(xiàn)后端，怎么就登錄了？這是因?yàn)榍岸丝蚣芾锬壳暗恼?qǐng)求都是走的它內(nèi)置的 mock，所以等會(huì)要去開(kāi)發(fā)后端接口替換掉這些 mock。
二、后端環(huán)境搭建
創(chuàng)建應(yīng)用
直接使用 idea 創(chuàng)建一個(gè) springboot 應(yīng)用即可，可以使用Spring Initializr來(lái)快速創(chuàng)建。
完事之后就要在pom.xml里添加響應(yīng)依賴(lài)即可。
我這里是創(chuàng)建的時(shí)候勾選了一些項(xiàng)目，自動(dòng)會(huì)生成出來(lái)依賴(lài)。
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--mybatis-plus-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.0.5</version>
</dependency>
<dependency>
<groupId>org.springframework.experimental</groupId>
<artifactId>spring-native</artifactId>
<version>${spring-native.version}</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-configuration-processor</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-core</artifactId>
<version>3.0.5</version>
</dependency>
</dependencies>重點(diǎn)是mybatis-plus-core這個(gè)依賴(lài)要添加好，后面要用它進(jìn)行數(shù)據(jù)庫(kù)交互。
配置 application.properties
這里目前主要配置數(shù)據(jù)庫(kù)的連接信息。我的mysql安裝在華為云上，系統(tǒng)是 centos8。
# mysql spring.datasource.url=jdbc:mysql://xxx.x.xx.101:3306/bloomtest?characterEncoding=UTF-8&serverTimezone=UTC spring.datasource.username=root spring.datasource.password=xxxxxx spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver spring.datasource.hikari.max-lifetime=1000000 # 上下文地址為 server.servlet.context-path=/bloomtest
spring.datasource.hikari.max-lifetime：默認(rèn)數(shù)據(jù)源連接池，連接最大存活時(shí)間，設(shè)置長(zhǎng)一些，防止長(zhǎng)時(shí)間不操作斷開(kāi)連接，不方便調(diào)試。
server.servlet.context-path：配置上下文路徑，比如我的登錄接口路徑為/user/login，請(qǐng)?jiān)L問(wèn)的時(shí)候就是localhost:8080/bloomtest/user/login。
三、實(shí)現(xiàn)登錄
登錄就涉及到用戶(hù)，還會(huì)涉及到權(quán)限管理之類(lèi)，但是這個(gè)不作為當(dāng)前的重點(diǎn)，目前只是需要可以正常登錄即可。
F12 可以查看 mock 登錄時(shí)候的請(qǐng)求，共有 2 個(gè)接口，所以就參照 mock 返回的數(shù)據(jù)來(lái)返回對(duì)應(yīng)真實(shí)的數(shù)據(jù)。
代碼目前大致有如下的結(jié)構(gòu)，先眼熟即可。
1. mysql 建表
登錄的話(huà)，就是拿前端傳參過(guò)來(lái)的用戶(hù)名和密碼，看下是否存在數(shù)據(jù)庫(kù)用戶(hù)表里，存在就可以登錄，不存在就返回失敗。
所以，在此之前還需要建張 user 表：
CREATE TABLE `user` ( `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主鍵ID', `username` varchar(30) DEFAULT NULL COMMENT '用戶(hù)名', `password` varchar(30) DEFAULT NULL COMMENT '年齡', `createTime` datetime NOT NULL DEFAULT '1900-01-01 00:00:00' COMMENT '創(chuàng)建時(shí)間', `updateTime` datetime NOT NULL DEFAULT '1900-01-01 00:00:00' COMMENT '更新時(shí)間', PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8 COMMENT='用戶(hù)表';
然后手動(dòng)新增了 3 個(gè)用戶(hù)：
2. 后端-實(shí)現(xiàn) /login 接口
(1)創(chuàng)建實(shí)體類(lèi) User
package com.pingguo.bloomtest.pojo;
import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;
import java.util.Date;
@Data
public class User {
@TableId(type = IdType.ID_WORKER)
private Long id;
private String username;
private String password;
@TableField(fill = FieldFill.INSERT) // 新增的時(shí)候填充數(shù)據(jù)
private Date createTime;
@TableField(fill = FieldFill.INSERT_UPDATE) // 新增或修改的時(shí)候填充數(shù)據(jù)
private Date updateTime;
}注解神馬的在之前 spring 相關(guān)技術(shù)棧里已經(jīng)有過(guò)介紹，有需要的可以去翻看或者直接百度即可。
(2)創(chuàng)建接口 UserDAO
package com.pingguo.bloomtest.dao;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.pingguo.bloomtest.pojo.User;
import org.springframework.stereotype.Repository;
@Repository
public interface UserDAO extends BaseMapper<User> {
}這里使用 mybatis-plus 框架，在文末會(huì)附上之前學(xué)習(xí)此框架的內(nèi)容供學(xué)習(xí)參考。
(3)創(chuàng)建Service層 UserService
這里就是真正處理業(yè)務(wù)邏輯的地方，這里提供方法直接給后面的 controller 層調(diào)用。
package com.pingguo.bloomtest.service;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.pingguo.bloomtest.dao.UserDAO;
import com.pingguo.bloomtest.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.HashMap;
import java.util.Map;
@Service
public class UserService {
@Autowired
private UserDAO userDAO;
/**
* 判斷用戶(hù)是否存在，存在則返回true，不存在則返回false
* @param username 用戶(hù)名
* @param password 用戶(hù)密碼
* @return true,false
*/
public boolean isUserExist(String username, String password) {
//創(chuàng)建對(duì)象，泛型里加上實(shí)體對(duì)象
QueryWrapper<User> wrapperUser = new QueryWrapper<>();
// 先創(chuàng)建一個(gè) hashmap，然后把多個(gè)條件put進(jìn)去，再調(diào)用allEq
Map<String, Object> map = new HashMap<>();
map.put("username", username);
map.put("password", password);
// 設(shè)置查詢(xún)的條件
wrapperUser.allEq(map);
// 調(diào)用方法查詢(xún)一個(gè)返回記錄
int count = userDAO.selectCount(wrapperUser);
if (count == 1) {
return true;
} else {
return false;
}
}
}這里就與 mysql 進(jìn)行交互了，用到的就是 mybatis-plus 的語(yǔ)法，詳見(jiàn)文末附上的文章鏈接。
這里方法返回 true 表示庫(kù)里存在該用戶(hù)，即可以登錄。否則返回 false。
(4)創(chuàng)建Controller層 UserController
這里就是接收前端請(qǐng)求的地方了。
package com.pingguo.bloomtest.controller;
import com.pingguo.bloomtest.common.Result;
import com.pingguo.bloomtest.controller.request.UserRequest;
import com.pingguo.bloomtest.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
@RestController
@RequestMapping("user")
public class UserController {
@Autowired
UserService userService;
@PostMapping("/login")
public Result login(@RequestBody UserRequest user) throws Exception {
String username = user.getUsername();
String password = user.getPassword();
if (userService.isUserExist(username, password)) {
Map<String, Object> userToken = new HashMap<>(4);
userToken.put("token","admin-token");
return Result.success(userToken);
} else {
return Result.fail("用戶(hù)名或密碼錯(cuò)誤");
}
}
}Controller 層調(diào)用 Service層，Service層 再調(diào)用 dao 層與 DB進(jìn)行交互。
這里返回了是一個(gè)Result類(lèi)型的結(jié)果，這里是為了更好的返回?cái)?shù)據(jù)，進(jìn)行了一個(gè)類(lèi)的封裝。
在 common 包下新建了一個(gè)類(lèi)Result：
package com.pingguo.bloomtest.common;
import lombok.Data;
@Data
public class Result {
private static final int SUCCESS_CODE = 20000;
private static final int FAIL_CODE = 20005;
private int code;
private String message;
private Object data;
private Result(int code, String message, Object data) {
this.code = code;
this.message = message;
this.data = data;
}
public static Result success() {
return new Result(SUCCESS_CODE, "成功", null);
}
public static Result success(Object data) {
return new Result(SUCCESS_CODE, "成功", data);
}
public static Result fail(String message) {
return new Result(FAIL_CODE, message, null);
}
/**
* 傳入失敗狀態(tài)碼，返回Result結(jié)果
* @param code 失敗狀態(tài)碼
* @param message 文本提示
* @return Result結(jié)果
*/
public static Result fail(int code, String message) {
return new Result(code, message, null);
}
}另外，這里的傳參UserRequest user，也是為了便于獲取請(qǐng)求參數(shù)，而創(chuàng)建的類(lèi)。
(5)啟動(dòng)應(yīng)用，測(cè)試 /login 接口
直接使用 postman 進(jìn)行調(diào)用。
換個(gè)不存在的傳參。
接口正常。
3. 前端-修改代碼實(shí)現(xiàn)登錄
(1)修改 .env.development
這樣前端請(qǐng)求訪(fǎng)問(wèn)的就是后端的http://127.0.0.1:8080地址和端口。
(2)修改 \src\api\user.js
這里就是前端請(qǐng)求的接口路徑，替換成我們實(shí)現(xiàn)的 /login，
(3)\src\utils\request.js
至于我后端接口返回成功code 為什么是 20000呢？是因?yàn)榍岸丝蚣芾镒隽私y(tǒng)一的封裝，這里喜歡的話(huà)你自己也可以改成別的。
(4)\src\views\login\index.vue
這里就是存放頁(yè)面的地方了，是后面前端代碼的主要陣地。
從Login按鈕的綁定的事件知道handleLogin就是用來(lái)處理登錄的方法，不過(guò)這里暫時(shí)不需要進(jìn)行改動(dòng)。
重新構(gòu)建后點(diǎn)擊登錄，可以看到請(qǐng)求了真正的后端接口。
可是報(bào)錯(cuò)了。
4. 解決跨域
報(bào)錯(cuò)是跨域問(wèn)題，解決跨域，可以在后端進(jìn)行處理，增加一個(gè)配置類(lèi)。
package com.pingguo.bloomtest.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class CorsConfig {
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig());
return new CorsFilter(source);
}
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
// 1允許任何域名使用
corsConfiguration.addAllowedOrigin("*");
// 2允許任何頭
corsConfiguration.addAllowedHeader("*");
// 3允許任何方法(post、get等)
corsConfiguration.addAllowedMethod("*");
return corsConfiguration;
}
}重試一下，登錄請(qǐng)求成功了，但是不能跳轉(zhuǎn)，因?yàn)檫€有個(gè)接口沒(méi)實(shí)現(xiàn)，那就是/useInfo。
5. 后端-實(shí)現(xiàn) /useInfo 接口
套路跟上面一樣，但是這里因?yàn)橹苯訉?xiě)一個(gè)與 mock 返回的一樣的數(shù)據(jù)，所以直接在 controller 類(lèi)下新增一個(gè)控制器方法直接處理返回。
@GetMapping("/useInfo")
public Result useInfo(HttpServletRequest request) throws Exception {
String token = request.getParameter("token");
Map<String, Object> result = new HashMap<>(8);
ArrayList roles = new ArrayList<>();
String allowableToken = "admin-token";
if (token.equals(allowableToken)) {
roles.add("admin");
result.put("roles", roles);
result.put("introduction", "我是超級(jí)管理員");
result.put("avatar", "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
}
return Result.success(result);
}重啟應(yīng)用，可以正常登錄。
6. 后端-實(shí)現(xiàn) /logout 接口
最后再補(bǔ)充一個(gè)退出登錄的接口。
@PostMapping("/logout")
public Result logout() throws Exception {
return Result.success();
}重啟測(cè)試，點(diǎn)擊頭像懸浮展示的logout，成功退出到登錄頁(yè)。
四、小結(jié)
本篇內(nèi)容主要是前后環(huán)境調(diào)通，以及基礎(chǔ)登錄的實(shí)現(xiàn)，后續(xù)就可以正常先進(jìn)行重要功能的開(kāi)發(fā)了。
附上之前整理的 mybatis-plus 的學(xué)習(xí)筆記，簡(jiǎn)單明了易上手，僅供參考。
【mybatis-plus】CRUD必備良藥，mybatis的好搭檔
【mybatis-plus】主鍵id生成、字段自動(dòng)填充
【mybatis-plus】什么是樂(lè)觀鎖？如何實(shí)現(xiàn)“樂(lè)觀鎖”
希望大家以后多多支持腳本之家！
- vue前端測(cè)試開(kāi)發(fā)watch監(jiān)聽(tīng)data的數(shù)據(jù)變化
- springboot?vue測(cè)試前端項(xiàng)目管理列表分頁(yè)功能實(shí)現(xiàn)
- springboot?vue測(cè)試平臺(tái)前端項(xiàng)目查詢(xún)新增功能
- springboot?vue接口測(cè)試HutoolUtil?TreeUtil處理樹(shù)形結(jié)構(gòu)
- springboot?vue接口測(cè)試前后端樹(shù)節(jié)點(diǎn)編輯刪除功能
- springboot?vue接口測(cè)試前端動(dòng)態(tài)增刪表單功能實(shí)現(xiàn)
- 前端自動(dòng)化測(cè)試Vue中TDD和單元測(cè)試示例詳解
相關(guān)文章
這篇文章主要介紹了Java的面相對(duì)象編程思想,包括類(lèi)對(duì)象方法和封裝繼承多態(tài)等各個(gè)方面的OOP基本要素,非常推薦,需要的朋友可以參考下，希望可以對(duì)你有所幫助2021-07-07
這篇文章主要介紹了Java跳躍游戲，總的來(lái)說(shuō)這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達(dá)的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過(guò)程。希望通過(guò)這道題能給你帶來(lái)一種解題優(yōu)化的思路2022-10-10
這篇文章主要為大家詳細(xì)介紹了java設(shè)計(jì)模式之抽像工廠的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要介紹了Spring注解@Value及屬性加載配置文件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-07-07
java實(shí)現(xiàn)文件切片上傳百度云+斷點(diǎn)續(xù)傳的方法
文件續(xù)傳在很多地方都可以用的到，本文主要介紹了java實(shí)現(xiàn)文件切片上傳百度云+斷點(diǎn)續(xù)傳的方法，?文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
一篇文章帶你了解Maven的坐標(biāo)概念以及依賴(lài)管理
這篇文章主要為大家介紹了Maven的坐標(biāo)概念以及依賴(lài)管理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-01-01
這篇文章主要介紹了Java中Semaphore(信號(hào)量)的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
JAVA LinkedList和ArrayList的使用及性能分析
JAVA LinkedList和ArrayList的使用及性能分析，這篇文章也是以JAVA List的總結(jié)。2013-11-11
JAVA調(diào)用SAP WEBSERVICE服務(wù)實(shí)現(xiàn)流程圖解
這篇文章主要介紹了JAVA調(diào)用SAP WEBSERVICE服務(wù)實(shí)現(xiàn)流程圖解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
這篇文章給大家總結(jié)了常用的兩種spring、mybatis 配置方式，本文給大家介紹的非常詳細(xì)，需要的朋友參考下吧2017-12-12