厦大数据库实验室博客

总结、分享、收获

实验室主页



用Node.js搭建一个简易的Web端文件词频统计动态网页

Ruan Rongcheng (updated: )
大数据学习路线图

本教程将教导大家如何用Node.js语言搭建一个Web端文件词频统计动态网页。

教程需求

在网页中指定词频文件路径，利用网页点击提交，提交后程序自动运行WordCount的MapReduce程序的JAR包，对HDFS中的文件进行词频统计，并把统计结果显示在网页上。

开发环境

NVM Node版本管理工具
Node.js --LTS
Hadoop 2.7.4
Visual Studio Code 文本编辑工具

安装nvm

打开终端，输入如下命令

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

然后用vim打开 ~/.bashrc

vim ~/.bashrc

进入编辑模式，添加NVM_DIR环境变量

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This

:wq退出vim的编辑模式，在终端中输入如下命令

source ~/.bashrc

更多有关NVM的教程，请点击访问GitHub NVM官方地址

利用nvm安装Node长期支持版本

nvm install --lts

安装完成后，在终端输入如下命令,即可看到node安装的版本

node -v

运行Hadoop伪分布式

如果已经安装好Hadoop的伪分布式，请跳过本步骤
如果还未安装好Hadoop的伪分布式，请点击Hadoop安装教程_单机/伪分布式配置_Hadoop2.6.0/Ubuntu14.04,按照此教程进行安装。
运行Hadoop伪分布式命令后，我们还需要使用之前教程中使用的WordCount.jar包。
如果没有这个Jar包，请参考教程使用命令行编译打包运行自己的MapReduce程序 Hadoop2.6.0，自行导出Jar包。
本教程中，我导出的Jar包位于路径是'~/WordCount.jar'
终端中执行如下命令：

cd /usr/local/hadoop
sbin/start-dfs.sh

项目开发

终端输入如下命令

# 创建项目文件夹
mkdir myapp
# 初始化项目
cd myapp
npm init

初始化项目后，终端会让你输入项目的相关信息，并自动把这些信息记录在package.json中。
如果想快捷进行开发，不想手动输入项目信息，只需要一路按“Enter”键即可，接受默认自动配置。

安装Express开发框架

npm install express --save

通过npm --save安装的模块都会放在当前项目文件夹下的node_modules文件夹下，并更新到package.json文件中。node中引用该模块的时候，会自动从node_modules文件夹下寻找模块。

Hello world实例

在myapp项目目录中，创建一个名为index.js的文件，这个文件将是整个应用的入口。将如下代码复制进去

const express = require('express');
const app = express();

app.get('/', function (req, res) {
  res.send('Hello World!');
});

const server = app.listen(3000, function () {
  const host = server.address().address;
  const port = server.address().port;

  console.log('Example app listening at http://%s:%s', host, port);
});

上面的代码启动一个服务并监听从 3000 端口进入的所有连接请求。他将对所有 (/) URL 或 路由 返回 “Hello World!” 字符串。对于其他所有路径全部返回 404 Not Found。
然后在终端中输入如下命令，启动该应用

node index.js

OK，一个最原始的网站就实现了，在浏览器中输入http://locahost:3000 就可以查看结果.

添加模板引擎

上面的Hello world实例只是教大家实现一个简单Web服务网站，没有添加任何模板引擎。这里将完善整个项目需求功能。
Jade是超高性能的node JavaScript模板引擎，有着非常强大的API和大量杰出的特性。
项目文件夹中继续添加jade模板引擎软件包，在终端中执行如下命令

npm install jade --save

安装好后，还需要在应用中设置模板文件目录、识别模板引擎。
在项目文件夹下的应用入口index.js文件下，添加如下内容：

app.set('views', './views')
app.set('view engine', 'jade')

设置好后，在项目文件夹下添加views文件夹，并在views目录下添加一个index.jade的Jade模板文件。

html
  head
    title!= title
  body
    h1!= message

如果想了解更多jade模板的语法，请参考Jade官方文档.
返回应用入口index.js文件下，修改index.js代码，如下

app.get('/', function (req, res) {
  res.render('index', { title: 'WordCount测试', message: '厦门大学数据库实验室'})
})

此时在终端中重新执行如下命令：

node index.js

浏览器再次访问localhost:3000,模板文件“index.jade”就会被渲染成html.

完善模板引擎index.jade文件

修改index.jade模板文件，增加模板的form等标签。

html
  head
    title!= title
  body
    h1!= message  
    form(action='/', method='post')
      p 请在下面输入所需要进行词频统计文件的路径
      p HDFS文件路径示例：
      p 本地文件路径示例：
      br
      input(name='path')
      input(type='submit')
      br
      textarea(rows='40', cols='40')!=result

这里只是使用简单的页面效果，如果想增加更多的页面效果，请自行添加css、js文件。

index.js应用入口增加路由等功能

node.js要获取从前端post过去的，还需要安装body-parser，才能识别post过来的数据.
在终端中输入执行如下命令

npm install body-parser --save

然后利用node.js中child_process模块执行外部命令，并获取外部命令的输出结果.
完整的index.js代码如下：

const express = require('express')
const bodyParser = require('body-parser')
const exec = require('child_process').exec

const app = express();

// 设置模板引擎
app.set('views','./views')
app.set('view engine', 'jade')
// 添加body-parser解析post过来的数据
app.use(bodyParser.urlencoded({extended: false}))
app.use(bodyParser.json())

app.get('/', function (req, res) {
  res.render('index', {title: 'WordCount测试', message: '厦门大学数据库实验室!'})
})

app.post('/',function(req, res){
  const path = req.body.path.trim()
  const jarStr = '/usr/local/hadoop/bin/hadoop jar ~/WordCount.jar ' + path +' /output'
  const rmrStr = '/usr/local/hadoop/bin/hadoop fs -rmr /output'
  const catStr = '/usr/local/hadoop/bin/hadoop fs -cat /output/part-r-00000'
  exec(rmrStr,function(err, stdout, stderr){
    exec(jarStr, function(err, stdout, stderr){
      // 判断路径是否存在,如果路径不存在，则显示错误信息
      if(stderr){
        res.render('index', {title: 'WordCount测试', message: '厦门大学数据库实验室!', result: stderr})
      }
      //执行成功后，显示统计结果。
      exec(catStr,function(err, stdout, stderr){
        res.render('index', {title: 'WordCount测试', message: '厦门大学数据库实验室!', result: stdout})
      })
    })
  })
})

const server = app.listen(3000, function () {
  const host = server.address().address;
  const port = server.address().port;

  console.log('Example app listening at http://%s:%s', host, port);
});

到目前为止，一个简易的Web端文件词频统计动态网页已经搭建完成。

© 2014 厦大数据库实验室