spring boot + vue 前后分离实现登录功能（二）
安装 axios 进行路由转发
npm install axios --save-dev 或者 cnpm install axios --save-dev
修改 Main.js
新增
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8888/api'
//将API方法绑定到全局
Vue.prototype.$axios = axios
import Vue from 'vue'
import VueRouter from 'vue-router'
import router from './router'
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8888/api'
//将API方法绑定到全局
Vue.prototype.$axios = axios
// 导入 ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
// 安装路由
Vue.use(VueRouter);
// 安装 ElementUI
Vue.use(ElementUI);
new Vue({
el: '#app',
// 启用路由
router,
// 启用 ElementUI
render: h => h(App)
});
修改config/index.js
新增
'/api':{
target:'http://localhost:8888',
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api':{
target:'http://localhost:8888',
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
修改Login.vue
<template >
<div :style ="note" >
<el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
<h3 class="login-title">欢迎登录</h3>
<el-form-item label="账号" prop="username">
<el-input type="text" placeholder="请输入账号" v-model="form.username"/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="form.password"/>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
</el-form-item>
</el-form>
<el-dialog
title="温馨提示"
:visible.sync="dialogWarnVisible"
width="30%"
:before-close="handleClose">
<span >请输入账号和密码</span>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogWarnVisible = false">确 定</el-button>
</span>
</el-dialog>
<el-dialog
title="温馨提示"
:visible.sync="dialogErrorVisible"
width="30%"
:before-close="handleClose">
<span v-text="error"></span>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogErrorVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
note: {
backgroundImage: "url(" + require("../assets/background.jpg") + ") ",
backgroundPosition: "center center",
backgroundRepeat: "no-repeat",
backgroundSize: "cover" ,
},
form: {
username: '',
password: ''
},
// 表单验证，需要在 el-form-item 元素中增加 prop 属性
rules: {
username: [
{required: true, message: '账号不可为空', trigger: 'blur'}
],
password: [
{required: true, message: '密码不可为空', trigger: 'blur'}
]
},
// 对话框显示和隐藏
dialogWarnVisible: false,
dialogErrorVisible: false
}
},
methods: {
onSubmit(formName) {
// 为表单绑定验证功能
this.$refs[formName].validate((valid) => {
if (valid) {
// 使用 vue-router 路由到指定页面，该方式称之为编程式导航
//this.$router.push("/main");
this.$axios.post(
'/login',
{
username:this.form.username,
password:this.form.password
})
.then(resultResponse => {
this.resultResponse = JSON.stringify(resultResponse.data)
//成功后执行 带着用户名跳转到Main页面
if(resultResponse.data.code === 200) {
this.$router.replace({
name:'Main',
params:{
username :resultResponse.data.object.username
}
})
}else if(resultResponse.data.code === 400) {
this.dialogErrorVisible = true;
this.error = resultResponse.data.msg;
}
})
.catch(failResponse => {})
} else {
this.dialogWarnVisible = true;
return false;
}
});
}
}
}
</script>
<style lang="scss" scoped>
.login-box {
border: 1px solid #DCDFE6;
width: 350px;
margin: 180px auto;
padding: 35px 35px 15px 35px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 0 0 25px #909399;
}
.login-title {
text-align: center;
margin: 0 auto 40px auto;
color: #303133;
}
</style>
修改Main.vue
将admin 改成{{$route.params.username}}
<span> {{$route.params.username}}</span>
