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 相关文章推荐
Prototype使用指南之range.js
Jan 10 Javascript
JavaScript 面向对象编程(2) 定义类
May 18 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
Dec 26 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
js获取微信版本号的方法
May 12 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
input框中的name和id的区别
Nov 16 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
vue使用axios时关于this的指向问题详解
Dec 22 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 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
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
WordPress判断用户是否登录的代码
2011/03/17 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
php生成word并下载代码实例
2019/03/15 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
调试php程序的简单步骤
2019/10/04 PHP
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
python 读写中文json的实例详解
2017/10/29 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
Internal修饰符有什么含义
2013/07/10 面试题
Linux如何压缩可执行文件
2014/03/27 面试题
医学毕业生自我鉴定
2013/10/30 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
go开发alertmanger实现钉钉报警
2021/07/16 Golang
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技