README

VSCode代码生成器

简介 @intro

EasyCode ≈ Mini * (在线模板下载 + 数据库代码生成 + swagger转ts接口 + 本地表单设计器)

功能

• 下载项目初始化模板与物料区块(GitClone)

// 在VSCode设置中配置 自定义项目模板地址
"easycode.customRepoRemoteUrl" --> "https://raw.githubusercontent.com/service-java/tpl-easycode-remote-url/main/repo.json"

// easycode.config.json本地配置
"customRepoList": [
    {
        "version": "latest",
        "label": "tpl-jdk8-springboot2-erupt-beetlsql3-2022(后端)",
        "url": "git@github.com:service-java/tpl-jdk8-springboot2-erupt-beetlsql3-2022.git",
        "repoType": "backend"
    }
],

• 将数据库的单表结构映射至模板(Nunjucks)

{{ className }}
{{ tableName }}
{{ tableNamePrefix }}
{{ properties }}

{{ primaryKey }}
{{ autoIncrementKey }} 
{{ primarykeyArray }}
{{ primaryKeyPropertyArray }}

{{ logicDelColName }}
{{ hasLogicDel }}

{{ importArray }}
{{ customAttr }}

interface EntityProperty {
    columnName: string;
    propertyName: string;
    propertyType?: string;
    comment: string;

    dataType: string;
    isPrimaryKey: boolean = false;
    isNullable: boolean;
    isAutoIncrement: boolean;

    methodName: string;
    importTypeName?: string;
    isInBaseModel: boolean = false;
}

===
// 配置easycode.config.json
"templateList": [
    {
        "templateName": "backend/entity.njk",
        "outFileType": ".java",
        "outPath": "/backend/src/main/java/com/example/demo/entity/",
        "enabled": true
    }
]

===
// 模板过滤器
{{ str | lowerCaseFristOne }}
{{ str | upperCaseFristOne }}
{{ str | extractField }}

• 从Swagger接口生成前端API.ts(Axios)

// 配置easycode.config.json
"swaggerUrls": [
    "http://localhost:8080/v2/api-docs"
],
"swaggerSavePath": "./frontend/src/views/demo/api",
"apiTsRequester": {
    "enabled": false,
    "hasUrlResolveMethod": false,
    "apiRequesterName": "request",
    "apiImportSnippets": "import request from '@/utils/request';\n"
},

===
// 调用命令面板生成API.ts
Ctrl + F10

// apiTsRequester.enabled = true的情况
import request from '@/utils/request';
const apiCanvas = (paramsOrData?: RequestConfig)
    : Promise<any /* ResponseBody */> => {
  return request({
        url: urlResolve('/api/canvas', paramsOrData),
        method: 'delete',
        ...paramsOrData,
  });
}

// apiTsRequester.enabled = false的情况
function urlResolve(
  url: string,
  paramsOrData: RequestConfig | undefined
): string {

  if (!paramsOrData || !url.includes("{")) return url;
  
  const paramsObj : {[x: string]: any} = Object.assign({}, paramsOrData?.params, paramsOrData?.data)
  if (!paramsObj) return url;

  const urlArray = url.split('/').map((item) => {
    if (item.includes("{")) {
      const paramName = item.replace(/[{}s]/g, "");
      return paramsObj[paramName];
    }
    return item;
  });

  return urlArray.join("/");
}

const apiCanvasGetCanvas = (
    requester: any, 
    paramsOrData?: RequestConfig
): Promise<any /* ResponseBody */> => {
  return requester({
        url: urlResolve('/api/canvas/getCanvas/{}', paramsOrData),
        method: 'get',
        ...paramsOrData,
  });
}
export default apiCanvasGetCanvas;

// 具体页面调用API.ts
import axios from 'axios';
apiCanvasGetCanvas(axios, {
    params: {
        pageSize: 10,
        current: 1
    },
    data: {
        longJson: "XXX",
    }
});

• 动态表单预览与编辑保存(JSON Schema)

// 常用的动态表单
form-create(Vue) -- 适配多个UI框架 @eg ElementPlus, ArcoDesign
xrender(React) -- 支持表格+表单+图表, 有官方VSCode插件

===
// 配置easycode.config.json
"formGeneratorUrl": "https://ui-javascript.github.io/form-create-designer/"

// 选中JSON文件右键

// WebView得到当前编辑JSON文件的内容
window.addEventListener('message', init, false)
function init(event) {
    if (event.data.cmd === 'mountApp') {
        window.$JSON = event.data.data // JSON内容
        window.$JSONPATH = event.data.jsonPath // JSON路径
        new Vue({
            render: h => h(App),
        }).$mount('#app'); 
    }
}

// 根据数组和对象类型简单分类处理
mounted() {
    if (Array.isArray(window.$JSON)) { // 先判断是否为数组类型
        this.jsonType = "Array"
        this.$refs.designer.setRule(window.$JSON)
    } else if (is.Object(window.$JSON)) { // 判断是否为对象类型
        this.jsonType = "Object"
        const rule = window.$JSON.rule 
        const option = window.$JSON.option
        rule && this.$refs.designer.setRule(rule)
        option && this.$refs.designer.setOption(option)
    }
}

// 请求VSCode覆盖当前JSON文件
window.parent.postMessage({
    cmd: 'writeFile',
    data: {
        code: val,    
        jsonPath: window.$JSONPATH
    }
}, '*')

// VSCode覆盖当前JSON文件
writeFile: function (message) {
    let { code, jsonPath } = message.data
    fs.writeFileSync(jsonPath, JSON.stringify(code, null, 4))
    vscode.window.showInformationMessage(`[EasyCode]文件 ${jsonPath} 更新成功`)
},

参考 @ref

• gyctools
  • https://github.com/zzh-gavin/vscode-extension-gyctools