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

复制代码

效果

close

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

相关文章

让项目好用起来

输出页面

输出所需的动态页面

美化页面