创建EasyCodeMybatisCodeHelperPro模板文件用于将数据库表生成前端json文件
现在的前端,越来越像后端。当我听到我同事说这些名为*.data.ts的json格式文件,是通过工具自动导出来时,我感到震惊,50岁的心灵遭到暴击,内心一阵被时代抛弃的恐慌。前端的话,我复制了其中的实体类模板,改名为:vue.json.vm,然后稍为改改里面的内容,即可得到前端模板。在intellij idea中,通过插件EasyCodeMybatisCodeHelperPro,从现有的模板文件中选
在intellij idea中,通过插件EasyCodeMybatisCodeHelperPro,从现有的模板文件中选择一个复制粘贴,然后稍为修改,即可得到一个合适的模板文件。
现在的前端,越来越像后端。TypeScript替代了JavaScript,引入了强类型(?),还有抽象类、接口、proteced属性之类的东东。然后还有根据数据库表导出的实体类文件,问你死未。当我听到我同事说这些名为*.data.ts的json格式文件,是通过工具自动导出来时,我感到震惊,50岁的心灵遭到暴击,内心一阵被时代抛弃的恐慌。我没想到还可以这么搞。
经过请教和摸索,我也终于可以导出前端实体类了。总结如下:
1、概述
目前好像没有专门根据数据库,用于导出前端类的工具。但可以通过后端的工具顺便导一下。我用的是EasyCodeMybatisCodeHelperPro。我请教同事是怎么导的,他说是EasyCode,结果我装了一个EasyCode后,Intellij Idea居然打不开了。最后费了九牛二虎之力才恢复正常。事实证明,用EasyCodeMybatisCodeHelperPro也完全可以,无非是通过模板文件导而已。
2、创建模板文件
EasyCodeMybatisCodeHelperPro提供了几个模板文件,用于在后端自动生成代码。前端的话,我复制了其中的实体类模板,改名为:vue.json.vm,然后稍为改改里面的内容,即可得到前端模板。具体为:
1)打开intellij idea
2)File - Setting - Other Settings - EasyCodeMybatisCodeHelperPro - Template
3、编写前端模板文件
模板里的普通正文,会输出到导出文件里。如果要用到系统变量,就是#,$
这类特殊符号,还有一些循环语句之类。其实系统很贴心地在下半部分提供了注释,稍为看一下就能理解。试举2例:
1)使用系统变量
$!{tableInfo.name}
2)循环语句:
以”#“开路。注意2个#之间,使用系统变量直接用$符号即可,不要像1)那样复杂。
#foreach($pk in $tableInfo.pkColumn)
primaryKey: '$pk.name',
#end
模板文件代码示例(vue.json.vm):
##引入宏定义,不知道有什么用
$!{define.vm}
##使用宏定义设置回调(保存位置与文件后缀),生成子路径,以及文件后缀名
#save("/data", ".data.ts")
##使用全局变量实现默认包导入,下面基本都是输出文件中的内容,不必深究
import { reactive } from 'vue'
import { required } from '@/utils/formRules'
import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
// 表单校验
export const rules = reactive({
proId: [required]
})
// CrudSchema
//isTable: 是否在列表显示
//isSearch: 是否在查询显示
const crudSchemas = reactive<VxeCrudSchema>({
## 输出主键
#foreach($pk in $tableInfo.pkColumn)
primaryKey: '$pk.name',
#end
primaryType: 'seq',
action: true,
columns: [
## 循环输出字段
#foreach($column in $tableInfo.fullColumn)
{
title: '$column.comment',
field: '$column.name',
isTable: true,
isSearch: true
},
#end
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
导出的文件:
打开其中一个(DwtProjectProof.data.ts)
import { reactive } from 'vue'
import { required } from '@/utils/formRules'
import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
// 表单校验
export const rules = reactive({
proId: [required]
})
// CrudSchema
//isTable: 是否在列表显示
//isSearch: 是否在查询显示
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'seq',
action: true,
columns: [
{
title: '版本ID',
field: 'id',
isTable: true,
isSearch: true
},
{
title: '论证报告编号',
field: 'examineReportNo',
isTable: true,
isSearch: true
},
{
title: '论证报告评审专家',
field: 'examineExpert',
isTable: true,
isSearch: true
},
{
title: '论证报告评审时间',
field: 'examineAssessDate',
isTable: true,
isSearch: true
},
{
title: '论证评审组织单位',
field: 'examineLineupUnit',
isTable: true,
isSearch: true
},
{
title: '论证报告专家评审意见',
field: 'examineExpertOptions',
isTable: true,
isSearch: true
},
{
title: '审核部门经办人',
field: 'examineHandler',
isTable: true,
isSearch: true
},
{
title: '审核会议时间',
field: 'examineMeetingDate',
isTable: true,
isSearch: true
},
{
title: '审核意见',
field: 'examineOptions',
isTable: true,
isSearch: true
},
{
title: '关联ID',
field: 'mapId',
isTable: true,
isSearch: true
},
{
title: '创建人ID',
field: 'creatorid',
isTable: true,
isSearch: true
},
{
title: '创建时间',
field: 'createtime',
isTable: true,
isSearch: true
},
{
title: '修改人ID',
field: 'modifyid',
isTable: true,
isSearch: true
},
{
title: '修改时间',
field: 'modifytime',
isTable: true,
isSearch: true
},
{
title: '所属项目ID',
field: 'proId',
isTable: true,
isSearch: true
},
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)