低代码系列之代码生成器基本使用

2022-09-08 18:49:39 浏览数 (1)

此生成器是本人在闲暇时间打造一个后端管理系统自动化项目 主要特性如下

  • 自动生成 RESTful风格的api，实现基本的CURD
  • 自动生成管理界面，每一个模型有对应的管理视图
  • 自带权限系统，开箱即用
  • 支持图片上传
  • 支持excel导出
  • 扩展了用户端接口 jwt实现
  • 支持多语言如 JAVA、PHP、Node.js
  • 支持多种数据库如 MySQL、Mongodb
  • 灵活的表单项配置
  • 支持多种主题
  • 路由自动化，系统根据目录结构自动生成路由，并且存入数据库做权限认证使用

基本使用

以Node.js为开发语言为例介绍基本使用，后继会出其他语言的文章

创建项目

代码语言：javascript复制
generator app <项目名称>

按照命令提示进行如下操作

1.选择开发语言

2.选择语言框架

3.选择数据库类型

项目创建完毕后会出现如下界面，此时项目创建成功。

先不按照生成器提示的去做，我们看下生成器为我们生成的项目结构是怎样的

我们缩减一下

代码语言：javascript复制
cli1 // 项目根目录
    cli1-server // 后端服务模块
    cli1-permission // 中间层用于权限认证
    cli1-ui // 前端管理视图
    modelConf // 生成器模型配置 生成器根据这里面的文件生成服务和视图文件
    cli.config.js // 生成器配置文件

上图并没有出现cli1-ui和cli1-permission目录 cli1-ui没有出现的原因是项目第一次创建没有对应的模型文件，虽然生成器为你提供了一个example_mode.js模型配置文件，但此文件仅仅用于示例作用。

cli1-permission没有出现的原因是，因为本例选择的开发语言是Node.js，权限模块和服务模块被合并了。 如果你选择其他语言，cli-permission将被创建。

下图将帮助你更好的理解生成器的架构

接下来我们参照example_model.js添加一个模型，看看生成器是否能够正常运转

不过在此之前我们需要进入 cli1/cli1-server/config_static.js

配置服务端需要的信息 如 数据库，文件上传路径等等

下面列出常用配置说明

代码语言：javascript复制
 module.exports = {
  webPort: 3000, // Node端服务端口
  jwtSecret: 'generator_tzh$%Y#',
  serviceUrl: 'http://localhost:3000/', // 后台服务地址，选择Node.js之外的语言有用，如果选择语言为Node.js 那么服务端地址是 http://localhost: webPort
  localUrl:'http://localhost:3000', // 本地服务
  salt: '$$%^&hjj%%^515**', // 密码认证的“盐”
  redisPrename: { // redis相关建的配置，建议不要随意更改
    permission: 'GERNERATOR:PERMISSION', 
    propertymap: 'GERNERATOR:PROPERTYMAP',
  },
    // 数据库配置
  mysqlConfig: {
    host: 'localhost',
    user: 'root',
    password: 'root',
    database: 'cliTest2',
    port: 3306,
  },
    ...

完成服务端配置后，我们使用命令生成一个示例模型

代码语言：javascript复制
generator make:model -m <模型名称>

此时在cli1/modelConf下生成了goods_model.js模型配置文件，生成器需要使用这里面的模型配置文件生成相对应的代码

一般通过命令创建的模型配置文件有如下内容

代码语言：javascript复制
module.exports = {
    modelCn: '', // 模型的中文名称 用于视图的菜单展示等
    modelIcon: 'el-icon-eleme', // 模型图标 用于视图的菜单展示等
        // 字段配置
    fileds: {
            // 键表示字段名称
        test: {
            type: 'string',  // 字段类型
            comment: '测试字段', // 字段注释
            // 字段表单配置，用于视图表单呈现
            meta: {
                formType: 'input', 
                isInline: false, 
                inputType: 'text', 
                placeholder: '' 

            }
        },
    },
    extendForm: {}, // 扩展的表单配置
    formRules: {}, // 表单规则配置
    filters: {}, // 过滤器，此项决定视图中的模型如何被检索
        ...

更多关于生成器的配置说明请参照 【】本文只介绍基本使用

接下来我们随意配置下goods_model.js看哈效果

代码语言：javascript复制
module.exports = {
    modelCn: '商品', 
    modelIcon: 'el-icon-eleme',
    fileds: {
        goods_name: {
            type: 'string', 
            comment: '商品名称',
            meta: {
                formType: 'input', 
                isInline: false, 
                inputType: 'text', 
                placeholder: '请输入商品名称' 

            }
        },
        goods_cover: {
            type: 'string',
            comment: '商品封面',
            meta: {
                formType: 'image',// 图片组件
                uploadUrl: '' // 可选图片上传地址 ，默认使用系统的文件上传地址
            }
        },
        goods_detail: {
            type: 'text',
            comment: '商品详情',
            meta: {
                formType: 'richText',
                uploadUrl: '' // 富文本文件上传地址，默认使用系统的文件上传地址
            }
        }
    },
    filters: {
        goods_name: {
            label: '商品名称',
            type: 'text',
        },
    }
}

还记得项目创建成功后生成器给我们的提示不

他让我们进入 cli1-server 并且执行 node _init_，然后启动项目 我们来执行一下

代码语言：javascript复制
cd cli1-server
node _init_

注意：执行node _init_ 时请确保 cli1/cli1-server/config_static.js 至少配置了数据库信息，并且你已经完成了数据库的创建！

这里生成器最新代码已经改成了 node init

可以看到生成器为我们创建了权限认证需要的数据表

还记得我们刚才填写的goods_model.js不，我们需要使用命令 让生成器读取模型配置文件以生成curd和管理视图

生成curd

代码语言：javascript复制
generator make:curd -m <模型名称，默认全部>

生成器为我们创建了goods_controller控制器 截取部分代码

代码语言：javascript复制
const { Goods } = require('../business/index_business.js');
const RetJson = require('../proxy/retjson');
const { Op } = require('sequelize');
const { getDate } = require('../lib/common.js')
    
exports.store = {
    method: 'post',
    middlewares: [],
    routeDesc: '商品 创建',
    handler: async (ctx) => {
        const goods = await Goods.createGoods({
        goods_name: ctx.request.body.goods_name,
        goods_cover: ctx.request.body.goods_cover,
        goods_detail: ctx.request.body.goods_detail,
      })
      ctx.body = new RetJson(0, 'success', goods)
    }
}

生成管理视图

代码语言：javascript复制
generator make:view -m <模型名称，默认全部>

生成器为我们创建了视图模块

接下来我们分别进入服务模块cli1-server和cli-ui启动项目

代码语言：javascript复制
cd cli1-server
npm run env:dev

cd cli1-ui
npm run env:dev

浏览器打开http://localhost:7004

填入系统初始账号以登录

账号：119

密码：162534

这个账号也是系统最高级别的账号。

初始化权限配置

打开系统后我们发现，左侧就只有两个菜单用户中心和系统设置，并且用户中心里面居然没有添加用户/添加/设置角色的入口？ 要知道119这个账号现在是超级管理员

这是因为没有进行初始化权限配置的原因，跟着我的步骤来，目前生成器就这里权限这块需要你动手多一点

1.进入系统设置->路由管理->点击“刷新UC系统路由”

这个时候生成器就将我们的系统的路由（服务端）保存在数据库里面了，以便后继用于配合权限模块使用。

需要注意的是 “刷新UC系统路由”按钮一般只在系统初始化时使用。

2.进入系统设置->权限管理->看图操作

依次将路由添加到对应的权限下

代码语言：javascript复制
用户中心
   用户管理
     角色管理
系统设置
   路由管理
     权限管理

由于目前还在1.*阶段，这一部分现在还是手动操作，后继将考虑自动化这部分操作

权限添加完毕后我们在返回用户管理/角色管理界面，并且刷新页面，你会发现多了几个按钮，你可以随意添加/编辑用户和角色了

等等，刚才我们配置的goods_model.js似乎没看到结果呈现，虽然cli1-server和cli1-ui都有对应的代码 但是管理系统没有呈现 3秒钟的时间思考这是为啥 321

因为我们没有配置权限，要想管理系统左边出现菜单项，我们必须去系统管理->权限管理 添加菜单项。

添加完毕后刷新页面左侧菜单就出现了“商品管理”项

点击“商品管理”我们可以随意添加修改商品了

到此生成器的基本使用就结束了。

javascript 数据库 sql 访问管理 node.js

0 人点赞