前端工具API

10.24 前端工具用法整理1.0

一、APP

go（hash值）：hash跳转

SPA（单页面）内进行hash跳转

无刷新的跳转到另一个url

logout：登出

• 删除Cookie（admin-token）
• 删除Cookie（admin-profile）
• 清空权限列表
• 删除当前用户缓存的信息

api（后端api调用接口）

• path：路径
• params：参数列表
• options：配置信息

KvStorage

缓存工具集：存储数据在浏览器中。

存储方案

三者使用的优先级从上到下。

• LocalStorage：长期存储在浏览器中
• cookie：存储在当前页面中
• SessionStorage：存储在某一个会话中

存储方案选择

在KvStorage的gOptions中选择开启存储的方式

使用接口

• saveCookie（k，v）：保存数据到缓存中

• getCookie（k）：从缓存中获取数据

• removeCookie（k）：从缓存中删除某个数据

二、祖传代码的功能实现

2.1 面包屑

效果图：

实现步骤：
填写三个props：first、second、third，类型可以是string、element（标签元素）、node（节点）

1. 无跳转：传递的props类型为string
2. 有跳转：传递的props类型为node：<Link to={"/app/school/schools"}>学校列表</`Link>

2.2 对话弹窗+挂载实现

效果图：

添加点击事件，弹出详情页

祖传方法：
Utils.common.renderReactDOM(child,options={})：该方法能够以body作为父元素，挂载一个我们传递的组件，包裹在一个div标签中，并以背景透明黑的形式弹出。options为选传参数，可以添加id属性，作为外层div的id。

Antdesign组件：
Modal

• visible:控制modal组件展示的开关，因为Modal是我们挂载的组件，因此设置为true
• getContainer：外层div，这里我们使用Utils.common.createModalContainer(id_div)，id_div是我们定义的id名。
• title：对话框的标题
• width：宽度
• footer：是否展示底部的横线，默认false

实现步骤：

1. 书写详情页面（使用Modal组件）
2. 为目标元素添加点击事件
3. 点击事件调用Utils.common.renderReactDOM方法
4. 将详情页组件作为第一个参数，传递进去（这里我们可以将详情数据通过props传递过去）

2.2 列表Table

效果图：

ant组件：
Table

• columns：列的定义，如果需要返回非数值的结果，需要用到render函数，render函数有三个参数，第一个参数代表当前列的值，第二个代表当前项（行），第三个代表当前行索引，返回值为dom元素。另外，dataIndex代表的是对应的字段名。title为标题。如果需要用到分页器的话，我们在序号这一列的配置中需要加入**Utils.pager.getRealIndex(pagination, index)**祖传代码来计算页码

• dataSource：放置渲染的数据集合

• pagination：分页器，内容为一个对象，具体填什么参数参考分页器。

2.3 imglightbox

效果图
当我们点击图片时，从页面中抓取当前img进行放大处理。

祖传方法：
Utils.common.showImgLightbox(imgs, index);
我们将imgs（也就是把当前渲染数据集合的图片按照顺序抽取出来放在一个集合中），再把当前索引放进去，它就会自动的为每一个真实渲染的img dom添加图片放大点击事件，当我们点击图片的时候，就会放大当前点击图片。
这里用到的是react-image-lightbox流行imgbox 的组件库。

步骤：

1. 从当前集合中获取所有img集合
2. 在渲染当前集合数据img的时候，调用祖传方法，并将步骤一整理的imgs作为第一个参数传递进去，当前图片的index作为第二个参数。

2.4 地址+定位解决方案

效果图：
点击定位按钮


祖传方法：
Utils.addr
loadRegion：加载地区数据，并返回一个promise对象
getCodes：根据code获取用于级联列表展示的codes数组。
getPCD：首先调用loadRegion方法，按需加载地区数据，然后根据code从地区数据中匹配相应地区信息

Utils.common.locationPicker(this.syncLoaction)：弹出LocationPicker组件，传递的参数为点击定位信息后的回调，我们在这里将相关定位信息同步到state中，并在确认后保存进入数据库。
syncLocation(loc,_code)：
loc：定位信息对象，在我们选择定位信息后自动返回，包含latlng：地理坐标（经纬度）对象、poiaddress：定位具体信息、poiname：定位大概信息（定位名称）、code：地区码（对应级联选择器的code，我们这里与级联选择器的code同步）

Antdesign组件：
Cascader（级联选择）：

• options：级联数据
• values：当前展示的codes数组，在这里我们需要调用getCodes并传递code。
• onChange：回调函数，参数为codes，在这里我们将codes[2]的数据与state中的location.code同步，确定后保存进入数据库。

祖传组件：
LocationPicker：定位组件，这里我们通过弹窗来显示

更新的Utils.addr闭包函数：
解决问题：之前的loadRegion只在编辑学校信息的时候触发，因此当我们并没有进入该页面或者页面大刷新的时候，想要通过regions数据去解析code码，会报错。有两种解决方案，一种是在Index页面的componentMountDid中loadRegion，另一种就是通过promise，在每次解析code码（getpcd）的时候，先调用loadregion判断是否加载过regions，再执行解析过程。

let addr = (() => {
    let regions = [];

    let loadRegion = () => {
      return new Promise((resolve) => {
        if (regions.length > 0) {
          resolve(regions);
        } else {
          fetch(App.REGION_PATH).then((res) => {
            res.json().then((_regions) => {
              regions = _regions;
              resolve(regions);
            });
          });
        }
      });
    };

    let getCodes = (code) => {
      let codes = [3];
      if (code && code.length === 6) {
        codes[0] = code.substr(0, 2);
        codes[1] = code.substr(0, 4);
        codes[2] = code;
      } else {
        codes[0] = "41";
        codes[1] = "4101";
        codes[2] = "410101";
      }
      return codes;
    };

    let getPCD = (code, join = " ") => {
      return new Promise((resolve) => {
        loadRegion().then((regions = []) => {
          console.log(code);
          if (regions.length === 0 || U.str.isEmpty(code)) {
            resolve(null);
          }
          let codes = getCodes(code);
          let pcd = "";
          regions.map((r1) => {
            if (r1.value === codes[0]) {
              pcd = r1.label;
              r1.children.map((r2) => {
                if (r2.value === codes[1]) {
                  pcd += join + r2.label;
                  r2.children.map((r3) => {
                    if (r3.value === code) {
                      pcd += join + r3.label;
                    }
                  });
                }
              });
            }
          });
          console.log(pcd);
          resolve(pcd);
        });
      });
    };

    return {
      loadRegion,
      getPCD,
      getCodes,
    };
  })();

实现级联地区展示与定位步骤：

1. 写一个Input用来展示定位，传递属性value：当前定位信息数据、disabled：禁用、addonAfter：后缀图标
2. 并为后缀按钮添加点击事件，这里调用Utils.common.locationPicker(this.syncLocation)函数，点击打开定位组件
3. 书写syncLocation函数：根据参数，实时与state的定位数据进行同步。
4. 写一个Cascader用来展示级联地区数据，传递属性value：当前地区码数组codes、options：级联数据、onChange：实时更新state的级联地区码函数

2.5 图片上传+OssWrap

效果图：

图片上传祖传组件：
PosterEdit
属性：title：label
required：是否必填
type：scale
scale：建议比例
img：默认图片
sycnPoster：更新图片的回调，回调参数是上传Oss返回的url，指向图片地址

祖传方法
Oss上传：
OSSWrap.upload：默认的发送给"adm/file/upload_token"接口，向我们的oss发送图片。

实现步骤：

1. 放置PosterEdit组件
2. 填写以上属性
3. 写sycnPoster函数，同步state中的url数据

2.6 登录地址copy

效果图

祖传代码：
U.base64.encode(xx)：base64加密

实现步骤：

1. 引入copy-to-clipboard模块
2. 添加点击事件，
3. 构造url:U.base64.encode(xx)对核心数据进行加密展示
4. copy(url);

2.7 根据url生成二维码

效果图：

祖传代码：
DialogQRCode组件
属性：avatar：二维码中心图片
url：二维码对应的url
title：二维码
copyStr：下方可赋值的str，一般为name+url

实现步骤：

1. 引入DialogQRCode组件代码
2. 添加点击事件
3. 通过Utils.common.renderReactDOM挂载DialogQRCode组件
4. 填写上面的属性内容