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