NodeJS入門 0x7 NodeWeb程式（4）新增使用者介面
阿新 • • 發佈：2019-01-07
新增使用者介面
給 Express 專案新增介面需要做幾件事。首先是使用模板引擎。程式還需要服務靜態檔案，比如 CSS。在渲染模板和編寫 CSS之前，還需要了解，如何在必要時讓前面例子中的路由處理器同時支援 JSON 和 HTML 響應。
支援多種格式
Express 的 res.format 方法
app.get('/articles',(req,res,next)=>{//獲取所有文章 Article.all((err,articles)=>{ if(err) return next(err); res.format({ html:()=>{ res.render('articles.ejs',{articles:articles}); }, json:()=>{ res.send(articles) } }); }); });
渲染模板
安裝 EJS 模組
npm install ejs --save建立模板 articles.ejs
views/articles.ejs
<% include head %> <ul> <% articles.forEach((article)=>{%> <li> <a href="/articles/<%= article.id %>"> <%= article.title %> </a> </li> <%})%> </ul> <% include foot%>
views/head.ejs
<html>
<head>
<title>Later</title>
</head>
<body>
<div class="container">views/foot.ejs
</div>
</body>
</html>用 npm 管理客戶端依賴項
不用自己建立樣式，重用已有的樣式會更簡單，甚至這也能用 npm 來做！熱門的 Bootstrap 客戶端框架也在 npm 上，把它加到專案中
npm install bootstrap --save響應靜態檔案請求
Express 自帶了一個名為 express.static 的中介軟體，可以給瀏覽器傳送客戶端 JavaScript、圖片和 CSS 檔案。只要將它指向包含這些檔案的目錄，瀏覽器就能訪問到這些檔案了。
//在index.js頂部新增
app.use(bodyParser.json());//支援編碼為JSON的請求體
app.use(bodyParser.urlencoded({extended:true}));//支援編碼為表的請求體
app.use(
'/css/bootstrap.css',
express.static('node_modules/bootstrap/dist/css/bootstrap.css')
);把 /css/bootstrap.css 新增到模板中，來獲得一些酷炫的 Bootstrap 樣式。
<html>
<head>
<title>Later</title>
<link rel="stylesheet" href="/css/bootstrap.css">
</head>
<body>
<div class="container">用 npm 和客戶端開發工具做更多事情
時髦的前端開發人員不僅用 npm 下載這些庫，還會用 npm 在客戶端 JavaScript 中載入它們。藉助 Browserify 和 Webpack，可以釋放出 npm 安裝器和載入依賴項的 require 的全部力量。想象一下，不僅在寫 Node 程式碼時，在做前端開發時也可以敲入 const React = require('react')這樣的程式碼！
最終效果
注意！！！檢視文章之前先建立文章
