服务器渲染+自定义模块+mysql操作

发布时间:2024年01月24日

1.服务器渲染

A.第一步,导入模块库和第三方库

npm init

npm install art-template moment

B.第二步,调整html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>仿服务器资源</title>
  </head>
  <body>
    <div class="container" style="width: 600px; margin: 0 auto">
      <h1>Index Of-2</h1>
      <table
        border="1"
        width="600px"
        style="border-spacing: 0; text-align: center"
      >
        <thead>
          <th>图片</th>
          <th>文件名称</th>
          <th>最后更改时间</th>
          <th>大小(字节)</th>
          <th>文件类型</th>
        </thead>
        <tbody id="tShow">
          {{each data}}
          <tr>
            {{if $value.type == 'F'}}
            <td>
              <img src="./imgs/chao.jpg" width="50" alt="" />
            </td>
            {{else }}
            <td>
              <img src="./imgs/yuhang.jpg" width="50" alt="" />
            </td>
            {{/if}}
            <td>{{$value.uname}}</td>
            <td>{{$value.mtime}}</td>
            <td>{{$value.size}}</td>
            <td>{{$value.type=='F'?'文件':'文件夹'}}</td>
          </tr>
          {{/each}}
        </tbody>
      </table>
    </div>
  </body>
  <script></script>
</html>

调整js文件

var http = require("http");
var fs = require("fs");
var moment = require("moment");
var template = require("art-template"); // 第三方模块,读取数据的
template.defaults.root = "./"; // 设置文件读取路径为相对路径

var server = http.createServer();

server.on("request", function (req, res) {
  // 防止乱码
  res.setHeader("Content-Type", "text/html;charset=utf-8");
  var ulrs = req.url;
  // 普通html文档
  if (req.url == "/") {
    fs.readdir("./", "utf8", function (err, data) {
      console.log(data, "datadir");
      var data_arr = []; // 返回的结果
      var count = 0; // 计数
      for (var i = 0; i < data.length; i++) {
        data_arr[i] = {};
        // 异步,闭包
        (function (i) {
          fs.stat(data[i], function (err1, data1) {
            // 数量叠加
            count++;
            // 判断是否为文件
            if (data1.isFile()) {
              data_arr[i].type = "F";
            } else {
              data_arr[i].type = "NF";
            }
            data_arr[i].uname = data[i];
            // 为了读取时间更友好,采用第三方模块
            data_arr[i].mtime = moment(data1.mtime).format(
              "YYYY-MM-DD HH:mm:ss"
            );
            data_arr[i].size = data1.size;
            // 跳出闭包,并返回值
            if (count == data.length) {
              // 跳出闭包,并返回值
              res.end(template("./01index.html", { data: data_arr }));
            }
          });
        })(i);
      }
    });
  } else {
    // 其他资源
    fs.readFile("." + ulrs, function (err, data) {
      res.end(data);
    });
  }
});

// 端口
server.listen(5657, function () {
  console.log("端口5657已启动,正在加载......");
});

文章来源:https://blog.csdn.net/ioncannontic/article/details/135799772
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。