引言：
不知道你在項(xiàng)目開發(fā)過程中，有沒有遇到過有過以下場(chǎng)景：
一般是前端先制作靜態(tài)頁面，同時(shí)服務(wù)器端創(chuàng)建數(shù)據(jù)庫，搭服務(wù)器端架構(gòu)，寫接口；
當(dāng)接口寫完之后，前端或者后端才能嵌套頁面。
但是，如果前端頁面制作好了，后端接口還沒有寫好呢？或者如何讓前端、后端各自做各自的事情，互相不影響？
能做到下面這樣是不是很好呢？
——在進(jìn)行完需求分析和詳細(xì)設(shè)計(jì)后，前端、后端一同商量、制作出一份接口文檔
（其中接口名、參數(shù)、返回值名稱、返回值類型都定義好）
前端頁面制作好之后，直接模擬出該接口的json文件，先去請(qǐng)求該文件，把頁面綁定、業(yè)務(wù)邏輯都處理好。
等前端全部綁定好，同時(shí)后端接口寫好后，我們只需要前端修改接口地址，其他不用做任何修改。
這樣，是不是前端不用等后端接口全部寫完才能開始剩下的工作。
1.創(chuàng)建一個(gè)最簡(jiǎn)單的項(xiàng)目
- 安裝nodejs
- 新建一個(gè)文件夾，進(jìn)入目錄
mkdir express
- 接下來安裝 Express
npm install -g express-generator@4
- 創(chuàng)建一個(gè)工程
express helloworld
現(xiàn)在在express文件夾下就出現(xiàn)了helloworld項(xiàng)目
- 安裝依賴
cd helloworld
npm install
備注：執(zhí)行npm install命令會(huì)將package.json文件中 dependencies 依賴列表中,
即可自動(dòng)安裝依賴列表中所列出的所有模塊。
- 開啟服務(wù)
執(zhí)行npm start命令
- 這樣就可以在瀏覽器訪問
http://localhost:3000/
下面是瀏覽器中顯示的內(nèi)容
pic1.png
2.為什么瀏覽器中出現(xiàn)的內(nèi)容是這樣的呢？
- 首先我們打開app.js，然后可以找到這句話
app.use('/', routes);
- 然后我們?cè)倏磖outes是什么，就可以往上找，找到
var routes = require('./routes/index');
- 順著這個(gè)，我們打開routes文件夾下的index.js文件，看看里面究竟寫的是什么
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
- 原來框架是找到views文件夾下的index.jade文件渲染到前臺(tái)頁面
index.jade
extends layout
block content
h1= title
p Welcome to #{title}
- 這里我們先不用管 <u><b>模板引擎</b></u> 的語法,試著修改修改index.js文件的內(nèi)容，將title改為Hello world.
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Hello world.' });
});
module.exports = router;
- 在命令行中，按ctrl+c關(guān)閉服務(wù)，重新執(zhí)行npm start，看界面中的結(jié)果
pic2.png
是不是很簡(jiǎn)單。
3.看到這里，可能有個(gè)疑問，我們?cè)趺丛L問靜態(tài)的html呢？
很簡(jiǎn)單，下面一步步說來：
- 首先，我們看app.js中有沒有這句話
app.use(express.static(path.join(__dirname, 'public')));
- 有的話，則直接看下一步，沒有就在app.js中添加這句話，記得添加后重啟服務(wù)
- 接著，我們?cè)陧?xiàng)目的public文件夾下，新建一個(gè)html文件下（便于后期管理所有的靜態(tài)頁面），然后新建index.html,內(nèi)容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
Hello world.
</body>
</html>
這樣在瀏覽器中輸入下面的地址，就可以訪問了。
http://localhost:3000/html/index.html
4.我們現(xiàn)在做到了能訪問一個(gè)html文件，那我們?nèi)绾文Majax請(qǐng)求，讀取json文件中的內(nèi)容，提前綁定頁面呢？（不依賴后端接口寫好）
- 為了方便項(xiàng)目管理，我們新建幾個(gè)文件夾和對(duì)應(yīng)的文件
json文件夾及其對(duì)應(yīng)的index.json文件
在javascripts文件夾下新建index.js
index.json
{
"code":"200",
"msg":"success"
}
index.js
fetch("../json/index.json").then(function(res) {
if (res.ok) {
res.json().then(function(data) {
console.log(data);
});
} else {
console.log("Looks like the response wasn't perfect, got status", res.status);
}
}, function(e) {
console.log("Fetch failed!", e);
});
- 在index.html中引入對(duì)應(yīng)的文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
Hello world.
<script src="../javascripts/index.js"></script>
</body>
</html>
- 最后再打開訪問http://localhost:3000/html/index.html
打開控制臺(tái)，我們可以看到打印出了我們想要的內(nèi)容
pic3.png
5.最后附上項(xiàng)目結(jié)構(gòu)
pic4.png
有關(guān)fetch的用法，可以查看GitHub上的 這個(gè)項(xiàng)目。
