molicode生成vue增删改查功能

背景描述

当前生成的页面主要应用于VUE前端UI框架 iview: ;

本工具当前模板提供了基本的增删改查功能适配；

本工具生成的模板需要一些基本的脚手架，最好参考我fork的iview-admin的开发分支:

;

里面有一些资源是必须的，或者建议你调整模板生成你公司的代码工具类型。

自动生成代码的基本要求

a. 下载molicode代码生成工具并解压到本地文件夹。

下载地址：

如果您是Java程序员，你应该很easy的启动起来，如果您非Java程序员，请下载最新版本的jre并安装。

本软件运行需要jdk8及以上版本。

b. 通过数据库表生成tableModel 表模型

通过配置数据库相关链接信息后，自动生成tableModel xml文件。

打开tableModel xml文件，进行微调，如新增页面需要哪些字段，修改页面需要哪些字段，列表页面需要哪些字段，查询条件需要哪些字段。这些都可以进行微调，以便生成的业务代码更加的个性化，定制化。

生成了tableModel后，即可利用其来生成代码了。

c. 获取代码模板

如果您是一个模板使用者，这是比较简单的，您可以和模板开发人员联系，让其告知您git仓库地址，然后下载即可。也可以让他直接发压缩包如zip, tar, rar等文件，然后解压到本地即可。

如果您下载最新的molicode工具，您可以直接使用内置的模板。

d. 项目配置

项目配置是为了在不同项目之间能够快速切换，项目配置记录了本项目以下相关信息：

1. 数据库连接信息；（如果不需要数据库相关功能，可以不配）；

2. 工程目录设置；（用于设置工作目录，如tableModel生成目录， 代码输出目录，模板类型和存储路径等）； 特别说明：模板根目录请设置到autoCode.xml的上级目录即可；

3. 业务代码设置；

设置代码相关的配置信息，后期期望是提供一个入口，可以提供更多的用户可配置项目；

e. 代码生成

好了，总算来到最后一步，惊不惊喜意不意外。经过以上的设置后，即可直接生成业务代码了，让代码飞一会儿。

1. 选择适配的数据模型：tableModel(其它的请参考其它文章)；
2. 输入源类型； 一般选择文件；
3. 数据源文件路径：之前生成并配置后的tableModel文件路径；用于作为数据源；
4. 其它配置略；
5. 模板列表，选择需要生成的代码模板；
6. 点击【生成代码】按钮即可。

以上几个步骤就是生成代码需要的所有步骤，请务必按要求进行操作。

更详细的使用说明，可以参考：

吐槽

配置这么多，是不是太麻烦了？？

从某种意义上来讲，配置主要集中在第一次使用时，等您配置了第一次之后，其实您只需要每次使用：b,e 步骤即可自动生成业务代码了。 万事开头难，后面的好简单！

实际操作

**目标： ** 使用一个表生成基本的增删改查功能。

step 1: 配置项目

如果是生成iviewui的增删改查功能，只需要点选vue界面开发即可进行切换；

配置数据库信息，目前只支持MySQL（当前工具内置的jdbc版本较老，对mysql 8 当前略有问题），其实是很容易支持其它数据库的，但是当前没有时间做相应的开发，期望您join并实现您需要的数据库类型。

配置输出目录： 请修改代码输出相关目录；

如下图所示，模板在molicode安装目录的下的 template_repos/autocode-template/autocode-template-vue文件夹下面。

配置业务代码相关信息，以下为Java相关信息，页面生成可按您的需求配置；

step 4: 生成tableModel

tableModel 输出结果：

     
      
         
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
        
       
         
      
       id
        
       
         
      
       created
          
      
       modified
          
      
       id,type,project_key,scope,config_key,config_value,ext1,ext2,ext3,creator,operator,concurrent_version,data_version,status,modified
          
      
       id,type,project_key,scope,config_key,config_value,ext1,ext2,ext3,creator,operator,concurrent_version,data_version,status
          
      
       id,type,project_key,scope,config_key,config_value,ext1,ext2,ext3,creator,operator,concurrent_version,data_version,status
          
      
       id,type,project_key,scope,config_key,config_value,ext1,ext2,ext3,creator,operator,concurrent_version,data_version,status,created,modified
          
      
       id,type,status
          
      
       id,type,project_key,scope,config_key,config_value,ext1,ext2,ext3,creator,operator,concurrent_version,data_version,status,created,modified
        
       
         
            
       本地      
       仓库    
          
            
       有效      
       无效    
          
            
       文本      
       json      
       xml      
       properties      
       开关    
        
     
    

step 5: 生成代码

选择正确的tableModel文件，然后执行代码生成。即：【数据源文件路径】 需要选择您要生成的表的tableModel xml配置文件。如果模板没有显示，请点击按钮【刷新模板列表】。

happy ending

查看生成的项目和代码：

日志：

2019-06-03 00:08:03,410 [http-nio-8098-exec-2] INFO   (frontConsole:-1) - [add页面]模板执行成功，生成文件在：/Users/xxx/myApp/molicode_binary/moliCode_mac_jre8_beta-20190531/output_tmp/code/ui-starter/src/views/auth/acProject/add.vue2019-06-03 00:08:03,412 [http-nio-8098-exec-2] INFO   (frontConsole:-1) - [edit页面]模板执行成功，生成文件在：/Users/xxx/myApp/molicode_binary/moliCode_mac_jre8_beta-20190531/output_tmp/code/ui-starter/src/views/auth/acProject/edit.vue2019-06-03 00:08:03,413 [http-nio-8098-exec-2] INFO   (frontConsole:-1) - [list页面]模板执行成功，生成文件在：/Users/xxx/myApp/molicode_binary/moliCode_mac_jre8_beta-20190531/output_tmp/code/ui-starter/src/views/auth/acProject/list.vue2019-06-03 00:08:03,414 [http-nio-8098-exec-2] INFO   (frontConsole:-1) - [operate页面]模板执行成功，生成文件在：/Users/xxx/myApp/molicode_binary/moliCode_mac_jre8_beta-20190531/output_tmp/code/ui-starter/src/views/auth/acProject/operate.vue2019-06-03 00:08:03,416 [http-nio-8098-exec-2] INFO   (frontConsole:-1) - [表结构模型]模板执行成功，生成文件在：/Users/xxx/myApp/molicode_binary/moliCode_mac_jre8_beta-20190531/output_tmp/code/ui-starter/src/views/auth/acProject/tableDefine.js2019-06-03 00:08:03,417 [http-nio-8098-exec-2] INFO   (frontConsole:-1) - [一些配置信息，请复制到相关常量类使用]模板执行成功，生成文件在：/Users/xxx/myApp/molicode_binary/moliCode_mac_jre8_beta-20190531/output_tmp/code/ui-starter/src/views/auth/acProject/config.js

生成代码说明：

tableDefine.vue 表结构描述 list.vue 分页查询入口（整个功能的入口） add.vue 新增页面 edit.vue 修改页面 operate.vue 列表后的操作选项 config.js 一些可以复制使用的配置信息；

生成的代码示例：

请查看：

生成vue相关的界面资源，但是需要一些脚手架才能正常使用。

相关脚手架可以从以下地址分支获取：

主要有: src/constants 下的常量工具如： constants.js, dicts.js, urls.js

src/lib目录下的： renderUtil.js 工具；

src/request/ 目录下的： axiosInstance.js, requestUtil.js

/src/view/components/common 下的字典相关组件，需要配合：/src/store/module/dict.js使用；

UI: 使用的是基于 Vue的 iview UI， 使用起来比较定制化，可能需要您去适用，其它UI框架需要适配建议您开发好后联系我，可以分享给大家使用。 )