一. 介绍
这篇文章主要是介绍如何用vue+springboot来实现一个简单前后端分离的登录案例,代码比较详细。
二. 后端springboot登录接口
@ApiOperation("登录功能")
@PostMapping("/login")
@ResponseBody
public Result doLogin(@RequestParam("username") String username,
@RequestParam("password") String password){
User user = userService.getUserByName(username);
//Result是我自己封装的返回结果类,如果不会封装可以下方评论,或者直接返回String
if(user==null){
return new Result(ResultCode.NOT_FOUND.getCode(),"用户不存在",null);
}else if(!password.equals(user.getUPsw())){
return new Result(ResultCode.NOT_FOUND.getCode(),"密码不正确",null);
}else{
//这里的token我没有详细去做,只是做个测试,"token"+username这和便是返回的token
return new Result(ResultCode.SUCCESS.getCode(),"验证成功","token"+username);
}
}
接口就是这样,注意两点,一是要在Controller中添加跨域注解@CrossOrigin,二是接收参数的形式要和前端对应
三. 前端vue具体实现
1. 前期准备
- 用脚手架工具创建一个vue项目
- 安装axios(请求),vue-router(路由),vuex(状态管理)
- 先给大家展示我文件目录
2. 正式开始
首先,在src下创建一个store文件夹,在里面创建一个store.js,这是我们的项目全局状态管理,不懂可以去搜一下,很好用的,在store.js中创建一个全局状态,代码如下:
import Vue from 'vue'
import Vuex from 'vuex'
import { stat } from 'fs'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
user: {
username: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).username,
token: window.sessionStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).token
},
},
mutations: {
login(state, user) {
if (window.localStorage.getItem('user' || '[]') != null) {
localStorage.removeItem("user")
}
state.user = user;
window.localStorage.setItem("user", JSON.stringify(user))
}
},
actions: {}
})
接着,在src下创建一个router.js(路由),代码如下:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Home from './compenents/Home'
import Login from './compenents/Login'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
component: Home,
meta: {
requireAuth: true
}
},
{
path: '/login',
component: Login,
meta: {
requireAuth: false
}
}
]
})
export default router
然后,在components下创建两个组件,一个是Login.vue,一个是Home.vue,代码如下:
Login.vue
<!-- -->
<template>
<div>
<div>
<input type="text" v-model="user.username" placeholder="用户名" />
<input type="password" v-model="user.password" placeholder="密码" />
<button @click="login">登录</button>
<hr />
<router-link to="/">home</router-link>
</div>
</div>
</template>
<script>
export default {
data() {
return {
user: {
username: "admin",
password: "123456",
token: ""
}
};
},
methods: {
isLogin() {},
login() {
this.$axios({
url: "后端部署路径/login",
method: "post",
params: this.user
}).then(success => {
if (success.data.code == 200) {
console.log(success);
this.user.token = success.data.data;
this.$store.commit("login", this.user);
this.$router.push("/");
}
});
}
},
};
</script>
<style scoped>
</style>
Home.vue
<template>
<div>
<h1>{{ isLogin }},欢迎来到Home</h1>
<router-link to="/login">登录</router-link>
</div>
</template>
<script>
export default {
data() {
return {};
},
computed: {
isLogin() {
return this.$store.state.user.username;
}
},
};
</script>
<style scoped>
</style>
最后,在main.js中引入axios,router,store,代码如下:
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import router from './router'
Vue.prototype.$axios = axios
Vue.config.productionTip = false
import store from './store/store'
new Vue({
store: store,
router: router,
render: h => h(App),
}).$mount('#app')
!!!不要忘记在app.vue的div中放一个,否则什么都显示不了
三. 测试
首先,项目跑起来
然后,输入正确的用户及密码后点击登录
最后,F12,选择application,就会多一条数据了,关闭浏览器在访问home组件一样还会有信息的