当前位置:首页 > Node.js > Node.js简单的页面处理

Node.js简单的页面处理

Node是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引 擎执行Javascript的速度非常快,性能非常好。Node对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好。
node

本文目的

在浏览器地址栏中输入 localhost:3000,在页面显示 腾讯首页 的 20 篇文章标题。

过程分析

首先需要端口的监听,这就需要引入 Node 中最重要的模块之一 express。其次需要对 http://www.cnblogs.com/ 页面发送类似 http 的请求以获取页面数据进行分析,这里需要引入 SuperAgent 模块。最后为了能使请求得到的 html 源码进行类似 dom 一般的操作,需要引入 cheerio 模块。

express 模块

首先第一步,我们要实现端口的监听,以便能将信息输出到页面上。

我们可以用 http 模块:

1
2
3
4
5
6
var http = require("http");
http.createServer(function(request, response) {
  response.writeHead(200, {"Content-Type": "text/html"});
  response.write("Hello World!");
  response.end();
}).listen(3000);

当然我们更可以用封装了 http 功能更加强大的 express 模块:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 这句的意思就是引入 `express` 模块,并将它赋予 `express` 这个变量等待使用。
var express = require('express');
// 调用 express 实例,它是一个函数,不带参数调用时,会返回一个 express 实例,将这个变量赋予 app 变量。
var app = express();
 
// app 本身有很多方法,其中包括最常用的 get、post、put/patch、delete,在这里我们调用其中的 get 方法,为我们的 `/` 路径指定一个 handler 函数。
// 这个 handler 函数会接收 req 和 res 两个对象,他们分别是请求的 request 和 response。
// request 中包含了浏览器传来的各种信息,比如 query 啊,body 啊,headers 啊之类的,都可以通过 req 对象访问到。
// res 对象,我们一般不从里面取信息,而是通过它来定制我们向浏览器输出的信息,比如 header 信息,比如想要向浏览器输出的内容。这里我们调用了它的 #send 方法,向浏览器输出一个字符串。
app.get('/', function (req, res) {
  res.send('Hello World');
});
 
// 定义好我们 app 的行为之后,让它监听本地的 3000 端口。这里的第二个函数是个回调函数,会在 listen 动作成功后执行,我们这里执行了一个命令行输出操作,告诉我们监听动作已完成。
app.listen(3000, function () {
  console.log('app is listening at port 3000');
});

SuperAgent 模块

接着我们需要获取博客园首页的代码从而能进行分析。SuperAgent 就是服务端可以发送 get post 等 http 请求的模块,直接看代码,更多的 api 可以参考文档。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var express = require('express');
var superagent = require('superagent');
 
var app = express();
 
app.get('/', function (req, res, next) {
  superagent
    .get('http://www.cnblogs.com/')
    .end(function (err, ans) {
      // 常规的错误处理
      if (err) {
        return next(err);
      }
 
      res.send(ans.text);
    });
});
 
 
app.listen(3000, function () {
  console.log('app is listening at port 3000');
});

cheerio 模块

我们用 SuperAgent 模块获取了博客园的页面代码,而用 cheerio 则可以进行类似 Jquery 的 css 选择器操作。cheerio 模块的详细 api 可以参考 文档。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var express = require('express');
var cheerio = require('cheerio');
var superagent = require('superagent');
 
var app = express();
 
app.get('/', function (req, res, next) {
  superagent
    .get('http://www.cnblogs.com/')
    .end(function (err, sres) { // callback
      // 常规的错误处理
      if (err) {
        return next(err);
      }
 
      // sres.text 里面存储着网页的 html 内容,将它传给 cheerio.load 之后
      // 就可以得到一个实现了 jquery 接口的变量,我们习惯性地将它命名为 `$`
      // 剩下就都是 jquery 的内容了
      var $ = cheerio.load(sres.text);
      var ans = '';
      $('.titlelnk').each(function (index, item) {
        var $item = $(item);
        ans += $item.html() + '<br/><br/>';
      });
 
      // 将内容呈现到页面
      res.send(ans);
    });
});
 
app.listen(3000, function () {
  console.log('app is listening at port 3000');
});

这时启动 localhost:3000,页面就能显示博客园首页的 20 篇文章标题啦(虽然没样式不太美观)!(当然得先 node fileName.js)
创业
当然我们也可以直接把内容输出在控制台:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var cheerio = require('cheerio');
var superagent = require('superagent');
 
superagent
  .get('http://www.cnblogs.com/')
  .end(function (err, sres) { // callback
    // 常规的错误处理
    if (err) {
      return next(err);
    }
 
    // sres.text 里面存储着网页的 html 内容,将它传给 cheerio.load 之后
    // 就可以得到一个实现了 jquery 接口的变量,我们习惯性地将它命名为 `$`
    // 剩下就都是 jquery 的内容了
    var $ = cheerio.load(sres.text);
    $('.titlelnk').each(function (index, item) {
      var $item = $(item);
      console.log($item.text());
    });
  });

相信大家如果能够按照我的步骤来,就一定会做出来同样的效果,但更要的是希望大家能够理解这些。

  • << WP开发的前景
  • C#设计模式系列(1)-单例模式 >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/node-js_page/

    相关文章 近期热评 最新文章

    • HTML+CSS+JS 实现图标旋转效果
      本文讲解了使用HTML+CSS+JS 实现图标旋转效果。
    • js怎样获取和设置元素的属性
      本文讲解了js获取和设置元素的属性的方法,有需要的朋友可以看看
    • Node.Js 不一般的JavaScript
      互联网的火热使得JavaScript风光无限,且服务端的JavaScript也并不是什么新技术了,相关的框架也有不少,只是node.js的成功让他爆发式的出现在我们的视线中,让很多前端...
    • 前端程序员必须知道的优化小知识
      前端开发人员的一些小知识,Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术。除了后台需要在性能上做优化外,其实前端的页面...
    • HTML5与CSS3的完美搭配
      TML5将会取代1999年制定的HTML 4.01、XHTML 1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求,为桌面和移动平台带来无缝衔接的丰富内容。
    • 前端程序员必须知道的chrome开发者技巧
      在Web开发者中,Google Chrome是使用最广泛的浏览器。六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具。你可能已经熟悉了它的部分功能...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程
    • c#类的构造函数继承关系示例剖析
      本文通过示例代码讲解了c#子类的构造函数与父类的关系,子类怎样集成父类的构造函数的。