Node.js实现用户评论社区功能(体验前后端开发的乐趣)


Posted in Javascript onMay 09, 2019

前面

接着上一节的内容来,今天我们要完成一个用Node开发后台服务器,实现一个简单的用户评论社区。可以先看下效果图:

Node.js实现用户评论社区功能(体验前后端开发的乐趣)

Node.js实现用户评论社区功能(体验前后端开发的乐趣)

开始建立项目文件夹comment-list,在里面新建一个public文件夹,public文件夹存放我们允许客户端访问的资源,这里是公开的。app.js文件是我们服务端代码。

Node.js实现用户评论社区功能(体验前后端开发的乐趣)

index.html文件中放的是网站的首页内容,这里采用bootstrap框架快速搭建。可以先招一些假数据,以便页面渲染后看效果。核心代码:

<ul class="list-group comment-list">
 {{each comments}}
 <li class="list-group-item">{{$value.content}}<span class="time">{{$value.time}}</span> <span class="name">{{$value.name}}</span></li>
 {{/each}}
</ul>

这里采用js模板语法,等会会在服务端代码中将模板字符串渲染成真实数据。当用户访问网站根目录,服务端利用模板引擎解析渲染index.html,并且返回真实html字符串给浏览器解析。index.html会使用外链样式文件和外链脚本文件,切记这里的文件地址不能写相对路径,必须写url地址,看下面:

<link rel="stylesheet" href="/public/lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="/public/css/index.css">
....
<script src="/public/js/index.js"></script>

文件地址以/public/开头,这里的/表示请求的根路径,浏览器在发送请求的时候会自动替换成http://127.0.0.1:3000/

Node.js实现用户评论社区功能(体验前后端开发的乐趣)

404.html主要用来处理用户请求不存在的资源时,我们友情提示下即可。

post.html主要是发表评论页面,这里同样采用bootstrap快速搭建,同时也是要注意文件路径问题。这里是一个表单,用来收集用户评论的内容然后提交到后台处理。表单提交数据可以根据form标签中的action属性指定提交地址,当点击提交按钮数据会发送到指定地址,由服务端接收处理即可。核心代码如下:

<form action="/comment" method="GET" role="form" class="comment-form">
 <legend>开始评论</legend>
 <div class="form-group">
 <label for="name">你的大名:</label>
 <input type="text" name="name" class="form-control" id="name" placeholder="请输入你的大名" required maxlength="10" minlength="2">
 </div>
 <div class="form-group">
 <label for="content">评论内容:</label>
 <textarea name="content" id="content" class="form-control" rows="6" required minlength="5" maxlength="10"></textarea>
 </div>
 <button type

编写服务端代码app.js

app.js中引入了node中http服务构建核心模块,fs文件操作模块,urlurl地址解析模块。art-template第三方包主要用来服务端模板引擎,解析刚刚的index.html模板字符串。我们要注意url核心模块中的parse方法,它可以将一个含有查询字符串的url地址解析成一个对象,通过这个对象我们很容易得到用户表单提交过来的数据,即是查询字符串的具体内容。可以看以下演示:

Node.js实现用户评论社区功能(体验前后端开发的乐趣)

通过url.parse()传入第二个参数:true,可以将query查询字符串转换成对象,便于后续获取提交的数据。

这里我们还用到了服务端重定向的概念,当用户提交表单数据后,页面会跳转至/comment地址,需要在服务端请求处理函数中设置响应状态码:302,并且通过响应头location属性告诉浏览器重定向的地址。代码如下:

res.statusCode = 302  // 设置响应状态码为302(重定向)
res.setHeader('location', '/') // 设置响应头location,告诉浏览器重定向地址

app.js中核心代码如下:

http.createServer((req, res) => {
 let obj = url.parse(req.url, true) // 得到url模板解析后的Url对象,传入第二个参数“true”,将form表单提交的查询字符串query转换成对象
 let pathname = obj.pathname
 let query = obj.query
 if (pathname === '/') {
 fs.readFile('./public/views/index.html', (err, data) => {
  if (err) {
  return res.end('404 NOT FOUND')
  }
  let htmlStr = template.render(data.toString(), {
  comments: comments
  })
  res.end(htmlStr)
 })
 } else if (pathname.indexOf('/public/') === 0){
 fs.readFile('.'+pathname, (err, data) => {
  if (err) {
  return res.end('404 NOT FOUND')
  }
  res.end(data)
 })
 } else if (pathname ==='/post') {
 fs.readFile('./public/views/post.html', (err, data) => {
  if (err) {
  return res.end('404 NOT FOUND')
  }
  res.end(data)
 })
 } else if (pathname === '/comment') {
 res.statusCode = 302  // 设置响应状态码为302(重定向)
 res.setHeader('location', '/') // 设置响应头location,告诉浏览器重定向地址
 if (query.name) {
  query.time = '2015-5-10'
  comments.unshift(query)
 } // 放置用户手动输入'/comment',导致query为空
 res.end() // 结束响应,不能少
 } else {
 fs.readFile('./public/views/404.html', (err, data) => {
  if (err) {
  return res.end('404 NOT FOUND')
  }
  res.end(data)
 })
 } 
}).listen(3000, () => {
 console.log('running...')
})

开启服务器之后即可愉快的发表评论了

Node.js实现用户评论社区功能(体验前后端开发的乐趣)

完整代码可以看GitHub地址:这里

说明

本篇文章出至于我的从零到一学习Node.js课程资料,如果大家觉得对你有帮助的话不妨给个star,我也会一直持续不断的更新相关系列教程。

项目地址:GitHub

总结

以上所述是小编给大家介绍的Node.js实现用户评论社区功能(体验前后端开发的乐趣),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript 替换Html标签实现代码
Oct 14 Javascript
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
vue中实现回车键登录功能
Feb 19 Javascript
微信小程序中显示倒计时代码实例
May 09 #Javascript
微信小程序日历弹窗选择器代码实例
May 09 #Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 #Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 #Javascript
uni-app之APP和小程序微信授权方法
May 09 #Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 #Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 #Javascript
You might like
第六节 访问属性和方法 [6]
2006/10/09 PHP
第七节--类的静态成员
2006/11/16 PHP
php生成图形验证码几种方法小结
2013/08/15 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
jQuery标签替换函数replaceWith()的使用例子
2014/08/28 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
Python中关于字符串对象的一些基础知识
2015/04/08 Python
Python计算一个文件里字数的方法
2015/06/15 Python
python实现12306火车票查询器
2017/04/20 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
python ftplib模块使用代码实例
2019/12/31 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
法学毕业生自荐信
2013/11/13 职场文书
幼儿园门卫制度
2014/01/29 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
婚前协议书
2014/04/15 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书