nodeJs留言板 实现

1.两个页面 ①首页 ② 输入留言内容页面
如图:
首页进入

在这里插入图片描述

功能实现:
1.点击‘ 发表留言按钮’ 跳转至 post.html页面输入信息。
2.在post.html页面中,点击 首页 会重新跳回 index.html(注意路径),点击 ‘确认发表’ 会在默认的留言列表中新增,并且跳回首页。

涉及知识点:
1.服务器构建。核心模块 http引入、端口设置
2.url核心模块: 页面的跳转是通过对url地址解析,/ 为首页,也即index.html
3.fs核心模块:解析页面 是通过fs文件读取。
3.页面呈现:通过bootstrap,图片css样式js等外部静态资源在文件读取的时候需要进行判断。
4.留言填写成功并确认发布将新留言对象添加至留言列表的时候,需要对响应重新定位 res.statusCode = 302 res.setHeader(‘Location’,’/’)

注意:
1.与以往页面打开不同。我们通过nodeJs 命令语句 node ,执行js文件。
2.两个html页面之间有数据交互(根据数据提交的方式,我们这里是对url解析获得数据)。post页面新增的留言需要保存到index页面中呈现。在post页面中通过简单的表单提交给 comments页面(这里使用了get上传方式,输入内容会跟在url后面通过?连接,NodeJS中有特定模块处理url,即url核心模块)
3.在非NodeJS的情况下,两个html页面通过a锚点进行切换是没有问题的。在NodeJS环境下,需要对url地址进行监听解析,一一判断:
4.在 新的留言发表界面 使用了表单提交,选择提交方式为“get” ,所以提交的数据是跟在url后面的。在这里我们要对 url进行剪切。使用核心模块 url的方法 url.parse(url) (涉及到中文的增加一个参数 url.parse(url,true) ) url.parse(url,true).pathname 是纯路径 不带数据的,url.parse(url,true).query则获取到get提交的数据,且是对象格式。 这里只要push进默认的留言数据组就可以了。
5. 在新的留言push进之后,需要再将页面跳回到留言表首页。 这里我们使用重定向。statusCode 为301 是临时重定向值 setHeader(‘Location’,’/’) 回到主页。

if(tempUrl ==='/'){
            fs.readFile('./index.html',function(err,data){
         		........
                res.end(data)
        }) 
        }else if(tempUrl ==='/post.html'){
            fs.readFile('./views/post.html',function(err,data){
            res.end(data)
        })   
    }

4.调用了引擎模块,art-template,在nodeJs 中用法与script中不一样,通过获取template.render()的返回值,解析在页面上。
具体用法:

var temp = template.render(data.toString(),{
           		 comments		
         	})
res.end(temp)
  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用Node.js实现留言板功能,你可以按照以下步骤进行操作: 1. 创建一个index.html文件,用于显示留言板界面。 2. 在public目录中创建静态资源文件,用于处理用户的请求。当请求/public/xxx时,可以使用相应的处理函数来处理请求。 3. 使用引擎模块art-template来渲染页面。可以通过template.render()方法来解析页面,并获取返回的HTML字符串。 4. 使用POST请求来处理留言信息。在Express中,可以使用第三方包body-parser来解析表单POST请求体。需要先安装body-parser模块,然后使用app.use()来配置body-parser中间件,以解析请求体。然后通过app.post()来处理POST请求,并在回调函数中获取请求体的内容。 下面是一个示例代码: ```javascript // index.html <html> <head> <title>留言板</title> </head> <body> <h1>留言板</h1> <form action="/post" method="post"> <label>姓名:</label> <input type="text" name="name"><br> <label>留言内容:</label> <textarea name="message"></textarea><br> <button type="submit">提交</button> </form> <div id="comments"> <!-- 这里会使用模板引擎来渲染留言内容 --> </div> </body> </html> // server.js const express = require('express'); const template = require('art-template'); const bodyParser = require('body-parser'); const app = express(); const port = 3000; // 配置 body-parser 中间件 app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); }); app.post('/post', (req, res) => { // 处理表单提交的留言信息 const name = req.body.name; const message = req.body.message; const date = new Date().toLocaleDateString(); // 这里使用模板引擎来渲染留言内容 const comments = [{ name: name, message: message, date: date }]; const html = template.render(__dirname + '/index.html', { comments }); res.send(html); }); app.listen(port, function (error) { if (error) return console.log('error!'); console.log('running....'); }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值