前后端代码:GitHub地址
Vue-Cli创建前端项目
前端项目目录结构
我们需要Login.vue和Home.vue组件,一个用于登录,一个用于登录成功之后的跳转。
我们需要封装一些函数,这些函数用于在前后端交互时请求与响应的拦截。定义api.js
我们还需要删除原有的组件,清除App.vue的内容(不能删除)。
引入Element-ui
在main.js文件中引入Element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
在VScode终端输入npm i element-ui -S
在main.js中引入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
可以在package.json中查看是否引入成功
"dependencies": {
"element-ui": "^2.15.1",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
代码实现:
Login.vue
<template>
<div>
<el-form ref="loginform" :rules="rules" :model="loginForm" class="loginContainer">
<h3 class="loginTitle">系统登录</h3>
<el-form-item prop="username">
<!-- auto-complete="off" 禁止浏览器表单自动填充 -->
<!-- placeholder 输入框占位文本 -->
<el-input type="text" auto-complete="off" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码" ></el-input>
</el-form-item>
<el-form-item prop="code">
<el-input type="text" v-model="loginForm.code" size="normal" placeholder="点击图片更换验证码" auto-complete="off" style="width:250px;margin-right:5px"></el-input>
<img :src="captchaUrl" @click="updataCaptcha">
</el-form-item>
<el-button type="primary" style="width:100%" @click="submitLogin">登录</el-button>
</el-form>
</div>
</template>
<script>
import {postRequest} from "../utils/api";
export default {
name:"Login",
data(){
return{
captchaUrl:'captcha?time' + new Date(),
loginForm:{
username:'',
password:'',
code:''
},
// rules 表单的验证 required message:提示信息
rules:{
username:[{required:true,message:'请输入用户名',trigger:'blur'}],
password:[{required:true,message:'请输入密码',trigger:'blur'}],
code:[{required:true,message:'请输入验证码',trigger:'blur'}]
}
}
},
methods:{
//点击更新图片
updataCaptcha(){
this.captchaUrl = 'captcha?time=' + new Date();
},
//登录
submitLogin(){
this.$refs.loginForm.validate((valid) => {
if(valid){
postRequest('/login',this.loginForm).then(resp => {
console.log(resp);
if(resp){
const token = resp.object.tokenHead + resp.object.token;
window.sessionStorage.setItem('tokenStr',token)
this.$router.replace('/Home')
}
})
}else{
console.log('error submit');
return false;
}
})
}
}
}
</script>
<style>
.loginContainer{
border-radius: 15px;
background-clip: padding-box;
margin: 180px auto;
width: 350px;
padding: 15px 35px 15px 35px;
background:#fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
}
.loginTitle{
margin: 0px auto 40px auto;
text-align: center;
}
</style>
Api.js
import axios from 'axios'
import {
Message } from 'element-ui'
import router from '../router'
//请求拦截器
axios.interceptors.request.use(config => {
if(window.sessionStorage.getItem('tokenStr')){
//请求携带token
config.headers['Authorization'] = window.sessionStorage.getItem('tokenStr');
}
return config
},error => {
console.log(error);
})
//响应拦截器
// success 成功调到后端接口之后,但是接口不允许进行该操作
axios.interceptors.response.use(success =>{
if(success.status && success.status == 200){
if(success.data.code == 500 || success.data.code == 401 || success.data.code == 403){
Message.error({
message:success.data.message