Springboot Vue Login(从零开始实现Springboot+Vue登录)_spring+vue登录

最新推荐文章于 2024-09-02 10:48:50 发布

2401_85015040

最新推荐文章于 2024-09-02 10:48:50 发布

阅读量910

点赞数 10

分类专栏：程序员文章标签：物联网嵌入式硬件学习

本文链接：https://blog.csdn.net/2401_85015040/article/details/138866085

版权

程序员专栏收录该内容

17 篇文章 0 订阅

订阅专栏

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

//配置默认的路径，默认显示登录页
{ path: '/', component: () => import('@/views/login')},

//配置登录成功页面，使用时需要使用 path 路径来实现跳转
{ path: '/success', component: () => import('@/views/success')},

//配置登录失败页面，使用时需要使用 path 路径来实现跳转
{ path: '/error', component: () => import('@/views/error'), hidden: true }

]

export default new VueRouter({
// mode: ‘history’, //后端支持可开
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap //指定路由列表
})


### 2.将路由添加到程序入口


路由配置文件写好，我们需要把他引入到 main.js 中，在项目的 src 目录根节点下，找到 main.js，添加内容如下：

import Vue from ‘vue’
import App from ‘./App.vue’
import ‘./plugins/element.js’
import router from ‘./router’ //引入路由配置

Vue.config.productionTip = false

new Vue({
render: h => h(App),
router, //使用路由配置
}).$mount(‘#app’)


### 3.配置路由的出入口


现在路由已经完全引入到项目了，但是路由还需要一个出入口，这个出入口用来告诉路由将路由的内容显示在这里。上面 main.js 配置的第一个 vue 显示页面为 App.vue ，因此我们修改 App.vue 内容如下


<router-view/> 就是显示路由的出入口。


现在保存 App.vue 文件后，当前项目会被重新装载运行，在刚才浏览的界面就会看到登录界面如下：


![](https://img-blog.csdnimg.cn/20190531100142384.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9qaW5sYWkxMjM=,size_16,color_FFFFFF,t_70)


### 4.路由跳转


在 login.vue 中可以使用 this.$router.push({path: "路径"}) 来跳转到指定路径的路由组件中，下面是通过路由跳转到 error.vue 与 success.vue的代码

this. $router.push({path: "/success"}); //跳转到成功页或 this.$ router.push({path: “/error”}); //跳转到失败页


## 六、使用 Vuex + Axios 方式进行网络请求


### 1.Axios


axios 是一个网络请求构架，官方推荐使用这种方式进行 http 的请求。


#### 1) 在 utils 包下封装一个请求工具类 request.js

import axios from ‘axios’ //引入 axios
import baseUrl from ‘…/api/baseUrl’ //使用环境变量 + 模式的方式定义基础URL

// 创建 axios 实例
const service = axios.create({
baseURL: baseUrl, // api 的 base_url
timeout: 15000, // 请求超时时间
})

export default service


这里的 baseUrl 涉及 Vue CLI3 的环境变量与模式的概念，见：[Vue 环境变量和模式(设置通用baseUrl)](https://bbs.csdn.net/topics/618679757)


#### 2) 登录请求接口 API


在 api 文件夹下，创建一个登录API文件：login.js

import request from ‘@/utils/request’ //引入封装好的 axios 请求

export function login(username, password) { //登录接口
return request({ //使用封装好的 axios 进行网络请求
url: ‘/admin/login’,
method: ‘post’,
data: { //提交的数据
username,
password
}
})
}


### 2.使用 Vuex 封装 axios


Vuex 是一个状态管理构架，官方文档：[Vuex](https://bbs.csdn.net/topics/618679757)


#### 1)封装 Vuex 中的 **module**


在 store 文件夹下创建一个 modules 文件夹，然后在此文件夹下创建一个 user.js 文件

import { login } from ‘@/api/login’//引入登录 api 接口

const user = {
actions: {
// 登录
Login({ commit }, userInfo) { //定义 Login 方法，在组件中使用 this.$store.dispatch(“Login”) 调用
const username = userInfo.username.trim()
return new Promise((resolve, reject) => { //封装一个 Promise
login(username, userInfo.password).then(response => { //使用 login 接口进行网络请求
commit(‘’) //提交一个 mutation，通知状态改变
resolve(response) //将结果封装进 Promise
}).catch(error => {
reject(error)
})
})
},
}
}
export default user


这里的代码值得解释一下：官方文档对应：[Vuex actions](https://bbs.csdn.net/topics/618679757)


1.首先引入 login 接口，之后使用登录接口进行网络请求。


2.定义一个 名为 Login 的 action 方法，Vue 组件通过 this.$store.dispatch("Login") 调用


3.Promise，这个类很有意思，官方的解释是“`store.dispatch` 可以处理被触发的 action 的处理函数返回的 Promise，并且 `store.dispatch` 仍旧返回 Promise”。这话的意思组件中的 dispatch 返回的仍是一个 Promise 类，因此推测 Promise 中的两个方法 resolve() 与 reject() 分别对应 dispatch 中的 then 与 catch。


#### 2)创建 Vuex


在 store 文件夹下创建一个 index.js 文件

import Vue from ‘vue’ //引入 Vue
import Vuex from ‘vuex’ //引入 Vuex
import user from ‘./modules/user’ //引入 user module

Vue.use(Vuex)

const store = new Vuex.Store({
modules: {
user //使用 user.js 中的 action
}
})

export default store


#### 3) 将 Vuex 添加到 main.js 文件


修改之前的 main.js 文件如下：

import Vue from ‘vue’
import App from ‘./App.vue’
import ‘./plugins/element.js’
import router from ‘./router’ //引入路由配置
import store from ‘./store’ //引入 Vuex 状态管理

Vue.config.productionTip = false

new Vue({
render: h => h(App),
router, //使用路由配置
store //使用 Vuex 进行状态管理
}).$mount(‘#app’)


重新运行项目，在 Chrome 浏览器中进入调试模式，点击登录按钮


![](https://img-blog.csdnimg.cn/20190531154215964.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9qaW5sYWkxMjM=,size_16,color_FFFFFF,t_70)


可以看到有发送一个 8088 端口的请求，至此 Vue 端的所有代码已经完成。


## -------------------------------Springboot 开发-------------------------------


项目创建就不提了，网上有很多，只要使用 Spring Assistant 创建就好。


整体目录结构如下


![](https://img-blog.csdnimg.cn/20190531155426589.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9qaW5sYWkxMjM=,size_16,color_FFFFFF,t_70)


#### 1.在 application.yml 修改端口号


不要和 Vue 在一个 8080 端口上：

server:
port: 8088


#### 2.解决跨域问题


这里有一个跨域问题，即 Vue 使用 8080 端口，要访问 8088 端口的服务器，会报错。错误信息如下：


Access to XMLHttpRequest at 'http://localhost:8088/admin/login' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.


![](https://img-blog.csdnimg.cn/20190531160002259.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9qaW5sYWkxMjM=,size_16,color_FFFFFF,t_70)


这个问题在 Vue 端或在 Springboot 端处理都可以，我在 Springboot 端处理的，写一个 CorsConfig 类内容如下，不要忘了 @Configuration 注解。

@Configuration
public class CorsConfig {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin(““); // 1
corsConfiguration.addAllowedHeader(””); // 2
corsConfiguration.addAllowedMethod(“*”); // 3
return corsConfiguration;
}

@Bean
public CorsFilter corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", buildConfig()); // 4
    return new CorsFilter(source);
}

}


#### 3.IErrorCode 接口


**Java 版本**

public interface IErrorCode {
long getCode();
String getMessage();
}


**Kotlin 版本**

interface IErrorCode {
fun getCode(): Long
fun getMessage(): String
}


#### 4.CommonResult 类


**Java 版本**

public class CommonResult {
private long code;
private String message;
private T data;

protected CommonResult() {
}

protected CommonResult(long code, String message, T data) {
    this.code = code;
    this.message = message;
    this.data = data;
}

/**
 * 成功返回结果
 *
 * @param data 获取的数据
 */
public static <T> CommonResult<T> success(T data) {
    return new CommonResult<T>(ResultCode.SUCCESS.getCode(), ResultCode.SUCCESS.getMessage(), data);
}

/**
 * 成功返回结果
 *
 * @param data    获取的数据
 * @param message 提示信息
 */
public static <T> CommonResult<T> success(T data, String message) {
    return new CommonResult<T>(ResultCode.SUCCESS.getCode(), message, data);
}

/**
 * 失败返回结果
 *
 * @param errorCode 错误码
 */
public static <T> CommonResult<T> failed(IErrorCode errorCode) {
    return new CommonResult<T>(errorCode.getCode(), errorCode.getMessage(), null);
}

/**
 * 失败返回结果
 *
 * @param message 提示信息
 */
public static <T> CommonResult<T> failed(String message) {
    return new CommonResult<T>(ResultCode.FAILED.getCode(), message, null);
}

/**
 * 失败返回结果
 */
public static <T> CommonResult<T> failed() {
    return failed(ResultCode.FAILED);
}

/**
 * 参数验证失败返回结果
 */
public static <T> CommonResult<T> validateFailed() {
    return failed(ResultCode.VALIDATE_FAILED);
}

/**
 * 参数验证失败返回结果
 *
 * @param message 提示信息
 */
public static <T> CommonResult<T> validateFailed(String message) {
    return new CommonResult<T>(ResultCode.VALIDATE_FAILED.getCode(), message, null);
}

/**
 * 未登录返回结果
 */
public static <T> CommonResult<T> unauthorized(T data) {
    return new CommonResult<T>(ResultCode.UNAUTHORIZED.getCode(), ResultCode.UNAUTHORIZED.getMessage(), data);
}

/**
 * 未授权返回结果
 */
public static <T> CommonResult<T> forbidden(T data) {
    return new CommonResult<T>(ResultCode.FORBIDDEN.getCode(), ResultCode.FORBIDDEN.getMessage(), data);
}

public long getCode() {
    return code;
}

public void setCode(long code) {
    this.code = code;
}

public String getMessage() {
    return message;
}

public void setMessage(String message) {
    this.message = message;
}

public T getData() {
    return data;
}

public void setData(T data) {
    this.data = data;
}

}


**Kotlin 版本**

class CommonResult {
var code: Long = 0
var message: String? = null
var data: T? = null

constructor(code: Long, message: String, data: T?) {
    this.code = code
    this.message = message
    this.data = data
}

companion object {

    /**
     * 成功返回结果
     * @param data 获取的数据
     */
    fun <T> success(data: T): CommonResult<T> {
        return CommonResult(ResultCode.SUCCESS.getCode(), ResultCode.SUCCESS.getMessage(), data)
    }

    /**
     * 成功返回结果
     * @param data 获取的数据
     * @param  message 提示信息
     */
    fun <T> success(data: T, message: String): CommonResult<T> {
        return CommonResult(ResultCode.SUCCESS.getCode(), message, data)
    }

    /**
     * 失败返回结果
     * @param errorCode 错误码
     */
    fun <T> failed(errorCode: IErrorCode): CommonResult<T> {
        return CommonResult<T>(errorCode.getCode(), errorCode.getMessage(), null)
    }

    /**
     * 失败返回结果
     * @param message 提示信息
     */
    fun <T> failed(message: String): CommonResult<T> {
        return CommonResult<T>(ResultCode.FAILED.getCode(), message, null)
    }

    /**
     * 失败返回结果
     */
    fun failed(): CommonResult<Any> {
        return failed(ResultCode.FAILED)
    }

    /**
     * 参数验证失败返回结果
     */
    fun validateFailed(): CommonResult<Any> {
        return failed(ResultCode.VALIDATE_FAILED)
    }

    /**
     * 参数验证失败返回结果
     * @param message 提示信息
     */
    fun <T> validateFailed(message: String): CommonResult<T> {
        return CommonResult<T>(ResultCode.VALIDATE_FAILED.getCode(), message, null)
    }

    /**
     * 未登录返回结果
     */
    fun <T> unauthorized(data: T): CommonResult<T> {
        return CommonResult(ResultCode.UNAUTHORIZED.getCode(), ResultCode.UNAUTHORIZED.getMessage(), data)
    }

    /**
     * 未授权返回结果
     */
    fun <T> forbidden(data: T): CommonResult<T> {
        return CommonResult(ResultCode.FORBIDDEN.getCode(), ResultCode.FORBIDDEN.getMessage(), data)
    }
}

}


#### 5.ResultCode 枚举


**Java 版本**

public enum ResultCode implements IErrorCode {
SUCCESS(200, “操作成功”),
FAILED(500, “操作失败”),
VALIDATE_FAILED(404, “参数检验失败”),
UNAUTHORIZED(401, “暂未登录或token已经过期”),
FORBIDDEN(403, “没有相关权限”);
private long code;
private String message;

private ResultCode(long code, String message) {
    this.code = code;
    this.message = message;
}

public long getCode() {
    return code;
}

public String getMessage() {
    return message;
}

}


**Kotlin 版本**

enum class ResultCode(private val code: Long, private val message: String) : IErrorCode {
SUCCESS(200, “操作成功”),
FAILED(500, “操作失败”),
VALIDATE_FAILED(404, “参数检验失败”),
UNAUTHORIZED(401, “暂未登录或token已经过期”),
FORBIDDEN(403, “没有相关权限”);

override fun getCode(): Long {
    return code
}

override fun getMessage(): String {
    return message
}

}


#### 6.User类


**Java 版本**

public class User {

private int id;
private String username;
private 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;
}

}


**Kotlin 版本**

data class User(
val id: Int,
val username: String,
val password: String)


#### 7.LoginController 类


**Java 版本**

@RestController
public class LoginController {

@RequestMapping(value = "/admin/login", method = RequestMethod.POST)
public CommonResult login(@RequestBody User user) {
    if (user.getUsername().equals("admin") && user.getPassword().equals("123456"))

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！

如果你需要这些资料，可以戳这里获取

ing,
val password: String)


#### 7.LoginController 类


**Java 版本**

@RestController
public class LoginController {

@RequestMapping(value = "/admin/login", method = RequestMethod.POST)
public CommonResult login(@RequestBody User user) {
    if (user.getUsername().equals("admin") && user.getPassword().equals("123456"))

[外链图片转存中…(img-yPJxGq99-1715684337836)]
[外链图片转存中…(img-Ep2IM7Bw-1715684337837)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！

如果你需要这些资料，可以戳这里获取