vue+vuex+axios+element-ui实现登录页面
这个例子只是简单实现了登录页面的部分功能，包括用户信息（用户名、密码）的验证，登录跳转到主页等功能。
1.目录结构
2.运行效果
3.代码实现
由第一点我们可以看到项目的目录结构整体概要，我们编写代码的思想是从aip–>store–>views。由于api中的方法整体封装到utils中，因此，我们先编写utils中的代码。
utils中新建两个js文件，分别为config.js和request.js。在config.js中编写用于维护项目的配置文件，或者公共的将来可能发生更改的数据。在request.js中封装axios的全局方法，包括创建实例、请求拦截器和相应拦截器。
- config.js
const baseURL = 'http://120.26.175.82:7788';
// 提示时长
const time = 5000;
// token字符串 sessionStorage中存储的key值记录一下
const token = 'token';
export default {
baseURL,
time,
token
}
- request.js
// 配置axios
import axios from 'axios'
// 引入qs
import qs from 'qs'
// 引入配置文件
import conf from './config.js'
const {
baseURL, token } = conf;
// 创建实例
const instance = axios.create({
baseURL: baseURL,
headers: {
"Authorization": sessionStorage.getItem(token)
}
})
// 请求拦截器
instance.interceptors.request.use(config => {
if (config.method == 'post' && config.url != '/user/login') {
config.data = qs.stringify(config.data)
}
return config;
}, error => {
return Promise.reject(error);
});
// 响应拦截器
instance.interceptors.response.use(response => {
return {
...response,
data: response.data.data,
status: response.data.status,
statusText: response.data.message
}
}, error => {
return Promise.reject(error);
});
export default instance
在api中新建login.js，这里主要用来写登录用户的请求接口。
- login.js
import request from '@/utils/request.js'
export function login(params) {
return request.post('/user/login', params)
}
在router中配置路由
- index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: '/login'
},
{
path: '/login',
name: 'Login',
component: () => import('@/views/Login.vue')
},
{
path: '/home',
name: 'Home',
component: () => import('@/views/Home.vue')
},
]
const router = new VueRouter({
routes
})
export default router
由于登录功能无需使用vuex，这里就不阐述store中代码编写情况了
最后编写login.vue页面
表单格式借鉴的是element-ui上表单的模板。
- login.vue
<template>
<div>
<!-- 登录表单 -->
<div class="form">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="用户名" prop="username">
<el-input v-model="ruleForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input
type="password"
v-model="ruleForm.password"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item>
<el-button
class="submit"
type="primary"
@click="submitForm('ruleForm')"
>登录</el-button
>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
// 导入api内的方法 列表形式导入
import {
login } from "@/api/login.js";
import conf from "@/utils/config.js";
const {
token } = conf;
// 不确定怎么导入就打印看看
// console.log(login);
export default {
data() {
return {
ruleForm: {
username: "",
password: "",
},
// rules内的属性名与上方的prop属性值是一样的
rules: {
username: [
{
required: true, message: "请输入用户名", trigger: "blur" },
],
password: [{
required: true, message: "请输入密码", trigger: "blur" }],
},
};
},
computed: {
},
methods: {
// formName就是ruleForm
// refs是引用 this.$refs[formName]拿ref对应的实例
// valid是一个布尔值
submitForm(formName) {
this.$refs[formName].validate((valid) => {
// console.log(valid);
if (valid) {
// 验证通过 提交数据给后台 存token 路由跳转
// token 单纯存在sessionStorage、localStorage、cookie是可行的 若存在vuex中 刷新页面就没了
login(this.ruleForm)
.then((res) => {
// console.log(res);
// 存token setItem(key,value)
if (res.status == 200) {
sessionStorage.setItem(token, res.data.token);
this.$router.push("/home");
} else {
// console.log(res.statusText);
// statusText是后台写好的提示
this.$notify.error({
// title: "错误",
message: res.statusText,
});
}
})
.catch((err) => {
this.$notify.error({
title: "错误",
message: "服务器内部错误",
});
});
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
created() {
},
mounted() {
},
};
</script>
<style lang="less" scoped>
.form {
width: 400px;
margin: 100px auto;
border: 2px solid lavender;
padding: 100px 50px;
border-radius: 5px;
background-color: peachpuff;
}
</style>