作者简介
一个很懒很懒的程序员
如何编写自己的代码生成器
我平常开发都会用到代码生成器,本文将介绍如何制作属于自己业务的代码生成工具
代码生成器的作用
一个新的需求开发涉及到的数据库表有可能有很多张,每个都需要去写增删改查后台管理页面有很多重复的工作并且浪费时间。
具体的作用大家在工作中也都使用过类似的代码生成工具就不在去详细的介绍了,主要有以下几个优点
- 代码风格统一,易维护
- 提高开发效率
- 降低bug率从而降低测试成本
- 无需浪费过多的精力在重复的工作上
代码生成器的原理
代码生成器原理其实非常简单,就是使用我们平常写的代码抽取出来一套模板,使用模板绑定数据生成我们需要的代码。
接下来一步步去实现一个我们经常用到前端增删改查的生成器
大家想下,没有页面代码生成工具我们是怎么做的?
- 首先是复制一个以前开发过的列表、新增页面将它复制过来
- 修改列表页面的标题、展示列、查询域
- 修改新增页面的表单信息,添加自己的字段
- 修改列表以及表单用到的增删改查接口
- 测试是否可用
有了工具一般我们是怎么做的?
- 运行工具
- 简单修改
如何制作生成工具
- 我们可以写个标准的页面来做我们的模板
- 将我们平常复制修改的地方修改为占位符
- 我们可以通过代码将数据(可以通过数据库、自定义等方式去获取)绑定到模板上生成一个新的页面
程序设计
涉及到几大块
- 制作模板
- 获取模板绑定的数据源
- 进行绑定
- 生成文件
代码实现
制作模板
原页面展示效果如下
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
<script src="https://www.layuicdn.com/layui/layui.js"></script>
</head>
<body>
<blockquote class="layui-elem-quote layui-text">
代码生成展示
</blockquote>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>测试</legend>
</fieldset>
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-inline">
<input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">日期</label>
<div class="layui-input-inline">
<input type="text" name="date" id="date1" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单行选择框</label>
<div class="layui-input-inline">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1" selected="">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>