Skip to content

Latest commit

 

History

History
317 lines (218 loc) · 7.81 KB

README.md

File metadata and controls

317 lines (218 loc) · 7.81 KB

code-generator-VAR

介绍

code-generator-VAR 是一款纯前端代码生成器,不依赖任何后端程序,使用简单,支持 windows、mac、linux 三大平台;生成器生成的代码,默认是需要在 vue-admin-roc(vue3.x) 项目模板中使用(也可以不使用该模版,编写自定义ejs模板)。
vue-admin-roc(vue3.x) 是一个 vite + vue3 + pinia 的纯前端后台管理系统模板,可通过 roc-cli 脚手架工具创建。
推荐使用 vue-admin-roc(vue3.x) 项目模板,可与 code-generator-VAR 直接结合使用

演示视频

点击查看

使用方式

1.安装生成器

下载地址:https://github.com/rocyuan666/code-generator-var/releases
windows版本:code-generator-VAR-win32-x64-x.x.x.msicode-generator-VAR-win32-x64-x.x.x.zip
linux版本:code-generator-var_x.x.x_amd64.debcode-generator-VAR-linux-x64-x.x.x.zip
mac版本:code-generator-VAR-darwin-arm64-x.x.x.zip

2.使用生成器生成

生成器使用:

  • 点击连接输入数据库信息连接数据库
  • 点击获取表数据将会拉取所连接的数据库表信息
  • 点击每一行后的配置配置生成代码的数据配置
  • 生成某一张表:点击每一行后面的生成代码将会生成该行(表)的前端代码
  • 批量生成:选中每一行前面的选择框(顶部选择框可以全选),点顶部的生成代码将会生成所选行(表)的前端代码

生成器配置:可以配置生成代码的输出目录、项目名称、及四种生成模版(提供自定义模版使用,需要一定的ejs知识)
生成代码的目录为:配置的输出目录/配置的项目名称/vue/api配置的输出目录/配置的项目名称/vue/views配置的输出目录/配置的项目名称/vue/router

3.创建 vue-admin-roc(vue3.x) 项目模板

默认生成的代码是需要创建vue-admin-roc(vue3.x)项目模版使用。

命令行中使用 npx roc-cli create 项目名 选择 vue-admin-roc(vue3.x) 创建项目模板。

示例:

npx roc-cli create project-name

Please select the project type to create:
  vue2.x
  vue3.x
  uniapp(uview1.x)
  uniapp(uview2.x)
> vue-admin-roc(vue3.x)
  electron(vue3.x)
  koa

4.生成的代码使用

确保以下两步已完成:

  • 生成代码完成
  • 创建 vue-admin-roc(vue3.x) 模版完成

将生成的代码(配置的输出目录/配置的项目名称/vue/*)整合进项目模版的 src/* 下,进行常规开发即可。

自定义ejs模板

如项目没有使用 vue-admin-roc(vue3.x) 模版,生成出来的代码是使用不了的,需要根据自己项目结构编写自定义的生成模版,生成器内部使用 ejs 编写代码模板,只支持 ejs 模板。
生成器内部暴露给 ejs 模板的数据,开发者可根据以下数据进行自定义模版的编写,写好模版后,可在生成器软件的生成器配置中选择自定义的ejs模版进行代码生成:

hasAdd: true,
hasEdit: true,
hasDel: true,
hasExport: true,
addPermisstion: 'TableName.add',
editPermisstion: 'TableName.edit',
delPermisstion: 'TableName.del',
exportPermisstion: 'TableName.export',
addApi: '/api/tableName/add',
editApi: '/api/tableName/edit',
delApi: '/api/tableName/del',
exportApi: '/api/tableName/export',
listPermisstion: 'TableName.list'
listApi: '/api/tableName/list',
detailApi: '/api/tableName/detail',
subTable: '',
subTableFieldConfig: {},
_sub: {},
name: 'target table name',
comment: 'table comment',
fieldList: [
  {
    name: 'field name',
    key: 'PRI',
    label: 'field comment',
    dataType: 'mysql field type'
    addOrEdit: true,
    list: true,
    query: '',
    required: false,
    display: 'input',
    unit: '',
    dict: '',
  },
  ...
],
fn: {
  snakeFormatHump: (name: String, isBig: Boolean = false) => String
}
selectTableName: [],
all: {}

数据说明

hasAdd

type: Boolean
是否有添加功能

hasEdit

type: Boolean
是否有编辑功能

hasDel

type: Boolean
是否有删除功能

hasExport

type: Boolean
是否有导出功能

addPermisstion

type: String
添加权限标识

editPermisstion

type: String
编辑权限标识

delPermisstion

type: String
删除权限标识

exportPermisstion

type: String
导出权限标识

addApi

type: String
添加api地址

editApi

type: String
编辑api地址

delApi

type: String
删除api地址

exportApi

type: String
导出api地址

listPermisstion

type: String
列表权限标识

listApi

type: String
列表api地址

detailApi

type: String
详情api地址

subTable

type: String
子表名称,可以不选择 不选为空

subTableFieldConfig

type: TableFieldConfig
如果 subTable 有子表 则 subTableFieldConfig 中有子表配置的所有选项,选项与主表相同(注意:已经是子表的表,不会处理子表的子表!禁止套娃,子表的子表...)

_sub

subTableFieldConfig 的别名,简短的名字方便模板使用

name

type: String
表名

comment

type: String
表注释

fieldList

type: Array<FieldConfigItem>
字段配置数据

FieldConfigItem.name

type: string
字段名

FieldConfigItem.key

type: string
字段是主键时key为:PRI

FieldConfigItem.label

type: string
页面中显示的字段label

FieldConfigItem.dataType

type: string
字段mysql类型

FieldConfigItem.addOrEdit

type: Boolean
是否可以添加编辑

FieldConfigItem.list

type: Boolean
是否在列表中显示

FieldConfigItem.query

type: String
查询类型,可以不选择,不选为空
一般前端在代码上是不区分查询类型,内置 ejs 模版中与前端代码有关系的就是一个单值和范围值, EQ LIKE 随便选即可
生成器中预留出来是为了更好的自定义模版

类型
EQ = 等值
LIKE LIKE 模糊
BETWEEN BETWEEN 范围查询(默认模板中只在 FieldConfigItem.display 为: datedatetime 生效)

FieldConfigItem.required

type: Boolean
是否必填

FieldConfigItem.display

type: String
显示的表单类型

意思
input 文本框
inputNumber 数字框
textarea 文本域
select 下拉框
radio 单选框
checkbox 复选框
date 日期
datetime 日期时间
imageUpload 图片上传
fileUpload 文件上传
editor 富文本

FieldConfigItem.unit

type: String
单位,无单位则为空(默认模板中只在 FieldConfigItem.display 为: inputinputNumber 生效)

FieldConfigItem.dict

type: String
字典类型(标识)

fn

type: Object<Function>
方法

fn.snakeFormatHump

type: Function
蛇形命名转换驼峰命名
fn.functioName("user_name") -> userName
fn.functioName("user_name", true) -> UserName

selectTableName

type: Array<String>
选中的表名列表

all

type: Object<TableFieldConfig>
所有表的配置对象( TableFieldConfig 中有以上全部属性)