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实现评论提交》
相关文章：
资料参考：