SpringBoot + VUE 简单登陆

@SpringBoot + VUE 简单登陆

SpringBoot + VUE 简单登陆

一个新手的vue之路

JAVA后端代码

这里是用了之前的shiro控制的登陆代码，刚开始的话可以不需要，直接去掉即可。
数据库就自己来设置吧。

@Controller
@RequestMapping("/api")
public class LoginController {
@RequestMapping(value = "/login", method = RequestMethod.POST)
    @ResponseBody
    public Map login(HttpServletRequest request, HttpServletResponse response) {
    	//获取登录名
        String account = request.getParameter("account");
        //获取密码
        String password = request.getParameter("password");
        // 从SecurityUtils里边创建一个 subject
        Subject subject = SecurityUtils.getSubject();
        // 在认证提交前准备 token（令牌）
        UsernamePasswordToken token = new UsernamePasswordToken(account, password);

        Map map = new HashMap();
        map.put("code",1);

        // 执行认证登陆
        try {
            subject.login(token);
        } catch (UnknownAccountException uae) {
            map.put("msg","未知账户");
            return map;
        } catch (IncorrectCredentialsException ice) {
            map.put("msg","密码不正确");
            return map;
        } catch (LockedAccountException lae) {
            map.put("msg","账户已锁定");
            return map;
        } catch (AuthenticationException ae) {
            map.put("msg","用户名或密码不正确");
            return map;
        }
        if (subject.isAuthenticated()) {
            map.put("code",0);
            map.put("msg","登陆成功!");
            return map;
        } else {
            map.put("msg","账号名或密码错误");
            token.clear();
            return map;
        }
    }
    }

VUE页面

这边是直接用webstorm生成的vue项目，有些代码直接可以用。

首先在 package.json 中把自己需要的一些依赖包，下面是我引用的一些包，可能有些没用到，那就忽略过去吧。然后ctrl+s保存之后，webstorm右下角会提示你需要npm install 这些依赖包。

"dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.4.0",
    "axios": "^0.19.2",
    "core-js": "^3.6.5",
    "element-ui": "2.13.0"
  },

之后在 main.js 中来使用

import Vue from 'vue'
import App from './App'
import router from './router'
import element from 'element-ui'

var axios = require('axios')
var qs = require('qs')
axios.default.baseUrl = 'http://localhost:8081/api'//其实这一步可以不需要
Vue.prototype.$axios = axios
Vue.prototype.$qs = qs

Vue.config.productionTip = false

Vue.use(element)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

配置路由，router文件夹下的index.js， helloWord这个页面是创建项目自带的页面，也可以仿照的系统生成的这样写，还有其他的配置方法暂时没写

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [

    {
      path:'/',
      name:'login',
      component: () =>import('@/views/login')
    },
    {
      path: '/helloWord',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

创建views文件夹，也可以直接在components中直接生成vue文件，如果没有创建views文件夹的话，那么上面配置路由就需要把views换成vue文件的那个文件夹名。然后创建login.vue文件。
这里没有写样式，直接就一个登陆表单，本人原本直接往后台传表单，或者传递用户名密码，后台接收为空字段，就换了这种方法。

<template>
  <div>
    <el-form ref="loginFrom" :model="loginFrom" class="login-from">
      <h3 class="title">小耗子测试使用</h3>
      <el-form-item prop="account" label="用户名">
        <el-input v-model="loginFrom.account" type="text" auto-complete="off" placeholder="账号">

        </el-input>
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input v-model="loginFrom.password" type="password" auto-complete="off" placeholder="密码">

        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="Fromlogin">登陆</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
  export default {
    name: "login",
    data() {
      return {
        loginFrom: {
          account:"admin",
          password: "123456"
        }
      }
    },
    methods: {
      Fromlogin() {
        var params = new URLSearchParams();
        // var qs = require('qs');
        var data = this.$qs.stringify(this.loginFrom)
        this.$axios.post('/api/login',data
            // qs.stringify({account: this.loginFrom.account,
            //   password: this.loginFrom.password})
          //   {
          //   // params
          //   account: this.loginFrom.account,
          //   password: this.loginFrom.password
          // }
          )
          .then(success => {
            var code = success.data.code;
            if (code == 1) {

            } else {
              this.$router.replace({path: '/helloWord'})
            }
          })
          .catch(error => console.log(error))
      }
    }
  }
</script>

<style scoped>

</style>

之后就是跨域的问题了，找到config文件夹下的index.js，修改里面的 proxyTable

proxyTable: {
      '/api': {
        target: 'http://localhost:8081',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    },

代码运行之后的效果

页面效果图是这样的，因为没有样式，就先凑活着看吧

图片:
本人第一次就这样献给大家了，请大家多多关照！！！