Node学习笔记结合核心模块url实现评论提交

Node.js 核心方法 url

url 模块用于处理与解析 URL

使用方法如下：

const url = require('url');

本实例用到的核心模块方法有 url.parse、.pathname、``.query`

url.parse(urlStr[, parseQueryString[, slashesDenoteHost]])

将一个 URL 字符串转换成对象并返回

urlStr // url字符串
parseQueryString // 为true时将使用查询模块分析查询字符串，默认为false
slashesDenoteHost // 默认为 false

url.pathname

获取及设置 URL 的路径部分

url.query

获取 URL 参数部分（?后部分）

实例（假设页面请求地址为/url?name=sfatpaper&data=20191129）：

var http = require('http')
var url = require('url')
http.createServer((req, res) => {
    var parseObj = url.parse(req.url, true) // 使用 url.parse 方法获取请求 url 的对象
    var pathName = parseObj.pathname // /url
    var pathQuery = parseObj.query // {name: sfatpaper, data: 20191129}
    
    // 此时若 url.parse(req.url) 第二个参数为默认 false，则
    // var pathQuery = parseObj.query // name=sfatpaper&data=20191129
})

结合之前的内容实现评论渲染以及动态追加评论的实例，解析如下：

创建静态页面

index.html，用于渲染数据列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
        <a href="">发表留言</a>
		<table>
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>内容</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
			</tbody>
        </table>
	</body>
</html>

comment.html，用于提交评论数据

<form action="" method="get">
	<div>
        <label for="input_name">你的大名</label>
		<input class="input_name" type="text" required minlength="2" maxlength="10" name="name" placeholder="请写入你的姓名">
    </div>
	<div>
    	<textarea name="message" required></textarea>
    </div>
	<button type="submit">发表</button>
</form>

创建 Node 脚本文件 app.js

将默认数据渲染到首页

// app.js
var comments = [{ // 默认评论列表数据
    name: '张三',
    content: '内容01'
}, {
    name: '张三',
    content: '内容01'
}]

var fs = require('fs') // 引入核心文件操作 fs 模块
var template = require('art-template') // 引入模版引擎

fs.readFile('./index.html', (err, data) => { // 读取静态模板文件
	if (err) {
	//	return res.end('404')
	}
	var returnComments = template.render(data.toString(), { // 通过模版引擎将数据响应到页面上
		comments: comments
	})
	res.end(returnComments)
})

<!-- index.html -->
<tbody>
    {{ each comments }}
	<tr>
		<td>{{ $value.name }}</td>
		<td>{{ $value.content }}</td>
	</tr>
    {{ /each }}
</tbody>

创建路有规则

// app.js
var http = require('http') // 引入核心 http 模块
var url = require('url') // 引入核心 url 模块

http
	.createServer((req, res) => { // 创建 server 服务器
    	var parseObj = url.parse(req.url, true) // 获取当前请求的 url 对象
        var pathUrl = parseObj.pathname // 获取当前请求路径（查询参数前的部分）
        
        if (pathUrl === '/') { // 设置首页路由
            // 返回首页响应
        } else (pathUrl === '/comment') {
            // 返回评论页响应
        } else if (pathName === '/push') { // 设置评论接口
            console.log('表单数据提交')
        } else {
            res.end('404')
        }
	})
	.listen(2828, () => { // 服务器绑定端口号
		console.log('服务器启动成功')
	})

<!-- index.html -->
<a href="/comment">发表留言</a>

<!-- comment.html -->
<form action="/push" method="get">

注意，本实例提交方式为 GET

提交表单数据并将页面重定向回首页

这里需要追加两个核心组件 http 中的方法

response.statusCode 默认值: 200，此属性控制在刷新响应头时将发送到客户端的状态码
response.setHeader 若使用重定向，请求头的值应为 response.setHeader('Location', '/')

var http = require('http') // 引入核心 http 模块
var url = require('url') // 引入核心 url 模块

http
	.createServer((req, res) => { // 创建 server 服务器
    	var parseObj = url.parse(req.url, true) // 获取当前请求的 url 对象
        var pathUrl = parseObj.pathname // 获取当前请求路径（查询参数前的部分）
        
        if (pathName === '/push') { // 设置评论接口
            // 通过 parseObj.query 获取请求路径查询参数部分
            comments.push({ // 将数据追加到 comments 数据中
                name: parseObj.query.name,
                message: parseObj.query.content
            })
            // 重定向
            res.statusCode = 302
            res.setHeader('Location', '/')
        }
	})

本实例添加的评论数据非永久数据

实例完整的 app.js 代码如下：

// app.js
var comments = [{ // 默认评论列表数据
    name: '张三',
    content: '内容01'
}, {
    name: '张三',
    content: '内容01'
}]

var fs = require('fs') // 引入核心文件操作 fs 模块
var http = require('http') // 引入核心 http 模块
var url = require('url') // 引入核心 url 模块
var template = require('art-template') // 引入模版引擎

http
	.createServer((req, res) => { // 创建 server 服务器
    	var parseObj = url.parse(req.url, true) // 获取当前请求的 url 对象
        var pathUrl = parseObj.pathname // 获取当前请求路径（查询参数前的部分）
        
        if (pathUrl === '/') { // 设置首页路由
            // 返回首页响应
            fs.readFile('./index.html', (err, data) => { // 读取静态模板文件
                if (err) {
                	return res.end('静态首页模板读取失败')
                }
                var returnComments = template.render(data.toString(), { // 通过模版引擎将数据响应到页面上
                    comments: comments
                })
                res.end(returnComments)
            })
        } else (pathUrl === '/comment') {
            // 返回评论页响应
            fs.readFile('./comment.html', (err, data) => {
                if (err) {
                	return res.end('静态评论页模板读取失败')
                }
                res.end(data)
        	})
        } else if (pathName === '/push') { // 设置评论接口
            // 通过 parseObj.query 获取请求路径查询参数部分
            comments.push({ // 将数据追加到 comments 数据中
                name: parseObj.query.name,
                message: parseObj.query.content
            })
            // 重定向
            res.statusCode = 302
            res.setHeader('Location', '/')
        } else {
            res.end('404')
        }
	})

文章已同步我的个人博客：《Node学习笔记结合核心模块url实现评论提交》

资料参考：

来源：oschina

链接：https://my.oschina.net/sfatpaper/blog/3138761

标签

artTemplate