本文已参与「新人创作礼」活动,一起开启掘金创作之路。
目录
二、res.sendFile和res.render 函数的区别?
(1)加载的 html 页面,没有css文件和image图片文件
(2)加载的 html 页面,有css文件和image图片文件
一、前言
上几篇文章我们对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 文件
//业务模块 //暴露函数,并且需要传入req、res参数, //才能处理相应的业务,向用户响应
var path = require('path');
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样式 和 图片文件都加载出来了