PJCHENder
4/3/2017 - 4:27 AM

[Treehouse][Node]Build a Simple Dynamic Site with Node.js @ Treehouse

[Treehouse][Node]Build a Simple Dynamic Site with Node.js @ Treehouse

var Profile = require('./profile.js')
var render = require('./render.js')
var queryString = require('querystring')
//  處理 HTTP Route GET / POST / (例如,Home)
function homeRoute (request, response) {
  //  if url == "/" && GET
  if (request.method.toLowerCase() === 'get'){
    if (request.url === '/') {
      //  show search
      response.statusCode = 200
      response.setHeader('Content-Type', 'text/html')
      render.view('header', {}, response)
      render.view('search', {}, response)
      render.view('footer', {}, response)
    }
  } else {
  //  if url == "/" && POST
    //  從 post body 取得資料
    request.on('data', function (postBody) {
      //  取得 username
      let query = queryString.parse(postBody.toString())
      //  redirect to /:username
      response.writeHead(303, {'Location': '/' + query.username})
      response.end()
    })
  }
}
//  處理 HTTP Route GET /:username (例如,/chalkers)
  //  if url == "/..."
function userRoute (request, response) {
  var username = request.url.replace('/', '')
  if (username.length > 0) {
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html')
    render.view('header', {}, response)
    //  從 Treehouse 取的 JSON 檔
    var studentProfile = new Profile(username)
    //  on "end"
    studentProfile.on('end', function (profileJSON) {
      //  show profile
      //  儲存所需要的資料
      var values = {
        avatarUrl: profileJSON.gravator_url,
        username: profileJSON.profile_name,
        badges: profileJSON.badges.length,
        javaScriptPoints: profileJSON.points.JavaScript
      }
      //  簡單的回覆
      render.view('profile', values, response)
      render.view('footer', {}, response)
    })

    //  on "error"
    studentProfile.on('error', function (error) {
      render.view('error', {errorMessage: error.message}, response)
      render.view('search', {}, response)
      render.view('footer', {}, response)
    })
  }
}

module.exports.home = homeRoute
module.exports.user = userRoute
var fs = require('fs')

//  將模版 {{}} 填入值
//  mergeValue (陣列, 內容)
function mergeValue (values, content) {
  //  疊代取得 key 值
  for (let item in values) {
    //  將所有 {{key}} 取代成 values 物件中對應的 value
    content = content.replace(`{{${item}}}`, values[item])
  }
  //  回傳將資料代入 template 後的 content
  return content
}

//  選擇模版,要填入的值,並回傳結果
//  view(模版檔名,填入的值,寫入回應)
function view (templateName, values, response) {
  //  讀取 Template 檔案
  var fileContents = fs.readFileSync('./views/' + templateName + '.html', {encoding: 'utf8'})

  //  將值塞入模版中
  fileContents = mergeValue(values, fileContents)

  //  將成品回傳
  response.write(fileContents)
}

module.exports.view = view
<div id="profile">

    <img src="{{avatarUrl}}" alt="Avatar" id="avatar">

    <p><span>{{username}}</span></p>

    <ul>
        <li><span>{{badges}}</span> Badges earned</li>
        <li><span>{{javaScriptPoints}}</span> JavaScript points</li>
        <li><a href="/">search again</a></li>
    </ul>

</div>
var router = require('./router.js')

//  問題:我們希望能夠用瀏覽器的方式查詢使用者在 treehouse 的點數
//  解決:使用 NodeJS 來展現檔案

//  1. 建立一個網路伺服器
const http = require('http')

const hostname = '127.0.0.1'
const port = 3000

const server = http.createServer((request, response) => {
  router.home(request, response)
  router.user(request, response)
})

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`)
})