前端工作周总结

蓝百合
510 阅读3分钟

2020 新的开始，每周争取写下这周的工作总结。主要记录我踩过的坑，有些使用较少，但是重要的代码，以及学习到的新知识点，期待能促进我更近一步。

以前踩过的坑

  1. egg中，同样的请求方法，router对路径里面冒号后的字段不敏感，比如路径为/test/test1:user,和/test/test1:admin，请求的最终归处为哪个在前面就用那个
  2. element表单有校验，同时表单中某些项在特定条件下隐藏时，使用v-if 报错的校验不会同时隐藏而使用v-show就可以，如下图
  3. 使用node层的项目,node层做作登录校验，一定要注意校验匹配的正则，比如要对u/下的所有接口校验，则正则中最好写成/^/u/否则要是页面路径带有u则会跳登录页
  4. 需求背景是一个大项目重构，一次重构不完就重构一部分，然后两个项目A，B同用一个域名，用到nginx转发，此时会出现怪异的现象，进入A项目的目录，然后通过菜单进入B页面就会c404，但是直接通过url进入页面是没有问题的，最后查到问题在于，在A项目中点击菜单（a链接）走的是vue-router没有触发nginx,而A项目中已经没有那个页面了，所以会显示404，我的解决办法是，在A项目中加入B项目的router统一用一个组件去刷新当前页面，这时触发nginx页面就显示正常了

想要留下的代码

  1. js获取url的protocol，和host，以及获取url的参数
var protocol = window.location.protocol
   var host = location.host
   function GetRequest(url) {
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
       var str = url.substr(1);
       strs = str.split("&");
       for(var i = 0; i < strs.length; i ++) {
       theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
     }
   }
   return theRequest;
   }
  1. Form 表单中数组的单个值校验
productUrl: [''],
<div
v-for="(item, index) in productUrl"
:key="index"
class="productUrls"
>
<el-form-item
label="秒杀uuid"
:prop="'productUrl.' + index"
style="margin-left:60px;"
:rules="[{ required: true, message: '请输入测试id' }]"
>
<el-input
placeholder="请输入测试id"
v-model="form.productUrl[index]"
>
</el-input>
</el-form-item>
</div>
  1. table中设置校验如下
<tr v-for="(priceItem, index1) in dataItem.tableData" :key="index1">
<td>
  <div class="cell">
    <el-form-item
      :prop="'configPrice.'+index+'.tableData.'+index1+'.price'"
      :rules="[
        { required: true, message:  ‘价格是必填项' },
        {
          validator: (rule, value, cb) => {
          if (/^\d+(\.\d{1,2})?%?$/.test(value)) {
            return cb();
          } else {
            cb('请输入小数点后2位的正数')
          }
        }
      }]">
      <el-input v-model.trim="priceItem.price">价格</el-input>
    </el-form-item>
  </div>
</td>
</tr>

学习到的新知识

从阮一峰的科技爱好者周刊中看到的想要留下的东西

  1. 一个 Docker 镜像文件的瘦身工具，据称最好情况下，可以让镜像文件体积缩小为原来的30分之一。

  2. 这个网站可以不停往下拉，看看每个深度的海底都有些什么生物

  3. 彩云小译 - 网页翻译chrome插件,阅读英文文档可以翻译。

这周还学习了一下eslint，之前在工作中经常用到，但是从没仔细的去了解过，我想应该再写一篇文章介绍我所学习的eslint

avatar
文章
阅读
粉丝