nodejs抓取动态网页(使用搭建服务器的Hello程序使用postnodeapp.js启动应用)

　　nodejs抓取动态网页(使用搭建服务器的Hello程序使用postnodeapp.js启动应用)

　　标签： reqartNodejs--resappexpressconst 页面

　　一、Express 框架介绍

　　在之前的Node基础中，我们学习了Node.js中的http模块，虽然我们知道使用Node.js中的http模块可以开发Web应用，处理静态资源，处理动态资源，请求分发（路由）等，也可以让开发者对HTTP协议的理解更加清晰，但是使用起来比较复杂，开发效率低。

　　npm 提供了大量的第三方模块，包括很多 web 框架，我们不需要重新发明轮子，所以我们选择使用 Express 作为开发框架，因为它是目前最稳定和使用最广泛的，也是唯一的Node.js 官方推荐的一个 Web 开发框架。除了为 http 模块提供更高级别的接口外，还实现了许*敏*感*词*，包括：

　　官方网站：

　　express 是基于内置核心 http 模块的第三方包，专注于构建 web 服务器。

　　二、使用Express搭建服务器Hello world程序

　　// 1、引入express模块并创建express对象

const express = require('express');

const app = express();

// 2、书写处理请求的方法，来响应请求

app.get('/', (req, res) => {

// 这里的代码在浏览器以get请求/的时候执行，

// 这个函数就是用来处理浏览器的 对于/的get请求 的

// 第一个参数req是请求头对象，里面包含请求头信息

// 第二个参数res用来做响应

console.log(req);

res.send('Hello World!222');

});

// 3、*敏*感*词*端口

app.listen(3000, () => {

//这里的代码服务器刚启动的时候执行1次

console.log('Example app listening on port 3000!')

});

　　使用node app.js启动应用，访问：3000/查看效果。

　　三、使用Express处理get请求方法3.1、返回页面

　　在myapp目录下新建views文件夹，放入register.html页面。

　　在 register.html 中：

　　注册页面11

<p>

用户名：

　　

邮箱：

　　

密码：

　　

确认密码：

</p>

　　在 app.js 中：

　　const express = require('express');

const app = express();

// 1、引入fs和path模块

const fs = require("fs");

const path = require("path");

// 2、处理/register的get请求

app.get('/register', (req, res) => {

//读取页面内容，并返回这个页面

let pathName = path.join(__dirname, 'views', "register.html");

const regPage = fs.readFileSync(pathName, "utf-8");

res.send(regPage);

});

app.listen(3000, () => {

console.log('Example app listening on port 3000!')

});

　　3.2、获取查询参数

　　app.get('/index', (req, res) => {

let ret = req.query // 获取到一个对象

res.send(ret.curPage);

//可以在请求的时候传入查询参数：

//http://localhost:3000/index?curPage=3&perPage=10

});

　　四、使用Express处理post请求方法4.1、post请求处理格式

　　app.post('/register', (req, res) => {

//可以在回调函数中，获取请求参数(用户在页面填写的信息)，并进行处理

res.send("post---");

});

　　4.2、获取请求参数

　　我们使用第三方包body-parser来处理请求参数更简单更专业

　　首先，在项目目录下安装body-parser：

　　yarn add body-parser 或者 npm install body-parser

　　使用 body-parser 获取请求参数：

　　// 1、引入body-parser

const bodyParser = require('body-parser')

// 2、bodyParser功能添加到项目app中

// parse application/x-www-form-urlencoded 针对普通页面提交功能

app.use(bodyParser.urlencoded({ extended: false })) //false接收的值为字符串或者数组，true则为任意类型

// parse application/json

app.use(bodyParser.json()) // 解析json格式

// 3、在接口中获取请求参数 req.body

app.post('/register', (req, res) => {

// 可以在回调函数中，获取请求参数(用户在页面填写的信息)

// 获取请求参数

console.log(req.body);

// 获取到请求参数之后就可以在这里处理这些请求参数，比如保存到数据库中(后面我们学习数据库知识)

res.send("post ok");

});

　　五、重定向到其他界面

　　一般注册成功后可以跳转到登录页面，也就是重定向

　　我们使用 res.redirect('/login'); 跳转到另一个界面进行处理

　　// 添加登录页面的接口

app.get('/login', (req, res) => {

//读取页面内容，并返回这个页面

let pathName = path.join(__dirname, 'views', "login.html");

const loginPage = fs.readFileSync(pathName, "utf-8");

res.send(loginPage);

});

app.post('/register', (req, res) => {

// 可以在回调函数中，获取请求参数(用户在页面填写的信息)

// 获取请求参数

console.log(req.body.username);

// 一般注册成功之后可以跳转到登录页面，这就是重定向

res.redirect('/login'); // 重定向到'/login'接口，对应的接口函数会执行

});

　　六、all() 方法组合同一请求路径的不同方式

　　对于上面的case/register请求，有两种方式：GET和POST。Express 提供了 all() 方法来组合写接口：

　　app.all('/register',(req, res) => { let method = req.method if(method==='GET'){ //读取页面内容，并返回这个页面 let pathName = path.join(__dirname, 'views', "register.html"); const regPage = fs.readFileSync(pathName, "utf-8"); res.send(regPage); }else if(method==='POST'){ console.log(req.body.username); // 一般注册成功之后可以跳转到登录页面，这就是重定向 res.redirect('/login'); } })

　　七、使用Express获取静态资源

　　const express = require('express');const app = express();// 获取静态资源// app.use(express.static("public")) // "public"表示指定在本地public下找静态资源 // 请求： localhost:3000/images/01.jpg // 如果想要在请求的路径里面添加前缀app.use("/static", express.static("public"))// localhost:3000/static/images/01.jpg // 可能有延迟，如果延迟尝试重启服务器或者浏览器app.listen(3000, () => { console.log('Example app listening on port 3000!')});

　　八、使用 Express 渲染模板页面

　　我们使用 art-templates 模板引擎

　　文档网址：

　　使用前需要安装 art-template 和 express-art-template

　　yarn add art-template 或者 npm install art-templateyarn add express-art-template 或者 npm install express-art-template

　　在views目录下新建一个index.html

　　// 1、修改模板引擎为html，导入express-art-templateapp.engine('html', require('express-art-template'));// 2、设置运行的模式为生产模式// production 生产模式，线上模式// development 开发模式app.set('view options', { debug: process.env.NODE_ENV !== 'production'});// 3、设置模板存放目录为views文件夹app.set('views', path.join(__dirname, 'views'));// 4、设置引擎后缀为htmlapp.set('view engine', 'html');app.get('/', (req, res) => { res.render('index') //通过render返回该模板});

　　九、art-templates模板引擎的使用

　　使用语法：

　　我们可以将数据从后端界面传递到前端页面，这就是我们使用模板引擎的原因。

　　app.engine('html', require('express-art-template'));app.set('view options', { debug: process.env.NODE_ENV !== 'production'});app.set('views', path.join(__dirname, 'views'));app.set('view engine', 'html');app.get('/', (req, res) => { let data = { user:{ id:1, name: "Jack", age:18, job: "coder" }, books:["《西游记》", "《三国演义》","《红楼梦》", "《水浒传》"], num1:20, num2:30 } res.render('index', data); // 把data数据传入到index.html页面中。});

　　在视图下的 index.html 中：

　　 这是首页 {{ user.id }} {{ user.name }} {{ user.age }} {{ user['age'] }} {{each books}} {{$index}}、{{$value}} {{/each}} <p>num1和num2中比较大的那个数是： {{num1>num2?num1:num2}} {{ if user.name === "Jacka"}}

　　{{ user.name }}的年龄是{{ user.age }} {{/if}}

</p>

　　类似的模板引擎和ejs模板引擎

　　十、在项目中使用路由

　　在项目中，我们不会直接在项目入口文件中编写路由接口。

　　我们提取第 6 节中的路由，在项目文件夹下新建一个 routes 文件夹，并新建一个 passport.js：

　　// 抽取路由const express = require('express');const router = express.Router();const fs = require("fs");const path = require("path");router.get('/login', (req, res) => { //读取页面内容，并返回这个页面 let pathName = path.join(__dirname, '../views', "login.html"); const loginPage = fs.readFileSync(pathName, "utf-8"); res.send(loginPage);});router.all('/register',(req, res) => { let method = req.method if(method==='GET'){ //读取页面内容，并返回这个页面 let pathName = path.join(__dirname, '../views', "register.html"); const regPage = fs.readFileSync(pathName, "utf-8"); res.send(regPage); }else if(method==='POST'){ console.log(req.body.username); // 一般注册成功之后可以跳转到登录页面，这就是重定向 res.redirect('/login'); } })module.exports = router

　　在项目入口文件 app.js 中：

　　const express = require('express');const app = express();// 1、引入对应的路由模块const passportRouters = require('./routes/passport');var bodyParser = require('body-parser')app.use(bodyParser.urlencoded({ extended: false }))app.use(bodyParser.json())// 2、书写的路由添加到app上app.use(passportRouters)app.listen(3000, () => { console.log('Example app listening on port 3000!')});

　　处理请求前的十个一、钩子函数

　　这里先了解一下这个功能，以后在项目中使用。

　　如果你想在执行处理请求的函数之前执行一些代码，比如验证你是否登录的工作。

　　你可以在 app.use(utils.checkLogin, routers); 之前添加一个函数

　　创建一个新的 utils 文件夹并创建一个新的 index.js 文件：

　　function checkLogin(req, res, next){ console.log("执行接口代码之前会执行这里的代码"); next(); //直接跳入请求的接口执行代码}module.exports = { checkLogin}

　　在项目入口函数app.js中：

　　// 项目中使用路由const express = require('express');const app = express();// 1、引入对应工具模块const utils = require('./utils/index.js');const passportRouters = require('./routes/passport');var bodyParser = require('body-parser')app.use(bodyParser.urlencoded({ extended: false }))app.use(bodyParser.json())// 2、补上执行接口函数之前所执行的函数app.use(utils.checkLogin, passportRouters)app.listen(3000, () => { console.log('Example app listening on port 3000!')});

　　作用：在执行路由器下的各个接口之前，都会执行checkLogin函数中的代码。

　　应用程序：这可用于稍后在项目中进行身份验证和登录。

　　标签：req,art,Nodejs,--,res,app,express,const,page