P11：node实现静态服务器 ~ 初步优化体验

现阶段的项目是需要手动修改地址栏来是实现操作的，这太过程序员，怪不得没对象。让我们优化使用体验，从此不再new Object

让项目好用起来

现在需要将地址栏操作，转变为点选操作，首先我们应该将代码输出为web页面

输出页面

前面已经讲过如何输出页面，这次的需求又有了小小的变动。我们需要输出一个动态的页面，如何实现？
- 输出动态页面无非就是字符串，可以选择手动一个一个拼接
- 可以选择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.js

<!--引入文件-->
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 修改如下

<a href="https://www.baidu.com/">百度</a>

改写为:

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

route.js修改如下

 awaitRes.end(Dir({}))

改变为:

  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

效果

close

P11：node实现静态服务器 ~ 初步优化体验

相关文章

让项目好用起来

输出页面

输出所需的动态页面

美化页面