Vue 登录案例

一. 介绍

这篇文章主要是介绍如何用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. 前期准备
  1. 用脚手架工具创建一个vue项目
  2. 安装axios(请求),vue-router(路由),vuex(状态管理)
  3. 先给大家展示我文件目录
    Vue 登录案例_第1张图片
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






Home.vue





最后,在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中放一个,否则什么都显示不了

三. 测试

首先,项目跑起来
在这里插入图片描述
然后,输入正确的用户及密码后点击登录
Vue 登录案例_第2张图片
最后,F12,选择application,就会多一条数据了,关闭浏览器在访问home组件一样还会有信息的
在这里插入图片描述

你可能感兴趣的:(前端开发)