距离上次更新已经过去一周时间，最近公司事比较多，这两天抽出空来又对代码生成器做了进一步的完善，本次更新主要添加了mac系统的支持，因为有不少朋友问有没有mac版本的。。同时添加了对vue.js的支持，vue现在也是前台比较火的框架之一，这一点还是很有必要的，同时修复了数据库连接失败会卡死的bug，让我们来看一下更新的具体内容吧。
mac系统支持
mac系统不像window可以运行exe程序，jar包打包成app又过于繁琐，所以在这里采用的是把mac版的jdk以及入口程序的jar包存放在同一目录，然后新建command文件，在文件中通过shell命令来执行jar包程序，目录如下：
coreLib里放的就是jre以及相关的jar包文件了，run.command的内容如下所示：
bash $(cd `dirname $0`; pwd)/coreLib/run.sh
内容也很容易理解，执行当前目录下的coreLib下的run.sh脚本
看一下run.sh的内容，如下：
#!/bin/bash
$(cd `dirname $0`; pwd)/bin/java -jar $(cd `dirname $0`; pwd)/lib/runCode.jar
这是真正需要执行的jar包，通过java -jar命令就可以去执行runCode.jar，然后代码生成器就可以运行起来了，因为java本身是跨平台的语言，所以代码跟windows基本没什么不同，唯一有区别的就是路径了，这里我把mac生成代码的路径定死在了桌面上，因为别的路径基本都会报权限不够的错误，mac上的效果如下，跟window基本没有区别：
vue.js支持
vue.js是目前比较火爆的一个js框架，它的核心理念是mvvm，脱离了传统的dom操作，而是通过数据驱动的方式来进行页面的渲染，目前已经被越来越多的网站采用，相比传统的dom操作，vue的数据驱动更加高效，简洁，但这也不可否认dom的重要性，jquery便是典型的代表，相信很多人第一款接触的js框架便是jquery，他对html的dom操作确实强大，但也同时会带来代码冗余混乱的问题，二者各有利弊，具体情况需要具体分析。
vue比较重要的一个概念便是它的生命周期，如果你想进行dom相关的操作，那么需要在它的mounted周期来执行相应的方法，具体大家可以自行参阅vue教程，通过实例的练习应该很快就可以上手。
另外值得一提的是，如果网页加载慢或者数据查询过慢，页面上会出现vue的{{}}表达式，影响美观，如果想要避免此种现象的发生需要在被绑定的容器上加上v-cloak属性，如下：
<style>
[v-cloak] {
display: none;
}
</style>
<html>
<body>
<div class="app" v-cloak>
{{msg}}
</div>
</body>
</html>
<script>
var vm = new Vue({
el : '#app',
data : {
msg : 'msg'
},
});
</script>
这样如果msg迟迟加载不出来，也不会显示花括号。
运行效果及代码解析
让我们看一下本次更新的运行效果，在这里我们配置一个单表模块，一个多表模块来生成对应的代码，首先在主界面配置相关信息，还是以我本地的medicine数据库为例，如下：
然后简单的对medicinemsg表做一下配置：
确定后关闭窗口然后去高级配置中配置一个多表查询的模块：
配置完毕回到主界面生成代码：
在这里我们看一下生成的前台vue部分的代码，这里以表格显示的vue为例：
var tableVue = new Vue({
el : '#newsContent',
data : {
result : []
},
//created:
mounted : function() {
$crud.getDataByCurrentPage();
},
methods : {
upMsg : function(id, path) {
$z.ajaxStrAndJson({
url : basePath + path,
data : {
id : id
},
success : function(data) {
upVue.id = data[0]["id"];
upVue.name = data[0]["name"];
upVue.price = data[0]["price"];
$('#updateModal').modal('show');
}
});
},
delMsg : function(id, path) {
if (confirm("确定删除吗？")) {
$z.ajaxStrAndJson({
url : basePath + path,
data : {
id : id
},
success : function(data) {
$crud.getDataByCurrentPage();
}
});
}
}
}
});
var upVue = new Vue({
el : "#updateModal",
data : {
id : '',
name : '',
price : ''
},
methods : {
confirmUp : function() {
$z.ajaxStrAndJson({
url : basePath + "/" + controllerPrefix + "/update",
data : {
id : this.id,
name : this.name,
price : this.price
},
success : function(data) {
alert("更新成功！");
$('#updateModal').modal('hide');
$crud.getDataByCurrentPage();
}
});
}
}
});
其中tableVue在mounted生命周期执行了ajax请求，$crud.getDataByCurrentPage方法会把获取的数据赋值给tableVue的result，然后在对应绑定的table中，使用v-for属性循环遍历result，来实现元素的输出，table部分代码如下：
<!-- 查询结果表格显示区域 -->
<div id="newsContent" class="table-responsive" style="overflow: scroll;" v-cloak>
<table class="table text-nowrap">
<tr>
<th>操作</th>
<th>name</th>
<th>price<a href='#' onclick='$crud.setAscColumn(this,"price")'>↑</a> <a href='#' onclick='$crud.setDescColumn(this,"price")'>↓</a></th>
</tr>
<tbody id="dataTable">
<tr v-for="data in result">
<td>
<button type="button" class="btn btn-info btn-sm" @click="upMsg(data.id,'/medicinemsg/select')">更新</button>
<button type="button" class="btn btn-danger btn-sm" @click="delMsg(data.id,'/medicinemsg/delete')">删除</button>
</td>
<td>{{data.name}}</td>
<td>{{data.price}}</td>
</tr>
</tbody>
</table>
<div id="pageID" class="page_div"></div>
</div>
<!-- 查询结果表格显示区域 end-->
启动项目，可以正常运行，没有问题，这里有数据空白项是因为left join的缘故。
至此，vue的整合就到此结束了。
现在代码生成器分为了mac和windows两个版本，我自己搭建了一个文件服务器，感兴趣的朋友可以点击下方链接自行下载
链接：https://pan.baidu.com/s/1L5gP5sH3LFKA8ZPurPmGhQ
提取码：wxpp
感谢您的观看！
网友评论