在新的項目中使用到了另外一套解決方案，根據具體情況設計了以下的解決方案。
node層設計
本地生成第一次訪問的頁面並做緩存處理。同時使用代理方式代理後端接口。
1.項目使用到了express+ mustache-express來做基礎的頁面生成。
考慮到要儘量少採坑，所有使用了成熟的express
使用mustache是基於：
1.語法比較接近於現代方式
2.提供了引用第三方模板的方式
mustache-express傳送門
2.使用http-proxy-middleware來代理後端接口。
const express = require('express');
const proxy = require('http-proxy-middleware');//引入代理中間件
const app = express();
//將服務器代理到localhost:8080端口上[本地服務器爲localhost:3000]
const apiProxy = proxy('/api', { target: 'http://localhost:8080',changeOrigin: true });
app.use('/api/*', apiProxy);//api子目錄下的都是用代理3.使用的方式
- 確認端口，並在node中創建對應的路由
- 路由中遠程獲取接口的第一次數據併入模版引擎中並完成渲染工作
- 以上內容可以視情況加入緩存中
- 遠程獲取接口內容的方法需要使用http中的request方法或者自己完成自定義的方法
- 接口返回的數據經過包裝。其中包含：code（結果代碼），msg（錯誤信息），data（返回的數據）。如果有超時404之類的錯誤需要處理爲其他錯誤信息並返回
前端設計
前端通過gulp生成對應的文件在服務端的view文件夾下。服務端在開發環境下爲自動刷新。
前端使用requirejs來做模塊化加載方案。頁面載入過程中會優先加載base.css完成頁面初始化以及requirejs。其中requirejs默認有配置數據並自動加載base.js完成js的初始化以及全局變量的初始化
1.html部分。
node中使用了模版引擎，所有html頁面可以分成幾個模版來寫。目前頁面分成了head、body、foot三個部分。其中head寫全局的加載項目。body中寫當前頁的內容。foot寫一些頁腳、js等。其他模版視情況而分。
html根據不同環境有壓縮和未壓縮的不同版本。
2.css部分。
使用less來寫css，通過gulp-less來生成對應的css。
3.js部分。
使用requirejs來加載每個頁面的對應js。
頁面最下面:
requirejs(["index"]）對應的js內部；
requirejs(["helper/util"], function(util) {
//util就是對應異步載入的js
//對應的js代碼
});4.頁面artTemplate
多數頁面需要寫鏈接來指向其他頁，比如多頁時候的下一頁。其餘的時候需要使用接口獲取數據並渲染到頁面上。這個時候就需要使用artTemplate。
使用javascript存放模版
<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
</script>渲染方式：
var data = {
title: '標籤',
list: ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;5.組件部分
public下面有一個lib文件夾，裏面放一些使用到的組件，或者一些自定義的組件。
組件的存放方式定義爲：
| - | lib文件夾 | - |
|---|---|---|
| 組件文件夾 | ||
| 組件用到的css文件 | 組件用到的js文件 | 圖片等 |
6.命令設計
1.npm run server ：啓動服務端，express熱啓動模式。
2.npm run dev ：啓動開發模式，這個模式下會監控文件的改動並生成對應的結果文件
3.npm run build ：重新生成對應的html、js、css、image等文件
4.npm run publish : 啓動正式環境的服務端