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-->
複製代碼