node留言本制作

最新推荐文章于 2024-08-05 09:15:51 发布

weixin_44816077

最新推荐文章于 2024-08-05 09:15:51 发布

阅读量97

点赞数

本文链接：https://blog.csdn.net/weixin_44816077/article/details/102774191

版权

加粗样式
创建message文件夹
在此文件夹下建public目录，用于储存静态资源文件
在view用于放置html文件
index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="header container">
      <div class="page-header">
        <a href="/post" class="btn btn-success">发表留言</a>
      </div>
    </div>

    <div class="container">
      <ul class="list-group">
        {{each comments}}
        <li class="list-group-item">
          {{ $value.name }} Say:{{ $value.message }}
          <span class="pull-right">{{ $value.dateTime }}</span>
        </li>
        {{/each}}
      </ul>
    </div>
  </body>
</html>

error.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2>找不到你要的页面</h2>
</body>
</html>

post.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <h1><a href="/">首页</a><small>发表评论</small></h1> 
      <hr />
      <!--
        静态文件一般放在public中
        html一般放在view中


        表单提交规则：
          需要提交的表单控件中必须具有name属性，
        表单提交行为：
          默认提交行为
          异步提交行为

          action提交的地址，请求的url地址
          method 表单提交的方法有post请求与get请求
      -->
      <form action="/pinglun" method="get">
        <div class="form-group">
          <label for="name">Your Name</label>
          <input
            type="text"
            name="name"
            class="form-control"
            id="name"
            required
            minlength="2"
            maxlength="10"
            placeholder="Your Name"
          />
        </div>
        <div class="form-group">
          <label for="message">magessage</label>
          <textarea name="message" class="form-control" id='message' rows="5" required minlength="5" maxlength="50"></textarea>
        </div>

        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
  </body>
</html>

在根目录下创建app.js

var http = require('http')
var fs = require('fs')
var template = require('art-template')
var url = require('url');//路径解析
//处理响应
/*
request 请求事件处理对象，获取客户端请求
response 响应事件处理对象，向客户端发送响应

*/
var comments = [
    {
        name:'张三',
        message:'今天天气还行',
        dateTime:'2015-5-20'
    },
    {
        name:'李四',
        message:'今天天气还行',
        dateTime:'2015-5.20'
    },
    {
        name:'王五',
        message:'今天天气还行',
        dateTime:'2015-5.20'
    },
    {
        name:'小六',
        message:'今天天气还行',
        dateTime:'2015-5.20'
    }
]
var server =  http.createServer()
    server.on('request',function(req,res){
        //利用url.parse路径方法转换成一个方便操作的对象 ，第二个参数true表示直接将查询字符串转化成一个字符串，（通过query属性）
        var urlPath = req.url
        var objParse = url.parse(urlPath,true)
        //单独获取不包含？号后面的路径部分
        var pathname = objParse.pathname
        if(pathname === '/'){
            fs.readFile('./view/index.html',function(err,data){
                if(err){
                    return res.end('获取文件失败')
                }
               var ntmlSte =  template.render(data.toString(),{
                    comments:comments
                })
                res.end(ntmlSte)
            })
        }else if(pathname === '/post'){
            fs.readFile('./view/post.html',function(err,data){
                if(err){
                    return
                }
                res.end(data.toString())
            })
            
        } else if(pathname.indexOf('/public/') === 0){
            fs.readdir('.' + pathname,function(error,files){
                if(error){
                    response.end('404 Not Find Page');
                }
            })
        }else if(pathname === '/pinglun'){
            //不用担心？之后是什么，pathname不包含？之后的路径
            //一个请求对应一个响应，不然会报错，记住坑
            // res.end(JSON.stringify(objParse.query))
            //已经用url的parse方法将请求路径中的查询字符串解析成一个对象
            //接下来获取表单提交的数据objParse.query
            //生成日期数据到对象中，然后储存到数组中
            var comment = objParse.query
            comment.dateTime = '2017-2-3'
            comments.unshift(comment)
            //让客户重定向跳转到首页，
            //如何通过服务端让客户端重定向：
            
            /*
            状态码设置为302临时重定向
            statusCode
            在响应头中通过location告诉客户端往哪重定向
            setHeader
            如果客户端收到服务端状态码为302会自动去响应头中寻找location,然后重定向
            */
           res.statusCode = 302
           res.setHeader('Location','/')
           res.end()
           return
            //当用户重新请求/得时候，数组中得数据已经发生变化，用户看到得是变化后的数据
        }
        else{
                fs.readFile('./view/error.html',function(err,data){
                    res.end(data)
                })
        }
    })

server.listen(3000,'127.0.0.1',function(){
    console.log('服务器启动成功')
})