这篇文章主要是介绍如何用vue+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,二是接收参数的形式要和前端对应
首先,在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
home
Home.vue
{{ isLogin }},欢迎来到Home
登录
最后,在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组件一样还会有信息的