自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(232)
  • 收藏
  • 关注

原创 JS注意事项

1、如果数组中的某一项的值是null 或者undefined,那么该值在join()、toLocaleString()、toString()方法返回的结果中以空字符串表示。

2019-05-15 14:44:08 329

原创 js算法题

1、如何获取数组的最深层次/*** 获取数组最深层次* @param - arrData : 数组*/function getArrayMaxlevel(arrData) { let maxLevel = 0 function arrayLoop(data, level) { data.forEach(item => { item.level = level if (level > maxLevel) { maxLevel =

2021-05-11 17:09:50 12

原创 js性能优化

1、数据存储的位置会对代码性能产生影响,为避免性能问题,应注意以下几点:1) 变量在作用域中的位置越深,访问时长越长,如若多次调用深层次的变量,可以将该变量赋值给局部变量;2)嵌套的对象成员会影响性能,尽量少用。...

2021-04-29 17:13:17 25

原创 js中对象参数的传递

js中对象参数传递都是按值传递,当参数为对象时,传递的是对象指针,函数中改变对象参数的值时,会影响函数外的该对象。但为对象参数重新赋值时,相当于改变了其指针指向,将其指向了其它内存地址,故自然不会影响函数外的同名对象。示例1:函数内改变对象参数的值,会影响到函数外该对象var person = { name: "Lucy"}function fn(obj){ obj.name = "Lilei"}fn(person);console.log(person.name); // 输

2021-03-28 19:56:31 42

原创 同一网站下sessionStorage共享问题

最初的时候误认为只要是同一网站下所有页面共享sessionStorage,后来发现事情不是这样的。页面是否共享sesstionStorage与打开方式有关系:通过点击链接或window.open打开的新标签页与当前页面是同一个session;其它方式单独新开页面,会初始化一个新的session,即使同一网站下,他们也不属于同一个session。譬如同一网站下有A、B两个页面,AB页面中均添加key为detail的sesstionStorage(A页面:sesstionStorage.setItem(“de

2021-03-28 18:39:36 61

原创 history模式的单页面应用刷新后页面404的解决办法

一、问题描述采用history模式的vue的单页面应用,刷新时404。问题分析:vue-router设置的路径不是真实存在的路径,故页面刷新后访问的资源在服务端找不到二、解决办法1、本地调试时,解决404的办法webpack配置文件修改:module.exports = { //... devServer: { historyApiFallback: true, // 自动将404响应跳转到首页入口文件 index.html }};在devServer里面有个hist

2021-02-01 14:36:12 108

原创 v-for中key属性的作用

v-for中key属性的值应唯一,起到身份认证的作用,避免v-for“就地更新”的策略。官方说法是:当 Vue 正在更新使用 v-for渲染的元素列表时,(没有key属性)它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue 将不会移动 DOM元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出。<!-- 示例代码: 没有key属性的v-for

2021-01-21 15:59:37 154

原创 css实现内容两端对齐

问题描述:因行边缘出现符号或其它情况导致 行边缘出现多余的空白,如何解决内容区域边缘不期望的空白呢?解决办法:用css实现两端对齐,解决行边缘出现的空白问题。text-align: justify;...

2020-12-24 10:29:39 73

原创 css 缩小图片后,图片变模糊的解决办法

问题描述:样式设置图片宽高后,图片缩小变的模糊了。如何解决图片模糊问题?解决办法:样式表中加入以下样式即可解决img { image-rendering:-moz-crisp-edges; image-rendering:-o-crisp-edges; image-rendering:-webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode:nearest-neighbor;}...

2020-12-08 11:18:25 2651 1

原创 如何限制element-ui的message只弹出一个

页面同时出现多个提示框不是很美观,那么如何限制同一时刻仅出现一个弹窗呢?解决方案:每次弹窗都会出现类名为el-message的元素,通过判断该元素是否存在来限制是否弹新窗。1)创建message.js文件,代码如下:// message.jsimport { Message } from 'element-ui'const showMessage = Symbol('showMessage')class gtMessage { success(options, single=true)

2020-11-17 21:31:08 264

原创 css实现垂直居中

1、父元素高度确定的情况下通过transform实现垂直居中<!-- css --><style> .box-wrap { background-color: red; width: 300px; height: 300px; padding: 20px; } img { width: 100%; position: relative; top: 50%; transform: translateY(-5

2020-11-17 17:56:06 25

原创 vue-router如何在新窗口打开页面

vue-router在新窗口打开页面的方法:let routeUrl = this.$router.resolve({ name: "detail", query: { id: item.id },});window.open(routeUrl.href, '_blank');

2020-11-17 10:40:05 76

原创 vue热更新慢的解决办法

1)安装插件:‘babel-plugin-dynamic-import-node’npm install babel-plugin-dynamic-import-node -D2)修改配置文件:babel.config.jsmodule.exports = { env: { development: { plugins: ['dynamic-import-node'] } }}

2020-10-26 13:36:52 473

原创 vue多页面应用如何针对其中的某个页面进行单独打包

一、应用场景:多个项目需要用到共同的组件,这时用多页面vue应用再适合不过了。但是这多个项目需要分别部署在不同服务器上,所以需要我们针对每个项目(即每个页面)进行单独打包。二、单独打包某个页面:这里我们以单独打包vue多页面应用中的其中一个页面(detail.html)为示例进行说明。1)创建新的打包模式:新建文件".env.detail"# set ENVNODE_ENV = 'production'# 需要打包的页面PAGE_NAME = 'detail'2)配置打包指令:修改pac

2020-10-26 11:30:10 730

原创 vue项目依赖文件拆分

需求背景:在构建vue单页面项目时,会将所有依赖打包成一个文件,如果依赖文件过大,会影响页面渲染。为了好的用户体验我们需要对依赖文件进行拆分,那么如何拆分呢?解决方案:修改webpack的配置文件externals,从输出的依赖文件中排除某些依赖包,将被排除的依赖包单独引入到html页面中。示例:1)webpack配置文件修改externals: { 'vue': 'Vue', 'element-ui': 'ElementUI',}2)去除main.js中element-ui的引

2020-10-22 10:45:52 245

原创 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

报错:Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location解决办法:在路由文件中加入如下代码,即可解决import VueRouter from "vue-router";//pushconst VueRouterPush = VueRouter.prototype.pushVueRouter.prototype.push = function push (to

2020-10-16 11:02:58 2091

原创 前端实现内容拷贝功能

点击元素实现内容拷贝功能,代码如下:<div id="copyEl" onclick="handleCopy('18288880000')">18288880000</div><script> function handleCopy(data) { var oInput = document.createElement("input"); oInput.style.border = "0 none"; oInput.style.color

2020-10-15 14:37:29 106

原创 IE9浏览器ajax请求error的解决办法

问题描述:网站在chrome、ie10+等浏览器均访问正常,但在ie9中所有跨域的ajax请求都失败,请求直接进入error。解决办法:设置IE9浏览器安全属性,启用【通过域访问数据源】选项;设置完成后需要重启浏览器才能生效。设置步骤如下图:...

2020-10-09 17:11:43 95

原创 window10下navicat11版本过期后如何继续使用

问题:window10下navicat11版本过期后如何继续使用?解决方案:步骤1):首先win+R,输入regedit步骤2):找到目录:HKEY_CURRENT_USER\Software\Classes\CLSID,将该目录下面有info的文件夹删除。如步骤2操作后不起作用,再执行以下操作:找到目录:HKEY_CURRENT_USER\Software\PremiumSoft,删除该目录下的data文件夹。...

2020-10-05 15:43:17 379 1

原创 如何让网站快速变灰

利用css滤镜,可使网站快速变灰,实现代码如下:html {  filter: grayscale(100%);  -webkit-filter: grayscale(100%);  -moz-filter: grayscale(100%);  -ms-filter: grayscale(100%);  -o-filter: grayscale(100%);  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.

2020-09-03 11:12:26 75

原创 css3前缀自动补全

1、安装自动补全css3前缀的插件:autoprefixernpm install -D autoprefixer2、修改package.json文件// package.json文件部分代码"browserslist": [ "> 1%", "last 2 versions", "ie > 8"]3、添加.postcssrc.js文件//.postcssrc.jsmodule.exports = { plugins: { autoprefixer:

2020-09-01 09:48:16 420

原创 CSS修改浏览器默认滚动条

css修改默认滚动条代码:/*滚动条宽度*/.box-wrap::-webkit-scrollbar { width: 4px;}/*滚动条里面小方块*/.box-wrap::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);}/*滚动条里面轨道*/.box-wrap::-w

2020-08-28 17:00:40 451

原创 浏览器页面渲染过程

1、浏览器页面渲染过程图2、浏览器渲染过程分析2.1 CSS加载阻塞DOM渲染,但不阻塞DOM解析有文件test.html,其部分代码如下截图所示:CSS加载阻塞DOM渲染访问test.html页面,通过控制台可查看第一个CSS文件的加载阻塞了其后面DOM的渲染,因此起初只看到了页面内容:“Hi,”,其它内容并未渲染出来。CSS加载不阻塞DOM的解析通过控制台可查看,DOM渲染被第一个CSS文件阻塞了,但是该文件后面的其它文件还能正常加载,说明CSS不阻塞DOM解析...

2020-08-27 15:51:47 69

原创 el-menu实现多级菜单效果

如何用element-ui的el-menu组件动态实现多级菜单?1)创建menuTree.vue组件<!--menuTree.vue--><template> <div class="gtd-menu-tree"> <template v-for="(item, index) in data"> <el-submenu :key="index" v-if="item.children && item.chil

2020-08-25 13:07:28 1043

原创 sentry-前端应用监控工具

一、sentry介绍:Sentry 是一个开源的实时错误追踪系统,可以帮助开发者发现问题、追踪问题;支持 web 前后端、移动应用等。了解更多信息,请移步sentry官网二、sentry配置1、注册sentry账号使用sentry监控平台,必须先申请账号2、登录sentry网站,重设语言和时区1)点击账号旁的箭头,打开弹出2)点击账号弹窗中的"User settings"选项,进入账号设置页面,可设置语言、时区3、配置项目1)点击‘项目’菜单,进入项目页面,创建自己的项目,这里我们以

2020-08-21 16:18:11 991

原创 mockjs拦截请求,生成假数据

在前后端分离的时代,前端开发不再过渡依赖于后端。在接口未开发的情况下,前端可以依据约定好的接口进行开发,借助mockjs拦截请求,制造假数据进行响应。1、mockjs安装npm install mockjs2、mockjs配置mockjs语法规范详见:https://github.com/nuysoft/Mock/wiki/Syntax-Specification1)mock文件配置(mock/index.js)const Mock = require('mockjs')// 接口配置co

2020-08-21 13:32:29 697

原创 npm 查看包的版本

用npm安装包时,想知道该包的版本有哪些,以便于从中选择某个版本安装。那么如何查看包的版本呢?一、查看远程仓库版本1、查看包所有版本语法:npm view [软件包名] versions# 查看docker的所有版本号npm view docker versinos2、查看包的最新版本语法:npm view [软件包名] version# 查看docker的最新版本号npm view docker version3、查看包的更多版本信息语法:npm info [软件包名]# 查看

2020-08-18 12:27:39 513

原创 vsCode中编辑Markdown文档

vsCode原生支持markdown语法,新建一个README.md文件,vsCode会根据后缀.md自动识别并启动markdown编辑。vsCode实时预览点击vsCode面板顶部的预览图标(以下截图中红框圈起的图标),可打开预览面板。实时编辑查看预览效果,如下截图所示:Typora生成文件利用Typora可编辑文档,也可将md文件导出成pdf、html等文件。...

2020-08-18 11:15:44 191

转载 YAHOO 35条前端优化建议

转载自:http://www.360doc.com/content/14/0325/14/15727046_363598248.shtmlYahoo!的 Exceptional Performance团队为改善 Web性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。原版猛戳:Best Practices for Speeding Up Your Web Site,Excetional Performance.

2020-08-17 11:39:55 139

原创 移动端适配方案postcss-px-to-viewport

做移动端适配可以用viewport单位,postcss-px-to-viewport可将px单位自动转换成viewport单位。1)利用npm安装postcss-px-to-viewportnpm install postcss-px-to-viewport --save-dev2)配置文件:postcss.config.jsmodule.exports = { plugins: { autoprefixer: {}, "postcss-px-to-viewport": {

2020-08-07 10:03:21 2485

原创 vsCode常用插件

gitLens-源代码管理插件点击代码行,可查看当前行的修改信息(修改者、修改时间等)

2020-08-02 21:09:19 67

原创 npm配置淘宝镜像

长久设置npm镜像用npm config set 命令设置镜像,一次设置后,长期有效。# 设置淘宝镜像npm config set registry https://registry.npm.taobao.org # 查看淘宝镜像npm config get registry# 从淘宝镜像中下载资源包npm install临时设定npm镜像用–registry参数设置镜像,仅设置时生效。# 从淘宝镜像中下载资源包npm install --registry=https://reg

2020-08-02 20:50:56 73

原创 nginx的service配置

1)在/etc/init.d/目录下创建nginx文件cd /etc/init.d/vim nginx2)编写nginx 脚本,内容如下:#!/bin/bash## chkconfig: - 85 15# description: nginx is a World Wide Web server. It is used to serve# Source Function Library. /etc/init.d/functions# Nginx SettingsNGINX_SBIN

2020-07-27 17:34:23 429

原创 node进程管理工具pm2

常用命令【pm2 start app.js】启动app.js应用从程序 ;【pm2 start app.js -i 3】cluster mode模式启动3个app.js的应用实例(3个应用程序会自动进行负载均衡);【pm2 start app.js --name=“myApp”】启动应用程序并命名为 “myApp”;【pm2 start app.js --watch】 当文件变化时自动重启应用;【pm2 stop all】停止所有的node服务(应用程序);【pm2 stop app.js】停

2020-07-27 16:44:36 69

原创 如何避免每次执行git pull 或 git push时需要输入账号的问题

问题描述:往往执行git更新或提交时,需要输入git仓库的账号,这样的流程很繁琐,如何实现账号一次输入即可记录呢?保存账号信息执行如下命令,保存账号信息git config --global credential.helper store查看账号信息执行如下命令,查看账号信息cat ~/.git-credentials...

2020-07-27 15:49:26 58

原创 css实现根据元素自适应宽度设定高度

需求描述:wap页面展现一张banner图片,要求其宽度为页面的宽度(屏幕宽度),高度为宽度的3/5。css实现: js实现方式很简单,就不做介绍了;这里我们说下css的实现方式。因padding是根据viewport的width来计算的,于是想到通过设置padding-bottom跟width达成某种比例关系。经尝试有效,代码如下:// banner-box为图片容器,设置其height为0,padding-bottom为60%;便可到达宽/高比为5/3。.banner-box{ width

2020-07-02 15:54:18 618

原创 nginx中$host、$http_host和$proxy_host区别

nginx中host、host、host、http_host和$proxy_host区别变量是否显示端口值$host不显示端口浏览器请求的ip,不显示端口$http_host端口存在则显示浏览器请求的ip和端口号$proxy_host默认80端口不显示,其它显示被代理服务的ip和端口号配置反向代理时,接口请求报404问题应用描述:前端应用域名为A(ww.a.com), 后端服务域名为B(www.b.com); 为了解决跨域问题,配置nginx反向代理如

2020-06-28 17:22:54 1358

原创 sudo node -v 报找不到命令错误

问题描述:执行命令(sudo node -v)报错:sudo: node: command not found,但可正常执行命令(node -v)。问题解析:因可正常执行node -v命令,故可肯定node已安装,可断定问题出现在sudo上。一番查询后,说是问题出在 sudo配置文件中的安全路径(secure_path)上,软件的安装路径并不属于安全路径,故报找不到该命令的错误。经查询node路径为"/usr/local/bin/node",secure_path路径为"/sbin:/bin:/u

2020-06-10 09:29:45 259

原创 linux命令安装rz和sz

在新的centos环境下,有时不支持rz(上传)和 sz(下载)命令,需要对该命令进行安装。安装执行命令:yum install lrzsz

2020-06-09 10:55:39 89

原创 git 常用命令

git分支创建【git branch 分支名】创建分支;【git checkout -b dev】创建并切换到dev分支git地址查看【git remote -v】git地址查看 ;git远程仓库地址修改方式一:修改远程仓库地址【git remote set-url origin URL】 更换远程仓库地址,URL为新地址。方式二:先删除远程仓库地址,然后再添加【git remote rm origin】 删除现有远程仓库【git remote add origin ur

2020-06-04 18:07:23 103

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除