ajax / request 配置
如果希望生成后的 API 文件能直接运行,目标项目中的请求模块必须导出 `get`、`post`、`del`、`put` 方法,并且参数结构要兼容生成器默认格式。
请求方法导出
配置定位:`server/create_cfg_tmpl/<模板>/config/config.js -> projectPath -> httpFile`,先确保这里指向的请求文件路径正确。
# 目标请求文件示例
import axios from "axios";
const instance = axios.create({
baseURL: "/api"
});
# 导出 get / post / del / put
export const post = (url, data, config = {}) => instance.post(url, data, config);
export const get = (url, params, config = {}) => instance.get(url, {
params,
...config
});
export const del = (url, data, config = {}) => instance.delete(url, {
data,
...config
});
export const put = (url, params, config = {}) => instance.put(url, params, config);
注释说明:如果你的项目只有 `get` 和 `post`,也可以只保留这两个导出;前提是你关闭不需要的 API 生成,或手动补齐生成后的文件。
关闭 API 文件自动生成
配置定位:`server/create_cfg_tmpl/<模板>/config/config.js -> makeFile -> isMakeApi`。修改后需要重启服务。
关闭 API 生成: 如果请求层格式完全不兼容,可把 `makeFile.isMakeApi` 设为 `false`,由人工维护 API 文件。
# 配置路径:config.js -> makeFile -> isMakeApi
makeFile: {
isMakeView: true,
isMakeApi: false,
isMakeRouter: true,
isMakeMock: false
}
注释说明:关闭 API 生成后,页面和路由仍可正常生成,只是相关接口文件改为手动维护。
如果你的项目中确实存在同名导出方法,但方法参数定义不满足 `(url, data, config)` 这一类默认格式,还可以继续修改 API 生成配置。
# 修改位置:
# web-project/src/mixins/create.js -> _fnMakeApiCfg()
#
# 处理方式:
# 1. 找到 _fnMakeApiCfg 方法
# 2. 调整 return 对象中的 type 属性值
# 3. 让生成器输出的请求方法名,和你的项目请求封装保持一致
注释说明:这种方式适合项目已有固定请求封装,但你仍希望保留 API 文件自动生成能力的场景。
常用全局配置
配置文件位于 `server/create_cfg_tmpl/**/config/config.js`,模板文件位于
`server/create_cfg_tmpl/**/template/`。下面列出最常用、最需要先理解的配置项。
重要: 修改配置文件后需要重启 `server` 服务;修改模板文件通常刷新页面即可生效。
注意: `web-project/public/tmpl_cfg` 与 `server/www/tmpl_cfg`
下的文件属于临时产物,启动时会被源模板覆盖,不建议直接修改。
1. 响应模型配置
用于告诉生成器如何从接口响应结构中提取真正的数据内容。
# 配置路径:config.js -> responseModel
responseModel: {
hasWrapper: false, // [true|false] [必须] 是否有包装层,例如:{ code: 0, data: {}, msg: 'success' }
codeKey: "code", // 状态码键名,hasWrapper 为 true 时必填
dataKey: "body", // 数据键名,hasWrapper 为 true 时必填
msgKey: "msg" // [可选] 提示消息键名
}
注释说明:如果你的接口返回结构是 `{ code, body, msg }` 这种包装层格式,这里必须配置正确。
2. 生成文件开关
控制要不要生成页面、API、路由、mock,以及是否启用路由分组。
# 配置路径:config.js -> makeFile
# 生成文件的配置
makeFile: {
isMakeView: true, // 是否生成视图文件
isMakeApi: true, // 是否生成 API 文件
isMakeRouter: true, // 是否生成路由文件
isMakeMock: false, // 是否生成 mock 数据文件
useRouterGroup: false // 是否启用路由分组;启用后按 tag 拆分子路由文件
}
注释说明:建议第一次接入时先只生成页面、API、路由,确认主链路正常后再考虑 mock 或分组路由。
3. 目标项目路径
决定生成器把文件写到什么位置,以及路由解析时如何识别已有页面路径。
# 配置路径:config.js -> projectPath
projectPath: {
apisFilePath: "src/apis", // API 文件保存目录(相对目标项目根目录)
httpFile: "@/apis/request.js", // 请求封装文件路径(供生成 API 文件引用)
routerFile: "src/router/index.js",// 主路由文件路径
routerMatchMark: "@/views/" // 路由中用于匹配页面路径的标记
}
注释说明:这部分最直接决定生成结果是否能落到正确目录。
4. 模板路径配置
不同类型页面分别对应不同模板文件与输出目录。
# 配置路径:config.js -> template
template: {
listPage: {
savePath: "src/views", // 列表页输出目录
suffix: "-list", // 文件名后缀
dirSuffix: "-page", // 目录名后缀
template: "page/list-page.art" // 使用的模板文件
},
infoPage: {
savePath: "src/views", // 详情页输出目录
suffix: "-info", // 文件名后缀
dirSuffix: "-page", // 目录名后缀
template: "page/info-page.art" // 使用的模板文件
},
formPage: {
savePath: "src/views", // 表单页输出目录
suffix: "-form", // 文件名后缀
dirSuffix: "-page", // 目录名后缀
template: "page/form-page.art" // 使用的模板文件
}
}
注释说明:如果你的项目目录结构、命名后缀和默认模板不同,就从这里开始改。
定义有哪些表单元素、默认校验方式、组件路径和数据源能力。
# 配置路径:config.js -> formItemOpts
formItemOpts: [
{
value: "input", // 组件类型标识,需与模板文件名对应
label: "单行文本框", // 在工作台显示的名称
valid: {
trigger: "blur" // 默认校验触发方式
}
},
{
value: "select", // 下拉组件
label: "下拉选择框", // 显示名称
valid: {
trigger: "change" // 下拉通常在 change 时校验
},
dataSource: {
dataType: "array", // 数据源类型
default: [{ value: null, label: "全部" }]
}
},
{
value: "cusDatePicker", // 自定义组件类型
label: "日期选择器(双)", // 显示名称
path: "@/components/cusDatePicker/index.vue", // 组件导入路径
valid: {
trigger: "change",
type: "date" // 默认校验数据类型
}
}
]
注释说明:这里决定“字段默认匹配成什么控件”,也是扩展自定义组件时最核心的入口之一。
6. 自动识别规则
根据字段名称或类型自动匹配日期组件、多选组件等常见表单元素。
# 配置路径:config.js -> formFieldDetection / formItemCig
formFieldDetection: {
findDate: true, // 自动识别日期相关字段
findArray: true // 自动识别数组/多选相关字段
},
formItemCig: {
dataTimeRangeRegExp: "^(start|end|begin)|(start|end|begin)$", // 时间范围字段识别规则
isStartRegExp: "^(start|begin)|(start|begin)$" // 起始字段识别规则
}
注释说明:如果字段自动匹配结果不符合项目习惯,可以从这里调整检测规则。
7. mock 数据规则
用于根据字段名称猜测 mock 数据类型,例如姓名、手机号、日期、城市等。
# 配置路径:config.js -> mockCig
mockCig: {
columnTypeMap: {
integer: /integer/, // 数值类型
name: /(title|name$)/i, // 名称字段
city: /(^city|city$)/i, // 城市字段
phone: /(^(phone|mobile)|(phone|mobile)$)/i, // 手机号字段
date: /(^date|date$)|birthday/i // 日期字段
}
}
注释说明:这部分只在需要生成 mock 文件时更关键;如果你不生成 mock,可以先不调整。