之前學習的前端知識都只是侷限於html+js編寫的靜態網頁，所以前幾天試着加上模擬數據把前端和後臺串聯起來。在這個demo中，我運用了node.js、koa及vue.js。首先我們需要了解node.js，簡單的說 Node.js 就是運行在服務端的 JavaScript。node.js安裝很簡單，只要到官網下載安裝包，運行不斷點擊下一步到完成即可。安裝完成後打開命令窗口，輸入 node -v ,版本出來即安裝成功。koa依賴於node環境，是基於node平臺的web開發框架；vue是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件。其實就是實現前端頁面及數據層的雙向綁定。
步驟一：
創建一個demo的根文件夾，裏面放置package.json文件
{
"name": "webdemo",
"version": "1.0.0",
"main": "app.js",
"dependencies": {
"co-views": "^2.1.0",
"koa": "^1.2.0",
"ejs": "^2.4.2",
"koa-route": "^2.4.2",
"koa-static-server": "^0.1.8"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "renyuan",
"license": "ISC"
}
保存好package.json文件後打開命令窗口，由於我的demo文件夾是放到e盤下，所以要先轉到e盤再進行安裝npm包，安裝成功後會在package.json的同級目錄下出現node_modules文件夾，node_modules是依賴於package.json中的"dependencies"而創建的。
步驟二：
創建文件目錄結構
mock是數據層，相當於模擬數據庫；
service是數據連通接口，把數據方法暴露出來；
static存放靜態資源文件，包括css、img及script；
view存放html文件；
app是入口啓動文件；
步驟三：
在mock數據層中添加index.json文件用於測試
{
"name":"張三"
}
步驟四：
首先寫數據連通接口，在service文件夾下新建一個webAppService.js文件
var fs=require('fs'); // fs是Node的官方包，用來進行本地文件的處理
/*把index數據暴露出來*/
exports.get_index_data=function(){
var content=fs.readFileSync('./mock/index.json','utf-8');
return content;
}
步驟五：
上面那些都設置好後，首先寫入口啓動程序app.js，
var koa=require('koa');
var controller=require('koa-route'); //提供路由的功能
var app=koa(); //引用koa實例
var views=require('co-views'); //co-views 是用來渲染模板的庫
var render=views('./view',{ //render是它生成的實例
map:{html:'ejs'}
});
/*引入中間件，靜態資源文件*/
var koa_static=require('koa-static-server');
var service=require('./service/webAppService.js');
app.use(koa_static({
rootDir:'./static/',
rootPath:'/static/', //在url地址欄中訪問靜態資源文件的路徑
maxage:0 //過期時間，即緩存
}));
/*渲染路由地址,直接通過url發起的請求用get*/
app.use(controller.get('/route_test',function *(){
this.set('Cache-Control','no-cache'); //返回頭，設置不緩存
this.body="hello koa"; //this.body是返回體,可以是文本或模板
}));
/*渲染網頁模板*/
app.use(controller.get('/index',function*(){ // /index指地址欄中的url
this.set('Cache-Control','no-cache');
this.body=yield render('index',{title:'首頁'}); //index指index.html
}));
app.use(controller.get('/ajax/index',function *(){
this.set('Cache-Control','no-cache');
this.body= service.get_index_data();
}));
app.listen(3030,'127.0.0.1'); //服務監聽127.0.0.1:3030端口
步驟六：
在static文件夾下添加vue.js、zepto.js及index.js,vue.js、zepto.js都是開發框架，直接到官網即可下載，現在寫index.js
$.get('/ajax/index',function(d){ //get方法成功後回調返回成功的數據d
new Vue({
el:"#app", //在index.html中必須要有id=“app”,代表這個區域
data:{
name:d.name
}
});
},'json');
步驟七：
在view文件夾下新建index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="/static/css/reset.css">
<title>掌上藥箱</title>
</head>
<body>
<div id="app">
<button>掌上藥箱</button>
{{ name }} <!--返回的數據用雙大括號-->
</div>
</body>
<script type="text/javascript" src="./static/script/vue.js"></script>
<script type="text/javascript" src="./static/script/zepto.js"></script>
<script type="text/javascript" src="./static/script/index.js"></script>
</html>
編寫完成後要啓動服務器，
app.js中有一個服務監聽3030端口，啓動完成後在瀏覽器中打開
這樣就完成了一個前端加模擬後臺的整站demo了。當修改一次app.js或appWebService.js的文件內容時，都要在命令窗口中按ctrl+C關閉服務器再輸入node app.js重啓服務器才能看到修改效果。
koa的資料：http://www.open-open.com/lib/view/open1434961473669.html