Node.js留言板（超详细注释）

鱼丸子蛋汤

于 2024-04-14 18:47:22 发布

阅读量554

点赞数 3

分类专栏：前端项目文章标签： node.js

本文链接：https://blog.csdn.net/weixin_52841164/article/details/137751309

版权

前端项目专栏收录该内容

7 篇文章 0 订阅

订阅专栏

目录结构如下

app.js

// 一.引入模块
var http = require('http');// 用于创建 HTTP 服务器和处理 HTTP 请求
var fs = require('fs');// 用于读取和写入文件
var url = require('url');// 用于解析URL

// 创建留言数据对象
var msgs = [
    { name: '牛二', content: "我是妞儿", create_at: '2024-1-04 06:12' },
    { name: '张三', content: "我是张三", create_at: '2024-1-22 09:32' },
    { name: '里斯', content: "我是里斯", create_at: '2024-2-23 12:28' },
    { name: '王五', content: "我是王五", create_at: '2024-4-14 17:11' }
];

// 二.创建 HTTP 服务器实例
var server = http.createServer();

// 三.监听用户请求
server.on('request', function (req, res) {
    // 获取当前请求地址
    var currentUrl = req.url;
    //判断页面
    if (currentUrl == '/') {// 首页（fs模块）
        fs.readFile('./views/index.html', 'utf8', function (err, data) {
            if (err) {
                console.log(err);
                return;
            }
            // res.end(data);// data 是首页所有的 html 代码

            // 1.将上面的变量数据组装到html
            var html = '';
            msgs.forEach(function (item, index) {
                html += `
        <li class="list-group-item" style="display: flex; justify-content: space-between; align-items: center;">
            ${item.name}: ${item.content}
            <span >${item.create_at}</span>
            <button class="btn btn-danger btn-sm" onclick="deleteMessage(${index})">删除</button>
        </li>`;
            });

            // console.log(html);

            // 2.重点！！替换 data 的占位符
            var htmlData = data.replace('^_^', html);

            // 3.响应替换后的数据
            res.end(htmlData);// 结束响应，并向客户端发送最终的响应内容
        })

    } else if (currentUrl == '/add') {// 添加页
        fs.readFile('./views/add.html', 'utf8', function (err, data) {
            if (err) {
                console.log(err);
                return;
            }
            res.end(data);
        })

    } else if (currentUrl.indexOf('/doadd') === 0) {
        // get 提交 /doadd?name=xxx&content=xxx req.url 请求路径需用url模块

        var parsedUrl = new URL(req.url, 'http://localhost:8080');
        // 创建新的 URL 对象，解析 req.url 来获取客户端请求的 URL，如 /add
        // 'ht...80' 是基础 URL，用于解析相对 URL，从而得到完整的 URL 地址
        var paramsObj = parsedUrl.searchParams;// 从解析后的 URL 对象中获取查询参数

        // 格式化日期时间
        var date = new Date();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var hoursStr = (hours < 10 ? '0' : '') + hours;
        var minutesStr = (minutes < 10 ? '0' : '') + minutes;
        var dateStr = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + hoursStr + ':' + minutesStr;

        var msg = {
            name: paramsObj.get('name'),
            content: paramsObj.get('content'),
            create_at: dateStr
        };

        // 理论上是给数据库添加一条数据，现在是向数组中压入一条数据
        msgs.push(msg); // 添加留言对象到留言数组中

        // 插入成功，重定向到首页
        res.statusCode = 302; // 声明重定向
        res.setHeader('location', '/'); //设置响应头，指定重定向到网站的根目录
        res.end() // 结束响应，并将其发送给客户端

    } else if (currentUrl.startsWith('/delete')) { // 当前请求的 URL 以 '/delete' 开头
        // 解析并删除对应索引
        var index = parseInt(currentUrl.split('/').pop());
        msgs.splice(index, 1);
        // 删除成功，重定向到首页
        res.statusCode = 302;
        res.setHeader('location', '/');
        res.end();
    }
    else {// 404
        fs.readFile('./views/404.html', 'utf8', function (err, data) {
            if (err) {
                console.log(err);
                return;
            }
            res.end(data);
        })
    }
})

// 四.启动服务
server.listen(8080, function () {
    console.log('启动成功，访问：http://localhost:8080')
})

// 注意
// 终端需要cd转到当前message目录下，再node app.js

// currentUrl.indexOf('/doadd') === 0
// 通过 indexOf() 方法检查当前请求的 URL 是否以 /doadd 开头
// 如果返回 0，则表示当前 URL 的开头与 /doadd 完全匹配
// 如果匹配成功，条件语句将返回 true，否则返回 false

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    
    <!-- 引入 Bootstrap 样式表 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>

<body>
    <!-- 头部容器 -->
    <div class="header container">
        <!-- 页面标题栏 -->
        <div class="page-header">
            <h1>留言板</h1>
            <a class="btn btn-success" href="/add">发表留言</a>
            <!-- 创建按钮链接到“/add”页，设置 Bootstrap 中的成功按钮 -->
        </div>
    </div>

    <!-- 留言容器 -->
    <div class="comments container">
        <ul class="list-group">
            ^_^<!-- 占位符，表示在这里显示留言列表 -->
        </ul>
    </div>

    <script>
        function deleteMessage(index) {
            if (confirm("确定要删除这条留言吗？")) {
                fetch(`/delete/${index}`, { method: 'DELETE' })
                    .then(response => {
                        if (response.ok) {
                            window.location.reload(); // 删除成功后刷新页面
                        } else {
                            console.error('删除留言失败');
                        }
                    })
                    .catch(error => {
                        console.error('删除留言失败', error);
                    });
            }
        }
        // 接受一个要删除的留言的索引参数 `index`
        // 函数首先弹出确认对话框，询问用户是否确定要删除该留言。
        // 如果确认，则通过 `fetch` 函数向服务器发送一个 DELETE 请求，
        // 该请求的路径包含了要删除的留言的索引。
        // 删除成功（即响应状态码为 200 OK），则刷新页面，以展示更新后的留言列表；
        // 删除失败，在控制台输出错误信息。
    </script>


</body>

</html>

add.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发表留言</title>

    <!-- 将 Bootstrap 的 CSS 文件引入到 HTML 页面中 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

</head>

<body>
    <!-- 头部容器 -->
    <div class="header container">
        <!-- 页面标题栏 -->
        <div class="page-header">
            <h1><a href="/">首页</a> <small>发表留言</small></h1>
        </div>
    </div>

    <!-- 评论容器 -->
    <div class="comments container">
        <!-- 创建表单，GET 提交到“/doadd”页 -->
        <form action="/doadd" method="get">

            <div class="form-group">
                <label for="input_name">昵称</label>
                 <!-- 昵称输入框，设置类型为“name”，输入内容的最小和最大长度 -->
                <input type="name" class="form-control" id="input_name" placeholder="请输入姓名" minlength="2" maxlength="10"
                    name="name">
            </div>

            <div class="form-group">
                <label for="input_message">留言内容</label>
                <!-- 留言内容输入框，设置宽度30，高度10，必填，输入内容的最小和最大长度 -->
                <textarea class="form-control" name="content" cols="30" rows="10" required minlength="5"
                    maxlength="20"></textarea>
            </div>

            <!-- 提交按钮 -->
            <button type="submit" class="btn btn-default">发表</button>
        </form>
    </div>
</body>

</html>

404.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404</title>
</head>

<body>
    <h1 style="text-align: center;">404!!!!</h1>
</body>

</html>

演示图片