Vue3 + element-ui + axios + sessionStorage 搭建简单的登录接口调用
1、安装Vue3.xnpm install -g @vue/cli # OR yarn global add @vue/cli2、npm install axios --save3、npm i element-ui -SLogin/index.vue<template><divclass="login"><divclass...
1、安装Vue3.x
npm install -g @vue/cli # OR yarn global add @vue/cli
2、npm install axios --save
3、npm i element-ui -S
Login/index.vue
<template>
<div class="login">
<div class="login_form">
<h3>系统登录</h3>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<el-form-item prop="userName">
<el-input type="input" prefix-icon="el-icon-user" v-model="ruleForm.userName" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="passWord">
<el-input type="password" prefix-icon="el-icon-lock" v-model="ruleForm.passWord" placeholder="请输入密码"></el-input>
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item prop="rememberNumber">
<el-checkbox v-model="ruleForm.rememberNumber">记住账号</el-checkbox>
</el-form-item>
</el-col>
<el-col :span="12" style="text-align: right;">
<el-button type="text">忘记密码</el-button>
</el-col>
</el-row>
<el-form-item>
<el-button type="primary" style="width: 100%" @click="submitForm('ruleForm')">登录</el-button>
<!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import axios from 'axios'
import { setSessionStorage } from '@/utils/storage'
export default {
data() {
let validateName = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入用户名'));
} else {
callback();
}
};
let validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
callback();
}
};
return {
ruleForm: {
userName: '',
passWord: '',
rememberNumber: false,
},
rules: {
userName: [
{ validator: validateName, trigger: 'blur' }
],
passWord: [
{ validator: validatePass, trigger: 'blur' }
],
}
};
},
methods: {
// 提交用户信息
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.getUser(this.ruleForm);
} else {
console.log('error submit!!');
return false;
}
});
},
// 重置表单
resetForm(formName) {
this.$refs[formName].resetFields();
},
// 获取用户信息表
async getUser(ruleForm) {
let res = await this.$API.Login({})
if (res.data.result) {
let list = res.data.data
let userNameArr = [],
passWordArr = []
list.map(item => {
userNameArr.push(item.username);
passWordArr.push(item.password);
});
// 用获取的信息表和表单里的值作比较，查到了就跳转页面
if (userNameArr.indexOf(ruleForm.userName) === -1) {
this.$message.error('账号不存在！')
} else {
var index = userNameArr.indexOf(ruleForm.userName);
if (passWordArr[index] === ruleForm.passWord) {
// 把token放在sessionStorage中
setSessionStorage('getUserInfo', list[index])
this.$message({
message: '登录成功！',
type: 'success'
});
// 跳转页面
this.$router.push('/Table');
} else {
this.$message.error('密码错误！');
}
}
} else {
// res.data.msg
this.$message.error('请求网络失败！');
}
}
},
created() {
}
}
</script>
<style lang="scss">
.login {
height: calc(100%);
display: flex;
justify-content: center;
align-items: center;
text-align: left;
h3 {
font-size: 18px;
color: #666666;
margin-bottom: 20px;
text-align: center;
}
.login_form {
width: 450px;
box-sizing: border-box;
padding: 30px;
-webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.16);
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.16);
}
}
</style>
Api/http.js
import axios from 'axios';
axios.defaults.timeout = 5000;
axios.defaults.baseURL = '';
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
const HTTP = {
/**
* 封装get方法
* @param url
* @param data
* @param config 合并默认config
* @returns {Promise}
* 使用this.$API.get('/food', {"name" : 1}, {timeout: 1000}).then(res=>{}).catch(err=>{})
*/
get: function (url, data = {}, config = {}) {
return new Promise((resolve, reject) => {
axios.get(url, { ...{ params: data }, ...config })
.then((response) => {
resolve(response);
})
.catch((err) => {
reject(err);
});
});
},
/**
* 封装post请求
* @param url
* @param data
* @param config 合并默认config
* @returns {Promise}
* 使用this.$http.post('/food', {"name" : 1}, {timeout: 1000}).then(res=>{}).catch(err=>{})
*/
post: function (url, data = {}, config = {}) {
return new Promise((resolve, reject) => {
axios.post(url, data, config)
.then((response) => {
resolve(response);
})
.catch((err) => {
reject(err);
});
});
},
}
export default HTTP;
Api/index.js // 暴露出去的接口
import http from './http'
export const Login = (data) => http.get('/logins', data);
main.js
可以这样调用了
我用的是公司的dip模拟的接口
{
"result": true,
"data": [
{
"id": "1",
"usertitle": "管理员",
"username": "Dragon",
"password": "123456",
"role": "admin",
"token": "a"
},
{
"id": "2",
"usertitle": "超级管理员",
"username": "Admin",
"password": "123456",
"role": "superAdmin",
"token": "b"
}
],
"msg": "获取成功"
}
https://easy-mock.com/ 这个也能造接口数据，很好用
utils/storage.js 封装了sessionStorage 方法
export const setSessionStorage = (k, v) => {
if (!k || !v) return
var json = JSON.stringify(v)
sessionStorage.setItem(k, json)
}
export const getSessionStorage = k => {
if (!k) return
let data = null
let datajson = sessionStorage.getItem(k)
datajson = JSON.parse(datajson)
data = datajson
return data
}
export const removeSessionStorage = k => {
if (!k) return
sessionStorage.removeItem(k)
}
// 组件引用
// import {
// setSessionStorage,
// getSessionStorage,
// removeSessionStorage
// } from '@/utils/storage'
// setSessionStorage('serveMarketDetail', data)
// const target = JSON.parse(getSessionStorage('serveMarketDetail'))
// removeSessionStorage('serveMarketDetail')
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)