【vue】封装接口，全局字典，表格表头及使用

一、封装接口（API请求）

1. 创建axios实例

// src/utils/request.js
import axios from 'axios'const service = axios.create({baseURL: process.env.VUE_APP_BASE_API,timeout: 10000
})// 请求拦截器
service.interceptors.request.use(config => {config.headers['Authorization'] = getToken()return config
})// 响应拦截器
service.interceptors.response.use(response => response.data,error => {if (error.response.status === 401) {// 处理未授权}return Promise.reject(error)}
)export default service

2. 模块化接口管理

// src/api/user.js
import request from '@/utils/request'export function getUserList(params) {return request.get('/users', { params })
}export function updateUser(data) {return request.post('/users/update', data)
}

3. 组件中使用

import { getUserList } from '@/api/user'export default {methods: {async fetchData() {try {const res = await getUserList({ page: 1 })this.list = res.data} catch (err) {console.error(err)}}}
}

二、封装全局字典

1. 字典定义文件

// src/utils/dict.js
export const DICT = {status: [{ value: 1, label: '启用' },{ value: 0, label: '禁用' }],gender: [{ value: 1, label: '男' },{ value: 2, label: '女' }]
}// 字典转换方法
export const formatDict = (value, dictType) => {const target = DICT[dictType].find(item => item.value === value)return target ? target.label : '未知'
}

2. 全局注入字典

// main.js
import { DICT, formatDict } from '@/utils/dict'Vue.prototype.$dict = DICT
Vue.prototype.$formatDict = formatDict

3. 组件中使用

<template><div><!-- 直接访问字典 --><el-select v-model="status"><el-option v-for="item in $dict.status":key="item.value":label="item.label":value="item.value"/></el-select><!-- 格式化显示 --><span>{{ $formatDict(userStatus, 'status') }}</span></div>
</template>

三、封装通用表格表头

1. 创建可配置表格组件

<!-- src/components/CommonTable.vue -->
<template><el-table :data="tableData"><el-table-column v-for="col in columns":key="col.prop":prop="col.prop":label="col.label":width="col.width":sortable="col.sortable || false"><template v-slot="{ row }"><!-- 自定义格式化 --><template v-if="col.formatter">{{ col.formatter(row[col.prop]) }}</template><!-- 自定义插槽 --><slot v-else-if="col.slotName" :name="col.slotName" :row="row"/><!-- 默认显示 --><span v-else>{{ row[col.prop] }}</span></template></el-table-column></el-table>
</template><script>
export default {props: {columns: {type: Array,required: true},tableData: {type: Array,default: () => []}}
}
</script>

2. 使用配置式表头

// 在组件中定义表头配置
const columns = [{prop: 'name',label: '姓名',width: 120},{prop: 'status',label: '状态',formatter: value => this.$formatDict(value, 'status')},{prop: 'action',label: '操作',slotName: 'action' // 使用插槽自定义内容}
]

3. 父组件中使用

<template><CommonTable :columns="columns" :table-data="list"><!-- 自定义操作列 --><template #action="{ row }"><el-button @click="edit(row)">编辑</el-button></template></CommonTable>
</template><script>
import CommonTable from '@/components/CommonTable'export default {components: { CommonTable },data() {return {columns: [...],list: [...]}}
}
</script>

四、优势总结

1. 接口封装

   • 统一错误处理
   • 集中管理API端点
   • 自动携带Token等通用配置

2. 全局字典

   • 避免重复定义常量
   • 实现数据与显示的分离
   • 支持快速维护更新

3. 通用表格

   • 减少重复列定义代码
   • 支持灵活配置和扩展
   • 保持UI风格统一

通过以上封装，可以显著提升开发效率和代码质量，特别适用于中后台管理系统等需要大量表格和字典的场景。

本文内容尚不完善，友友们还有啥需要封装可以留言

码字不易，各位大佬点点赞呗