后端管理系统，前后端分离的框架若依管理后台，来看下vue3+element-plus版本。
实现一个页面
定义api请求
gatewayPath 分布式网关定义
import request from '@/utils/request' import { gatewayPath } from '@/utils/gateway'; // 网关路径 const adminApi = gatewayPath.adminApi || ''; // 查询用户列表 export function listUser(query) { return request({ url: adminApi + '/api/account/user/list', method: 'get', params: query }) } // 查询用户详细 export function getUser(id) { return request({ url: adminApi + '/api/account/user/' + id, method: 'get' }) } // 新增用户 export function addUser(data) { return request({ url: adminApi + '/api/account/user', method: 'post', data: data }) } // 修改用户 export function updateUser(data) { return request({ url: adminApi + '/api/account/user', method: 'post', data: data }) } // 删除用户 export function delUser(id) { return request({ url: adminApi + '/api/account/user/' + id, method: 'post' }) }
页面实现 views/account/appUser
<template> <div class="app-container"> <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="姓名" prop="userName"> <el-input v-model="queryParams.userName" placeholder="请输入姓名" clearable size="small" /> </el-form-item> <el-form-item label="用户手机号" prop="userPhone"> <el-input v-model="queryParams.userPhone" placeholder="请输入用户手机号" clearable size="small" /> </el-form-item> <el-form-item label="用户二维码标识" prop="qrCode"> <el-input v-model="queryParams.qrCode" placeholder="请输入用户二维码标识" clearable size="small" /> </el-form-item> <el-form-item label="性别" prop="gender"> <el-input v-model="queryParams.gender" placeholder="请输入性别" clearable size="small" /> </el-form-item> <el-form-item label="生日" prop="birthday"> <el-date-picker clearable size="small" v-model="queryParams.birthday" type="date" value-format="yyyy-MM-dd" placeholder="选择生日"> </el-date-picker> </el-form-item> <el-form-item label="身份证号" prop="idCardNo"> <el-input v-model="queryParams.idCardNo" placeholder="请输入身份证号" clearable size="small" /> </el-form-item> <el-form-item label="身份证正面照" prop="idCardFront"> <el-input v-model="queryParams.idCardFront" placeholder="请输入身份证正面照" clearable size="small" /> </el-form-item> <el-form-item label="身份证反面照" prop="idCardReverse"> <el-input v-model="queryParams.idCardReverse" placeholder="请输入身份证反面照" clearable size="small" /> </el-form-item> <el-form-item label="昵称" prop="nickname"> <el-input v-model="queryParams.nickname" placeholder="请输入昵称" clearable size="small" /> </el-form-item> <el-form-item label="头像" prop="avatar"> <el-input v-model="queryParams.avatar" placeholder="请输入头像" clearable size="small" /> </el-form-item> <el-form-item label="登陆密码" prop="loginPwd"> <el-input v-model="queryParams.loginPwd" placeholder="请输入登陆密码" clearable size="small" /> </el-form-item> <el-form-item label="支付密码" prop="payPwd"> <el-input v-model="queryParams.payPwd" placeholder="请输入支付密码" clearable size="small" /> </el-form-item> <el-form-item label="注册类型" prop="wxOpenId"> <el-input v-model="queryParams.wxOpenId" placeholder="请输入注册类型" clearable size="small" /> </el-form-item> <el-form-item label="修改时间" prop="updateTime"> <el-date-picker clearable size="small" v-model="queryParams.updateTime" type="date" value-format="yyyy-MM-dd" placeholder="选择修改时间"> </el-date-picker> </el-form-item> <el-form-item label="0无效1有效" prop="yn"> <el-input v-model="queryParams.yn" placeholder="请输入0无效1有效" clearable size="small" /> </el-form-item> <el-form-item label="备注" prop="remark"> <el-input v-model="queryParams.remark" placeholder="请输入备注" clearable size="small" /> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> </el-form-item> </el-form> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['biz:user:add']" >新增</el-button> </el-col> <el-col :span="1.5"> <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['biz:user:edit']" >修改</el-button> </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['biz:user:remove']" >删除</el-button> </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['biz:user:export']" >导出</el-button> </el-col> <right-toolbar :showSearch="showSearch" @queryTable="getList"></right-toolbar> </el-row> <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center" /> <el-table-column label="主键" align="center" prop="id" /> <el-table-column label="姓名" align="center" prop="userName" /> <el-table-column label="用户手机号" align="center" prop="userPhone" /> <el-table-column label="用户二维码标识" align="center" prop="qrCode" /> <el-table-column label="性别" align="center" prop="gender" /> <el-table-column label="生日" align="center" prop="birthday" width="180"> <template #default="scope"> <span>{{ parseTime(scope.row.birthday, '{y}-{m}-{d}') }}</span> </template> </el-table-column> <el-table-column label="身份证号" align="center" prop="idCardNo" /> <el-table-column label="身份证正面照" align="center" prop="idCardFront" /> <el-table-column label="身份证反面照" align="center" prop="idCardReverse" /> <el-table-column label="昵称" align="center" prop="nickname" /> <el-table-column label="头像" align="center" prop="avatar" /> <el-table-column label="登陆密码" align="center" prop="loginPwd" /> <el-table-column label="支付密码" align="center" prop="payPwd" /> <el-table-column label="注册类型" align="center" prop="wxOpenId" /> <el-table-column label="修改时间" align="center" prop="updateTime" width="180"> <template #default="scope"> <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span> </template> </el-table-column> <el-table-column label="0无效1有效" align="center" prop="yn" /> <el-table-column label="备注" align="center" prop="remark" /> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template #default="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['biz:user:edit']" >修改</el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['biz:user:remove']" >删除</el-button> </template> </el-table-column> </el-table> <pagination v-show="total>0" :total="total" :page="queryParams.pageNum" :limit="queryParams.pageSize" @pagination="getList" /> <!-- 添加或修改用户对话框 --> <el-dialog :title="title" width="500px" append-to-body :modelValue="open" > <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form-item label="姓名" prop="userName"> <el-input v-model="form.userName" placeholder="请输入姓名" /> </el-form-item> <el-form-item label="用户手机号" prop="userPhone"> <el-input v-model="form.userPhone" placeholder="请输入用户手机号" /> </el-form-item> <el-form-item label="用户二维码标识" prop="qrCode"> <el-input v-model="form.qrCode" placeholder="请输入用户二维码标识" /> </el-form-item> <el-form-item label="性别" prop="gender"> <el-input v-model="form.gender" placeholder="请输入性别" /> </el-form-item> <el-form-item label="生日" prop="birthday"> <el-date-picker clearable size="small" v-model="form.birthday" type="date" value-format="yyyy-MM-dd" placeholder="选择生日"> </el-date-picker> </el-form-item> <el-form-item label="身份证号" prop="idCardNo"> <el-input v-model="form.idCardNo" placeholder="请输入身份证号" /> </el-form-item> <el-form-item label="身份证正面照" prop="idCardFront"> <el-input v-model="form.idCardFront" placeholder="请输入身份证正面照" /> </el-form-item> <el-form-item label="身份证反面照" prop="idCardReverse"> <el-input v-model="form.idCardReverse" placeholder="请输入身份证反面照" /> </el-form-item> <el-form-item label="昵称" prop="nickname"> <el-input v-model="form.nickname" placeholder="请输入昵称" /> </el-form-item> <el-form-item label="头像" prop="avatar"> <el-input v-model="form.avatar" placeholder="请输入头像" /> </el-form-item> <el-form-item label="登陆密码" prop="loginPwd"> <el-input v-model="form.loginPwd" placeholder="请输入登陆密码" /> </el-form-item> <el-form-item label="支付密码" prop="payPwd"> <el-input v-model="form.payPwd" placeholder="请输入支付密码" /> </el-form-item> <el-form-item label="注册类型" prop="wxOpenId"> <el-input v-model="form.wxOpenId" placeholder="请输入注册类型" /> </el-form-item> <el-form-item label="0无效1有效" prop="yn"> <el-input v-model="form.yn" placeholder="请输入0无效1有效" /> </el-form-item> <el-form-item label="备注" prop="remark"> <el-input v-model="form.remark" placeholder="请输入备注" /> </el-form-item> </el-form> <template #foot> <div class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </template> </el-dialog> </div> </template> <script setup name="AppUser"> import { ref } from "vue"; import { listUser, getUser, delUser, addUser, updateUser } from "@/api/account/appUser"; const { proxy } = getCurrentInstance(); // 遮罩层 const loading = ref(true); // 选中数组 const ids = ref([]); // 非单个禁用 const single = ref(true); // 非多个禁用 const multiple = ref(true); // 显示搜索条件 const showSearch = ref(true); // 总条数 const total = ref(0); // 用户表格数据 const userList = ref([]); // 弹出层标题 const title = ref(""); // 是否显示弹出层 const open = ref(false); // 查询参数 const queryParamsData = reactive({ pageNum: 1, pageSize: 10, userName: null, userPhone: null, qrCode: null, gender: null, birthday: null, idCardNo: null, idCardFront: null, idCardReverse: null, nickname: null, avatar: null, loginPwd: null, payPwd: null, wxOpenId: null, updateTime: null, yn: null, remark: null }); const queryParams = toRefs(queryParamsData); // 表单参数 const formData = reactive({}); const form = toRefs(formData); // 表单校验 const rulesData = reactive({ userName: [ { required: true, message: "姓名不能为空", trigger: "blur" } ], qrCode: [ { required: true, message: "用户二维码标识不能为空", trigger: "blur" } ], gender: [ { required: true, message: "性别不能为空", trigger: "blur" } ], idCardNo: [ { required: true, message: "身份证号不能为空", trigger: "blur" } ], idCardFront: [ { required: true, message: "身份证正面照不能为空", trigger: "blur" } ], idCardReverse: [ { required: true, message: "身份证反面照不能为空", trigger: "blur" } ], nickname: [ { required: true, message: "昵称不能为空", trigger: "blur" } ], avatar: [ { required: true, message: "头像不能为空", trigger: "blur" } ], loginPwd: [ { required: true, message: "登陆密码不能为空", trigger: "blur" } ], payPwd: [ { required: true, message: "支付密码不能为空", trigger: "blur" } ], wxOpenId: [ { required: true, message: "注册类型不能为空", trigger: "blur" } ], createBy: [ { required: true, message: "创建人不能为空", trigger: "blur" } ], }); const rules = toRefs(rulesData); /** 查询用户列表 */ function getList() { loading.value = true; listUser(queryParams.value).then(response => { userList.value = response.rows; total.value = response.total; loading.value = false; }); } // 取消按钮 function cancel() { open.value = false; reset(); } // 表单重置 function reset() { form.value = { id: null, userName: null, userPhone: null, qrCode: null, gender: null, birthday: null, idCardNo: null, idCardFront: null, idCardReverse: null, nickname: null, avatar: null, loginPwd: null, payPwd: null, wxOpenId: null, createBy: null, createTime: null, updateBy: null, updateTime: null, yn: null, remark: null }; resetForm("form"); } /** 搜索按钮操作 */ function handleQuery() { queryParams.value.pageNum = 1; getList(); } /** 重置按钮操作 */ function resetQuery() { resetForm("queryForm"); handleQuery(); } // 多选框选中数据 function handleSelectionChange(selection) { ids.value = selection.map(item => item.id) single.value = selection.length!==1 multiple.value = !selection.length } /** 新增按钮操作 */ function handleAdd() { reset(); open.value = true; title.value = "添加用户"; } /** 修改按钮操作 */ function handleUpdate(row) { reset(); const id = row.id || ids.value getUser(id).then(response => { form.value = response.data; open.value = true; title.value = "修改用户"; }); } /** 提交按钮 */ function submitForm() { proxy.$refs["form"].validate(valid => { if (valid) { if (form.value.id != null) { updateUser(form.value).then(response => { proxy.$modal.msgSuccess("修改成功"); open.value = false; getList(); }); } else { addUser(form.value).then(response => { proxy.$modal.msgSuccess("新增成功"); open.value = false; getList(); }); } } }); } /** 删除按钮操作 */ function handleDelete(row) { const ids = row.id || ids.value; proxy.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项？').then(function() { return delUser(ids); }).then(() => { getList(); proxy.$modal.msgSuccess("删除成功"); }).catch(() => {}); } /** 导出按钮操作 */ function handleExport() { download('biz/user/export', { ...queryParams.value }, `user_${new Date().getTime()}.xlsx`) } /** 初始化数据 **/ getList(); </script>
菜单及页面路由在后台配置
INSERT INTO ry.sys_menu (menu_name,parent_id,order_num,`path`,component,query,is_frame,is_cache,menu_type,visible,status,perms,icon,create_by,create_time,update_by,update_time,remark) VALUES ('角色管理',1,2,'role','system/role/index','',1,0,'C','0','0','system:role:list','peoples','admin','2022-01-12 12:13:41','',NULL,'角色管理菜单');
管理后台可以通过generator快速生成页面代码，稍加修改及可完成基础操作。
框架页面使用完成。
