欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

springboot?vue測試平臺開發(fā)調(diào)通前后端環(huán)境實現(xiàn)登錄

 更新時間：2022年05月27日 12:49:51   作者：把蘋果咬哭的測試筆記  
這篇文章主要介紹了springboot?vue測試平臺開發(fā)調(diào)通前后端環(huán)境實現(xiàn)登錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

基于 springboot+vue的測試平臺開發(fā)

一、前端環(huán)境搭建

在前端框架vue-element-admin這個項目中，有一個簡潔輕量型的項目vue-admin-template，這里面初始化的內(nèi)容少，適合初學(xué)者，防止一上來就被那么多的代碼弄暈。

快速安裝

# 克隆項目
git clone https://github.com/PanJiaChen/vue-admin-template.git
# 進(jìn)入項目目錄
cd vue-element-admin
# 安裝依賴
npm install
# 可以通過如下操作解決 npm 下載速度慢的問題
npm install --registry=https://registry.npm.taobao.org
# 本地開發(fā) 啟動項目
npm run dev

2 個npm install的任意選擇一個即可，下面的使用的是國內(nèi)的淘寶鏡像，速度會更快些。

啟動之后就會看到登錄頁，說明安裝成功。

點擊登錄進(jìn)去，就可以看到首頁了。

但是我們還沒實現(xiàn)后端，怎么就登錄了？這是因為前端框架里目前的請求都是走的它內(nèi)置的 mock，所以等會要去開發(fā)后端接口替換掉這些 mock。

二、后端環(huán)境搭建

創(chuàng)建應(yīng)用

直接使用 idea 創(chuàng)建一個 springboot 應(yīng)用即可，可以使用Spring Initializr來快速創(chuàng)建。

完事之后就要在pom.xml里添加響應(yīng)依賴即可。

我這里是創(chuàng)建的時候勾選了一些項目，自動會生成出來依賴。

<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>

重點是mybatis-plus-core這個依賴要添加好，后面要用它進(jìn)行數(shù)據(jù)庫交互。

配置 application.properties

這里目前主要配置數(shù)據(jù)庫的連接信息。我的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è)置長一些，防止長時間不操作斷開連接，不方便調(diào)試。

server.servlet.context-path：配置上下文路徑，比如我的登錄接口路徑為/user/login，請訪問的時候就是localhost:8080/bloomtest/user/login。

三、實現(xiàn)登錄

登錄就涉及到用戶，還會涉及到權(quán)限管理之類，但是這個不作為當(dāng)前的重點，目前只是需要可以正常登錄即可。

F12 可以查看 mock 登錄時候的請求，共有 2 個接口，所以就參照 mock 返回的數(shù)據(jù)來返回對應(yīng)真實的數(shù)據(jù)。

代碼目前大致有如下的結(jié)構(gòu)，先眼熟即可。

1. mysql 建表

登錄的話，就是拿前端傳參過來的用戶名和密碼，看下是否存在數(shù)據(jù)庫用戶表里，存在就可以登錄，不存在就返回失敗。

所以，在此之前還需要建張 user 表：

CREATE TABLE `user` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主鍵ID',
  `username` varchar(30) DEFAULT NULL COMMENT '用戶名',
  `password` varchar(30) DEFAULT NULL COMMENT '年齡',
  `createTime` datetime NOT NULL DEFAULT '1900-01-01 00:00:00' COMMENT '創(chuàng)建時間',
  `updateTime` datetime NOT NULL DEFAULT '1900-01-01 00:00:00' COMMENT '更新時間',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8 COMMENT='用戶表';

然后手動新增了 3 個用戶：

2. 后端-實現(xiàn) /login 接口

(1)創(chuàng)建實體類 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ù)據(jù)
    private Date createTime;
    @TableField(fill = FieldFill.INSERT_UPDATE) // 新增或修改的時候填充數(shù)據(jù)
    private Date updateTime;
}

注解神馬的在之前 spring 相關(guān)技術(shù)棧里已經(jīng)有過介紹，有需要的可以去翻看或者直接百度即可。

(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 框架，在文末會附上之前學(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;
    /**
     * 判斷用戶是否存在，存在則返回true，不存在則返回false
     * @param username 用戶名
     * @param password 用戶密碼
     * @return true,false
     */
    public boolean isUserExist(String username, String password) {
        //創(chuàng)建對象，泛型里加上實體對象
        QueryWrapper<User> wrapperUser = new QueryWrapper<>();
        // 先創(chuàng)建一個 hashmap，然后把多個條件put進(jìn)去，再調(diào)用allEq
        Map<String, Object> map = new HashMap<>();
        map.put("username", username);
        map.put("password", password);
        // 設(shè)置查詢的條件
        wrapperUser.allEq(map);
        // 調(diào)用方法查詢一個返回記錄
        int count = userDAO.selectCount(wrapperUser);
        if (count == 1) {
            return true;
        } else {
            return false;
        }
    }
}

這里就與 mysql 進(jìn)行交互了，用到的就是 mybatis-plus 的語法，詳見文末附上的文章鏈接。

這里方法返回 true 表示庫里存在該用戶，即可以登錄。否則返回 false。

(4)創(chuàng)建Controller層 UserController

這里就是接收前端請求的地方了。

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("用戶名或密碼錯誤");
        }
    }
}

Controller 層調(diào)用 Service層，Service層 再調(diào)用 dao 層與 DB進(jìn)行交互。

這里返回了是一個Result類型的結(jié)果，這里是為了更好的返回數(shù)據(jù)，進(jìn)行了一個類的封裝。

在 common 包下新建了一個類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，也是為了便于獲取請求參數(shù)，而創(chuàng)建的類。

(5)啟動應(yīng)用，測試 /login 接口

直接使用 postman 進(jìn)行調(diào)用。

換個不存在的傳參。

接口正常。

3. 前端-修改代碼實現(xiàn)登錄

(1)修改 .env.development

這樣前端請求訪問的就是后端的http://127.0.0.1:8080地址和端口。

(2)修改 \src\api\user.js

這里就是前端請求的接口路徑，替換成我們實現(xiàn)的 /login，

(3)\src\utils\request.js

至于我后端接口返回成功code 為什么是 20000呢？是因為前端框架里做了統(tǒng)一的封裝，這里喜歡的話你自己也可以改成別的。

(4)\src\views\login\index.vue

這里就是存放頁面的地方了，是后面前端代碼的主要陣地。

從Login按鈕的綁定的事件知道handleLogin就是用來處理登錄的方法，不過這里暫時不需要進(jìn)行改動。

重新構(gòu)建后點擊登錄，可以看到請求了真正的后端接口。

可是報錯了。

4. 解決跨域

報錯是跨域問題，解決跨域，可以在后端進(jìn)行處理，增加一個配置類。

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;
    }
}

重試一下，登錄請求成功了，但是不能跳轉(zhuǎn)，因為還有個接口沒實現(xiàn)，那就是/useInfo。

5. 后端-實現(xiàn) /useInfo 接口

套路跟上面一樣，但是這里因為直接寫一個與 mock 返回的一樣的數(shù)據(jù)，所以直接在 controller 類下新增一個控制器方法直接處理返回。

@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", "我是超級管理員");
            result.put("avatar", "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
        }
        return Result.success(result);
    }

重啟應(yīng)用，可以正常登錄。

6. 后端-實現(xiàn) /logout 接口

最后再補(bǔ)充一個退出登錄的接口。

@PostMapping("/logout")
    public Result logout() throws Exception {
        return Result.success();
    }

重啟測試，點擊頭像懸浮展示的logout，成功退出到登錄頁。

四、小結(jié)

本篇內(nèi)容主要是前后環(huán)境調(diào)通，以及基礎(chǔ)登錄的實現(xiàn)，后續(xù)就可以正常先進(jìn)行重要功能的開發(fā)了。

附上之前整理的 mybatis-plus 的學(xué)習(xí)筆記，簡單明了易上手，僅供參考。

【mybatis-plus】CRUD必備良藥，mybatis的好搭檔

【mybatis-plus】主鍵id生成、字段自動填充

【mybatis-plus】什么是樂觀鎖？如何實現(xiàn)“樂觀鎖”

【mybatis-plus】分頁、邏輯刪除

【mybatis-plus】條件查詢

希望大家以后多多支持腳本之家！

相關(guān)文章

  • Java面向?qū)ο蠡A(chǔ)教學(xué)(一)

    Java面向?qū)ο蠡A(chǔ)教學(xué)(一)

    這篇文章主要介紹了Java的面相對象編程思想,包括類對象方法和封裝繼承多態(tài)等各個方面的OOP基本要素,非常推薦,需要的朋友可以參考下，希望可以對你有所幫助
    2021-07-07
  • Java跳躍游戲?qū)嵗骖}解決思路詳解

    Java跳躍游戲?qū)嵗骖}解決思路詳解

    這篇文章主要介紹了Java跳躍游戲，總的來說這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達(dá)的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路
    2022-10-10
  • java設(shè)計模式之抽像工廠詳解

    java設(shè)計模式之抽像工廠詳解

    這篇文章主要為大家詳細(xì)介紹了java設(shè)計模式之抽像工廠的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-09-09
  • Spring注解@Value及屬性加載配置文件方式

    Spring注解@Value及屬性加載配置文件方式

    這篇文章主要介紹了Spring注解@Value及屬性加載配置文件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2021-07-07
  • java實現(xiàn)文件切片上傳百度云+斷點續(xù)傳的方法

    java實現(xiàn)文件切片上傳百度云+斷點續(xù)傳的方法

    文件續(xù)傳在很多地方都可以用的到，本文主要介紹了java實現(xiàn)文件切片上傳百度云+斷點續(xù)傳的方法，?文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-12-12
  • 一篇文章帶你了解Maven的坐標(biāo)概念以及依賴管理

    一篇文章帶你了解Maven的坐標(biāo)概念以及依賴管理

    這篇文章主要為大家介紹了Maven的坐標(biāo)概念以及依賴管理，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
    2022-01-01
  • Java中Semaphore(信號量)的使用方法

    Java中Semaphore(信號量)的使用方法

    這篇文章主要介紹了Java中Semaphore(信號量)的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • JAVA LinkedList和ArrayList的使用及性能分析

    JAVA LinkedList和ArrayList的使用及性能分析

    JAVA LinkedList和ArrayList的使用及性能分析，這篇文章也是以JAVA List的總結(jié)。
    2013-11-11
  • JAVA調(diào)用SAP WEBSERVICE服務(wù)實現(xiàn)流程圖解

    JAVA調(diào)用SAP WEBSERVICE服務(wù)實現(xiàn)流程圖解

    這篇文章主要介紹了JAVA調(diào)用SAP WEBSERVICE服務(wù)實現(xiàn)流程圖解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-10-10
  • spring、mybatis 配置方式詳解(常用兩種方式)

    spring、mybatis 配置方式詳解(常用兩種方式)

    這篇文章給大家總結(jié)了常用的兩種spring、mybatis 配置方式，本文給大家介紹的非常詳細(xì)，需要的朋友參考下吧
    2017-12-12

最新評論