1.Spring boot后端的服务器配置、代码在上一篇文章中已写。
2.下面开始配置vue。
首先需要写好登录页面:
先回顾一下vue的结构:
// 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 ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
首先是主入口里面加载App.vue。App.vue又加载路由组件
index.js加载components文件夹下的组件
Login.vue下的代码为登录界面:
<template>
<div>
<el-form :rules="rules" :model="loginForm" class="loginContainer" ref="loginform">
<h3>系统登录</h3>
<el-form-item label="用户名" prop="username">
<el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="用户密码" prop="password">
<el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码"></el-input>
</el-form-item>
<el-checkbox v-model="checked" class="loginRememberMe" style="width: 100%">记住密码</el-checkbox>
<el-button type="primary" style="width: 100%;margin-top: 10px" @click="loginSubmit">登录</el-button>
</el-form>
</div>
</template>
<script>
export default {
name: "Login",
data(){
return {
loginForm:{
username:'admin',
password:'123',
},
checked:true,
rules: {
username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
password: [{required: true, message: '请输入密码', trigger: 'blur'}],
},
}
},
methods:{
loginSubmit(){
this.$refs.loginform.validate((valid) => {
if (valid) {
alert('submit!');
} else {
this.$message.error('请输入用户名或者密码!');
return false;
}
})
}
}
}
</script>
<style >
.loginContainer{
border-radius: 15px;
background-clip: padding-box;
margin:auto;
width: 350px;
border: 1px solid #ffffff;
padding: 15px 75px 35px 75px;
background: #ffffff;
box-shadow: 0 0 20px #2c3e50;
}
.loginRememberMe{
text-align: left;
}
</style>
然后做前后端的请求对接:是用axios请求:
首先在webstrome的terminal当中安装axios:输入npm install axios
安装完成后可以看到:
在src文件夹下新建一个utils文件夹,新建一个api.js用作封装发送key-value方式的请求:
import axios from 'axios'
import { Message } from 'element-ui'
axios.interceptors.response.use(//统一返回错误处理
success=>{
//success.status是http返回的响应码,而success.data.status才是服务器真正返回的json
if (success.status && success.status == 200 && success.data.status == 500) {
Message.error({message: success.data.msg});
return;
}
if (success.data.msg){
Message.success({message:success.data.msg})
}
return success.data;
},error => {
if (error.response.status == 504 || error.response.status == 404) {
Message.error({message: '服务器发生问题'})
} else if (error.response.status == 403) {
Message.error({message: '权限不足,请联系管理员'})
} else if (error.response.status == 401) {
Message.error({message: '尚未登录,请登录'})
}else {
if (error.response.data.msg){
Message.error({message:error.response.data.msg})
}else {
Message.error({message:'未知错误!'})
}
}
return;
}
)
let base='';//加前缀直接修改base就够了
export const postKeyValueRequest=(url,params)=>{
return axios({
method:'post',
url: `${base}${url}`,
data:params,
transformRequest:[function (data){
let ret = '';
for(let i in data){
ret+=encodeURIComponent(i)+'='+encodeURIComponent(data[i])+'&'
}
console.log(ret);
return ret;
}],
headers:{
'Content-Type':'application/x-www-form-urlencoded'
}
});
}
先是封装一个axios请求成功与失败界面以element-ui方式返回提示的方法,然后封装好以key-value请求的postKeyValueRequest方法。
然后在Login.vue当中引入postKeyValueRequest方法:
import {postKeyValueRequest} from "../utils/api";
methods:{
loginSubmit(){
this.$refs.loginform.validate((valid) => {
if (valid) {
this.postKeyValueRequest('/doLogin',this.loginForm).then(resp=>{
if(resp){
console.log(resp)
}
})
} else {
this.$message.error('请输入必要的字段!');
return false;
}
})
}
}
最后,需要设置端口转发,把从vue中从8080端口发送出去的转发到服务器8081端口接收!
在根目录下新建一个vue.config.js
let proxyObj ={};
proxyObj['/']={
ws:false,
target:'http://localhost:8085',
changeOrigin:true,
pathRewrite:{
'^/':''
}
}
module.exports={
devServer:{
host:'localhost',
port:8080,
proxy:proxyObj
}
}
将vue在localhost:8080发出的请求转发到localhost:8081上。前后端同时启动。按登录出现如下界面:
至此前后端连接成功!