NodeJS入门 0x7 NodeWeb程序（4）添加用户界面

最新推荐文章于 2023-02-08 12:49:36 发布

cellinlab

最新推荐文章于 2023-02-08 12:49:36 发布

阅读量248

点赞数

分类专栏： JavaScript NodeJS 文章标签： Express EJS res.format NodeJS JSON

本文链接：https://blog.csdn.net/funkstill/article/details/85993464

版权

JavaScript 同时被 2 个专栏收录

152 篇文章 2 订阅

订阅专栏

NodeJS

35 篇文章 0 订阅

订阅专栏

添加用户界面

给 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')这样的代码！