1. 程式人生 > >node的feedback中的app.js

node的feedback中的app.js

// app application 應用程式
// 把當前模組所有的依賴項都宣告再檔案模組最上面
// 為了讓目錄結構保持統一清晰,所以我們約定,把所有的 HTML 檔案都放到 views(檢視) 目錄中
// 我們為了方便的統一處理這些靜態資源,所以我們約定把所有的靜態資源都存放在 public 目錄中
// 哪些資源能被使用者訪問,哪些資源不能被使用者訪問,我現在可以通過程式碼來進行非常靈活的控制
// / index.html
// /public 整個 public 目錄中的資源都允許被訪問
// 前後端融會貫通了,為所欲為

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

var comments = [
  {
    name: '張三',
    message: '今天天氣不錯!',
    dateTime: '2015-10-16'
  },
  {
    name: '張三2',
    message: '今天天氣不錯!',
    dateTime: '2015-10-16'
  },
  {
    name: '張三3',
    message: '今天天氣不錯!',
    dateTime: '2015-10-16'
  },
  {
    name: '張三4',
    message: '今天天氣不錯!',
    dateTime: '2015-10-16'
  },
  {
    name: '張三5',
    message: '今天天氣不錯!',
    dateTime: '2015-10-16'
  }
]

// /pinglun?name=的撒的撒&message=的撒的撒的撒
// 對於這種表單提交的請求路徑,由於其中具有使用者動態填寫的內容
// 所以你不可能通過去判斷完整的 url 路徑來處理這個請求
//
// 結論:對於我們來講,其實只需要判定,如果你的請求路徑是 /pinglun 的時候,那我就認為你提交表單的請求過來了

http
  .createServer(function (req, res) { // 簡寫方式,該函式會直接被註冊為 server 的 request 請求事件處理函式
    // 使用 url.parse 方法將路徑解析為一個方便操作的物件,第二個引數為 true 表示直接將查詢字串轉為一個物件(通過 query 屬性來訪問)
    var parseObj = url.parse(req.url, true)

    // 單獨獲取不包含查詢字串的路徑部分(該路徑不包含 ? 之後的內容)
    var pathname = parseObj.pathname

    if (pathname === '/') {
      fs.readFile('./views/index.html', function (err, data) {
        if (err) {
          return res.end('404 Not Found.')
        }
        var htmlStr = template.render(data.toString(), {
          comments: comments
        })
        res.end(htmlStr)
      })
    } else if (pathname === '/post') {
      // 其它的都處理成 404 找不到
      fs.readFile('./views/post.html', function (err, data) {
        if (err) {
          return res.end('404 Not Found.')
        }
        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') {
      // 注意:這個時候無論 /pinglun?xxx 之後是什麼,我都不用擔心了,因為我的 pathname 是不包含 ? 之後的那個路徑
      // 一次請求對應一次響應,響應結束這次請求也就結束了
      // res.end(JSON.stringify(parseObj.query))

      // 我們已經使用 url 模組的 parse 方法把請求路徑中的查詢字串給解析成一個物件了
      // 所以接下來要做的就是:
      //    1. 獲取表單提交的資料 parseObj.query
      //    2. 將當前時間日期新增到資料物件中,然後儲存到陣列中
      //    3. 讓使用者重定向跳轉到首頁 /
      //       當用戶重新請求 / 的時候,我陣列中的資料已經發生變化了,所以使用者看到的頁面也就變了
      var comment = parseObj.query
      comment.dateTime = '2017-11-2 17:11:22'
      comments.unshift(comment)
      // 服務端這個時候已經把資料儲存好了,接下來就是讓使用者重新請求 / 首頁,就可以看到最新的留言內容了

      // 如何通過伺服器讓客戶端重定向?
      //    1. 狀態碼設定為 302 臨時重定向
      //        statusCode
      //    2. 在響應頭中通過 Location 告訴客戶端往哪兒重定向
      //        setHeader
      // 如果客戶端發現收到伺服器的響應的狀態碼是 302 就會自動去響應頭中找 Location ,然後對該地址發起新的請求
      // 所以你就能看到客戶端自動跳轉了
      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)
      })
    }
  })
  .listen(3000, function () {
    console.log('running...')
  })

// Node 不適合從來沒有接觸過服務端的人學習
// 如果想要真正的學號服務端,還是老牌的 Java、PHP 這些平臺
// Node 不是特別適合入門服務端,但不代表 Node 不強大
// Node 很厲害,具有經驗的人可以玩兒的非常的牛
// 不適合新手的原因就在於比較偏底層、而且太靈活
// Java、PHP 好入門的原因就在於:這些平臺遮蔽了一些底層
// res.redirect('重定向')


// 晚上寫案例照著下面的步驟寫:
// 1. / index.html
// 2. 開放 public 目錄中的靜態資源
//    當請求 /public/xxx 的時候,讀取響應 public 目錄中的具體資源
// 3. /post post.html
// 4. /pinglun
//    4.1 接收表單提交資料
//    4.2 儲存表單提交的資料
//    4.3 讓表單重定向到 /
//        statusCode
//        setHeader

// 明天:
// 模組系統
// Express(第三方 Web 開發框架)
//    這兩做的事兒,在框架裡面就是一個 API 的事兒
//    使用框架的目的就是讓我們更加專注於業務,而不是底層細節