node.js如何实现留言板功能？

作者：繁依Fanyi0 | 2024-04-23 13:32:48

踩

node.js如何实现留言板功能？

一、实现效果如下：

20240422_160404

二、前提配置：

配置：需要安装并且导入underscore模板引擎

安装：在控制台输入npm install underscore -save

文件目录配置：

1》在文件里建一个data文件夹，此文件夹下建一个conmments.json文件，专门用来存放留言数据

2》将页面的css样式全写入public文件夹下的bootstrap下的bootstrap.css文件下

3》建一个view文件夹专门用来存放我的静态html页面。此案例中我有一个index.html留言展示主页和post.html发表留言表单页

4》我将运行代码写在app.js里

三、代码实现：

3-1》知识补充

get请求处理方法有：

（1）querystring.parse（req.url.query)

（2）url.parse（req.url，true）第二个参数true，直接将查询字符串转化为了对象

3-2》index.html首页代码如下：


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../public/bootstrap/bootstrap.css">
</head>
 
<body>
    <div class="header container">
        <div class="header">
            <h1>留言本<small>谢谢你的留言</small></h1>
            <a href="/post" class="btn">发表留言</a>
        </div>
        <hr>
    </div>
 
    <div class="middle-container">
        <ul class="middle-ul">
            <% for(item of comments){ %>
                <li>
                    <%= item.name%>说:<%= item.message%>
                            <span class="floatright">
                                <%= item.dataTime%>
                            </span>
                </li>
                <% } %>
        </ul>
    </div>
</body>
 
</html>

post.html 发表留言表单如下：


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言页</title>
</head>
 
<body>
    <div class="header container">
        <div class="header">
            <h1><a href="/">留言</a><small>发表评论</small></h1>
        </div>
        <hr>
    </div>
    <div>
        <form action="/a" method="get">
        <!-- action提交的路径、method提交的方法 -->
        <p style="font-size: large;">你的大名</p>
        <input type="text" name="name">
        <p style="font-size: large;">留言内容</p>
        <textarea name="message" id="" cols="30" rows="10">
</textarea>
        <br>
        <button type="submit">发表</button>
    </form>
    </div>
</body>
 
</html>

3-4》data下的comment.json储存数据页如图：


{
    "comments": [
        {
            "name": "555",
            "message": "5555",
            "dataTime": "2024/4/22 16:04:15"
        },
        {
            "name": "小一",
            "message": "我是小一",
            "dataTime": "2024/4/19 15:54:43"
        },
        {
            "name": "小米",
            "message": "我爱node",
            "dataTime": "2024/4/16 下午9:11:32"
        }
      ]
}

3-5》app.js运行代码如下：


//一、引入http、fs、path、url内置模块
const http = require('http');
const fs = require('fs');
const path = require('path');
const url = require('url');
//二、导入underscore渲染模板
const _ = require('underscore');
//三、声明一个变量comments，用来存放留言数据
var comments;
//四、异步读取文件，读取user.json存放用户数据的文件
fs.readFile(path.join(__dirname, 'data/comments.json'), (err, data) => {
    if (err) {//错误处理
        comments = {};
    } else {//如果读取正确就将读到的内容转换为一个对象存到comments里
        comments = JSON.parse(data.toString());
    }
})
//五、创建服务器
const server = http.createServer();
//六、服务器做出请求响应
server.on('request', (req, res) => {
    let urls = url.parse(req.url, true);  //解析get请求法二:第二个参数true,直接将查询字符串转为对象
    let pathname = urls.pathname;
//七、利用if分支对不同的pathname做不同处理
    if (pathname == '/') { //展示留言首页 index.html
        fs.readFile(path.join(__dirname, 'view/index.html'), (err, data) => {
            if (err) { //错误处理
                res.writeHead(404, { 'Content-Type': 'text/html;charset=utf-8' });
                res.end('访问的资源不存在')
            } else {
                //使用underscore渲染模板
                let complied = _.template(data.toString());
                let html = complied(comments);
                res.end(html);
            }
        })
        //请求静态资源进行处理 此处就是我的图片资源  startsWith方法，以什么开头
    } else if (pathname.startsWith('/public')) {
        fs.readFile(path.join(__dirname, pathname), (err, data) => {
            if (err) {
                res.writeHead(404, { 'Content-Type': 'text/html;charset=utf-8' });
                res.end('访问的资源不存在')
            } else {
                // 资源存在则写入json文件
                fs.writeFile(path.join(__dirname, 'data/comments.json'), JSON.stringify(comments), (err) => {
                    if (err) {
                        res.end('写入失败');
                    } else {
                        res.end(data);
                    }
                })
            }
        })
//八、对post.html表单的留言进行读取和处理
        //点击发表留言按钮进入发表留言页面。发表留言按钮的href为/post
    } else if (pathname == '/post') { //读取留言
        fs.readFile(path.join(__dirname, 'view/post.html'), (err, data) => {
            if (err) {
                res.writeHead(404, { 'Content-Type': 'text/html;charset=utf-8' });
                res.end('访问的资源不存在')
            } else {
                res.end(data);
            }
        })
        //form表单的action为'/a'
    } else if (pathname == '/a') { //处理留言
       //将url查询字符串解析结果urls.query赋值给自定义变量postcomments
        var postcomments = urls.query; 
        var data = new Date();
        // 调用Date对象的toLocaleString方法，将当前的日期和时间转换为一个本地化的字符串格式，并将其赋给变量now。
        var now = data.toLocaleString();
        // 给postcomments添加dataTime属性，并且将now变量的值添加到postcomments对象中
        postcomments.dataTime = now;
        // 将一个名为comments的对象中的comments数组的第一个位置插入postcomments对象。
        comments.comments.unshift(postcomments);
        // 重新发送请求
        // 状态码设置为302，临时重定向
        res.statusCode = 302;
        // 设置HTTP响应头中的Location字段为/，表示服务器希望浏览器重定向到网站的根URL。
        res.setHeader('Location', '/')
        res.end()
 
    }
});
//九、启动监听
server.listen(3000, '127.0.0.1', () => {
    console.log('http://127.0.0.1:3000');
})

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/474126