一、入口文件main.js配置
(入口文件就是项目或系统被访问时第一个访问到的文件,所有的指令功能都是从这个文件分发出去,再找相对应的模块进行处理,初始化vue实例、编写全局方法、使用插件等)
axios.interceptors.response.use(res => { // 请求拦截器,在发送请求或者响应请求之前做的一些操作或判断,此处为请求响应拦截器
if (res.data.code == 0) { // 如果后台响应的状态码为0,当后台收到正确的用户信息,正确的用户名和密码就会返回状态码0,此时进行数据渲染
return res.data
} else if (res.data.code == 1) {/ /如果返回的状态码为1,意味着后端没有收到正确的登录信息,客户如果绕过登录页面,则强制返回到登录页面。
router.push('/login')
} else { // 网络异常状况
Message({
type: 'error',
message: res.data.msg || '网络异常,请重试。'
})
}
}, error => { // 请求出错时提示错误信息
return Promise.reject(error)
})
二、路由部分router.js
路由是一个项目的灵魂,每个组件都有对应的路由,根据不同的路由地址,展示不同的内容给用户。
routes: [{
path: '/',
redirect: '/home/login' // 路由重定向,当用户访问根路径时,重新跳转到home下的login组件
},
{
path: '/login',
name: 'login',
import( './views/Login.vue') // 定义login组件的路由
}
}]
三、组件部分login.vue
这里为最简单的登陆页面,没有注册部分,账号为后台生成
<!-- html部分 -->
<template>
<div class="loginbody">
<el-form v-model="ruleForm" status-icon :rules="rules">
<!-- 用户名 -->
<el-form-item>
<el-input v-model="ruleForm.user" prefix-icon="el-icon-user" placeholder="用户名" autocomplete="off"></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item label="">
<el-input type="password" v-model="ruleForm.passwd" prefix-icon="el-icon-lock" placeholder="密码" autocomplete="off"></el-input>
</el-form-item>
<!-- 登录按钮 -->
<el-form-item>
<el-button type="primary" @click.enter="submitForm()" >登 录</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
注释:1、使用的element表单组件
2、v-model="ruleForm" 数据的双向绑定,试图上的数据与data里的数据保持一致
3、autocomplete h5新增表单属性,自动完成功能,输入框会记录输入习惯,根据记忆迅速完成输入全部内容,off闭,on开启
4、@click.enter:绑定个click事件,添加enter修饰符,用户点击按钮或按enter键时都可以触发事件
<!-- script部分 -->
return {
ruleForm: { // 存储用户输入数据
user: '',
passwd: '',
},
rules: { // 可添加一些表单规则
}
},
this.axios.post('url ‘, { ...this.ruleForm }).then(res => { // post请求,携带参数为展开运算符=user: '', passwd: '',
if (res.code != 0) return false; // 后台根据前端传来的数据返回对应的状态码,0为成功,继续往下执行,非0即失败(-1为用户名或者密码错误,1为空)停止往下执行
type: 'success',
message: '登录成功'
})
this.$router.push('/home/index') //成功跳转到首页
})
}