node.js小案例_留言板

一、前言

通过这个案例复习：

1、node.js中模板引擎的使用

2、node.js中的页面跳转和重定向

二、主要内容

1、案列演示：

node.js小案例_留言板

2、案列源码：https://github.com/4561231/feedback

3、具体实现：

1、项目结构：项目名称feedback ,为了方便管理，将页面内请求的资源统一放到一个公共的public目录下，view中放跳转的页面

node.js小案例_留言板

2、创建app.js 先搭建一个基本服务器，用户输入地址请求的时候默认跳到首页

var http = require('http');
var fs= require('fs');
var server = http.createServer();

server.on('request',function (req, res){
  var pathname = req.url;
  //如果 请求/返回的是/index.html
  if (url === '/') {
    fs.readFile('./views/index.html', function (err, data) {
      res.end(data);
  })

  }
});
server.listen(3000,function (){
  
  console.log('server is running');

})

3、当浏览器收到html响应内容的时候，会从上到下依次解析，当在解析过程中如果发现页面中有如下标签

比如：link script img iframe video audio 等标签（具有外链的资源），这时候浏览器就会自动对这些资源发起请求（可以在network中验证）

所以现在我们要对允许客户端请求的资源放在一个公共的public文件中

app.js中：

else if(pathname.indexOf('/public/')===0) { //pathname是请求时候的url地址，这个地址不需要手动输入，
                                            //如果请求的是public下的资源，就当做public中的资源，然后就可以将请求资源当做文件资源来处理
                                            //

        fs.readFile('.'+pathname, function(err, data){
          if(err){
            return res.end('file can not found');
          }

          res.end(data);
        })

    } 

});

当我们使用了public公共目录的时候就不能使用相对路径了，此时的路径不是文件路径，因为这个时候所有的资源都是通过url标识来获取的，我的服务器开放了/public/目录。所以这时候请求public下面的资源的请求路径都是/public/xxxx

index.html post.html中引用的bootstrap.css路径如下

 <link rel="stylesheet" href="/public/lib/bootstrap/dist/css/bootstrap.css">

4、前面两步只是服务端对一些静态资源的处理，具体功能实现

（1）当用户点击发表留言按钮时，自动跳转到post.html

node.js小案例_留言板

（2）index.html中的href=''就是我们请求路径中的url

node.js小案例_留言板

（3）在服务端中，当收到请求路径是/post开头的时候，让它读取post.html中的内容

else if (pathname === '/post') {
      // 其它的都处理成 404 找不到
      fs.readFile('./views/post.html', function (err, data) {
        if (err) {
          return res.end('404 Not Found.')
        }
        res.end(data)
      })
    }

（4）

node.js小案例_留言板

（5）接下来，就是获取数据和对数据进行处理，提交数据之后，页面会跳转到首页

完整app.js代码

var http = require('http');
var fs= require('fs');
//所以引入url模块
var urlObj = require('url');
var template = require('art-template');

var comments=[


];
var server = http.createServer();
server.on('request',function (req, res){
   // 使用 url.parse 方法将路径解析为一个方便操作的对象，第二个参数为 true 表示直接将查询字符串转为一个对象（通过 query 属性来访问）
    var parseObj = urlObj.parse(req.url, true)

   var pathname = req.url;
   
  //如果 请求/返回的是/index.html

  if (pathname === '/') {
    fs.readFile('./views/index.html', function (err, data) {
      if(err){
        return res.end('404 can not find');
       
      }

     var htmlStr = template.render(data.toString(), {
          comments: comments
        })
        res.end(htmlStr)
  }) 
  }else if(pathname.indexOf('/public/')===0) { //如果请求的是public下的资源，就当做public中的资源，然后就可以将请求资源当做文件资源来处理
        fs.readFile('.'+pathname, function(err, data){
          if(err){
            return res.end('file can not found');
          }

          res.end(data);
        })

    } else if (pathname === '/post') {
        fs.readFile('./views/post.html', function (err, data) {
          if(err){
            return res.end('post can not found');
          }

          res.end(data);
        });
    }else if (pathname.indexOf('/pinglun')===0 ){//说明点击了发表
      //将数据保存下来，这里为get提交，数据就在url地址中,获取到了对象中的内容
      var data = parseObj.query;
      //这里的发表日期先固定写死
   //   data.dateTime = '2017-11-2 17:11:22';
       data.dateTime = '2017-11-2 17:11:22';
      //将得到的数据存入comments 中
      comments.unshift(data)


      //接下来要做的是重定向
      res.statusCode = 302
      res.setHeader('Location', '/')
      res.end()



    }else {
      // 其它的都处理成 404 找不到
      fs.readFile('./views/404.html', function (err, data) {
        if (err) {
          return res.end('404 Not Found.')
        }
        res.end(data)
      })
    }

});

server.listen(300,function (){
  
  console.log('server is running');

})

app.js