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"; }