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

#用Node.js搭建一个简易的Web端文件词频统计动态网页| 来源: 网络整理| 查看: 265

本教程将教导大家如何用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代码如下：

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

【本文地址】

公司简介

联系我们