springboot+vue实现登录功能的最新方法整理
作者：Taste._ 发布时间：2022-08-31 21:40:23
标签：springboot,vue,登录
一、介绍
搜索了关于spring boot+vue的前后端分离实践项目很多，但是对于最基础登录功能的博客却是几年前的了。于是学习了好几个大神的文章后，自己通过实践解决了vue改版等众多问题后实现了登录功能。
二、环境工具
vue2.0
element-ui
axios
vue-router
vuex
Java
spring-boot
vscode
idea
三、搭建后端spring-boot框架
1、选择Spring Initializr创建新项目
展现最终项目结构如下，方便下面步骤实现
2、CommonResult类
package cn.eli.vue.api;
public class CommonResult<T> {
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;
}
}
3、IErrorCode 接口
package cn.eli.vue.api;
public interface IErrorCode {
long getCode();
String getMessage();
4、ResultCode 枚举
package cn.eli.vue.api;
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;
}
}
5、User类
package cn.eli.vue.entity;
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;
}
}
6、LoginController类
package cn.eli.vue.controller;
import cn.eli.vue.api.CommonResult;
import cn.eli.vue.entity.User;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class LoginController {
@RequestMapping(value = "/admin/login", method = RequestMethod.POST)
public CommonResult login(@RequestBody User user) {
if (user.getUsername().equals("test") && user.getPassword().equals("123456"))
return CommonResult.success("登录成功");
else
return CommonResult.validateFailed();
}
}
7、修改DemoApplication
package cn.eli.vue;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class DemoApplication {
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
}
8、更改端口号在application.yml
Vue前端位于8080端口，后端修改到8088，不要在同一端口：
server:
port: 8088
9、不同端口需要解决跨域问题
Vue端口位于8080，需要访问8088端口服务器，需要修改CorsConfig 类，在后端处理即可。
package cn.eli.vue.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 {
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);
}
}
到这里，springboot端的配置已经全部完成，运行可以成功启动。
四、搭建前端Vue框架
1、创建Vue项目
创建Vue项目可以使用电脑自带cmd，也可以使用gitbush，这里我通过vscode自带终端里面的gitbush进行创建。
vue create code1
（“code1”为vue项目名，可以自己设置）
（由于vue3对于以前的依赖和一些代码的不兼容，而且目前适用范围不是很广，这里我就继续选择vue2进行操作）
创建完成后，进入项目并运行，检查项目创建是否有误
cd code1
npm run serve
运行成功图如下：
浏览器进入已经运行的vue项目
上面为vue2的默认界面，可以成功进入代表创建项目成功，接下来便开始添加本次功能的依赖
2、添加项目依赖框架
这里可以继续使用gitbash通过代码进行添加，但是由于目前vue版本和依赖版本更新的有些乱，也因为我自己技术水平不够，代码添加的依赖经常不兼容跑错，于是直接使用Vue项目管理器的可视化编辑，大大提高依赖兼容成功性
2.1 使用Vue项目管理器添加依赖
进入code1项目后，使用vue ui 命令打开Vue项目管理器
vue ui
随即会跳转到浏览器，未跳转可以自行输入端口进入
在依赖里面搜索我们所需的四个依赖：
element-ui，一个 element 风格的 UI 框架
axios，用于网络请求
Vuex，用于管理状态
vue-router，用于实现两个 Vue 页面的跳转
手动添加后一般都是适应当前vue版本的，不用担心兼容报错问题
2.2 使用命令代码添加依赖
进入code1项目后，按照下列命令依次添加依赖（由于本人学艺不精，命令添加始终无法成功运行element框架，有成功的大神希望可以评论或者私信指导一二，谢谢！）
vue add element
npm install axios
npm install vuex --save
npm install vue-router
3、测试运行项目
添加成功依赖后，输入命令npm run serve运行，出现如下图界面即为成功
这里先贴图一下最后的Vue目录架构：
4、编写view层面代码
4.1 登陆页面：login.vue
<template>
<div>
<el-card class="login-form-layout">
<el-form
autocomplete="on"
:model="loginForm"
ref="loginForm"
label-position="left"
>
<div style="text-align: center">
<svg-icon icon-class="login-mall" style="width: 56px;height: 56px;color: #409EFF"></svg-icon>
</div>
<h2 class="login-title color-main">mall-admin-web</h2>
<el-form-item prop="username">
<el-input
name="username"
type="text"
v-model="loginForm.username"
autocomplete="on"
placeholder="请输入用户名"
>
<span slot="prefix">
<svg-icon icon-class="user" class="color-main"></svg-icon>
</span>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
name="password"
:type="pwdType"
@keyup.enter.native="handleLogin"
v-model="loginForm.password"
autocomplete="on"
placeholder="请输入密码"
>
<span slot="prefix">
<svg-icon icon-class="password" class="color-main"></svg-icon>
</span>
<span slot="suffix" @click="showPwd">
<svg-icon icon-class="eye" class="color-main"></svg-icon>
</span>
</el-input>
</el-form-item>
<el-form-item style="margin-bottom: 60px">
<el-button
style="width: 100％"
type="primary"
:loading="loading"
@click.native.prevent="handleLogin"
>登录</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
name: "login",
data() {
return {
loginForm: {
username: "admin",
password: "123456"
},
loading: false,
pwdType: "password",
};
},
methods: {
showPwd() {
if (this.pwdType === "password") {
this.pwdType = "";
} else {
this.pwdType = "password";
}
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true;
this.$store
.dispatch("Login", this.loginForm)
.then(response => {
this.loading = false;
let code = response.data.code;
if (code == 200) {
this.$router.push({
path: "/success",
query: {data: response.data}
});
} else {
this.$router.push({
path: "/error",
query: { message: response.data.message }
});
}
})
.catch(() => {
this.loading = false;
});
} else {
// eslint-disable-next-line no-console
console.log("参数验证不合法！");
return false;
}
});
}
}
};
</script>
<style scoped>
.login-form-layout {
position: absolute;
left: 0;
right: 0;
width: 360px;
margin: 140px auto;
border-top: 10px solid #409eff;
}
.login-title {
text-align: center;
}
.login-center-layout {
background: #409eff;
width: auto;
height: auto;
max-width: 100％;
max-height: 100％;
margin-top: 200px;
}
</style>
4.2 登陆成功页面：success.vue
<template>
<div>
<h1>Welcome!{{msg}}, <br>操作信息: {{mes}},<br>状态码{{cod}}</h1>
</div>
</template>
<script>
export default {
data() {
return {
msg: this.$route.query.data.data,
mes: this.$route.query.data.message,
cod: this.$route.query.data.code
};
},
}
</script>
4.3 登陆失败页面：error.vue
<template>
<div>
<h1>登录错误：{{msg}}</h1>
</div>
</template>
<script>
export default {
data() {
return {
msg: null
};
},
created() {
this.msg = this.$route.query.message;
}
};
</script>
5、设置路由统一管理页面
5.1 创建路由文件
建立的 router 文件夹下创建一个 index.js 文件，内容如下
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
export const constantRouterMap = [
{ path: '/', component: () => import('@/views/login')},
{ path: '/success', component: () => import('@/views/success')},
{ path: '/error', component: () => import('@/views/error'), hidden: true }
]
export default new VueRouter({
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})
5.2 将创建好的路由引入到项目中
在项目的 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')
5.3 设置路由的出入口
路由还需要一个出入口，这个出入口用来告诉路由将路由的内容显示在这里。上面 main.js 配置的第一个 vue 显示页面为 App.vue ，因此我们修改 App.vue 内容如下：
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
6、配置网络请求
6.1 封装请求工具
使用axios 这个网络请求构架进行 http 的请求，在 utils 包下封装一个请求工具类 request.js：
import axios from 'axios'
import baseUrl from '../api/baseUrl'
const service = axios.create({
baseURL: baseUrl,
timeout: 15000,
})
export default service
6.2 登录页面接口 API
在 api 文件夹下，创建一个登录API文件login.js：
import request from '@/utils/request'
export function login(username, password) {
return request({
url: '/admin/login',
method: 'post',
data: {
username,
password
}
})
}
6.3 封装 axios
使用 Vuex，先封装Vuex 中的module，在 store 文件夹下创建一个 modules 文件夹，在此文件夹下创建 user.js 文件：
import { login } from '@/api/login'
const user = {
actions: {
Login({ commit }, userInfo) {
const username = userInfo.username.trim()
return new Promise((resolve, reject) => {
login(username, userInfo.password).then(response => {
commit('')
resolve(response)
}).catch(error => {
reject(error)
})
})
},
}
}
export default user
创建 Vuex，在 store 文件夹下创建一个 index.js 文件：
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
user
}
})
将 Vuex 引入项目，修改之前的 main.js 文件如下：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
五、实现登录功能
1、启动两端程序，进入locallhost:8080
2、输入账号密码
2.1 正确登录
点击登录，进入后还会显示登陆状态、操作信息和状态码，
注意：这里修改了账户名为：test
2.2 错误登录
来源：https://blog.csdn.net/Tast_/article/details/124144551
0
投稿猜你喜欢
- 生成1. 生成error 文件的路径：你可以通过参数设置-XX:ErrorFile=/path/hs_error％p.log, 默认是在Ja
- 分页问题是一个非常普遍的问题，开发者几乎都会遇到，这里不讨论具体如何分页，说明一下Web方式下分页的原理。首先是查询获得一个结果集(表现为查
1. 二叉树的顺序存储1.1 存储方式使用数组保存二叉树结构，方式即将二叉树用 层序遍历 方式放入数组中。一般只适合表示完全二叉树，这种方式- 第一种查看防火墙是否打开6379端口 查看防火墙状态systemctl status firewalld如果防火墙没有启动的话。可以选择直接
- 一：需求当小数位很多的时候，小数位后面可能有一些多余的0并没有任何实际意义。所以在某些业务需求下可以去掉这些多余的0。例如：0.2000可以
- 前言如果你了解过 Liunx ，了解过 Liunx 的中管道命令 | ，那么你会发现，其实 Java 8 的 stream 和 Liunx
- 简介使用 SpringBoot 配置 FTP 服务器，上传、删除、下载文件。配置 FTP检查是否安装 vsftpdrpm -qa | gre
- IDEA 报错：无效的源发行版问题描述从SVN拉项目代码到本地后用idea运行，发现几个报错，关键的一个是：无效的源发行版，考虑是JDK版本
- 目录一、String的用法1.构造方法2.求字符串长度和某一位置字符3.提取子串4.字符串比较5.字符串链接6.字符串中单个字符查找7.大小
- 如下所示：//定义二维数组写法1 class numthree{public static void main(String[] args)
- 本文实例讲述了eclipse中自动生成javadoc文档的方法。分享给大家供大家参考。具体方法如下：使用eclipse生成文档（javado
- 原理是使用LinkedHashMap来实现，当缓存超过大小时，将会删除最老的一个元组。实现代码如下所示import java.util.Li
- 前言apollo配置经常使用的方式是@value，比较便捷，如果只出现在一个类中还行，但是如果多个类中并不是很方便，特别是如果出现配置值变化
- 建造者模式（Builder）：将一个复杂对象的构建与它的表示分离，使得同样的构建过程可以创建不同的表示。使用场景：当创建复杂对象的算法应该独
- java获取文件的inode标识符，如果文件被删除或者重命名，inode的值会发生变更，因此可以在第一次加载File之后记录inode，后续
- 前言LocalDateTime、LocalDate、LocalTime 是 Java8 全新的日期框架，加强了对时间的管理，有很多特别好用的
- Spring Cloud 为开发人员提供了一系列的工具来快速构建分布式系统的通用模型 。例如：配置管理、服务发现、断路由、智能路由、微代理、
- 冒泡排序在八大排序中，冒泡排序是最为出名的排序算法之一！冒泡排序的代码还是相当简单的，两层循环，外层是冒泡轮数，里层是依次比较，这个算法的时
- 注意：这篇博客已经和当前的分页插件完全不一样了，所以建议大家通过上面项目地址查看最新的源码和文档来了解。以前为Mybatis分页查询发愁过，
- 前言Spring动态配置多数据源，即在大型应用中对数据进行切分，并且采用多个数据库实例进行管理，这样可以有效提高系统的水平伸缩性。而这样的方
