后台管理配置

配置菜单

新增目录

新增菜单

配置路由

重点是路由路径
member/user/index1
对应着工程目录同样路径

前端页面展示

vue初始化代码

构建页面

新建请求api

import request from "@/request";

// 查询参数列表
export function listMemberUser(query) {
  return request({
    url: "/member/user/list",
    method: "get",
    params: query,
  });
}

export function getMemberUser(query) {
  return request({
    url: "/member/user/get",
    method: "get",
    params: query,
  });
}
// 新增参数配置
export function addMemberUser(data) {
  return request({
    url: "/member/user/add",
    method: "post",
    data: data,
  });
}

// 修改参数配置
export function updateMemberUser(data) {
  return request({
    url: "/member/user/update",
    method: "put",
    data: data,
  });
}

// 删除参数配置
export function delMemberUser(configId) {
  return request({
    url: "/member/user/" + configId,
    method: "delete",
  });
}

在页面引入

  listMemberUser,
  getMemberUser,
  delMemberUser,
  addMemberUser,
  updateMemberUser,
} from "@/api/member/user";

创建表单常用参数

  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 参数表格数据
      configList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        configName: undefined,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        configName: [
          { required: true, message: "名称不能为空", trigger: "blur" },
        ],
        configKey: [
          { required: true, message: "键名不能为空", trigger: "blur" },
        ],
        configValue: [
          { required: true, message: "键值不能为空", trigger: "blur" },
        ],
      },
    };
  },