参考资料
Vue3.0官方文档：https://cn.vuejs.org/ Element Plus文档：https://element-plus.gitee.io/zh-CN/
在项目里面安装
npm i axios -S
封装一个axios 在文件里面新建一个util/service.js
import { ElLoading } from 'element-plus'
import { ElMessage } from 'element-plus'
import axios from "axios"
//使用create 创建axios实例
let loadingObj=null
const Service=axios.create({
timeout:8000,
baseURL:"http://xx",
headers:{
"Content-type":"application/json;charset=utf-8"
}
})
//请求拦截-增加loading，对请求进行统一的处理
Service.interceptors.request.use(config=>{
loadingObj=ElLoading.service({
lock: true,
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)',
})
return config
})
//响应拦截--对返回值做统一处理
Service.interceptors.response.use(response=>{
return response.data
},err=>{
loadingObj.close()
ElMessage({
message:"服务器错误",
type:"error",
duration:2000
})
})
//post请求
export const post=config=>{
return Service({
...config,
method:"post",
data:config.data
})
}
//get请求
export const get=config=>{
return Service({
...config,
method:"get",
data:config.data
})
}新建一个request.js
request.js
代码语言：javascript复制import {post,get} from "./service"
export const loginApi=data=>{
return post({
url:"./login",
data
})
}在login.vue里面引入request
在实际项目里面 封装使用 service.js
代码语言：javascript复制import axios from "axios"
import { ElLoading } from 'element-plus'
import { ElMessage } from 'element-plus'
// //使用create 创建axios实例
// let loadingObj=null
// const Service=axios.create({
// timeout:8000,
// baseURL:"http://192.168.16.103:8091/chem/login",
// headers:{
// "Content-type":"application/json;charset=utf-8"
// }
// })
// 使用create创建axios实例
let loadingObj = null
const Service = axios.create({
timeout:8000,
baseURL:"http://47.100.36.235:8091/check/login",
headers:{
"Content-type":"application/json;charset=utf-8",
// "Authorization":store.state.uInfo.userInfo.token
}
})
// 请求拦截-增加loading,对请求做统一处理
Service.interceptors.request.use(config=>{
loadingObj=ElLoading.service({
lock: true,
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)',
})
return config
})
// 响应拦截-对返回值做统一处理
Service.interceptors.response.use(response=>{
loadingObj.close()
const data = response.data
if(data.meta.status!=200 && data.meta.status!=201){
ElMessage.error(data.meta.msg||"服务器出错")
// 请求出错
return data
}
return data
},error=>{
loadingObj.close()
ElMessage({
message:"服务器错误",
type:"error",
duration:2000
})
})
// post请求
export const post=config=>{
return Service({
...config,
method:"post",
data:config.data
})
}
// get请求
export const get=config=>{
return Service({
...config,
method:"get",
params:config.data
})
}request.js
代码语言：javascript复制import {post,get} from "./service"
export const loginApi=data=>{
return post({
url:"/login",
data
})
}login.vue
代码语言：javascript复制<template>
<div class="login_wrap">
<div class="form_wrap">
<el-form
ref="formRef"
:model="loginData"
label-width="100px"
class="demo-dynamic"
>
<el-form-item
prop="username"
label="用户名"
:rules="[
{
required: true,
message: '此项为必填项',
trigger: 'blur',
},
]"
>
<el-input v-model="loginData.username" />
</el-form-item>
<el-form-item
prop="password"
label="密码"
:rules="[
{
required: true,
message: '此项为必填项',
trigger: 'blur',
},
]"
>
<el-input type="password" v-model="loginData.password" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleLogin()">登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
//引入useStore
import { useStore } from "vuex";
//引入路由
import { useRouter } from "vue-router";
//import {loginApi} from "@util/request"
import {loginApi} from "@/util/request"
export default {
name: "login",
setup() {
const store = useStore();
const router = useRouter();
const count = store.state.number.count;
const data = reactive({
loginData: {
username: "",
password: "",
},
num: count,
// countStatus:
});
const handleLogin = () => {
//请求后台接口
loginApi(data.loginData).then(res=>{
console.log("登录的返回",res)
if(res.data){
store.commit('setUserInfo', res.data);
localStorage.setItem("loginData",JSON.stringify(res.data))
// 跳转/user
router.push({
path:"/"
})
}
})
// store.commit("setUserInfo", data.loginData);
// localStorage.setItem("loginData",JSON.stringify(data.loginData))
// //跳转user页面
// router.push({
// path:"/user"
// })
};
// console.log("修改前getters", store.getters["number/countStatus"]);
// const handleLogin = () => {
// store
// .dispatch("number/setCountPromise", -100)
// .then((res) => {
// alert("修改成功");
// })
// .catch((err) => {
// alert(err);
// });
// console.log(store.state.number.count);
// console.log("修改后getters",store.getters["number/countStatus"]);
// };
return {
...toRefs(data),
handleLogin,
};
},
};
</script>
<style scoped>
.login_wrap {
width: 100%;
height: 100vh;
background: #2d3761;
position: relative;
}
.form_wrap {
position: fixed;
top: 50%;
transform: translate(130%, -50%);
background: #fff;
padding: 30px 50px;
border-radius: 5px;
}
</style>
