- 博客(25)
- 收藏
- 关注
RSS订阅原创 前端常用的正则表单校验
前端我已经做了很多次的前端表单验证，这回想整理一下，以便以后后续直接拿来使用。验证方式关于验证方式我一直都是用的test()方法例如：正则表达式身份证号码正则表达式//第二代身份证号码正则let isTrue = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;//第一代身份证正则表达式(15位)let isTrue=/^[1-9]\d{7}((0\d)|(1.
2020-10-12 15:24:42
1779
原创 Echarts地图配置
最终效果：组件代码<template> <div class="container"> <div id="map"></div> <button :data-code="geoName" @click="changeMap">{{geoName}}</button> </div></template><script>import axios from 'axios'
2020-09-18 19:00:29
3816
5
原创 Element-UI el-table背景颜色透明
效果：el-table的背景颜色是白色的,若想重新设置背景颜色，官方文档并没有给出属性设置，需要直接通过css设置。效果：1.背景颜色透明 2.去边框 3.字体颜色这里直接贴代码：.regional_table { margin: auto; } .regional_table /deep/ .el-table--fit { background-color: #000 !important; } .regional_table /deep/ .el-table,
2020-09-16 19:35:07
10906
原创 移动端Swiper轮播图以及photoswipe的使用
1.Swiper轮播图其实Swiper的文档非常友好，基本会一点前端语言都能看懂并且简单运用，这里我就说一些小的坑，重点还是在于和photoswipe的搭配使用。1.版本我引入的是swiper4，需要注意的是，你引入不同版本需要查看不同版本文档。swiper新版本并不会覆盖老版本写法。比如在初始化时swiper4的写法为 $(function() { var myimgswiper = new Swiper('#imgswiper_home', { direction: '
2020-09-15 11:26:27
1156
原创 基于饿了么UI的el-tree进行两组数据的比较
利用递归迭代比较两组树形结构的内容compareTree() { let preChangeObj = ""; let changeObj = ""; const filterData = (list) => {//list参数包括了Node和data数据 if (Array.isArray(list)) list.some((res) => { if (res.childNodes.length >
2020-08-27 19:59:01
1055
1
原创 vue-antd-Echarts项目 问题及bug
1.左边响应式折叠栏自己添加的文字不能响应2.引入组件时用@代替目录索引3.使用路由可以在Antd的侧边栏标签中加以引用，从而与key值相匹配
2020-07-21 08:47:19
1624
原创 超图的坐标获取问题
最近因为工作原因开始学习超图，对于从来没有接触过前端地图类编程的我，在导师指导下，我先学习 了百度地图，随后进行超图的学习，以下是学习过程中的部分感悟（主要以超图为主）。超图坐标的获取我们知道超图是没有像百度地图的坐标拾取系统，所以要获取到自己想要的地方坐标系需要自己使用超图文档里提供的api来获取。1.获取像素坐标从而获取地图坐标1）首先我们需要创建一个点击事件来获取到你点击目标的像素坐标map.events.on({ "click":function(e){ console.log(e
2020-07-21 08:46:25
1391
原创 PLM项目总结（基础知识总结与Avue梳理）
具体来讲都是一些杂碎的知识点，今天决定有必要整合一下1.JS传参1）JS传参时把number类型转为string类型2）传参时把布尔值转换为1或0后端要求接收的数据是1和0，而此时我们获取到的checkbox的数据是true和false，如何将获取到的数据转为1和0使用~~2.数组方法应用场景1）传参时如果涉及循环数组生成新数组使用map方法2）filter和some的使用这里是循环表格数据，通过filter特性（只要item.checked为true则push到新的数组中）
2020-07-20 19:23:36
1141
原创 前端Vue项目使用Nginx部署上线
1.npm run build打包2.生成的dist文件最好放在英文路径下3.配置nginxvue官方文档将此代码块放在nginx配置中进行修改location / { root /app; index index.html; try_files $uri $uri/ /index.html;}nginx配置如下5.启动nginxstart nginx --启动nginx -s reload --重启nginx -
2020-06-22 16:15:43
1418
原创 百度地图InfoWindow信息窗口的自定义和样式修改
最近捣腾百度地图，在做标志物点击事件显示信息窗口时，发现官方的信息窗口只给了固定的样式，且比较普通。那么该如何想修改成自己想要的样式？1.在官方给出的原基础上进行修改了解这种方法有助于你理解官方的信息窗口结构。这里我拿官方示例来进行举例：纯文字信息窗口1.我们平时想要修改js生成的样式或者不是自己写的的样式时，需要找到其类名或者id名，然后在全局样式下进行修改。2.所以我们直接打开控制台，解析结构，重点来了：发现官方的信息窗口内部是由9个div组成的，具体按照顺序分布情况是上面三个（左上、中间、右上
2020-06-11 15:49:10
14011
原创 前端移动端用到的各别技术以及所遇问题总结（未完结）
1.性能优化1）FastClick它是一个简单易用的库，消除了移动端浏览器上物理点击和触发一个click事件之间的300ms延迟。原理：在检测到touch事件时，会通过DOM自定义事件立即模拟一个click事件，并把300ms后真正的click阻止掉。import FastClick from 'fastclick'if ('addEventListener' in document) ...
2020-05-13 09:50:27
327
原创 CSS选择器的整理
标签选择器格式:标签名称{属性：值；}id选择器格式: #id名称{属性：值；}注意点：1.每个html标签都有一个属性叫id，也就是说每个标签都可以设置id。2.在同一界面id不可重复。3.编写id选择器时一定要在id名称前加#。4.id名称只能由数字字母下划线组成，但不能以数字开头。不能是html的标签名称。一般来说，id是留给js使用的。类选择器格式:.类名...
2020-01-29 17:44:15
154
原创 web前端性能优化
前言：最近准备面试，看了很对关于前端性能优化方面的知识，但都比较杂，决定自己整合一下。我主要针对前端性能优化分了几个方面来说，在牵扯深度技术概念性问题不会做过多阐述。1.网络方面优化1.减少HTTP请求。这个请求是多方面的，有可能是你在js代码中的请求，也有可能是img标签的请求或是css中你插入的图片请求。因为一次HTTP请求伴随着一系列事件的发生（DNS寻址、服务器建立连接、发送数据，等...
2019-12-08 22:56:03
197
原创 JS的内存泄漏
1.什么是内存泄漏内存泄漏，第一次听到的小伙伴可能会字面理解，以为是内存被谁盗取了~（没错我也是），其实简单来说指的就是程序中用到的内存中没有及时释放。所以因此除c语言外其他语言一般都会有一个自动管理这些没有及时释放的内存机制：垃圾回收机制。2.垃圾回收机制垃圾回收机制最常用的方法叫做引用计数法，这里引用阮一峰大神：语言引擎有一张"引用表"，保存了内存里面所有的资源（通常是各种值）的引用次...
2019-12-05 12:58:13
129
原创 检测JS的数据类型的四种方法
1.typeof（）返回的对应6种基本数据类型,不多做介绍。这里注意，如果是引用类型（比如对象、数组等），那么返回的都是Object2.instanceofobject instanceof constructorMDN解释：instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。配合下面的例子就很好理解了，最典型也是...
2019-12-04 22:28:15
172
原创 js中的排序算法
快速排序快速排序算法思想很简单，总结下来是以下三步：1.选定一个值为基准（pivot）值。2.所有小于基准值的被放在左边，大于基准值的放在右边。3.对基准值生成的这两个子集，重复执行1和2下面是用JS实现的算法：var quickSort = function(arr) { if (arr.length <= 1) { return arr; } //判断元素个数...
2019-12-04 13:55:20
97
原创 浅拷贝和深拷贝的区分以及实现
浅拷贝和深拷贝的区别以及编写如何区分深拷贝与浅拷贝简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。编写一个浅拷贝ES6扩展运算符实现数组的浅拷贝var obj = { name: 'FungLeo', sex: 'man', old: '18'}var { ...obj2 } ...
2019-11-25 23:03:38
163
原创 使用nginx配置反向代理时出现的错误，一直报400错误
如题，在我用nginx配置反向代理后虽然程序可以运行，但在控制台会一直报如下400的错误。这里给出我的反向代理配置文件(nginx.conf)其实错误就在于nginx在使用proxy_pass做跳转和反向代理时，如果直接使用域名，且需要向后端提交当前访问的IP地址时，引发nginx的bug造成死循环。所以修改代码如下：如果用于反向代理location / { prox...
2019-10-05 10:20:20
3838
原创 Node.js和Vue前端进行联调解决跨域问题
Node.js和Vue前端进行联调解决跨域问题(报错:Failed to load http://localhost:8000/api/blog/list: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:5500’ is therefore...
2019-09-10 09:42:31
861
原创 webpack打包错误 ERROR Module parse failed: Unexpected token以及 WARNING in configuration
输入命令：webpack .\src\main.js .\dist\bundle.js报错如下：1.首先先说黄色的Warning黄色警告是因为webpack4引入了模式,有开发模式,生产模式,无这三个状态。可以看到末尾并没有生成我们所打包的main.js的信息，黄色部分的警告的意思是，没有设置模式,有开发模式和生产模式两种，那我们该怎么做呢？找到package.json.添加上”dev...
2019-07-25 19:14:32
3674
原创 `watch`、`computed`和`methods`之间的对比
watch、computed和methods之间的对比computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；methods方法表示一个具体的操作，主要书写业务逻辑；watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；...
2019-07-24 21:11:02
113
原创 `nrm`的安装使用
nrm的安装使用作用：提供了一些最常用的NPM包镜像地址，能够让我们快速的切换安装包时候的服务器地址；什么是镜像：原来包刚一开始是只存在于国外的NPM服务器，但是由于网络原因，经常访问不到，这时候，我们可以在国内，创建一个和官网完全一样的NPM服务器，只不过，数据都是从人家那里拿过来的，除此之外，使用方式完全一样；运行npm i nrm -g全局安装nrm包；使用nrm ls查看当前所有...
2019-07-24 21:10:24
109
原创 ES6的一些新的语法、方法
1.字符串补全长度的方法：可以用于填充时间为两位数显示。var dt = new Date(dateStr);var ss = dt.getSeconds().toString().padStart(2,'0');
2019-07-21 14:00:22
189
原创 React项目打包后运行报错，图片加载不出来的问题
React项目打包后在浏览器进行运行时出现404之类找不到图片的错误，图片加载不出来的问题一般都是由于路径设置不准确导致的。1.首先你需要修改一行代码进到你的react目录下 > node_modules > react-scripts > config > paths.jsfunction getServedPath(appPackageJson) { var ...
2019-07-17 21:05:51
4282
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人