
前端项目经验
_dalianmiao
这个作者很懒,什么都没留下…
展开
-
Object.assign实现深复制的方式
Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。const target = { a: 1 };const source1 = { b: 2 };const source2 = { c: 3 };Object.assign(target, source1, source2);target // {a:1, b:2, c:3}Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。这里主要是说这个方法的原创 2020-11-04 15:53:24 · 840 阅读 · 0 评论 -
关于数组、对象的深浅拷贝
浅拷贝数组和对象作为JS的引用类型,直接使用赋值“=”的话,会把源数组、对象的地址赋值给新的数组、对象,并没有实现数组的数据拷贝,这种方式实现的就是浅拷贝。赋值给另一个变量时,实际上是把另一个变量指向了与之相同的地址,当我们改变其中一个时,实际上改变了堆内存中的存储内容,相应的所有指向该地址的数组都发生了变化深拷贝深拷贝是重新分配新的存储空间,两个对象对应不同的地址,修改其中一个值,不会影响...原创 2020-01-14 17:59:02 · 364 阅读 · 0 评论 -
vue实战_使用echarts
在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1 开始由官方 EFE 维护 npm 上 ECharts 和 zrender 的 package。你可以使用如下命令通过 npm 安装 EChartsnpm install echarts --save全局引入和按需引入 main.js // 引入echartsimpor...原创 2019-12-21 14:00:53 · 300 阅读 · 0 评论 -
css 双击 取消选中的文字
在测试的时候,测试狂点按钮,会导致部分文字选中,这是浏览器默认会选中双击的文字,但是有时候会给用户造成不好的体验 。这个时候我们可以使用 user-select:none; 属性div{-moz-user-select:none;/火狐/-webkit-user-select:none;/webkit浏览器/-ms-user-select:none;/IE10/-khtml-user-s...原创 2018-12-01 17:50:53 · 1010 阅读 · 0 评论 -
Vue 路由权限控制,只能从登陆页面进入系统
实现这种校验分几个步骤 1.设置路由是否需要校验的阈值 在路由配置加上meta的判断 routes: [{ path: '/', name: 'Login', component: () => import('@/pages/login/login') }, { path: '/home', name: 'Home', me...原创 2018-09-11 10:51:14 · 5896 阅读 · 0 评论 -
JS获取过去六个月列表
JS获取时间 createDateDate () { let datelist = [] let date = new Date() let Y = date.getFullYear() let M = date.getMonth()+1 for (let i = 0; i < 6; i++) { ...原创 2018-08-27 21:43:19 · 3395 阅读 · 0 评论 -
Vue实现文件上传和文件下载
文件下载: 文件下载通常有几种方法 1.通过url下载 2.location.href 3.form提交直接下载 4.HTML5 a.download结合blob对象进行下载 第一种方式: 第一种方法是前后端的接口只给了一个API请求: 前端第一个实现是使用a标签, 第二种方式: 这个方法是直接把 DataURLs 或者 BlogURLs 传到浏览器地址中触发下载。有两种...原创 2018-08-22 22:09:55 · 95963 阅读 · 7 评论 -
vue 项目前端部署以及windows ,linux 端部署遇到的问题
Vue项目打包之后,部署有两种方式,一是前台打包后扔给后台,放置在后台项目的根目录下就可以了。这种是最简单的。还有一种方式就是前端单独部署,这里讲的是后者 前端如何单独部署呢? 一个最简单的办法就是使用Nginx部署辣 一.我们将自己的Vue项目打包 运行npm run build 会在项目中生成一个叫dist文件 二.安装Nginx Nginx是一个类似于Tomcat的服务器,部署前...原创 2018-09-13 18:11:35 · 9538 阅读 · 0 评论 -
JS闭包详解
一.函数和作用域 自定义函数XXX()function XXX( ) {}// 调用函数,放在哪个位置都可以// 如果是获取元素,元素必须放在上面var fn = function () {}fn() // 必须放在声明的后面这种用var声明的函数调用必须放在声明的后面函数变量的作用域 全局变量和局部变量局部变量在函数内部使用 全局变量在函数外部声明的变量,可以...原创 2018-09-12 18:56:23 · 244 阅读 · 0 评论 -
`${expression}`字符串占位符
在一个模板字面量中,你可以把任何合法的JavaScript表达式嵌入到占位符中将其作为字符串的一部分输出到结果中。占位符${expression}中间可以包含任意的JavaScript表达式eg:this.$refs.scrollWrapper.style.height = `${this.clientHeight - 44}px`...原创 2018-12-11 15:44:19 · 983 阅读 · 0 评论 -
ES6扩展运算符
ES6扩展运算符实现了Iterator 接口的对象中的每个元素都一个个的迭代并取出来变成单独的被使用eg1:console.log(...[3, 4, 5]) // 结果 3 4 5合并数组,可以使用扩展运算符将多个数组进行合并。let arr1 = [1, 2, 3]let arr2 = [4, 5, 6]let arr3 = [7, 8, 9]console.log([...原创 2018-12-11 16:15:38 · 314 阅读 · 0 评论 -
关于JS时间的问题
一: 基础的JS使用var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-???)myDate.getMonth(); //获取当前月份(0-11,0代表1月)myDate.getDate(); //获取当前日...原创 2019-03-06 15:28:36 · 521 阅读 · 0 评论 -
css 垂直居中和水平居中
一 水平居中行内元素行内元素水平居中,直接在父盒子中设置text-align:center块元素居中① 已知盒子的宽度 margin : 0 auto; // 最简单实现 position: relative ; left: 50%; margin-left:-50px; // 绝对定位,左侧盒子的一般的宽度...原创 2019-03-11 16:52:18 · 210 阅读 · 0 评论 -
前端经验_form中button会自动提交的问题
<form> ...... <button class='btn' @click='handleClick'>选择</button> ......</form>当点击选择按钮button的时候,会刷新当前页面,这是为什么呢,因为form表单中的button默认的类型是type=‘submit’,点击必然会跳转页面,如果表...原创 2019-03-12 09:23:25 · 827 阅读 · 0 评论 -
element Checkbox多选框全选踩空
element checkbox 有个indeterminate 属性,用以表示 checkbox 的不确定状态,一般用于实现全选的效果eg:<el-checkbox :indeterminate="isIndeterminated" v-model="selectedAll" @change='handleSelectedAll'> <span style='margi...原创 2019-03-12 10:07:07 · 3133 阅读 · 0 评论 -
CSS 常见问题
1.input输入框点击有边框的解决办法 点击输入的时候不需要input输入框有边框显示,例如按钮就不需要,如果设置了border-radius,在点击的时候还有边框就会超级丑。如何解决呢? 给input 加一个outline:none; 就ok了...原创 2018-07-22 22:35:59 · 226 阅读 · 0 评论 -
前端面试题、知识点整理(笔记三)
好记性不如烂笔头,一些前端的小tips,其实编程,很多时候不会把知识点都面面俱到,要学习的是编程思想,逻辑比较重要,同时养成比较好的编码习惯。面试基础很重要,这篇笔记记载一些前端面试的笔试题。 此为笔记三 记录js知识点JS定义变量不能使用数字或者以数字开头,不能使用关键字或者保留字定义Js中区分字符大小写有关js的特点下列说法错误的是选项 A: js 是一门编程语言 ...原创 2018-09-12 14:12:25 · 365 阅读 · 0 评论 -
前端面试题、知识点整理(笔记二)
好记性不如烂笔头,一些前端的小tips,其实编程,很多时候不会把知识点都面面俱到,要学习的是编程思想,逻辑比较重要,同时养成比较好的编码习惯。面试基础很重要,这篇笔记记载一些前端面试的笔试题。 此为笔记二 是css相关的知识字体属性连写的正确格式是? AA.font: font-style font-weight font-size font-family;B.font: font-...原创 2018-09-12 12:05:32 · 620 阅读 · 0 评论 -
前端测试
1.网速测试,模拟网速不好的时候,网页的加载情况: 在控制台的NetWork,在最右有个online,选择3G进行测试,可以看到在网速很慢的情况下,DOM的加载情况。...原创 2018-07-09 09:20:10 · 351 阅读 · 0 评论 -
前端经验_上传文件
如果我们上传文件,不用框架自己写,用到&lt;input tyrpe="file"&gt;具体的操作呢? &lt;input tipe=file &gt;的默认效果是: 可以看出真的是非常的丑,我们想要定义自己的样式。首先我们要定义一个按钮,用来选择文件, &lt;input type="button" class="se原创 2018-07-08 19:38:49 · 204 阅读 · 0 评论 -
前端经验_调试
1.Chrome 浏览器可以调试手机。2.Element:查看HTML结构(1)可以直接按delete键删除(2)可以右击Edit as html编辑选中的元素3.Network 展示网络请求,可以点击查查请求的状态Headers:与HTTP协议有关,请求头、请求状态Preview:显示具体内容(HTML、图片、JS插件)Response:返回的是jsonPr...原创 2018-07-08 19:39:12 · 253 阅读 · 0 评论 -
前端经验_new FormData
FormData 对象的使用:1.用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name与value组装成一个queryString2.异步上传二进制文件。1.FormData对象的操作方法,全部在原型中,自己本身没任何的属性及方法。 let formData =newFormData() formData.append('user','z...原创 2018-07-08 19:39:58 · 6553 阅读 · 1 评论 -
前端经验_纯CSS写一个开关按钮
写个开关按钮,效果如图: 当点击的时候: 利用CSS3 过渡的动画效果结构上写一个输入框为CheckBox ,利用label绑定。实现点击之后切换HTML代码: CSS3代码:&lt;style&gt;.onoffswitch{ position:absolute; width:50px; display:block; left...原创 2018-07-08 19:39:40 · 5881 阅读 · 1 评论 -
如何在电脑上配置两个GitLub账号和码云账号
因为公司内网的原因,想要使用码云真的麻烦啊,配置好了两个账号 在Git Bash Here的控制台里输入:git config –global user.name “你的名称” 回车git config –global user.email “你的邮箱” 回车这里的邮箱是你申请git账号时的邮箱,不报错就是正确的,继续往下走输入 ssh-keygen -t rsa -C...原创 2018-07-08 19:40:16 · 1466 阅读 · 0 评论 -
Git
一.把项目推到远程 git add . //将我们的项目加到缓存区 git commit -m ‘XXXXX’ //把我们本地缓冲区的内容提交到本地仓库 同时 ,-m 的含义是留一条信息显示提交的信息 点击回车,我们就把代码提交到了本地的仓库 git push //就可以把代码提交到线上去...原创 2018-07-09 09:22:21 · 154 阅读 · 0 评论 -
布局:父元素适应子元素的高度
第一种:若子元素没有带有float元素的元素,对于高度是自适应的没有问题. 第二种:若子元素全是带有float属性的元素,这时候我们会发现父元素塌陷,高度为0,因为float浮动元素脱离了正常的文档流,父元素相当于没有了这两个儿子! 解决这个问题,根本就是清除浮动: 解决一: 1 , 给父节点增加样式overflow:hidden或者overflow:auto 2 , 在子元素中的最后...原创 2018-07-16 19:11:30 · 1465 阅读 · 0 评论 -
Vue 显示pdf
在项目中有个功能是显示pdf文档,这个文档是静态的。不是后台传过来的,最简单的方法就是放在iframe实现是最简单的 写一个公共Vue用来展示pdf,根据传入的参数不同来展示不同的pdf文档 需要注意的是,一定要将pdf文档放在static 静态文件夹下,才会生效。<iframe :src="src" id='iframebox' ref='pdfiframe' frameborde...原创 2018-09-11 11:51:46 · 5427 阅读 · 0 评论 -
Vue 监测路由变化
在项目中通过命名视图在很多个页面行都设置了头部组件,在项目中就遇到了这么一个问题,这个头部只会加载一次,事实上虽然头部会公用,但是不是所有的头部都一样的,有些页面的头部需要做一些多余的功能,该怎么搞 在mounted中定义方法是没用的,因为头部只会加载一次,这时我们就可以通过监控路由,路由变化了,就会执行函数,就可以实现不同页面显示不同的头部了。 比如我们这次需要在有些页面,显示查看pdf文档...原创 2018-09-11 17:09:52 · 1582 阅读 · 0 评论 -
前端表单验证
1.输入框只能输入数字:input type="text" onkeyup="value=value.replace(/[^\d]/g,'')">2.JavaScript test() 方法和正则结合判断用户输入的对错 if (/xlsm/.test(filename) || /xlsx/.test(filename)) { fileName = fil...原创 2018-09-11 17:26:36 · 708 阅读 · 0 评论 -
Vue跳转在新窗口打开
Vue是单页面应用,想要跳转在新开窗口打开需要配置 handleHelp () { const {href} = this.$router.resolve({ path: '/pdf', query: { pdf: JSON.stringify(this.pdf) } }) windo...原创 2018-09-11 17:40:42 · 14522 阅读 · 1 评论 -
常用的Linux指令
常用的Linux指令 一般通过工具来连接到Linux服务器 比如说SSH Secure Linux下的常用操作 cd / 进入根目录 ls 展示当前文件夹的所有文件 rm -rf XX: 强制删除文件 rm -rf XXX/: 强制删除文件夹 ./ 执行该文件的命令...原创 2018-09-15 18:53:19 · 174 阅读 · 0 评论 -
前端面试题、知识点整理(笔记一)
好记性不如烂笔头,一些前端的小tips,其实编程,很多时候不会把知识点都面面俱到,要学习的是编程思想,逻辑比较重要,同时养成比较好的编码习惯。面试基础很重要,这篇笔记记载一些前端面试的笔试题。 此为笔记一下列哪个css属性不可继承(A)A)height C)text-alignB)font-size D)text-indentCSS中让元素隐藏,但是不清除元素的方法是(...原创 2018-09-12 10:16:53 · 651 阅读 · 1 评论 -
subline text 使用
1.自动保存 subline 不能自动保存,可以手动设置: 打开配置文件 Preferences -&amp;gt; Settings - User 写入代码:&quot;save_on_focus_lost&quot;: true,2.设置缩进tab为空格 因为在Vue开发中,因为检查机制的存在,空格是不可以和tab键混合使用的,会报错,每次改都很麻烦,所以将缩进的tab改为空格是非常有必要的。 打开...原创 2018-07-08 19:40:35 · 1019 阅读 · 0 评论