Vue+SSM框架实现登录功能

1、定义路由实现页面跳转，跳转到登录界面

2、Login.vue

<template>
    <div>
      <el-form ref="form" :model="form"  :rules="rules" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('form')">登录</el-button>

        </el-form-item>
        </el-form>
login....
    </div>

</template>

<script>
    export default {
        name: "login",
      data() {
        return {
          form: {
            username: '',
            password:''

        },
          rules:{
            username:[
              { required: true, message: '请输入用户名', trigger: 'blur' },
              { min: 3, max: 9, message: '长度在 3 到 9 个字符', trigger: 'blur' }
            ],
            password:[
              { required: true, message: '请输入密码', trigger: 'blur' },
              { min: 3, max: 9, message: '长度在 3 到 9 个字符', trigger: 'blur' }
            ]
          }
        }
      },
      methods:{
        onSubmit(formName) {
         /* console.log('submit!');*/
          this.$refs[formName].validate((valid) => {
           var vm=this;
           if(valid){
             console.log(vm.form.username);
             this.$axios({
               method:'post',
               url:'http://localhost:8080/user/selectUser',
               data:{
                 username:this.form.username,
                 password:this.form.password
               }
             }).then(function (resp) {
               if(resp.data=="success"){
                  console.log('真棒');
                  vm.$router.push("/Home")
               }else{
                 vm.$message.error('用户名或密码错误');
                 return false;
               }
             })
           }
         });
        }
      }
    }
</script>

<style scoped>

</style>

3、新建Home.vue页面，写这个页面路由

Home.vue

<template>
    <div>
      home....
    </div>
</template>

<script>
    export default {
        name: "home"
    }
</script>

<style scoped>

</style>

配置信息加跳转路由的代码

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
/*import VueRouter from 'vue-router'*/
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import axios from 'axios' //引入axios
Vue.prototype.$axios = axios; //添加axios到Vue的原型对象上

Vue.use(router);
Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

router:路由包中的代码

index.js

import Vue from 'vue'
import Router from 'vue-router'

import Login from '../views/Login'
import Home from '../views/Home'

Vue.use(Router)

export default new Router({
  routes: [

    {
      path: '/Login',
      name: 'Login',
      component: Login
    },
    {
      path: '/Home',
      name: 'Home',
      component: Home
    }
  ]
})

后台代码

Controller中的代码：

    @RequestMapping(value = "/selectUser",produces = "application/json;charset=UTF-8")
    @ResponseBody
    public java.lang.String toselectUser(@RequestBody Users users){
        System.out.println(users);
        System.out.println(users.getUsername());
        if("xiaoya".equals(users.getUsername())&&"123456".equals(users.getPassword())){
            return "success";
        }
        return "error";
    }