个人碰到的前端问题总结及解决办法4

个人碰到的前端问题总结及解决方法4

1、js实现深拷贝？

解决方法：

方法一： 推荐使用jquery的使用
let newObj= $.extend(true, {}, obj1);  //拷贝完成
//手写递归方法实现
方法二：
//函数拷贝
const copyObj = (obj = {}) => {
    //变量先置空
    let newobj = null;  
    
    //判断是否需要继续进行递归
    if (typeof (obj) == 'object' && obj !== null) {
        newobj = obj instanceof Array ? [] : {};
        //进行下一层递归克隆
        for (var i in obj) {
            newobj[i] = copyObj(obj[i])
        }
        //如果不是对象直接赋值
    } else newobj = obj;
    return newobj;    
}


newObj = copyObj(obj);

参考链接：
https://juejin.cn/post/7109843641677398053
https://juejin.cn/post/7113829141392130078 JSON.stringify()去实现深拷贝的坑

2、vue中使用echarts？

在Vue中使用Echarts时可以按照一般引入插件的方式引入
第一步：使用npm安装Echarts：
npm install echarts --save

第二步：全局引入Echarts：
//main.js 不推荐 import echarts from “echarts”; Vue.prototype.$echarts = echarts; 个人不推荐在main.js全局引入的发方式，根据项目使用Echarts的程度可以选择按需引入：

其他：按需引入Echarts：
let Echarts = require(‘echarts/lib/echarts’); require(‘echarts/lib/chart/bar’); //所需图表

参考链接：https://zhuanlan.zhihu.com/p/266700830

3、滚动条样式修改

::-webkit-scrollbar    //滚动条整体部分
::-webkit-scrollbar-button   //滚动条两端的按钮
::-webkit-scrollbar-track   // 外层轨道
::-webkit-scrollbar-track-piece    //内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-thumb //滚动条滑块
::-webkit-scrollbar-corner   //边角
::-webkit-resizer   ///定义右下角拖动块的样式

参考链接：https://blog.csdn.net/qq_44624742/article/details/117694764

4、如何使element-ui中的table分页并且可进行批量操作？

解决方法：

• 在el-table中添加:row-key=“getRowKeys”

getRowKeys(row) {
    return row.tagId;
},

• 然后第一列，即有多选框的一列，添加:reserve-selection=“true”
• 完成后需要清空选中,不然会在下一个批量操作中记录上一次选中的数据

参考链接：https://blog.csdn.net/weixin_46995731/article/details/120565715

5、解决el-checkbox单击事件会触发两次的问题？

**原因：**单击事件会触发两次，一次在label/span标签上，一次在input标签上
**解决方法：**根据点击元素的标签，禁用两次单击事件的其中一次即可

if (e.target.tagName !== 'INPUT') return

参考链接：
https://blog.csdn.net/qq_38916778/article/details/124926796
https://blog.csdn.net/weixin_46099269/article/details/118543386

6、JS数组去重7种方法

方法：

• 利用 indexOf () 方法去重
• 利用 splice () 方法去重
• 利用 ES6 Set 去重 推荐这个，方便快捷
• 利用 sort () 方法排序，然后对比前后元素去重
• 利用 includes () 方法检测数组是否有某个元素去重
• 利用 filter 去重
• 利用 Map 数据结构去重

参考链接：https://learnku.com/articles/63298

7、Vue中的$Bus使用？

• 将Bus单独抽离成一个文件。这种方式，经过webpack打包后可能会出现Bus局部作用域的情况，即引用的是两个不同的Bus，导致不能正常通信
• 将Bus注入到Vue的prototype上(下方代码即是)。推荐使用

//main.js
// 将挂载到prototype单独抽离成一个文件
import plugin from './util/Bus';
Vue.use(plugin);

//./util/Bus.js
import Bus from 'vue';
let install = function (Vue) {
	// 设置eventBus
	Vue.prototype.bus = new Bus();
}
export default { install };

父组件
mounted () {
    // 注册事件
    this.bus.$on('updateData', (content)=>{
    	console.log(content);
    });
},
// 注册的总线事件要在组件销毁时卸载，否则会多次挂载，造成触发一次但多个响应的情况
beforeDestroy () {
    this.bus.$off('updateData', (content)=>{
	    console.log(content);
    });
}

子组件
tapBus(){
// 触发兄弟组件身上的事件，并传一个object过去
	this.bus.$emit('updateData', {loading: false});
}

参考链接：https://www.cnblogs.com/rope/p/12330490.html

8、前端页面一次性渲染多条数据如何优化 ？

参考链接：https://blog.csdn.net/baiqiangdoudou/article/details/102372740
https://juejin.cn/post/7012142357969633294

9、element实现表格纵向表头？

// 数组按矩阵思路, 变成转置矩阵
let matrixData = this.originData.map((row) => {
    let arr = []
    for (let key in row) {
        arr.push(row[key])
    }
    return arr
})
console.log(matrixData)

参考链接：https://blog.csdn.net/weixin_40571965/article/details/119342313

10、vue实现页面内容禁止复制？

方法一：添加样式：
*{  
	  -webkit-touch-callout:none;  /*系统默认菜单被禁用*/   
	  -webkit-user-select:none; /*webkit浏览器*/   
	  -khtml-user-select:none; /*早期浏览器*/   
	  -moz-user-select:none;/*火狐*/   
	  -ms-user-select:none; /*IE10*/   
	  user-select:none;   
} 
input{  
	-webkit-user-select:auto; /*webkit浏览器*/     
}
textarea{
	-webkit-user-select:auto; /*webkit浏览器*/
}
ps：该方法输入框和文本域依旧可复制
方法二：
推荐使用
this.$nextTick(() => {
    // 禁用右键
    document.oncontextmenu = new Function("event.returnValue=false");
    // 禁用选择
    document.onselectstart = new Function("event.returnValue=false");
});

参考链接：
https://blog.csdn.net/weixin_42873160/article/details/94620342
https://blog.csdn.net/weixin_45002054/article/details/114627013

11、如何设置文字在一个DIV中水平分散对齐？

text-align-last:justify;
text-align:justify;
text-justify:distribute-all-lines; // 这行必加，兼容ie浏览器

参考链接：https://blog.csdn.net/zhangjing0320/article/details/81938379

12、js如何判断数组包含另一个数组？

方法有很多，这里列一个我喜欢使用的
getInclude(arr1, arr2) {
  return arr1.every((item) => {
	return arr2.includes(item)
  })
}

参考链接：https://blog.csdn.net/qq_41676648/article/details/107597595

13、网站XSS漏洞？

• xss攻击分为反射型、存储型、DOM型。一般防御手段：对关键词转义或过滤。
• 前端使用vue-xss防范xss漏洞的缺点是不适配ie浏览器

参考链接：
快速入门xss 判断网站是否存在xss漏洞
https://cloud.tencent.com/developer/article/1352463
https://www.cnblogs.com/syw20170419/p/8639246.html
Springboot项目XSS漏洞的解决方法
https://blog.csdn.net/xiaopy_0508/article/details/125662419
vue防止xss
https://blog.csdn.net/weixin_40780243/article/details/108900264
https://blog.csdn.net/u011140116/article/details/107994191
前端如何防止xss攻击
https://www.cnblogs.com/meituantech/p/9718677.html

14、css设置超出宽度文本显示…

单行超出：
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

超出两行（多行）显示…
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
//多行
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

参考链接：https://blog.csdn.net/qq_43639075/article/details/90241554

15、实现文字在容器中循环滚动？

方法：

• 使用css动画-animation实现
• 使用HTML的marquee标签实现

参考链接：
CSS 技巧一则 – 不定宽溢出文本适配滚动
https://www.cnblogs.com/coco1s/p/13385598.html
css动画-animation各个属性详解
https://blog.csdn.net/aSuncat/article/details/52588078
HTML如何实现文字的滚动效果
https://www.php.cn/div-tutorial-413403.html

16、element dialog里嵌套组件内dialog？

解决方法：

• 在父级的盒子外面添加一个 :modal-append-to-body=“false” append-to-body
• 在展现的dialog加一个 append-to-body

参考链接：https://blog.csdn.net/weixin_48200589/article/details/114819966

17、使用时导出的excel文件损坏，打开不了，后台没异常错误问题解决？

**原因：**请求少了个参数：responseType: ‘blob’

参考链接：https://blog.csdn.net/Jackbillzsc/article/details/125782102

18、如何在Webstorm中调试Vue代码 按住Shift+Ctrl，鼠标点击项目的url

https://juejin.cn/post/7077813962993041421
https://juejin.cn/post/7057070180089724959
下载插件地址：https://chrome.zzzmh.cn/info/hmhgeddbohgjknpmjagkdomcpobmllji
JetBrains IDE Support的安装
https://blog.csdn.net/weixin_45369499/article/details/101429307

19、vue在ie上的兼容？

参考第一条链接内容，vue-cli3创建的项目亲测有效

参考链接：
https://www.cnblogs.com/tizi/p/13632573.html
https://blog.csdn.net/qq_24985715/article/details/93764818
https://www.jianshu.com/p/952e3fe27f7c

20、vue 加密解密？

参考链接：
https://blog.csdn.net/weixin_44972441/article/details/122981796
vue-router路由中对query中的参数进行加密
https://blog.csdn.net/weixin_44243061/article/details/107092308

21、其他

1、表格分页注意：页数大小改变和搜索条件改变都应将页码改为1

2、获取一个树节点下所有子节点的长度，通过递归实现

//获取当前节点的所有子节点的长度
getTreeNodeAllChildrenLength(nodeObj,length){
  if(nodeObj.children.length!==0){
    length+=nodeObj.children.length
    for(let i=0;i<nodeObj.children.length;i++){
      length+=this.getTreeNodeAllChildrenLength(nodeObj.children[i],0)
    }
  }
  return length
},

3、解决el-check-group下的el-checkbox多选框选中状态更改问题

https://blog.csdn.net/chen_cm/article/details/110117540

4、js判断某个字符串是否包含另一个字符串，推荐使用indexof方法

https://www.cnblogs.com/shirliey/p/11764410.html

5、vue项目Rem与px之间的转换 ，导入amfe-flexible插件（用来修改rem与px的基准比，浏览器默认1rem=16px）

https://blog.csdn.net/Evan_QB/article/details/81323820

6、css 颜色工具

https://m.fontke.com/tool/rgb/

7、设置element ui 时间选择器当天之前日期不可被选择

https://blog.csdn.net/weixin_45656587/article/details/122080577

8、vue: slot插槽不起作用的解决办法

https://blog.csdn.net/weixin_46704556/article/details/118638344

9、element-UI tree树形控件搜索过滤节点，不展示子节点的问题

https://blog.csdn.net/weixin_44072916/article/details/112370398

10、重定向方法sendRedirect()中的路径问题的初步了解

https://blog.csdn.net/qq_47234534/article/details/107305420