grails框架入門小結（二）—前端頁面

知識淺薄，不喜勿噴。

使用grails開發使用到的前端知識。

環境安裝：node.js，下載安裝，在控制檯檢測node -v 結果爲：v4.4.4。其自動集成了npm，所以不用我們去安裝。但是我們需要用npm來安裝cnpm，gulp等組件。在控制檯檢測npm -v結果爲：2.15.1，檢測cnpm -v 爲4.42。檢測gulp -v結果爲：CLI version 3.9.1   Local version 3.9.1。以上就是環境安裝。

另外使用WebStorm，進行頁面開發。

在WebStorm的terminal中，安裝cnpm，gulp等組件，以及http-server。

在之前用IDEA開發後臺代碼時，我返回到前臺的是JSON數據。下面就在前端接收數據填充到頁面並進行渲染吧。

1.在webstorm中新建文件夾，此處採用已經封裝好的來進行開發。

這是一個目錄結構，components中是使用到的組件，例如AdminLTE等。css文件夾存放的是經過gulp（sass操作，或者default操作）我們寫好的sass文件之後css文件，即樣式。hbs文件夾就是我們在處理數據和表現層的一個模板引擎，對，我知道現在有很多諸如Angular.js等的框架，我還在用這麼low的模板引擎...，學起來相當的簡單，裏面存放時.hbs文件，是我們得數據模板，就是我們要顯示的樣子的一個模板，就把數據放進去就可以了。js文件夾就是我們寫JQuery，Ajax，以及引入AdminLTE，以及Handlebars.js模板的地方，當然了這些都寫在.js文件中。

2.首先我們先寫handlebars.js的模板引擎，其書寫格式是這樣子的...

HandlebarsJS的官方文檔：handlesbar.js：www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html

其他學習文檔：www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html

<scripttype="text/html">

    	<div class="xxxx">

	{{#each data}}

//此處就是handlebar.js的格式，{{  }}，data爲ajax回調函數中接收到的後臺的JSON數據data。以下想要實現data的一個遍//歷，其中data有屬性id，clothname。class中的內容，即爲我們想要引用的AdminLTE模板，直接引用對應模板的class即可，//因爲在之後的內容中可以看到我已經引入了adminLTE.js的文件了，可以直接用其所有模板。

    		<a class="btn btn-block btn-primary btn-sm" id={{id}}>{{clothName}}</a>

	{{/each}}

</div>

</script>

    3.我們使用require.js來進行模塊化編程。

	其使用方式：<script src="js/lib/requirejs/require.js"></script>。以上在index.html中寫入script腳本。我們在其後的js文件中這樣使用:其中前者[]中爲要使用的組件，後者function()中爲返回值，AdminLTE沒有返回值。

define(['..','..','AdminLTE'],function(..,..) {}這樣就行啦！

例如：	

define(['..','..,'AdminLTE'],function(..,..) {
    var API = {}
    var TPL_PATH = "...";
    var TPL_URL = {};
    function ShopApi() {}
    ShopApi.prototype = new baseCtrl();
    ShopApi.prototype.index = function () {}
    ShopApi.prototype.addType = function(){}
    ShopApi.prototype.updateType = function(){}
    return ShopApi;
})

在function中寫入ajax請求，以及將其回調函數中的數據放入我們已經寫好的模板中。然後將其代替某節點，就能把模板插入到我們想要放置的位置。

    4.sass如何設置樣式。

	一般一個hbs模塊會有一個類名，.class{}

	在其中寫入每個元素的樣式：例如a{} 其中寫入a的樣式，每一個屬性用分號隔開。

例如：

.class {
  a {
    display: block;
    text-align: center;
    width: 14%;
    font-size: 26px;
    float: left;
  }

}

用gulp組件，直接sass，這樣就要每次修改都要sass一遍。可以直接用default，一勞永逸。

另外說些別的。在開發中一些常見錯誤：

1.Error: The `libsass` binding was not found  npm rebuild node-sass。

2.JavaScript:void(0) 表示的含義爲什麼都不做。

以上。