前端实习问题总结及实习内容归档

青旅半醒 2022-02-25 15:46 394阅读 0赞

## 前言 ##

近日在公司切身实习，总结一下遇到的一些问题供自己日后参阅。  
（ps：因没有上下文，问题可能比较突兀）

## 问题总结 ##

#### 因用的公司mac，自己配各种环境时遇到最多的问题就是 权限不够? ####

1.
    // 安装npm 全局包时权限不够
    在安装命令前加上sudo，如$ sudo npm i -g npm
    或者直接更改权限sudo chown -R $USER /usr/local
    2.
    // 公司使用gitlab管理开发项目，我clone拉取项目后npm i也提示权限不够
    应该是项目的权限问题，当时叫一个大佬将我的gitlab账号拉入他们的那个项目组好像就可以了
    3.
    // 有个活动项目依赖于npm-gym(又依赖于xcode相关配置)，因此npm i报错
    gyp ERR! stack Error: `gyp` failed with exit code: 1
    gyp ERR! stack     at ChildProcess.onCpExit (/usr/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:345:16)
    gyp ERR! stack     at ChildProcess.emit (events.js:182:13)
    
    安装了xcode之后执行权限
    sudo xcode-select -switch /Library/Developer/CommandLineTools
    sudo xcode-select -s /Applications/Xcode.app/Contents/Developer（需要将xcode拉到应用程序目录下）

#### 公司是如何进行项目分配管理的？ ####

前端组也有写后台的工作（可能是因为他们都是大佬吧），目前博主因为是前端实习生所以主要接触到的是 运动app里面的活动一栏中各活动的前端部分的页面编写。因此，我基本操作都是 从gitlab中前端组的活动页面仓库的某一个具体活动项目 拉取下来到本地进行项目编写修改（有一个项目模版，相当于用vue-cli创建的初始化项目目录），编写完成后再上线测试（相当于将页面部署到公司app的服务器上，可以具体浏览），自己修改完成后再提交给测试组，至此我的工作仅接触到这。  
一些关于公司里的项目总结：1.公司项目会有搭建好的初始化项目模版。2.公司有自己写的一些库（比如分享，分享之后页面如何显示，分享出来的模版，判断是否在公司app内等功能）。3.学会自己用ps切图，一般ui组会给你psd图。4.初始化的模版中一般有写好的一些常用api。5.项目需要上线时一般放在活动项目仓库里的online分支。6.公司使用企业微信，全自动管理，请假什么的可以自己提oa，并且会给你注册企业邮箱来分发信息什么的，还有个任务平台叫tapd。

#### 给一个h5页面中的点击事件 添加埋点？ ####

使用的是第三方服务——百度提供的埋点工具

<script>
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?4dd0ba3c986afb80006de2cc534aaa4c";
          var s = document.getElementsByTagName("script")[0];
          s.parentNode.insertBefore(hm, s);
        })();
      </script>
     // 然后在需要埋点的地方添加比如点击事件 
     // onclick="_hmt.push(['_trackEvent', '立即分享', 'click','沃尔沃-立即分享点击'])"
     // 具体使用方法参见百度统计工具

后面 修改为神策埋点。

#### vue-router中的模式配置 hash 和 history的区别? ####

hash模式url里面永远带着\#号，在开发当中默认使用的这个模式。那么什么时候要用history模式呢？如果用户考虑url的规范那么就需要使用history模式，因为history模式没有\#号，是个正常的url适合推广宣传。当然其功能也有区别，比如在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的，把这个页面分享到第三方的app里，有的app里面url是不允许带有\#号的，所以要将\#号去除那么就要使用history模式。但是使用history模式有一个问题就是怕刷新操作，会出现404错误，此时就需要和后端人配合让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上。  
（具体区别自行百度）  
（其实当时遇到的问题是 使用gulp打包文件之后页面显示为空白，未挂载上dom树，然后问了大佬之后修改vue-router中的history模式为hash模式。）

#### 使用vuex中的actions获取后台数据后存取到state，在组件中需要后台数据渲染页面时的一些问题？ ####

使用getter处理数据之后在组件中watch监听mapGetters时报错（找了半天没找到原因），然后就换了一种方式直接监听mapState中数据变化就可以（不知道是不是getter不能用来监听异步数据），监听到值变化之后将数据处理并赋值给组件里 data中定义的值让页面来使用。

> 这里总结一下对异步数据处理渲染的一些问题：  
> 对于页面中要渲染的异步数据不能直接展示，因为异步数据在页面渲染时还未请求到所以会报错，需要进行三元表达式判断，有值显示，无值则为空。  
> created中获取的异步数据不能在mounted中使用，使用console.log打印为空。  
> 关于异步执行顺序的问题需要了解及实践

> 跟异步操作相关的一些方法或函数（点击进入相关概念总结）：  
> [promise][]  
> [async/await][async_await]  
> [以及一些其他方法总结][Link 1]

#### 如何使用input:file上传文件？ ####

// html中input:file部分，页面中展示为上传文件：
    <input type="file" name="imgSubmit" id="input_img" accept="image/*" @change="imgEvent">
    
    // js中这里的file获取的就是选取了上传文件当中的那个文件对象：
    var file = document.getElementById('input_img').files[0]
    // 接下来就可以将file对象通过ajax提交给后台（我用的是公司提供的api），常用方法百度了解

这里了解一下input:file标签的一些属性：

> accept= MIME类型列表  
> 指定为用户代理提供将接受的文件类型的提示。  
> multiple= boolean  
> 指示是否允许用户指定多个值(是否多选)。  
> name= string  
> 给出input元素的名称。  
> required= boolean  
> 指定时，元素是必需的。  
> value= string  
> 给出input元素的默认值。

**<input type=“file”>** 标签每出现一次，一个 FileUpload 对象就会被创建，当用户选择或编辑一个文件名，file-upload 元素触发 onchange 事件。

#### 公司app内移动端网页兼容性总结？ ####

meta中各属性：

> width=750 设备固定像素宽度750px  
> width=device-width 像素根据设备的宽度等比例缩放（跟上面结合也就是在750px宽度的设备写好样式，在其他分辨率设备下自动等比例缩放）  
> initial-scale=1 表示初始的缩放比例  
> shrink-to-fit=no ios9下width自适应兼容性解决  
> user-scalable=no 禁止用户缩放网页  
> target-densitydpi=device-dpi target-densitydpi是这个私有属性，它表示目标设备的密度等级，作用是决定css中的1px代表多少物理像素，device-dpi是使用设备原本的 dpi 作为目标 dp，不会发生默认缩放。  
> target-densitydpi 值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个。特别说明的是，当 target-densitydpi=device-dpi 时， css中的1px会等于物理像素中的1px。因为这个属性只有安卓支持，并且安卓已经决定要废弃 target-densitydpi 这个属性了，尽量避免使用这个属性。

#### Vue中Vue.$set()的使用？ ####

首先，为什么会有这个方法？官方文档的回答：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。通俗来讲就是 当vue的data里边存在已经声明并赋值过的对象或数组（数组里边的值是对象）时，向对象中再添加新的属性，并且更新此属性的值（比如增加1），视图是不会更新的。  
一个例子：

<template>
         <div>
        <p @click="addd(obj)">{
       {obj.d}}</p>
        <p @click="adde(obj)"> {
       {obj.e}}</p>
    </div>
    </template>
     <script>
      export default {
          data () {
                return {
                    obj:{d: 0}
                }
          },
          mounted () {
            this.obj.e = 0;
            console.log('mounted中增加属性e后：', this.obj);
          },
         methods: {
            addd (item) {
                item.d = item.d + 1;
                console.log('执行d+1：',item);
            },
            adde (item) {
                item.e = item.e + 1;
                console.log('执行e+1：',item);
            }
           }
      }
     </scirpt>

刚打开页面时的页面效果及调试器中：  
![在这里插入图片描述][20190422113241164.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4ODg0NA_size_16_color_FFFFFF_t_70]  
**调试器中可以看出d属性是有get 和 set方法的，而新增的e属性是没有的。**

点击触发3次addd，以及点击触发3次adde的页面效果及调试器：  
![在这里插入图片描述][20190422113655181.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4ODg0NA_size_16_color_FFFFFF_t_70 1]  
**由此可以看出，更新新增属性e，是不会更新视图，但是会改变e的值。**

此时点击再触发1次addd,页面效果如下：  
![在这里插入图片描述][20190422114056715.png]  
**此时e视图中也更新。所以当更新原有属性d时会更新视图，同时将新增的属性的值也更新到视图里边。**

所以为了解决新增属性不更新问题，vue官方就提供了一个方法Vue. s e t ( ) 或 者 使 用 全 局 V u e . s e t 方 法 的 别 名 v m . set()或者使用全局 Vue.set 方法的别名vm. set()或者使用全局Vue.set方法的别名vm.set 实例方法。

上例中页面中值不刷新解决办法：

mounted () {
    	Vue.set(this.obj, 'e', 0)
        // 或者this.$set(this.obj, 'e', 0)
        console.log('mounted中增加属性e后：', this.obj);
    }

此时触发adde方法页面中也会同步更新。

#### 由上个问题想到js对象中的getter和setter这两个存储器属性，有什么作用？ ####

上例obj对象中新增的e属性就因为不具备get及set方法，所以在e的值改变时页面上未改变。  
这里首先说一下getter 是一种获得属性值的方法，setter是一种设置属性值的方法。那么这两个存储器的作用是可以拦截你的赋值和获取操作去干一些别的事情（具体事例百度）。VueJS中用getter和setter实现的数据双向绑定。

#### 如何将后台获取到的日期数据（一串数字）转换为 标准日期的格式？ ####

/* eslint-disable */
    // 重写Date原型链上的Format方法
    Date.prototype.Format = function (fmt) {
      var o = {
        'M+': this.getMonth() + 1, // 月份
        'd+': this.getDate(), // 日
        'h+': this.getHours(), // 小时
        'm+': this.getMinutes(), // 分
        's+': this.getSeconds(), // 秒
        'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
        'S': this.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
      }
      return fmt
    }
    
    // 调用Format函数
    var date = new Date(1552985117)
    var myDate = date.Format("yyyy-MM-dd hh:mm:ss")
    alert(myDate)

## 内容总结（以下内容无营养。。。慎看） ##

*  2019.03.27 - 2019.03.28  
    分配的公司电脑装前端所需的 软件及各环境配置
 *  2019.03.29  
    熟悉一个小项目（运动app活动栏里的其中一个简单的活动页项目），将公司的开发环境及框架了解了一下。
 *  2019.03.30 - 2019.04.01  
    修改咕咚app的 v认证计划第二期活动页的一些内容（在第一期的项目基础上修改添加），调试一些bug，并提交测试准备上线（上线时间：4月5日-4月20日）。
 *  2019.04.02 - 2019.04.03  
    给 Gomore-智能陪跑教练介绍页项目 中的点击事件（点击免费试用）添加神策的H5埋点。
 *  2019.04.08  
    8号上午 上线v认证计划第二期活动页 修改了一些图片，改了移动端适配的样式  
    下午继续完善了第一天的练手项目并上线测试环境
 *  2019.04.09  
    完成了一个简单的页面项目（苹果活动合作页面），其中运用公司提供的库中的getGps方法获取当前经纬度并添加在点击按钮中的跳转链接末尾，并判定此页面是否是在app内打开，若是则获取用户信息。给点击按钮添加神策埋点。
 *  2019.04.11  
    一个涉及前后端交互的活动页项目（年度系列奖章），预计19号上线。  
    下午等UI出图，学习了一下nodejs。
 *  2019.04.12 - 2019.04.16  
    大致完成 年度系列奖章活动页(Bug待测试)，深入了解到vuex存取后台数据这一套。
 *  2019.04.17  
    年度系列奖章活动页中最下方的banner及商品部分 拉取后台商品数据时需要id，产品这边说写个页面自己管理上传banner图及商品id，于是做了个提交banner图和商品id到后台的页面。了解到input:file的一些使用方法。
 *  2019.04.18  
    因为明天年度系列奖章活动页就准备上线了，今天主要就是调调它的bug什么的。下午修改提交banner页面的bug，然后准备上线。
 *  2019.04.19  
    继续调bug…
 *  2019.04.22 - 2019.04.24  
    总结了前段时间以来遇到的一些问题，22号下午则有了新的任务（2019完赛到底活动页）。  
    直至24号将2019完赛到底活动页的ui写了大部分，然后突然有一个新活动任务–沃尔沃预约试驾

2019.04.24 - 2019.04.30  
因为关于预约试驾的系列活动是有个通用表单组件是用react写的，所以 沃尔沃预约试驾的页面我就用react来写。（因为之前基本没接触过react，所以写的时间较长，写完之后调bug都调了两天多，直到30号终于正式上线了）

2019.05.01 - 2019.05.07  
继续写 2019完赛到底活动页的ui并将抽奖功能做完，6号提测修bug，7号活动正式上线。

2019.05.08  
因学校课程冲突的原因。  
不得已。。。  
辞职了！！！！！！！！！

> 博主感受：一个多月的实习时间感觉很少啊，但是学到了公司项目方面的很多东西，并且自己的知识体系上有了更清晰的认识，实际一点说：了解到react部分内容，对异步有了更深入认识，vue基本能用的很熟练了，移动端适配也有所掌握，代码逻辑也有了提升，学会了很多工具的用法，切图也很厉害了哈哈，也算颇有收获。

[promise]: https://www.cnblogs.com/zhoumingjie/p/10022355.html
[async_await]: https://segmentfault.com/a/1190000007535316?utm_source=tag-newest
[Link 1]: https://blog.csdn.net/z469590925/article/details/78789861
[20190422113241164.png]: /images/20220225/04f5ca3a2ee941a18d3eb72c1b29972e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4ODg0NA_size_16_color_FFFFFF_t_70]: /images/20220225/2010e9900fc243e6adc346990449ecdd.png
[20190422113655181.png]: /images/20220225/d64d60d39b1b4f4d86d723a6b60d1f4b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4ODg0NA_size_16_color_FFFFFF_t_70 1]: /images/20220225/5e6148b1f78849d1a36bb1f8cc7505f3.png
[20190422114056715.png]: /images/20220225/f4efc7b19ad74bbf96566f682f54e938.png