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 相关文章推荐
Array.prototype.slice 使用扩展
Jun 09 Javascript
JavaScript学习历程和心得小结
Aug 16 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
微信小程序 如何保持登录状态
Aug 16 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
微信小程序中显示倒计时代码实例
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
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
php根据年月获取季度的方法
2014/03/31 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
JavaScript 学习笔记(十五)
2010/01/28 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
JS获取时间的方法
2015/01/21 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
Python Pillow Image Invert
2019/01/22 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
毕业生在校学习的自我评价分享
2013/10/08 职场文书
环境科学专业个人求职的自我评价
2013/11/28 职场文书
网络工程师自荐书范文
2014/04/01 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
见习报告的格式
2014/10/31 职场文书
幼儿园教师考核评语
2014/12/31 职场文书