提取 router.js 模块02(顺带封装 handler.js 模块中的方法)|学习笔记

简介: 快速学习提取 router.js 模块02(顺带封装 handler.js 模块中的方法)

开发者学堂课程【Node.js 入门与实战:提取 router.js 模块02(顺带封装 handler.js 模块中的方法)】学习笔记,与课程紧密联系,让用户快速学习知识

课程地址:https://developer.aliyun.com/learning/course/588/detail/8306


提取router.js模块02(顺带封装handler.js模块中的方法)

 

1、第二个要封装用户请求submit路由处理代码,

//读取submit.html并返回,//res,render(path.join(_dirname, 'views’,’submit.html’));

直接就渲染,路由模块里面,路由判断完毕之后这只有一句话,也需要封装,因为就算只有一句话,这也属于是它的业务,它目前的业务只有一句话,但不能保证这个业务以后也只有一句话,当用户请求submit时只返回一句话,但是以后可能这个业务会比较复杂,所以这无论代码有多少,只要是属于不同模块的不同职责代码就一定要提出来。

2、在业务模块当中,

//处理请求/和/index的业务方法,

module. exports.index = function(req, res) {

// 1.读取data.json 文件中的数据,并将读取到的数据转换为list 数组

readNewsData(function(list) {

// 2.在服务器端使用模板引擎,将list 中的数据和index.html 文件中的内容结合渲染给客户端

res .render(path. join(_ dirname, 'views', ‘index.html'), {list: list });

});

};

//处理请求/submit的业务方法

module . exports.submit = function (req, res) {

//读取submit.html 并返回

res. render(path. join(_ dirname, 'views',' submit. html ‘));

};

当用户请求submit直接读取文件返回就可以了。

3、在路由模块router.js中,

//先根据用户请求的路径(路由),将对应的HTML页面显示出来

if (req. pathname === '/'| | req. Pathname=== ' /index' && req . method === " get') {

handler . index(req, res);

} else if (req. Url===.' /submit' . && · req .method .==='get' ) ·{

handler . submit(req, . res);

这样就封装了submit的业务代码,封装完毕之后再测试一下,点击submit,查看是否有问题,没有问题。

image.png

4、处理新闻详情的页面,在handler.js业务模块中添加

//处理请求/item 的业务方法(显示新闻详情)

module . exports.item = function (req, res) {

body

};

把这些代码拷贝到业务代码body位置,并把注释取消。

// 1.获取当前用户请求的新闻的id

// 2. 读取data.json文件中的数据,根据id找到对应新闻

//  readNewsData( function(list_ news ){

// var model = null;

// 循环list_ news中的数据,找到和id值相等的数据

for (var i=0; i< list_news.length; i++) {

//判断集合中是否有与用户提交的id相等的新闻

if (list_ news[i].id. toString()=== req.query.id) {

//如果找到了相等的新闻,则将其记录下来

model = list_ news[i];

break ;

}

if (model){

// 3.调用res.render() 函数进行模板引擎的渲染

res . render(path. join(_ dirname, 'views', details.html'), {item: model });

}else{

res .end('No Such Item' );

}

});

5、在router.js中添加handler.item(req, res); 封装新闻详情。测试一下新闻详情是否可用,这样的好处就是如果除了问题可以及时发现,还是访问localhost:

9090,随便点一个,可以直接显示,证明item封装也是OK的。

image.png

6、用get方式添加新闻,在router.js拷贝代码,粘贴在handler.js中,格式化一下代码,这个方法名叫addget。

//处理get方式添加新闻

Module.exprots.addget=function(req,res){

//1.读取data.json 文件的数据

readNewsData(function(list) {

//2.

//在把新闻添加到list之前,为新闻增加一个id属性

req .query.id=list. length;

//向数组对象list 中push一条新闻

list. push(req. query);

//3.写入data.json 文件

writeNewsData ( JSON. stringify( list) , function (){

//重定向

res.statusCode = 302;

res.statusMessage=’Found';

res.setHeader(‘ Location",’/');

res . end();

});

});

在 router.js 路由模块中添加 handler.addget(req,res),

}else if ( req. pathname ===' /add' && req . method===get' ){

handler. addGet(req, res) ;

}else if(req . url===" /add' &&req . method===post' ){

7、测试一下get方式添加新闻,需要在views中submit.html里表单方式改成get,重新测试,测试结果如下。

image.png

8、封装完毕之后,在路由模块中还有一个post模块添加新闻,点击业务模块,在封装一个,代码如下。

//处理post方式添加新闻

module . exports . addPost =function(req, res) {

//1.读取 data. json

readNewsData(function(list) {

// 2.读取用户post提交的数据

postBodyData(req, function(postData) {

// 3.为用户提交的新闻增加一个id属性,并且把新闻对象push 到list中

postData.id=list. length;

list . push(postData);

// 4.将新的list数组,在写入到data.json 文件中

writeNewsData(JSON. stringify(list), function() {

//重定向

res. statusCode = 302 ;

res . statusMessage =" Found' ;

res. setHeader( ' Location ' ,’/');

res . end();

});

9、在路由模块router.js中添加handler.addpost(req,res),在submit.html中把表单改成post方式,再进行测试,测试结果如下,封装完毕。

image.png

10、处理静态资源也需要封装,封装的时候无论代码量多少,只要对

应的是业务模块或者路由模块,只要它是在不同模块里面就一定要封装。

今天它是一个代码,不能保证以后还是一个代码。把以下代码单独提取出来,找到业务模块,添加进去,格式化一下。

module . exports.static = function (req, res) {

//如果用户请求是以/resources 开头, 并且是 get请求,就认为用户是要请求静态资源

//resources/ images/s. gif

res . render( path . join(__dirnamereq.url));

};

在路由模块中把它改造一下,进行测试,如果图片css都能显示就证明是OK的。

} else if (req. url. startsWith( . /resources' )&&req . method===’get' ){

handler. static(req, res);

image.png

最后的404也需要封装,把代码拷贝到handler.js中,简单返回了一个404,处理错误的一个方法。

//处理404错误请求

module . exports.handleErroes= function (req, res) {

res . writeHead(404,  ' Not . Found' , {

‘Content-Type': ’text/html; charset=utf-8'

});

res . end( '404, Page Not Found.');

}

在 router.js 中,添加 handler.handleErroes(req,res);

再看路由模块,就是很简单的if判断,对于不同路由只是做了路由判断而已,具体的处理代码都是调的别的模块处理的,这就是路由模块,路由模块封装完毕之后,里面处理都是调用业务模块,业务模块封装了不同的处理方法,每个方法都是针对不同的路由进行处理,最终在路由模块中调用对应的业务模块实现处理,在业务模块中要用的这些方法去单独封装到业务模块里面。

//加载 handler.js 模块

var handler= require(' . /handler.js');

var path=require( path' );

module . exports = function(req, res) {

//先根据用户请求的路径(路由),将对应的HTML页面显示出来

if ( req . pathname ===' /'|| req . pathname ===' index' && req. method ==="' get' ){

handler. index(req, res);

} else if (req-url === " /submit' && req. method ==='get') {

handler . submit(req, res);

}else if (req . pathname ===" /item' && req . method " ===get' ){

handler . item(req, res);

}else if (req. Pathname==="/add'&&req.method==="get'){

handler . addGet(req, res);

}else if (req.url ===" /add' && req. method === 'post') {

handler. addPost(req, res);

}else if (req . url. startsWith( ‘/resources') && req . method === 'get') {

handler.static(req, res);

}else {

handler . handleErrors(req, res);

};

}

测试一下,输入一个不存在的页面,服务器没有崩溃。

image.png

再访问正确的网站,可以正常显示。这就是路由模块和业务模块的提取。

相关文章
|
20天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
18天前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
114 52
|
1月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
1月前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
20天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
29 5
|
21天前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
24 1
|
1月前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
38 7
|
1月前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
1月前
|
JavaScript 前端开发 开发者