版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/funkstill/article/details/85993464
添加用户界面
给 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')这样的代码！
最终效果
注意！！！查看文章之前先创建文章
