Tlias 案例-部门管理（前端）

 列表查询

 首先完成页面的基本布局

<script lang="ts" setup>import { ref } from 'vue'const tableData = ref([ {"id": 1,"name": "学工部","createTime": "2022-09-01T23:06:29","updateTime": "2022-09-01T23:06:29"}
])
</script><template><h1>部门管理</h1><div class="container"><el-button type="primary">+ 新增部门</el-button></div><div><el-table :data="tableData" border style="width: 100%"><el-table-column type="index" label="序号" width="100" align="center" /><el-table-column prop="name" label="部门名称" width="260" align="center" /><el-table-column prop="updateTime" label="最后操作时间" width="300" align="center" /><el-table-column prop="address" label="操作" width="200" align="center"><template #default="scope"><el-button type="primary" size = "small"><el-icon><EditPen /></el-icon>编辑</el-button><el-button type="danger" size = "small"><el-icon><Delete /></el-icon>删除</el-button></template></el-table-column>  </el-table></div>
</template><style scoped>
.container{margin: 10px 0px;
}
</style>

接下来我们要将表中的数据变成动态的，在前后端分离开发中，前后端是并行开发的，前端可以用 Apifox 生成一个 Mock 地址，给前端进行测试。

<script lang="ts" setup>import { ref, onMounted } from 'vue'
import axios from 'axios'onMounted(() => {serach();
})
const serach = async () => {const result = await axios.get('https://m1.apifoxmock.com/m1/6752425-6463893-default/depts');if(result.data.code === 1){deptList.value = result.data.data;}
}const deptList = ref([])
</script><template><h1>部门管理</h1><div class="container"><el-button type="primary">+ 新增部门</el-button></div><div><el-table :data="deptList" border style="width: 100%"><el-table-column type="index" label="序号" width="100" align="center" /><el-table-column prop="name" label="部门名称" width="260" align="center" /><el-table-column prop="updateTime" label="最后操作时间" width="300" align="center" /><el-table-column prop="address" label="操作" width="200" align="center"><template #default="scope"><el-button type="primary" size = "small"><el-icon><EditPen /></el-icon>编辑</el-button><el-button type="danger" size = "small"><el-icon><Delete /></el-icon>删除</el-button></template></el-table-column>  </el-table></div>
</template><style scoped>
.container{margin: 10px 0px;
}
</style>

程序优化

直接在 vue 组件中基于 axios 发送异步请求会有以下问题：

1：为解决上述问题，我们在前端开发时，通常会定义一个请求处理的工具类： -request.js

2：与服务端进行异步交互的逻辑，通常会封装到一个单独的 api 中，如 dept.js

import axios from 'axios'//创建axios实例对象
const request = axios.create({baseURL: 'https://m1.apifoxmock.com/m1/6752425-6463893-default',timeout: 600000
})//axios的响应 response 拦截器
request.interceptors.response.use((response) => { //成功回调return response.data},(error) => { //失败回调return Promise.reject(error)}
)export default request

import request from '@/utlis/request'//查询全部部门数据
export const queryAllApi = () => {return request.get('/depts')
}

const serach = async () => {// const result = await axios.get('https://m1.apifoxmock.com/m1/6752425-6463893-default/depts');// if(result.data.code === 1){//   deptList.value = result.data.data;// }const result = await queryAllApi();if(result.code === 1){deptList.value = result.data;}
}

最后，因为我们的程序已经在前端通过了 Mock 测试，所以我们直接上前端后后端连接来。 

我们不需要 Mock 的 URL 了，我们直接改成 'api'，（这里改成什么都可以，因为后面要替换成空串）

import axios from 'axios'//创建axios实例对象
const request = axios.create({baseURL: 'api',timeout: 600000
})//axios的响应 response 拦截器
request.interceptors.response.use((response) => { //成功回调return response.data},(error) => { //失败回调return Promise.reject(error)}
)export default request

 然后我们需要在 vite.config.js 中配置前端请求服务器信息。

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},server: {proxy: {'/api': {target: 'http://localhost:8080',secure: false,changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径，正则表达式，将/api替换为空字符串}}}
})

这里的格式还是比较固定的，我们只需要保证服务器的端口号没有问题即可。

最后再看一下前后端连接的大概原理。

新增部门

需要用到 Dialog 对话框 

 <!-- Dialog 对话框组件 --><el-dialog v-model="dialogFormVisible" :title="FormTitle" width="500"><el-form :model="dept"><el-form-item label="部门名称" label-width="80px"><el-input v-model="dept.name"/></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="dialogFormVisible = false">取消</el-button><el-button type="primary" @click="save">确定</el-button></div></template></el-dialog>

//Dialog 对话框
const dialogFormVisible = ref(false);
const dept = ref({name: ''});
const FormTitle = ref('');
const addDept = () => {dialogFormVisible.value = true;FormTitle.value = '添加部门';dept.value = {name: ''}; 
}
const save = async () => { // 新增部门const result = await addApi(dept.value);if(result.code === 1){//提示信息ElMessage.success('新增部门成功');// 关闭对话框dialogFormVisible.value = false;// 刷新数据serach();}else{ElMessage.error(result.msg);}

export const addApi = (dept) => {return request.post('/depts', dept)
}

当然我们对部门的名称肯定是有要求的，这里们就要求 2 到 10 个字符之间，我们需要用到 rules

的校验功能。

//表单校验
const rules = ref({name: [{ required: true, message: '部门名称是必填项', trigger: 'blur' },{ min: 2, max: 10, message: '部门名称的长度应在2-10之间', trigger: 'blur' },],
}) 
const deptFormRef= ref();

    <el-form :model="dept" :rules="rules" ref="deptFormRef"><el-form-item label="部门名称" label-width="80px" prop="name"><el-input v-model="dept.name"/></el-form-item></el-form>

 具体步骤如下：

1：定义表单校验规则，通过 rules 属性与表单绑定

2：通过 prop 属性绑定对应的表单项

3：通过 ref 属性注册表单的引用，表单提交时，校验表单，校验通过，则允许提交表单

const save = async () => { //表单校验if(!deptFormRef.value) return;deptFormRef.value.validate(async (valid) =>{ //valid 表示是否校验通过：true 通过 / false 不通过if(valid){const result = await addApi(dept.value);if(result.code === 1){//提示信息ElMessage.success('新增部门成功');// 关闭对话框dialogFormVisible.value = false;// 刷新数据serach();}else{ElMessage.error(result.msg);}}else{ElMessage.error('表单校验不通过');}})
}

 最后要在我们的 addDept 方法中新加入一个：

  if(deptFormRef.value){deptFormRef.value.resetFields();}

用来清空上次的残留。 

 

修改部门

 对于修改部门，我们通常分两步进行：

1：查询回显

2：保存修改

我们先来完成查询回显的功能

这个功能很简单，只需给我的 "编辑" 按钮绑定一个方法，并且记得把这个部门的 id 传到这个方法里

<el-button type="primary" size = "small" @click="edit(scope.row.id)"><el-icon><EditPen /></el-icon>编辑</el-button>

//编辑部门
const edit = async (id) => {if(deptFormRef.value){deptFormRef.value.resetFields();}FormTitle.value = '编辑部门';const result = await queryByIdApi(id);if(result.code === 1){dept.value = result.data;dialogFormVisible.value = true;} 
}

最后是 查询 语句

//根据id查询部门
export const queryByIdApi = (id) => {return request.get(`/depts/${id}`);
}

 

然后我们再来完成 保存修改 的操作

 我们先把最简单的 PUT 语句写一下

//修改部门
export const updateApi = (dept) => {return request.put('/depts', dept)
}

 然后将 ”确定“ 按钮绑定到 save 方法上，就是和 ”新增” 公用一个方法

<el-button type="primary" @click="save">确定</el-button>

最后我们修改一下 save 方法，首先要区分一下 ”新增“ 和 ”修改“ 这两个操作最大的区别是什么？

显而易见：”新增“ 这个操作它是不需要部门的 Id 的，但是 ”修改“ 需要，而当我们点击 ”编辑“ 按钮时，我们已经拿到了对应部门的 Id，所以我们就判断此时的部门有没有 Id，有的话就是 ”修改“ 操作。

const save = async () => { //表单校验if(!deptFormRef.value) return;deptFormRef.value.validate(async (valid) =>{ //valid 表示是否校验通过：true 通过 / false 不通过if(valid){let result;if(dept.value.id){result = await updateApi(dept.value);}else{result = await addApi(dept.value);}if(result.code === 1){//提示信息ElMessage.success('新增部门成功');// 关闭对话框dialogFormVisible.value = false;// 刷新数据serach();}else{ElMessage.error(result.msg);}}else{ElMessage.error('表单校验不通过');}})
}

删除部门 

 由于删除是一个比较危险的操作，为避免误操作，通常会在点击删除之后，弹出确认框进行确认。

所以我们这里需要一个新的 Element 组件：ElMessageBox 消息弹出框组件。

先完成最简单的 delete 语句，注意一定要和接口文档要求的一样

//删除部门
export const deleteByIdApi = (id) => {return request.delete(`/depts?id=${id}`)
}

 <el-button type="danger" size = "small" @click="deleteById(scope.row.id)"><el-icon><Delete /></el-icon>删除</el-button>

//删除部门
const deleteById = async (id) => {ElMessageBox.confirm('您确认删除该部门吗？','提示',{confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning',}).then( async () => { // 确认const result = await deleteByIdApi(id);if(result.code === 1){ElMessage.success('删除成功');serach();}else{ElMessage.error(result.msg);}}).catch(() => { // 取消ElMessage.info('取消删除')})
}