留言板(Nodejs)
一、知识点
①nodejs实际开发中，通常把所有的HTML文件放到views目录中
②nodejs实际开发中，通常把所有的静态资源文件放到public目录中，方便统一处理
- 当浏览器收到HTML响应内容之后，会从上到下依次解析，解析过程中当发现link、script、img、iframe、video、audio等带有src或者href（link）属性标签的时候，会自动对这些资源发起新的请求，这些资源就是静态资源
- 把所有的静态资源放到统一的目录中，可以灵活的控制文件是否能被用户访问
- 但是需要注意的是，客户端里的请求路径需要改成 /public/xxx 的形式，其中 / 就是url的根路径
③表单提交的数据处理需要使用nodejs的url模块，其中url.parse（‘地址’，true）可以将路径解析成为一个方便操作的对象
var url=require('url');
var path='/say?name=乔峰&message=降龙十八掌';
var obj=url.parse(path,true);
console.log(obj);
console.log(obj.pathname);
console.log(obj.query);
④通过服务器让客户端重定位，需要两个步骤，第一个是状态码（statusCode）设置为302（302是临时重定向，浏览器没有记忆功能），第二个是在响应头（setHeader）中通过Location重定向
二、功能实现
①项目目录
②HTML文件
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
<link rel="stylesheet" href="/public/lib/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<div class="header container">
<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>留言板</title>
<link rel="stylesheet" href="/public/lib/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<div class="header container">
<div class="page-header">
<h1><a href="/" >留言板 <small>添加留言</small></a></h1>
</div>
</div>
<div class="comments container">
<form action="/say" method="GET">
<div class="form-group">
<label for="name">你的大名</label>
<input type="text" id="name" name="name" class="form-control" placeholder="请输入姓名" required minlength="2" maxlength="10">
</div>
<div class="form-group">
<label for="message">留言内容</label>
<textarea id="message" name="message" class="form-control" placeholder="请输入留言内容" 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>404</title>
</head>
<body>
<h1>抱歉,您访问的页面失联了....</h1>
</body>
</html>
③app.js文件
//加载模块
var http=require('http');
var fs=require('fs');
var url=require('url');
var temlate=require('art-template');
// 模拟首页留言列表数据
var comments=[
{name:"赵一",message:"你用什么编辑器？",datetime:"2018-1-1"},
{name:"孙二",message:"今天天气真好",datetime:"2018-1-1"},
{name:"张三",message:"飞流直下三千只",datetime:"2018-1-1"},
{name:"李四",message:"哈哈哈哈哈",datetime:"2018-1-1"},
{name:"王五",message:"楼上是傻逼",datetime:"2018-1-1"}
]
//创建web服务
var server=http.createServer();
server.on('request',function(request,response){
/* var url=request.url; 把路径解析成一个对象*/
var parseObj=url.parse(request.url,true);
var pathname=parseObj.pathname;
//请求路径不同,返回不同的数据
if(pathname==='/'){
// 请求路径是根目录,即请求留言列表页
fs.readFile('./views/index.html',function(err,data){
if(err){
return response.end('404 Not Found');
}
var htmlStr=temlate.render(data.toString(),{
comments:comments
});
response.end(htmlStr);
});
}else if(pathname==='/post'){
//请求路径是 /post 即跳转至添加留言页面
fs.readFile('./views/post.html',function(err,data){
if(err){
return response.end('404 Not Found')
}
response.end(data);
});
}else if(pathname.indexOf('/public/')===0){
//请求路径是以 /public/ 开头,即请求静态资源的文件
fs.readFile('.'+pathname,function(err,data){
if(err){
return response.end('404 Not Found');
}
response.end(data);
});
}else if(pathname==='/say'){
//请求路径是 /say 即表单提交
var comment=parseObj.query;
comment.datetime='2018-2-10';
comments.unshift(comment);
//重定向,跳转回首页
response.statusCode=302;
response.setHeader('Location','/');
response.end();
} else{
//请求路径为其他都设置404
fs.readFile('./views/404.html',function(err,data){
if(err){
return response.end('404 Not Found');
}
response.end(data);
});
}
});
//创建监听对象
server.listen(3000,function(){
console.log('Server is running...')
})
④效果演示
留言板(Nodejs)的更多相关文章
- nodejs中利用expresss脚手架和bootstrap,数据库mongodb搭建的留言板案例
## 1. 先打开编辑器,创建一个项目 ## 2. 再打开cmd命令提示符下载express脚手架 express 项目名 --view=ejs 或express -e 项目名 ## ...
- AngularJs学习笔记（制作留言板）
原文地址:http://www.jmingzi.cn/?post=13 初学Anjularjs两天了,一边学一边写的留言板,只有一级回复嵌套.演示地址 这里总结一下学习的过程和笔记.另外,看看这篇文章 ...
- dd——留言板再加验证码功能
1.找到后台-核心-频道模型-自定义表单 2.然后点击增加新的自定义表单 diyid 这个,不管他,默认就好 自定义表单名称 这个的话,比如你要加个留言板还是投诉建议?写上去呗 数据表 这个不要碰, ...
- asp.net留言板项目源代码下载
HoverTree是一个asp.net开源项目,实现了留言板功能. 前台体验网址:http://hovertree.com/guestbook/ 后台请下载源代码安装. 默认用户名:keleyi 默认 ...
- html的留言板制作（js）
这次留言板运用到了最基础的localstorage的本地存储,展现的效果主要有: 1.编写留言2.留言前可以编辑自己的留言昵称.不足之处: 1.未能做出我喜欢的类似于网易的叠楼功能. 2.未能显示评论 ...
- 11月8日PHP练习《留言板》
一.要求 二.示例页面 三.网页代码及网页显示 1.denglu.php 登录页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
- [课程设计]Scrum 3.7 多鱼点餐系统开发进度（留言板选择方案）
Scrum 3.7 多鱼点餐系统开发进度(留言板选择方案) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店点餐系统W ...
- [课程设计]Scrum 3.6 多鱼点餐系统开发进度（用户测试反馈页面构思&留言板设计）
Scrum 3.6 多鱼点餐系统开发进度(用户测试反馈页面构思&留言板设计) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团 ...
- 用 Express4 写一个简单的留言板
Knowledge Dependence:阅读文本前,你需要熟悉 Node.js 编程.Express 以及相关工具和常用中间件的使用. Node.js 以其单线程异步非阻塞的特点,越来越被广大的 W ...
随机推荐
- 【Maven基础入门】01 Maven的安装与环境变量的配置
写在前面: Mavne,作为一个优秀的项目构建工具,虽说我们平时在使用的时候或多或少的会使用到它,但了解仅限于它能构建项目,然后其他的就不知道了. 以及仓库.POM父类文件.等等. 工欲善其事,必先利 ...
- Ambari深入学习（III）－开源使用及其改进思考
Ambari采用的不是一个新的思想和架构,也不是完成了软件的新的革命,而是充分利用了一些已有的优秀开源软件,巧妙地把它们结合起来,使其在分布式环境中做到了集群式服务管理能力.监控能力.展示能力.这些优 ...
- 自学Python编程的第三天----------来自苦逼的转行人
2019-09-14 11:09:50 学Python的第三天和写博客的第三天 本来第三天的内容前天就应该发的,但是因为有点难度,用了两天的时间去学习,按道也是昨天发, 因为中秋导致今天早上发,第三天 ...
- css，对包含有子元素的元素进行flex后，会影响原有的布局。如何后续处理
对包含有子元素的元素进行flex后,会影响原有的布局. 例如设置两个div,第一个div包含一个img(图片),第二个div包含多个p元素(对前面的img的说明).如下图 1:当对着两个两个div进行 ...
- 为什么在定义hashcode时要使用31这个数呢？
散列计算就是计算元素应该放在数组的哪个元素里.准确的说是放到哪个链表里面.按照Java的规则,如果你要想将一个对象放入HashMap中,你的对象的类必须提供hashcode方法,返回一个整数值. ht ...
- Linux添加硬盘创建新的逻辑卷方式
有同仁看了上文<Linux添加硬盘扩充已有分区存储空间方式>一文后,提出疑问,现在很多云服务器本来没有逻辑卷,添加数据盘后需要自行添加,如何处理? 此文将以某云服务器为例,详细进行解说. ...
- Node.js 入门到干活，10 个优质项目就够了！
Node.js 在很多大公司都有不错的实践,比如:淘宝.天猫 Web 版,很多页面都是在 Node 服务器上渲染的.还有各种脚手架.前端打包发布工具.构建生态的小工具,也基本都是 Node.js 编写 ...
- X.509_2
参考:你了解HTTPS,但你可能不了解X.509 地址:http://www.imooc.com/article/288067?block_id=tuijian_wz 参考:X.509证书的解析.验证 ...
- 如何为SUSE配置IP地址，网关和DNS
方法一.在命令行中配置.输入: ifconfig eht0 9.111.66.96 netmask 255.255.255.0 up route add default gw 9.111.66.1 方 ...
- Visual Studio Code 写Python代码
之前用nodepad++,sublime text3,ultraedit,最近上手微软的vsc感觉上手还行,如果没有pycharm照样可以使用它 https://code.visualstudio.c ...