P11：node實現靜態服務器 ~ 初步優化體驗

時間 2019-12-08

標籤 p11 node 實現靜態服務器初步優化體驗欄目網站開發简体版

原文原文鏈接

現階段的項目是須要手動修改地址欄來是實現操做的，這太過程序員，怪不得沒對象。讓咱們優化使用體驗，今後再也不new Objecthtml

讓項目好用起來

如今須要將地址欄操做，轉變爲點選操做，首先咱們應該將代碼輸出爲web頁面前端

輸出頁面

前面已經講過如何輸出頁面，此次的需求又有了小小的變更。咱們須要輸出一個動態的頁面，如何實現？node
- 輸出動態頁面無非就是字符串，能夠選擇手動一個一個拼接
- 能夠選擇art-template 等優秀的字符串操做庫
- 選擇模板字符串 這次使用

在根目錄下建立 template 文件夾，其下再次建立dir.js，代碼以下：程序員

有一點須要說明，在編寫被調用的函數，模板或者庫的時候，須要對傳入值進行判斷，給出相應提示。這樣有利於後期維護和他人的使用

/**
     *
     * @param {*} data object 必填
     */

    function Dir(data) {
      /**
         * 判斷data是否爲對象
         * 有一點須要說明，在編寫被調用的函數，模板或者庫的時候，須要對傳入值進行判斷，給出相應提示
         * 這樣有利於後期維護和他人的使用
         */
      if (Object.prototype.toString.call(data) === '[object Object]') {
        const 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>
        <a href="https://www.baidu.com/">百度</a>
       </body>
       </html>
       `
        return html
      } else {
        return '參數類型錯誤'
      }
    }
    module.exports = Dir

    ```
複製代碼

同時須要修改header 文件下屬的route.jsweb

<!--引入文件-->
const Dir = require('../template/dir')
<!--直接將demo頁面輸出-->
  // awaitRes.end(file.join(','))
  awaitRes.end(Dir({}))
複製代碼

輸出結果數組
- 看起來輸出的頁面要素都是ok的，可是卻不是咱們要的html,而是純文本
- 只須要修改header 文件下屬的route.js,便可輸出正常的web頁面
```
awaitRes.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' })
複製代碼
```
```
awaitRes.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' })
複製代碼
```

輸出所需的動態頁面

dir.js 修改以下bash

<a href="https://www.baidu.com/">百度</a>
複製代碼

改寫爲:服務器

${data.files.map((item) => {
    return `<a href="${data.dir + '/' + item}">${item}</a>`
  })}
複製代碼

route.js修改以下函數

awaitRes.end(Dir({}))
複製代碼

改變爲:post

const data = {
    title: path.basename(filePath),
    dir: path.relative(conf.root, filePath),
    files: files.toString().split(',') // 置換爲數組
  }
  awaitRes.end(Dir(data))
複製代碼

輸出效果

文件夾以及文件輸出
可是點擊次級文件夾的文件就不會輸出正確的文件內容
處理路徑問題

從截圖能夠看出，路徑多拼接了一個src,其實咱們再點更深刻的路徑會再多一個，由於咱們計算的來的路徑，並無相對於根路徑

```
  const data = {
      title: path.basename(filePath),
      dir: path.relative(conf.root, filePath),
      files: files.toString().split(',') // 置換爲數組
    }
  ```
  ```
  const dir = path.relative(conf.root, filePath)
    const data = {
      title: path.basename(filePath),
      dir: dir ? `/${dir}` : '', // 須要注意一點`path.relative` 是相對與根路徑計算的,真的訪問根路徑就會返回空
      files: files.toString().split(',') // 置換爲數組
    }
  ```
複製代碼

美化頁面

輸出動態頁面的功能已經實現，可是做爲一個前端，頁面不但要好用，還要漂亮

dir.js 修改成：

/**
 *
 * @param {*} data object 必填
 */

function Dir(data) {
  /**
     * 判斷data是否爲對象
     * 有一點須要說明，在編寫被調用的函數，模板或者庫的時候，須要對傳入值進行判斷，給出相應提示
     * 這樣有利於後期維護和他人的使用
     */
  if (Object.prototype.toString.call(data) === '[object Object]') {
    const 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>${data.title}</title>
       <style>
            a {
                font-size: 20px;
                padding: 4px 10px;
            }
        </style>
   </head>
   <body>
    ${itemFn(data)}
   </body>
   </html>
   `
    return html
  } else {
    return '參數類型錯誤'
  }
}

function itemFn(val) {
  let tem = ''
  val.files.map((item) => {
    tem += `
    <div>
        <a  href="${val.dir + '/' + item}">${item}</a>
    </div>
    `
  })
  return tem
}
module.exports = Dir

複製代碼