Node.js后端开发 - 进阶篇 #11 express框架之res.sendFile和res.render,传递模块数据,模板引擎(持续更新中)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/YuDBL/article/details/102637260

目录

一、前言

二、res.sendFile和res.render 函数的区别?

1、handler.js 业务模块返回 html 页面

(1)加载的 html 页面,没有css文件和image图片文件

(2)加载的 html 页面,有css文件和image图片文件

(3)最终效果


一、前言

上几篇文章我们对exprss的 router.js 路由模块、handler.js 业务模块进行了封装介绍,详细可参见博文:Node.js后端开发 - 进阶篇 #9 express框架之路由模块的封装2(相对安全)Node.js后端开发 - 进阶篇 #10 express框架之封装handler.js模块 这篇文章我们将讲 res.sendFile和res.render 函数的区别?如何传递模块数据?服务器端如何响应css文件、image文件?以及模板引擎的一些知识

二、res.sendFile和res.render 函数的区别?

1、handler.js 业务模块返回 html 页面

(1)加载的 html 页面,没有css文件和image图片文件

上篇文章我们封装了 handler.js 文件


//业务模块

//暴露函数,并且需要传入req、res参数,
//才能处理相应的业务,向用户响应
module.exports.index = function (req, res) {
    res.send('这个是 handler.index 方法中的代码');
};

它返回响应的是一些简单的文字信息: res.send('这个是 handler.index 方法中的代码'); ,我们现在来尝试返回一些 html 页面,我们新建一个 index.html,然后把相关resources资源文件放到项目里面。那么要用户看到 index.html 页面很简单,只要读取 index.html 页面的内容,然后响应给用户就行了。

我们可以用到前几篇文章讲到的 res.sendFile() 方法,要先拼接一下 index.html 的路径,要拼接路径我们先要加载 path 模块 ,我们来看下修改后的 handler.js 文件


//业务模块

var path = require('path');

//暴露函数,并且需要传入req、res参数,
//才能处理相应的业务,向用户响应
module.exports.index = function (req, res) {
    //res.send('这个是 handler.index 方法中的代码');

    //它后面的参数,回调函数可不写,它也会把信息数据返回给用户
    res.sendFile(path.join(__dirname, 'views', 'index.html'));

};

我们运行服务器端程序,然后在浏览器中输入地址:http://localhost:3000/

             

 这样可以看到网页信息,但是有很大的问题,因为css文件和image图片文件都没有。

 当请求css文件、图片文件的时候,服务器返回的是404。那么为什么会这样?

因为我们对用户请求的这些静态资源文件,服务器并没有做处理。那么我们怎么做处理呢?

(2)加载的 html 页面,有css文件和image图片文件

我们可以用到前几篇文章讲到的 通过express模拟Apache实现静态资源托管服务 的一些知识,详见可参考博文:Node.js后端开发 - 进阶篇 #6 express框架之通过express模拟Apache实现静态资源托管服务 ,我们修改下路由模块 router.js 里面的代码,实现对 resources 文件下的内容进行静态资源托管,核心代码如下

// 实现对 resources 文件下的内容进行静态资源托管
// /resources/css/MyStyle.css
router.use('/resources', express.static(path.join(__dirname, 'resources')));

(3)最终效果

我们运行服务器端程序,在浏览器中输入地址:http://localhost:3000/ ,最终效果如下图,css样式 和 图片文件都加载出来了

更新中。。。。。

猜你喜欢

转载自blog.csdn.net/YuDBL/article/details/102637260