别让浏览器限制了你的才华

作者: 小遁哥 | 来源:发表于2022-06-27 20:47 被阅读0次

众所周知，浏览器是有很多限制的。

比如这张图里的功能，获取当前电脑的磁盘信息

v2-b8215da143a6a5d116462ce4a3cc816b_1440w.jpg

再比如说这张图里的功能，请求第三方接口渲染Swagger文档

v2-10af1e0df93e3e913fde3e21b74581b7_1440w.jpg

再再比如说这张图里的功能,将开发中常用的Git操作封装起来一键执行

v2-087fc7a23367d4e7927e1d6797d6c515_1440w.jpg

还有一点就是浏览器的提供的存储只能存在浏览器里，这也是为什么需要后端的一个原因

no,no,no,你并不需要专门花时间去学一种后台语言,node.js离前端是很近的，上述功能本质上也是出于工程化目的，解决日常开发中代码层次不能解决的问题

node.js就是最合适的，node.js就是最合适的，node.js就是最合适的。

我话讲完，谁赞成，谁反对

看一下获取电脑磁盘信息的这个过程

前端发送请求 http://10.198.1.183:8000/api/system/getFileDirectory,"http://10.198.1.183:8000" 便是基于node.js写的后台服务地址,没有找到则会自动创建，结构如下

v2-014fef4d1718f5a6012c469ef273efae_1440w.jpg

自动填充内容如下

(function () {
  return function (argData, argParams,external) {
    return {
      isWrite: false,
      //data:argData,
      response: {
        code: 200,
        data: {},
      },
    };
  };
})();

其中system.json是用来存储数据的,argData就是读取system.json解析后的结果，操作argData配合指定的返回格式就可以实现增删改查

argParams是解析ajax传来数据的结果,external用于多个脚本文件公用代码

getFileDirectory.js文件代码如下

(function () {
  const fs = require("fs");
  const path = require("path");
  const execSync = require("child_process").execSync;
  return function (argData, argParams) {
    if (argParams.path) {
      const readDir = fs.readdirSync(argParams.path);
      const list = [];
      readDir.forEach((item) => {
        const itemPath = path.join(argParams.path, item);
        const pointPos = item.lastIndexOf(".");
        let stuffix = "";
        if (pointPos !== -1 && pointPos !== 0) {
          stuffix = item.substring(pointPos + 1);
        }
        try {
          const stat = fs.lstatSync(itemPath);
          list.push({
            name: item,
            path: itemPath,
            stuffix,
            isLeaf: !stat.isDirectory(),
          });
        } catch (error) {
          console.log(`${item}操作出错`);
        }
      });
      return {
        response: {
          code: 200,
          data: {
            success: true,
            list,
          },
        },
      };
    } else {
      const stdout = execSync("wmic logicaldisk get caption").toString();
      const diskList = stdout
        .split("Caption")[1]
        .trim()
        .split("\n")
        .map((item, index) => {
          const name = item.trim();
          return {
            name,
            path: name + "\\",
            isLeaf: false,
            isDisk: true,
          };
        });
      return {
        response: {
          code: 200,
          data: {
            success: true,
            list: diskList,
          },
        },
      };
    }
  };
})();

response 部分是返回ajax的数据，code是http状态码，默认同步，支持异步

上述流程已被封装为npm包 sf-innne-service,github地址: https://github.com/xiaodun/sf-inner-service

同时贴心的编写了教程,每个案例都可以单独运行，相信它会对以下人群起到帮助的作用