ssm，springboot代码生成器——添加vue.js支持，mac系统支持

时间 2019-11-25

标签 ssm springboot 代码成器添加 vue.js vue 支持 mac 系统栏目 Spring 繁體版

原文原文链接

距离上次更新已通过去一周时间，最近公司事比较多，这两天抽出空来又对代码生成器作了进一步的完善，本次更新主要添加了mac系统的支持，由于有很多朋友问有没有mac版本的。。同时添加了对vue.js的支持，vue如今也是前台比较火的框架之一，这一点仍是颇有必要的，同时修复了数据库链接失败会卡死的bug，让咱们来看一下更新的具体内容吧。javascript

mac系统支持

mac系统不像window能够运行exe程序，jar包打包成app又过于繁琐，因此在这里采用的是把mac版的jdk以及入口程序的jar包存放在同一目录，而后新建command文件，在文件中经过shell命令来执行jar包程序，目录以下： css

coreLib里放的就是jre以及相关的jar包文件了， run.command的内容以下所示：

bash $(cd `dirname $0`; pwd)/coreLib/run.sh
复制代码

内容也很容易理解，执行当前目录下的coreLib下的run.sh脚本看一下run.sh的内容，以下：html

#!/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

vue.js支持

vue.js是目前比较火爆的一个js框架，它的核心理念是mvvm，脱离了传统的dom操做，而是经过数据驱动的方式来进行页面的渲染，目前已经被愈来愈多的网站采用，相比传统的dom操做，vue的数据驱动更加高效，简洁，但这也不能否认dom的重要性，jquery即是典型的表明，相信不少人第一款接触的js框架即是jquery，他对html的dom操做确实强大，但也同时会带来代码冗余混乱的问题，两者各有利弊，具体状况须要具体分析。java

vue比较重要的一个概念即是它的生命周期，若是你想进行dom相关的操做，那么须要在它的mounted周期来执行相应的方法，具体你们能够自行参阅vue教程，经过实例的练习应该很快就能够上手。jquery

另外值得一提的是，若是网页加载慢或者数据查询过慢，页面上会出现vue的{{}}表达式，影响美观，若是想要避免此种现象的发生须要在被绑定的容器上加上v-cloak属性，以下：ajax

<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迟迟加载不出来，也不会显示花括号。shell

运行效果及代码解析

让咱们看一下本次更新的运行效果，在这里咱们配置一个单表模块，一个多表模块来生成对应的代码，首先在主界面配置相关信息，仍是以我本地的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部分代码以下：windows

<!-- 查询结果表格显示区域 -->
<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>&nbsp;<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>&nbsp;
					 <button type="button" class="btn btn-danger btn-sm" @click="delMsg(data.id,'/medicinemsg/delete')">删除</button>&nbsp;
				</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两个版本，我本身搭建了一个文件服务器，感兴趣的朋友能够点击下方连接自行下载

最新代码生成器下载连接

csdn下载连接

感谢您的观看！