CatchAdmin(一) 创建菜单以及权限

前言：该文章作为官方catchadmin的手册补充，支持2021年更新之后的版本操作。

(一)后端准备

1.1 创建模块

1.2 创建表以及模型控制器

(二)前端准备

2.1 创建页面

2.2 前端页面代码

// index.vue文件自定义代码
<template>
  <div class="app-container">
    <!------------------------- 搜索组件 ------------------------------>
    <div class="filter-container">
      <el-input v-model="queryParam.title" placeholder="分类名称" clearable class="filter-item form-search-input"/>
      <el-button class="filter-item search" icon="el-icon-search" @click="handleSearch">
        搜索
      </el-button>
      <el-button class="filter-item" icon="el-icon-refresh" @click="handleRefresh">
        重置
      </el-button>
      <el-button class="filter-item fr" type="primary" icon="el-icon-plus" @click="handleCreate">
        新增
      </el-button>
    </div>

    <!------------------------- 表格组件 ------------------------------>
    <el-table
      :data="data"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="title" label="标题"/>
      <el-table-column prop="sort" label="排序"/>
      <el-table-column prop="created_at" label="创建时间"/>
      <el-table-column label="操作">
        <template slot-scope="cate">
          <el-button type="primary" icon="el-icon-plus" @click="beforeHandleCreate(cate.row)"/>
          <el-button type="primary" icon="el-icon-edit" @click="handleUpdate(cate.row)"/>
          <el-button type="danger" icon="el-icon-delete" @click="handleDelete(cate.row.id)"/>
        </template>
      </el-table-column>
    </el-table>

    <!------------------------- 分页组件 ------------------------------>
    <el-pagination
      background
      class="pagination-container"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paginate.current"
      hide-on-single-page
      :page-sizes="paginate.sizes"
      :page-size="paginate.limit"
      :layout="paginate.layout"
      :total="paginate.total"
    />

    <!------------------------- form表单组件 start------------------------------>
    <el-dialog :title="title" :visible.sync="formVisible" width="30%" @close="handleCancel">
      <el-form :ref="formName" :model="formFieldsData" :rules="rules">
        <el-form-item label="分类名称" :label-width="formLabelWidth" prop="title">
          <el-input v-model="formFieldsData.title" placeholder="请输入标题" style="width: 92%" autocomplete="off"
                    clearable
          />
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
          <el-input-number v-model="formFieldsData.sort" :min="1" :max="100000"/>
        </el-form-item>
        <el-input v-model="formFieldsData.p_id" type="hidden"/>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!------------------------- form表单组件 end------------------------------>
  </div>
</template>

<script>
import formOperate from '@/layout/mixin/formOperate'

export default {
  name: 'Index',
  mixins: [formOperate],
  data() {
    return {
      // 引用标识---前端添加菜单--**权限标识**保持一致
      formName: 'cms',
      formLabelWidth: '90px',
      // 刷新路由
      refreshRoute: true,
      // 表单数据
      formFieldsData: {
        title: '',
        sort: 0,
        p_id: 0
      },
      permissions: [],
      // 搜索参数
      queryParam: { name: '' },
      // 后端接口url----前端添加菜单--**菜单Path**保持一致
      url: 'cms',

      // 验证规则
      rules: {
        title: [
          { required: true, message: '请输入比搜题名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

2.3 路由组件注册

// router.js文件
export default {
  // 微信管理
  cms: () => import('@/views/cms/cms')
}

(三) 菜单添加

3.1 添加一级菜单

3.2 添加子菜单

3.3 添加菜单权限

(四)注意事项

4.2 权限添加

权限添加建议在【+新建】添加，【更新】添加将导致数据出错