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. 先给大家展示我文件目录
   

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组件一样还会有信息的