接口配置流程

目录

• 1.封装request请求
• 2.定义ts类型
• 3.封装接口
• 4.发请求
  • （1）测试可否拿到id
  • （2）测试接口返回结果
• 5.拿数据
• 6.展示数据
  • （1）展示当前用户已有的职位
  • （2）复选框按钮

1.封装request请求

• 位置在\src\utils\request.ts

//进行axios二次封装：使用请求与响应拦截器
import axios from 'axios';
import { ElMessage } from "element-plus";
//引入用户相关的仓库
import useUserStore from '@/store/modules/user';
//第一步：利用axios对象的create方法，去创建axios案例（其他的配置：基础路径、超时的时间）
let request = axios.create({
    //基础路径
    baseURL: import.meta.env.VITE_APP_BASE_API,//基础路径上会携带/api
    timeout: 5000//超时设置
});
//第二步：request实例添加请求与响应拦截器
request.interceptors.request.use((config) => {
    //获取用户相关的小仓库，获取仓库内部的token，登录成功以后携带给服务器
    let userStore=useUserStore();
    if (userStore.token){
        config.headers.token=userStore.token
    }
    //config配置对象，headers属性请求头，经常给服务器端携带公共参数
    //返回配置对象
    // config.headers.token='123'//请求头携带参数
    return config;//不返回会报错
});
//第三步：响应拦截器
request.interceptors.response.use((response) => {
    //成功回调
    //简化数据
    return response.data;
}, (error) => {
    //失败的回调:处理http网络错误的
    //定义一个变量：存储网络错误信息
    let message = '';
    //http状态码
    let status = error.response.status;
    switch (status) {
        case 401:
            message = "token过期"
            break;
        case 403:
            message = "无权访问"
            break;
        case 404:
            message = "请求地址错误"
            break;
        case 500:
            message = "服务器出现问题"
            break;
        default:
            message = "网络出现问题"
            break;
    }
    //提示错误信息
    ElMessage({
        type: 'error',
        message
    });
    return Promise.reject(error);
});

//对外暴露
export default request;

2.定义ts类型

• 查看接口文档返回的数据类型

• 根据文档定义ts类型

3.封装接口

//用户管理模块的接口
import request from "@/utils/request";//引入封装好的请求
import type {AllRoleResponseData} from './type';//引入定义好的ts类型
//枚举地址
enum API{
    //获取全部职位，当前账号拥有职位的接口
    ALLROLEURL='/admin/acl/user/toAssign/'
}
//获取全部的职位以及包含当前用户已有的职位
export const reqAllRole=(userId:number)=>request.get<any,AllRoleResponseData>(API.ALLROLEURL+userId);

4.发请求

（1）测试可否拿到id

//收集用户信息的响应式数组
let userParams = reactive<User>({
    username: '',
    name: '',
    password: ''
})

//分配角色按钮回调
const setRole = (row: User) => {
    //抽屉展示
    drawer1.value = true;
    //存储已有的用户信息
    Object.assign(userParams, row);
    console.log(userParams.id)
}

• 点击分配角色，可以拿到id
  

（2）测试接口返回结果

//分配角色按钮回调
const setRole = async(row: User) => {
    // //抽屉展示
    // drawer1.value = true;
    //存储已有的用户信息
    Object.assign(userParams, row);
    //获取全部的职位的数据与当前用户已有的职位数据
    let result=await reqAllRole((userParams.id as number));
    console.log(result)
}

• 请求发送成功，显示状态码200，且包含需要信息

5.拿数据

import {reqAllRole } from '@/api/acl/user/index';//引入发请求方法
import type {AllRoleResponseData, AllRole } from '@/api/acl/user/type';//引入类型
//定义响应式数据控制抽屉的显示与隐藏
let drawer = ref<boolean>(false)
//当前用户已有的职位
let uesrRole = ref<AllRole>([]);
//存储全部职位的数组
let allRole = ref<AllRole>([]);
//收集用户信息的响应式数组
let userParams = reactive<User>({
    username: '',
    name: '',
    password: ''
})

//分配角色按钮回调
const setRole = async (row: User) => {
    //存储已有的用户信息
    Object.assign(userParams, row);
    //获取全部的职位的数据与当前用户已有的职位数据
    let result: AllRoleResponseData = await reqAllRole((userParams.id as number));
    if (result.code == 200) {//请求成功：存储需要的数据
        //存储全部的职位
        allRole.value = result.data.allRolesList;
        //存储当前用户已有的职位
        uesrRole.value = result.data.assignRoles;
        //抽屉展示
        drawer1.value = true;
    }
}

• 检查拿到数据没

6.展示数据

（1）展示当前用户已有的职位

<!-- 显示职位的复选框 v-model双向绑定搜集数据-->
                    <el-checkbox-group v-model="userRole">
                        <el-checkbox v-for="(role, index) in allRole" :label="role" :key="index">{{ role.roleName }}</el-checkbox>
                    </el-checkbox-group>

（2）复选框按钮

<el-form-item label="职位列表">
                    <!-- 用布尔值checkAll判断全选框勾不勾；indeterminate:设置不确定样式 -->
                    <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
                    <!-- 显示职位的复选框 v-model双向绑定搜集数据-->
                    <el-checkbox-group v-model="userRole" @change="handleCheckedCitiesChange">
                        <el-checkbox v-for="(role, index) in allRole" :label="role" :key="index">{{ role.roleName }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

//收集顶部复选框全选数据
const checkAll=ref<boolean>(false);
//控制顶部全选复选框不确定样式
const isIndeterminate=ref<boolean>(true);
//顶部的全部复选框的change事件
const handleCheckAllChange=(val:boolean)=>{
    //val:true(全选)|false(没有全选)
    userRole.value=val?allRole.value:[];//如果全选按钮勾了，就把所有职位数组数据赋值给已有职位数组，否则赋空
    //不确定的样式
    isIndeterminate.value=false;
}
//顶部全部的复选框change事件
const handleCheckedCitiesChange=(value:string[])=>{
    // console.log(value)
    //顶部复选框勾选的数据，如果勾选的数等于所有职位数组长度就把全选按钮勾上
    checkAll.value=value.length===allRole.value.length;
    //不确定的样式
    isIndeterminate.value=value.length!==allRole.value.length;
}

• 最后实现效果：默认显示已有的职位，如果没有全选框为空，如果全部勾选职位全选按钮为勾，其他情况为-号；对于点击全选框，如果是-或者空时点击全选框变为勾，勾时点击变为空，下面的职位也跟着变