概述

本文档详细介绍在 EBAOZU 总后台（view/admin）中新增一个功能页面的完整端到端开发流程，包括前端 API 定义、Vue 页面组件编写、前端路由配置、后端接口实现以及后台菜单权限配置。

---

前端工程结构 (view/admin)

view/admin/src/
├── api/              # API 接口统一封装
├── components/       # 公共业务组件（图片选择器、商品选择器等）
├── pages/            # 页面组件目录（核心开发目录）
├── router/           # 路由配置
│   ├── index.js      # 路由入口
│   └── modules/      # 各模块路由定义
├── store/            # Vuex 状态管理
└── ...

---

添加新页面完整步骤

第一步：创建前端 API 接口文件

在 view/admin/src/api/ 下创建或补充模块 API 文件：

// view/admin/src/api/custom.js
import request from '@/plugins/request';

// 获取列表
export function getCustomList(params) {
  return request({
    url: 'custom/list',
    method: 'get',
    params
  });
}

// 保存数据
export function saveCustom(id, data) {
  return request({
    url: `custom/save/${id}`,
    method: 'post',
    data
  });
}

// 删除数据
export function deleteCustom(id) {
  return request({
    url: `custom/delete/${id}`,
    method: 'delete'
  });
}

第二步：创建 Vue 页面组件

在 view/admin/src/pages/ 下创建对应的业务页面文件夹：

<!-- view/admin/src/pages/custom/customList/index.vue -->
<template>
  <div>
    <!-- 搜索栏 -->
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form ref="searchForm" :model="searchForm" inline @submit.native.prevent>
        <FormItem label="关键字：">
          <Input v-model="searchForm.keyword" placeholder="请输入关键字" clearable @on-enter="getList" />
        </FormItem>
        <FormItem>
          <Button type="primary" @click="getList">搜索</Button>
          <Button class="ivu-ml-8" @click="handleReset">重置</Button>
        </FormItem>
      </Form>
    </Card>

    <!-- 表格与操作 -->
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Button type="primary" icon="md-add" @click="handleAdd">添加数据</Button>

      <Table :loading="loading" :columns="columns" :data="tableData" class="ivu-mt">
        <template slot-scope="{ row }" slot="action">
          <a @click="handleEdit(row)">编辑</a>
          <Divider type="vertical" />
          <a class="text-danger" @click="handleDelete(row)">删除</a>
        </template>
      </Table>

      <Page
        class="acea-row row-right ivu-mt"
        :total="total"
        :current.sync="searchForm.page"
        :page-size="searchForm.limit"
        show-total
        @on-change="getList"
      />
    </Card>
  </div>
</template>

<script>
import { getCustomList, deleteCustom } from '@/api/custom';

export default {
  name: 'CustomList',
  data() {
    return {
      loading: false,
      searchForm: { keyword: '', page: 1, limit: 15 },
      tableData: [],
      total: 0,
      columns: [
        { title: 'ID', key: 'id', width: 80 },
        { title: '标题', key: 'title', minWidth: 150 },
        { title: '创建时间', key: 'add_time', width: 180 },
        { title: '操作', slot: 'action', width: 150, fixed: 'right' }
      ]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      this.loading = true;
      try {
        const { data } = await getCustomList(this.searchForm);
        this.tableData = data.list || [];
        this.total = data.count || 0;
      } catch (err) {
        this.$Message.error(err.msg || '获取列表失败');
      } finally {
        this.loading = false;
      }
    },
    handleReset() {
      this.searchForm.keyword = '';
      this.searchForm.page = 1;
      this.getList();
    },
    handleAdd() {
      // 跳转添加页面或打开弹窗
    },
    handleEdit(row) {
      // 编辑操作
    },
    handleDelete(row) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定要删除该记录吗？',
        onOk: async () => {
          await deleteCustom(row.id);
          this.$Message.success('删除成功');
          this.getList();
        }
      });
    }
  }
};
</script>

第三步：配置前端路由

在 view/admin/src/router/modules/ 中注册新路由：

// view/admin/src/router/modules/custom.js
import BasicLayout from '@/layouts/basic-layout';
import Setting from '@/setting';

export default {
  path: `${Setting.roterPre}/custom`,
  name: 'custom',
  component: BasicLayout,
  children: [
    {
      path: 'list',
      name: 'custom_list',
      meta: {
        title: '自定义管理',
        auth: ['admin-custom-list']
      },
      component: () => import('@/pages/custom/customList')
    }
  ]
};

第四步：实现后端 API 与路由

1. 在 app/controller/admin/v1/custom/CustomController.php 编写控制器；
2. 在 route/admin.php 注册路由：

   Route::group('custom', function () {
       Route::get('list', 'v1.custom.CustomController/index');
       Route::post('save/:id', 'v1.custom.CustomController/save');
       Route::delete('delete/:id', 'v1.custom.CustomController/delete');
   })->middleware([
       \app\http\middleware\admin\AdminAuthTokenMiddleware::class,
       \app\http\middleware\admin\AdminCkeckRoleMiddleware::class
   ]);

第五步：后台配置菜单与权限

1. 登录平台总后台；
2. 打开【设置 -> 权限管理 -> 菜单管理】；
3. 新增菜单节点，填写菜单名称、路由路径（如 /admin/custom/list）和对应的后端接口权限规则。