页面开发

了解了 niucloud 管理端目录，下一步就是开发具体功能页面，下面通过一个具体功能的增删改查来讲解前端页面的开发过程

当然开发者可以通过代码生成器生成基本的增删改查，这里讲解具体功能设计思路，方便后期改动

商品品牌功能页面开发讲解

开发具体功能之前要分析功能所在插件以及模块，如果是框架功能，java 代码是在 niucloud-core 下面功能模块下，管理端前端代码是在 admin 的 app 下的功能模块下。而商品品牌是商城插件下商品功能板块的子项功能

商品品牌后台接口控制器文件结构

商品品牌 admin 前端对应功能的文件结构

商品品牌后台控制器接口以及规范

商品品牌前端接口文件

后台接口有了，下面就是书写前端接口文件，具体前端接口统一放在插件或者 app 目录的 api 文件夹下。可以统一放到模块文件下，也可以功能独立建立 api 接口文件，这里不做约束，只要后面 vue 文件引入即可。这里的商品品牌是写在了商品模块下

    /**
     * 获取商品品牌列表
     * @param params
     * @returns
     */
    export function getBrandList(params: Record<string, any>) {
        return request.get(`shop/goods/brand/list`, { params })
    }

    /**
     * 获取商品品牌详情
     * @param brand_id 商品品牌brand_id
     * @returns
     */
    export function getBrandInfo(brand_id: number) {
        return request.get(`shop/goods/brand/${ brand_id }`);
    }

    /**
     * 添加商品品牌
     * @param params
     * @returns
     */
    export function addBrand(params: Record<string, any>) {
        return request.post('shop/goods/brand', params, { showErrorMessage: true, showSuccessMessage: true })
    }

    /**
     * 编辑商品品牌
     * @param params
     * @returns
     */
    export function editBrand(params: Record<string, any>) {
        return request.put(`shop/goods/brand/${ params.brand_id }`, params, {
            showErrorMessage: true,
            showSuccessMessage: true
        })
    }

商品品牌前端页面文件结构

接口书写完成后，下一步开始写具体功能页面了，这里要确定功能页面的名称，一般按照具体功能命名，比如商品品牌列表 brand_list，商品品牌编辑使用 brand_edit (独立页面情况)或者 brand-edit (页面弹框情况)

后端菜单

确定了前端页面文件位置，下一步就是书写后台功能路由了，admin 端使用 element-plus 开发，后台页面路由是由后台菜单控制的，关于菜单开发查看 java 服务端手册 menu 菜单，比如商品品牌的菜单如下，注意里面的 router_path 是对应的浏览器访问路径，view_path 是前端代码文件路径(这里的文件路径是对应插件的相对路径，比如商品品牌是对应商城插件内部的目录)。注意配置之后重启服务、重置菜单

                        {
                            "menu_name": "商品品牌",
                            "menu_short_name": "商品品牌",
                            "menu_key": "shop_goods_brand_list",
                            "parent_key": "shop_goods",
                            "menu_type": 1,
                            "icon": "iconfont iconshangpinpinpai",
                            "api_url": "shop/goods/brand",
                            "router_path": "shop/goods/brand",
                            "view_path": "goods/brand_list",
                            "methods": "get",
                            "sort": 86,
                            "status": 1,
                            "is_show": 1,
                            "children": [
                                {
                                    "menu_name": "商品品牌添加",
                                    "menu_short_name": "商品品牌添加",
                                    "menu_key": "shop_goods_brand_add",
                                    "parent_key": "shop_goods_brand_list",
                                    "menu_type": 2,
                                    "icon": "",
                                    "api_url": "shop/goods/brand",
                                    "router_path": "",
                                    "view_path": "",
                                    "methods": "post",
                                    "sort": 0,
                                    "status": 1,
                                    "is_show": 0
                                },
                                {
                                    "menu_name": "商品品牌编辑",
                                    "menu_short_name": "商品品牌编辑",
                                    "menu_key": "shop_goods_brand_edit",
                                    "parent_key": "shop_goods_brand_list",
                                    "menu_type": 2,
                                    "icon": "",
                                    "api_url": "shop/goods/brand/<id>",
                                    "router_path": "",
                                    "view_path": "",
                                    "methods": "put",
                                    "sort": 0,
                                    "status": 1,
                                    "is_show": 0
                                },
                                {
                                    "menu_name": "商品品牌删除",
                                    "menu_short_name": "商品品牌删除",
                                    "menu_key": "shop_goods_brand_delete",
                                    "parent_key": "shop_goods_brand_list",
                                    "menu_type": 2,
                                    "icon": "",
                                    "api_url": "shop/goods/brand/<id>",
                                    "router_path": "",
                                    "view_path": "",
                                    "methods": "delete",
                                    "sort": 0,
                                    "status": 1,
                                    "is_show": 0
                                }
                            ]
                        }