node留言板项目-源码不带框架

Posted 2022-02-07 勇敢*牛牛

一点小感悟

• node不适合从来没有接触过服务端的人学习
• node不是特别适合入门服务端，但是不代表node不强大
• node很厉害，具有经验的人可以玩的非常牛
• 不适合新手的原因就是比较偏底层，而且太灵活
• java，PHP好入门的原因就是在于：这些平台屏蔽了些底层

完成的步骤：

• / index.html
• 开放public目录中的静态资源。读取响应public目录中的具体资源
• /post post.html
• /pinglun响应评论
• 接受表单提交数据
• 存储表单提交的数据
• 让表单重定向，statuscode，setHeader
  注意的模块系统和Express（第三方Web开发框架），而使用框架的目的是让我们专注于业务，而不是底层细节。

nodejs留言板项目

• 首先能读取两个文件，留言板首页模块和留言板发表模块

  var http = require('http');
  var fs = require('fs');
  var path = require('path');
  

  也就是利用核心模块，完成基础的读取。

• 然后通过http请求能够在客户端响应这个页面，以及一些简易的功能

  var template = require('art-template');
  var myurl = require('url');
  

  留言板是要改变HTML文件数据的，所以通过mustache语法来更改
  服务端代码

  var comments = [
      
          name: '张三1',
          message: '民法典拿我没办法',
          dateTime: '2022年1月15日12:40:49'
      ,
      
          name: '张三2',
          message: '民法典拿我没办法',
          dateTime: '2022年1月15日12:40:49'
      ,
      
          name: '张三3',
          message: '民法典拿我没办法',
          dateTime: '2022年1月15日12:40:49'
      ,
  
  ]
  //替换
  var htmlStr = template.render(data.toString(), 
                  comments: comments
              )
  

  html代码

  <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>
  

整个的核心代码，也即是对文件的处理操作都在http响应中，（最终是要对客户端发生变换），var obj = myurl.parse(req.url, true); // 单独获取不包含查询字符串的部分？之后的 var url = obj.pathname;获取请求路径，（页面和其他资源分开，方便统一管理），对于html里面的资源统一开放的话，即 :
(url.indexOf('/public/') === 0) fs.readFile(path.join(__dirname, '.'+ url),，而发送表单留言信息因为其特殊性，通过api单独解析obj.query，然后重定向。

---

服务端代码描述

var http = require('http');
var fs = require('fs');
var path = require('path');
var template = require('art-template');
var myurl = require('url');

var comments = [
    
        name: '张三1',
        message: '民法典拿我没办法',
        dateTime: '2022年1月15日12:40:49'
    ,
    
        name: '张三2',
        message: '民法典拿我没办法',
        dateTime: '2022年1月15日12:40:49'
    ,
    
        name: '张三3',
        message: '民法典拿我没办法',
        dateTime: '2022年1月15日12:40:49'
    ,

]
http
    .createServer(function (req, res) 
        // var url = req.url;
        // var myUrl = new RUL(req.url);
        // var url = myUrl.pathname;
        var obj = myurl.parse(req.url, true);
        // 单独获取不包含查询字符串的部分？之后的
        var url = obj.pathname;
        if (url === '/') 
            fs.readFile(path.join(__dirname, './view/index.html'), function (err, data) 
                if (err) 
                    return res.end('404 Not Found');
                
                // 解析替换
                var htmlStr = template.render(data.toString(), 
                    comments: comments
                )
                res.end(htmlStr)
                // res.end(data);
            )
         else if (url === '/post') 
            fs.readFile(path.join(__dirname, './view/post.html'), function (err, data) 
                if (err) 
                    return res.end('404 Not Found');
                
                res.end(data);
            )
         else if (url.indexOf('/public/') === 0) 
            fs.readFile(path.join(__dirname, '.' + url), function (err, data) 
                if (err) 
                    return res.end('404 Not Found');
                
                res.end(data);
            )
         else if (url === '/pinglun') 
            // 注意此时的url就是不包含？之后的的路径
            // console.log('收到表单请求了', obj.query);
            res.setHeader('Content-Type', 'text/plian;charset=utf-8');
            // res.end(JSON.stringify(obj.query))
            // 获取表单提交的数据：obj.query
            // 生成日期到数据对象中，然后存储到数组中
            var comment = obj.query;
            comment.dateTime = '2022年1月15日20:25:57';
            comments.unshift(comment);

            res.statusCode = 302;
            res.setHeader('Location', '/');
            res.end();
         else 
            fs.readFile(path.join(__dirname, './view/404.html'), function (err, data) 
                if (err) 
                    return res.end('404 Not Found');
                
                res.end(data);
            )
        
    )
    .listen(3000, function () 
        console.log('running……');
    )

html文件

<!DOCTYPE html>
<!-- saved from url=(0027)http://192.168.150.76:3000/ -->
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>留言本</title>
  <!-- 
    浏览器收到 HTML 响应内容之后，就要开始从上到下依次解析，
    当在解析的过程中，如果发现：
      link
      script
      img
      iframe
      video
      audio
    等带有 src 或者 href（link） 属性标签（具有外链的资源）的时候，浏览器会自动对这些资源发起新的请求。
   -->
  <!-- 
      注意：在服务端中，文件中的路径就不要去写相对路径了。
      因为这个时候所有的资源都是通过 url 标识来获取的
      我的服务器开放了 /public/ 目录
      所以这里的请求路径都写成：/public/xxx
      / 在这里就是 url 根路径的意思。
      浏览器在真正发请求的时候会最终把 http://127.0.0.1:3000 拼上

      不要再想文件路径了，把所有的路径都想象成 url 地址
    -->

  <link rel="stylesheet" href="/public/lib/bootstrap/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>
  <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>


</body>

</html>

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="/public/lib/bootstrap/bootstrap.css">
</head>

<body>
  <div class="header container">
    <div class="page-header">
      <h1><a href="/">首页</a> <small>发表评论</small></h1>
    </div>
  </div>
  <div class="comments container">
    <!-- 
      以前表单是如何提交的？
      表单中需要提交的表单控件元素必须具有 name 属性
      表单提交分为：
        1. 默认的提交行为
        2. 表单异步提交

        action 就是表单提交的地址，说白了就是请求的 url 地址
        method 请求方法
            get
            post
     -->
    <form action="/pinglun" method="get">
      <div class="form-group">
        <label for="input_name">你的大名</label>
        <input type="text" class="form-control" required minlength="2" maxlength="10" id="input_name" name="name"
          placeholder="请写入你的姓名">
      </div>
      <div class="form-group">
        <label for="textarea_message">留言内容</label>
        <textarea class="form-control" name="message" id="textarea_message" cols="30" rows="10" required minlength="5"
          maxlength="20"></textarea>
      </div>
      <button type="submit" class="btn btn-default">发表</button>
    </form>
  </div>
</body>

</html>