Node.js留言板

最新推荐文章于 2024-04-22 17:15:11 发布

许之知否

最新推荐文章于 2024-04-22 17:15:11 发布

阅读量296

点赞数

分类专栏： Node.js 文章标签： nodejs html css

本文链接：https://blog.csdn.net/h083417172_/article/details/110950763

版权

Node.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

先把页面做出来，样式使用bootstrap，制作首页、提交评论页面、404页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/public/css/bootstrap-4.5.3-dist/css/bootstrap.css">
</head>
<body>
<div class="header container">
    <div class="page-header">
        <h1>Example page header<small>Subtext for header</small></h1>
        <a class="btn btn-success" href="/post">发表留言</a>
    </div>
    <div class="comments container">
        <ul class="list-group">
            {{each comments}}
            <li class="list-group-item">{{$value.name}}说：{{$value.message}}<span class="pull-right">{{$value.dateTime}}</span></li>
            {{/each}}
        </ul>
    </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/public/css/bootstrap-4.5.3-dist/css/bootstrap.css">
</head>
<body>
    <div class="header container">
        <div class="page-header">
            <h1><a href="/">首页</a><small>Subtext for header</small></h1>
        </div>
    </div>
    <div class="comments container">

        <form action="/pinglun" method="get">
            <div class="form-group">
                <label for="input_name">你的大名</label>
                <input type="text" class="form-control" name="name" required minlength="2" maxlength="10" id="input_name" placeholder="请写入你的姓名">
            </div>
            <div class="form-group">
                <label for="textarea_message">留言内容</label>
                <textarea class="form-control" name="message" required minlength="5" maxlength="20" id="textarea_message" cols="30" rows="10"></textarea>
            </div>
            <button type="submit" class="btn btn-default">发表</button>
        </form>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>您访问的页面已经失联啦。。。。。</h2>
</body>
</html>

使用Node.js的http、fs、url核心模块，使用art-template模板引擎，在此不用框架，使用底层方法。学习之后，可以试着使用express，感受框架的便捷哈哈。

var http = require('http')
var fs = require('fs')
var template = require('art-template')
var url = require('url')
var comments = [
    {
        name:'hcc',
        message:'啦啦啦',
        dataTime:'2020-12-04'
    },
    {
        name:'hcc',
        message:'啦啦啦',
        dataTime:'2020-12-04'
    },
    {
        name:'hcc',
        message:'啦啦啦',
        dataTime:'2020-12-04'
    },
    {
        name:'hcc',
        message:'啦啦啦',
        dataTime:'2020-12-04'
    }
]
http
    .createServer(function (req,res) {
        var parseObj = url.parse(req.url,true)
        console.log(parseObj)
        var pathname = parseObj.pathname
        if(pathname === '/'){
            fs.readFile('./views/index.html',function (err,data) {
                if(err){
                    return res.end('404 not found')
                }else{
                    var htmlStr = template.render(data.toString(),{comments:comments})
                    res.end(htmlStr)
                }
            })
        }else if(pathname === '/post'){
            fs.readFile('./views/post.html',function (err,data) {
                res.end(data)
            })
        }else if(pathname.indexOf('/public/') === 0){
            // /public/css/main.css
            // /public/js/main.js
            // /public/lib/jquery.js
            /*统一处理：
            *   如果请求路径是以/public/开头的，则我认为你要获取public中的某一资源
            *   所以我们就直接可以把请求路径当做文件路径来直接进行读取*/
            fs.readFile('.'+pathname,function (err,data) {
                if(err){
                    return res.end('404 not found')
                }
                res.end(data)
            })
        }else if(pathname === '/pinglun'){
            //res.end(JSON.stringify(parseObj.query))
            var comment = parseObj.query
            comment.dateTime = '2020-12-05 09:53:34'
            comments.push(comment)

            /*如何通过服务器让客户端重定向？
            *   1.状态码设置为302临时重定向
            *   2.在响应头中通过Location告诉客户端往哪儿重定向
            *   如果客户端发现收到服务器的响应的状态码是302就会自动去响应头中找location
            *   所以就能看到客户端自动跳转了*/
            res.statusCode = 302
            res.setHeader('Location','/')
            res.end()
        }else{
            fs.readFile('./views/404.html',function (err,data) {
              res.end(data)
            })
        }
    })
    .listen(3000,function () {
        console.log('running...')
    })