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

77 阅读3分钟

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

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

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

image.png

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

image.png

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

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写的后台服务地址,没有找到则会自动创建,结构如下

image.png

自动填充内容如下

(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地址: github.com/xiaodun/sf-…

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

  • 已经接触前端,但对 ajax 请求,前后端协作,完善的开发流程没有深刻概念

  • 具备一定的前端知识,想通过做项目练习而提升自己,苦于缺乏后端能力

  • 熟悉前端,深感封装的局限性,想通过工程化提升开发效率

  • 想开发一些满足自己交互体验的离线产品,受浏览器器限制,一些功能做不了

基础功能介绍

1.能用来做什么

2.实现增删改查

3.在webpack中使用

4.实现上传下载

8.websocket 练习

应用案例

5.调用第三方接口

6.返回网上图片的base64码

7.指定文件在vscode中打开

扩展示例

9.对接口做拦截

10.实现视频的边下边播

如果仍对这东西能做什么抱有怀疑,不防看看这两个仓库,sf-notessf-mobile-web