首先使用express創建一個簡單的服務器
創建文件夾 be-project
# (確保安裝了node,并配置好了環境) 在be-project目錄下(命令行執行)
npm init -y
npm install --save express body-parse
npm install --global nodemon// app.js
const express = require("express");
const bodyParser = require("body-parser");const app = express();
app.use(bodyParser.urlencoded({ extended: false })
app.use(bodyParser.json())const todo = [{id: 1,title: "吃飯"
},
{id: 2title: "睡覺"
},
{id: 3title: "打豆豆"
}app
.get("/todos", (req, res) => {res.json(todos);
})app.listen(3000, () => console.log("Server running...");
然后在be-project目錄下執行
# cli
nodemon app.js.瀏覽器輸出: http://127.0.0.1://3000/todos
此時數據就暴露3000端口,主機名127.0.0.1, 路徑是todos.
SPA(Single Page Application)
創建另外一個文件夾 fe-project-spa,此時目錄結構如下
# 保證前面的小黑框不關閉,重新打開一個命令行.進入fe-project-spa
npm init -y
npm install --save jquery art-template
在index.html中,寫入用于跳轉用的錨點.
<body><div class = "header">頭部</div><div class = "aside"><ul><li><a href="#/">發現音樂</a></li><li><a href="#/my-music">我的音樂</a></li><li><a href="#/friend">朋友</a></li></ul></div><!-- 用于放內容的container --><div id = "container"> </div>
</body>
此時點擊會跳到對應的hash, PS: #后面加/ 是為了區分普通的錨點,即不是用來跳轉的.
當點擊發現音樂的時候,會渲染 id為container的內容
即加載入find-musice.html
// index.js
<script src="node_modules/jquery/dist/jquery.js"></script>
<script>window.onhashchange = function () {var hash = window.location.hash.substr(1);if(hash === '/') {$.get("./find-music.html', function(data) {$('#container').html(data);})}}
</script>
// ps : 獲取發現頁面(渲染進container中)的方法使用了ajax的方法
下面對find-music.html頁面進行處理:使用ajax請求最開始放在3000端口的數據,然后使用模板引擎art-template進行渲染.
// find-music.html
<div>發現音樂</div><!-- 用于模板引擎渲染 -->
<ul id ="find-music-container"> </ul>
<script type="text/template" id="tpl-find-musice">{{ each todos }}{{ $value.title }}{{ /each }}
</script>
<script>$.get("http://127.0.0.1:3000/todos", function(data){var htmlStr = template('tpl-find-music', {todos: data})$('#find-music-container").html(htmlStr);})
)
