页面开发

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

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

下面通过商城插件开发商品品牌功能页面进行讲解，从中开发者能够串联整体功能体系

开发具体功能之前要分析功能所在插件以及模块，如果是框架功能java代码是在niucloud-core下面的功能模块下面，管理端前端代码是在app下面的功能模块下面。考虑商品品牌是商城插件下，商品功能板块的子项功能，所以确定功能开发做在位置。下面是功能文件位置确定,包括后台java接口以及前端页面，方便统一查看

这里是后台接口控制器文件结构

这里是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菜单开发，比如商品品牌的菜单如下，注意里面的routerpath是对应的访问路径，viewpath是对应文件路径(这里的文件路径是对应插件的相对路径，比如商品品牌是对应商城插件内部的目录)。注意配置之后重启服务，重置菜单。

                        {
                            "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
                                }
                            ]
                        },