三、案例：留言板 url.parse()

1. url.parse()的使用

2. 留言板案例

index.html:

<!DOCTYPE html>
<!-- saved from url=(0027)http://192.168.150.76:3000/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>留言本</title><!-- 浏览器收到 HTML 响应内容之后，就要开始从上到下依次解析，当在解析的过程中，如果发现：linkscriptimgiframevideoaudio等带有 src 或者 href（link） 属性标签（具有外链的资源）的时候，浏览器会自动对这些资源发起新的请求。--><!-- 注意：在服务端中，文件中的路径就不要去写相对路径了。因为这个时候所有的资源都是通过 url 标识来获取的我的服务器开放了 /public/ 目录所以这里的请求路径都写成：/public/xxx/ 在这里就是 url 根路径的意思。浏览器在真正发请求的时候会最终把 http://127.0.0.1:3000 拼上不要再想文件路径了，把所有的路径都想象成 url 地址--><link rel="stylesheet" href="/public/lib/bootstrap-4.6.0-dist/css/bootstrap.css"><link rel="stylesheet" href="/public/css/main.css"></head><body><div class="header container"><!-- <img src="/public/img/ab3.jpg" alt=""> --><div class="page-header"><h1>首页 <small>发表评论</small></h1><a class="btn btn-success" href="/post">发表留言</a></div></div><div class="comments container"><ul class="list-group">{{each comments}}<li class="list-group-item">{{$value.name}}说{{$value.message}}<span class="pull-right">{{$value.dateTime}}</span></li>{{/each}}</ul></div></body></html>

post.html:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="/public/lib/bootstrap-4.6.0-dist/css/bootstrap.css"></head><body><div class="header container"><div class="page-header"><h1><a href="/">首页</a> <small>发表评论</small></h1></div></div><div class="comments container"><!-- 以前表单是如何提交的？表单中需要提交的表单控件元素必须具有 name 属性表单提交分为：1. 默认的提交行为2. 表单异步提交action 就是表单提交的地址，说白了就是请求的 url 地址method 请求方法getpost--><form action="/pinglun" method="get"><div class="form-group"><label for="input_name">你的大名</label><input type="text" class="form-control" required minlength="2" maxlength="10" id="input_name" name="name" placeholder="请写入你的姓名"></div><div class="form-group"><label for="textarea_message">留言内容</label><textarea class="form-control" name="message" id="textarea_message" cols="30" rows="10" required minlength="5" maxlength="20"></textarea></div><button type="submit" class="btn btn-default">发表</button></form></div>
</body></html>

404.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>抱歉!  您访问的页面失联啦...</h1>
</body>
</html>

app.js:

var http = require('http')
var fs = require('fs')
var template = require('art-template')
var url = require('url')var comments = [{name: 'zep',message: '今天天气真不错',dateTime: '2021.3.23'},{name: 'zep1',message: '今天天气真不错',dateTime: '2021.3.23'},{name: 'zep2',message: '今天天气真不错',dateTime: '2021.3.23'},{name: 'zep3',message: '今天天气真不错',dateTime: '2021.3.23'},{name: 'zep4',message: '今天天气真不错',dateTime: '2021.3.23'}
]http.createServer(function(req, res) {// 使用url.parse方法将路径解析为一个方便的操作的对象，// 第二个参数为true表示直接将查询字符串转为一个对象（通过query属性访问）var parseObj = url.parse(req.url, true)// 单独获取不包含查询字符串的路径部分（该路径不包含？之后的内容）var pathname = parseObj.pathnameif (pathname === '/') {fs.readFile('./views/index.html', function(err, data) {if (err) {return res.end('404 Not Found.')}var htmlStr = template.render(data.toString(), {comments: comments})res.end(htmlStr)});} else if (pathname === '/post') {fs.readFile('./views/post.html', function(err, data) {if (err) {return res.end('404 Not Found.')}res.end(data)})} else if (pathname.indexOf('/public') === 0) {// 统一处理：//     如果请求路径是以/public开头的，则我认为你要获取public中的某个资源//     所以直接可以把请求路径当作文件路径来直接进行读写fs.readFile('.' + pathname, function(err, data) {if (err) {return res.end('404 Not Found.')}res.end(data)})// console.log(url)}else if (pathname === '/pinglun') {// 注意：这个时候无论 /pinglun?xxx之后是什么，我都不用担心了，因为我的pathname是不包含？之后的// 路径的console.log('收到表单请求了',parseObj.query)// 一次请求对应一次响应，响应结束，这次请求也就结束了，所以下面不能使用res.end()// res.end(JSON.stringify(parseObj.query))  // JSON.stringify() 将对象转换为字符串// 我们使用url模块的parse方法把请求路径中的字符串给解析成一个对象// 所以接下来要做的是：//   1. 获取表单提交的数据 parseObj.query//   2. 将当前时间日期添加到数据对象中,然后存储到数组中//   3. 让用户重定向跳转到首页 ///       当用户重新请求 /  的时候，我数组中的数据已经发生变化了，所以用户看到的页面也就发生变化了var comment = parseObj.querycomment.dateTime = '2021-03-22 23:10:15'comments.unshift(comment)// 服务端这个时候已经把数据存储好了，接下来就是让用户重新请求 / ，就能让用户看到最新的留言了// 如何通过服务器，让客户端重定向？//    1.状态码设置位302临时重定向//       statusCode//  2.在响应头中通过Location告诉客户端往哪儿重定向//      setHeader// 如果客户端发现收到服务器的响应的状态码是 302 就会自动去响应头中招Location，//  然后对该地址发起新的请求，所以你就能看到客户端自动跳转了res.statusCode = 302res.setHeader('Location', '/')res.end()}else {// 其他请求路径都处理成404fs.readFile('./views/404.html', function(err, data) {if (err) {return res.end('404 Not Found.')}res.end(data)})}}).listen(3000, function() {console.log('Server run...')
})

三、案例：留言板 url.parse()相关推荐

Vue实战篇二十九：模拟一个简易留言板
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
java 留言板源码,JSP留言板的JSP源码操作实施
JSP留言板的JSP源码操作实施很多JSP编程的爱好者都是出于要做网站的目的,那么网站的PR值就很重要网站的PR值全称为PageRank),是google搜索排名算法中的一个组成部分,级别从1到10 ...
留言板（php+数据库）
简介:此项目是运用了php+mysql+h5+css,项目环境运用了phpstudy.开发工具用了phpstrom.打开mysql把数据库复制件去,打开phpstudy环境,再把项目拖进phpstud ...
php基础知识点及留言板功能实现
文章目录: 一.php基础知识二.留言板功能实现三.留言板效果一 php基础知识 1.变量赋值时单引号与双引号的区别在给字符串变量赋值的时候使用单引号时在编译时并不会识别单引号中变量,而使用双 ...
node.js小案例_留言板
一.前言通过这个案例复习: 1.node.js中模板引擎的使用 2.node.js中的页面跳转和重定向二.主要内容 1.案列演示: 2.案列源码:https://github.com/456123 ...
【Nodejs】留言板案例
文章目录 1 统一处理服务器资源: 1.1 关于fs.readdir() 文件目录读取: 1.2 模板引擎: 1.2.1 在node中使用模板引擎: 1.2.2 each : 2 留言板: 2.1 实 ...
Python 爬取留言板留言（三）：多进程版+selenium模拟
文章目录一.项目概述二.项目实施 1.导入所需要的库 2.全局变量和参数配置 3.产生随机时间和用户代理 4.获取领导的fid 5.获取领导所有留言链接 6.获取留言详情 7.获取并保存领导所有留 ...
Nodejs留言板案例总结
1. 案例需求分析主页主页一开始呈现的是一部分用户的评论数据, 其中一条评论数据包含的信息有: 用户名, 用户评论内容,评论时间. 页面左上角有一个发表留言的按钮,用户点击按钮就会跳转到填写留 ...
互联网软件开发—— 实验三 JSP 内置对象（留言板）
实验名称: 实验三 JSP 内置对象一.实验目的 1.掌握表单提交及页面间参数传递的方法. 2.理解页面转发与重定向之间的区别. 3.掌握 request.session 和 application ...

三、案例：留言板 url.parse()

1. url.parse()的使用

2. 留言板案例

三、案例：留言板 url.parse()相关推荐

最新文章

热门文章