前端ARTS打卡计划(二)

2020/06/16 ARTS 本文共6771字,阅读全文约需27分钟 本文总阅读量

  不知不觉,ARTS 打卡已十周,这十周一直在坚持做的其实主要是算法这块儿。篇幅所限,新开文章进行记录。

ARTS 打卡计划

第十一周(2020.06.15-2020.06.21)

  • Algorithm:
  • Review:
  • Tip:
    • mac 使用 code 命令打开 VSCode
      • 安装:打开 VSCode –> command+shift+p –> 输入 shell command –> 点击提示 Shell Command: Install ‘code’ command in PATH 运行
      • 使用:打开终端,cd 到要用 VSCode 打开的文件夹,然后输入命令 code .即可打开
    • explorer.exe 和 open:分别是 window 和 mac 从命令行打开文件夹的方式
    • window 下cd 命令:
      • 如果我们要切换盘符的目录,正确的用法是在 cd 和路径中间 增加一个’/d’:cd /d d:
      • 当我们要切换盘符时,可以不用 cd 指令 直接用 盘符,例如e:
    • centos 下配置 Nginx
  • Share:

第十二周(2020.06.22-2020.06.28)

第十三周(2020.06.29-2020.07.05)

第十四周(2020.07.06-2020.07.12)

第十五周(2020.07.13-2020.07.19)

第十六周(2020.07.20-2020.07.26)

  • Algorithm:

  • Review:

  • Tip:

    • 修改 url 不刷新页面(pushState 与 replaceState)
      • history.pushState(state,title,url):
        • state:存储 JSON 字符串,可以用在 popstate 事件(不是方法)中。
        • title:现在大多数浏览器不支持或者忽略这个参数,最好用 null 代替。
        • url:任意有效的 URL,用于更新浏览器的地址栏,并不在乎 URL 是否已经存在地址列表中。更重要的是,它不会重新加载页面。
          // 一般用来清空url传递的参数不刷新,这样可以少发送一次请求到后台
          let url = window.location.href;
          let valiable = url.split('?')[0];
          window.history.pushState({}, 0, valiable);
          

          前端路由实现:通过onpopstate()监控浏览器前进后退数据

  • Share:

第十七周(2020.07.27-2020.08.02)

  • Algorithm:

  • Review:
  • Tip:

    • 正常的 form 表单提交后需要进行页面跳转,如果我们不希望进行页面跳转,那么按以下两个步骤,通过一个 iframe 就可以解决这个问题(可以起到隐藏提交 url 信息、报错重定向等的作用):

      • 步骤一:首先在页面中定义一个空的不可见的 iframe

        <!-- 空iframe,用于协助处理form提交后不进行页面跳转的问题 -->
        <iframe
          id="iframe_display"
          name="iframe_display"
          style="display: none;"
        ></iframe>
        
      • 步骤二:将 form 的 target 指向该 iframe

        <form
          action="saveTreeNode"
          method="post"
          class="form-horizontal"
          role="form"
          target="iframe_display"
        ></form>
        
    • 让 AntD Form 校验错误时只输入框变红,不展示错误 message

      <Form.Item style={ { margin: 0 } }>
        {getFieldDecorator(dataIndex, {
          rules: [
            {
              required: isRequired,
              // message: `Please Input ${title}!`,
              message: <div style={ { display: 'none' } }></div>,
            },
          ],
          initialValue: record[dataIndex],
        })(this.getInput())}
      </Form.Item>
      

      只展示红框,不占用额外位置:

        :global {
          .ant-form-explain {
            display: none;
          }
        }
      
  • Share:

第十八周(2020.08.03-2020.08.09)

  • Algorithm:

  • Review:

  • Tip:

    • CSS 控制文字,超出部分显示省略号
    .textEllipsis {
      display: inline-block;
      height: 36px;
      line-height: 36px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
    }
    
    • CSS制作文本前面的垂直分割线
    .block_title {
      padding-left: 6px;
      margin-bottom: 6px;
      margin-top: 10px;
      font-weight: 600;
      &:before {
        content: '';
        display: block;
        width: 4px;
        height: 20px;
        background-color: #4074e1;
        position: absolute;
        left: 20px;
      }
    }
    

    divider

    • React 组件卸载、路由跳转、页面关闭(刷新)之前进行提示
    //监听窗口事件
    useEffect(() => {
      const listener = (ev) => {
        ev.preventDefault();
        ev.returnValue = '确定离开吗?';
      };
      window.addEventListener('beforeunload', listener);
      return () => {
        window.removeEventListener('beforeunload', listener);
      };
    }, []);
    
    • 前端打包自动上传、登录服务器:"build": "umi build && zip -r some_web.zip dist && zip -q -r some_web.zip ./dist && scp some_web.zip xxxname@192.168.190.242:~ && ssh xxxname@192.168.190.242"

    • break、continue 对 for…in 和 for…of 循环依然有效

  • Share:

第十九周(2020.08.10-2020.08.16)

第二十周(2020.08.17-2020.08.23)

  • Algorithm:

  • Review:

  • Tip:

    • 使用loadsh的_.cloneDeep(obj)时,要特别注意obj中是否包含React node节点,否则可能会造成栈溢出;
    • 供应链正式环境域名下,新开页面跳转、上传、下载时,协议由http变为https,导致报错问题:因为域名接入了内部SSO,域名解析时被强转https,通过配置nginx代理、开发监听443端口、上传及下载在nginx端配置proxy-pass并相应修改前端代码解决;(上传、下载分别使用antd Upload和form的action实现)
      nginx配置
      func
    • 页面嵌入泛微OA iframe弹窗,双击行,关闭弹窗,并把此行数据传递到上层(涉及跨域、操作跨域 DOM等,可通过postMessage完成数据传递,让泛微OA页面去控制弹窗);
      cross-origin-frame
        // 页面1
        top.postMessage(query, '*');
       //页面2 监听message事件
        useEffect(() => {
       const listener = ev => {
         console.log(ev,ev.data)
       };
         window.addEventListener('message', listener);
       return () => {
         window.removeEventListener('message', listener);
       };
        }, []);
      
    • 谷歌Chrome浏览器出现Whitelabel Error Page或者不停请求现象的解决:打开chrome://flags/,禁用(设置为Disabled)SameSite by default cookiesEnable removing SameSite=None cookies,重启浏览器(如果还是不行,可尝试禁用Cookies without SameSite must be securesamesite.png
  • Share:

Search

    欢迎与我交流

    江南逰子

    Table of Contents