chenwei1113的博客

原创 vue 前端给接口传file对象需要注意的问题

xls转xlsx，前端怎么传参

原创 图片放大缩小时，图片上会出现蓝色蒙版解决方案

图片放大缩小时，图片上会出现蓝色蒙版解决方案

原创 Vue+openlayers+projs4实现坐标转换

Vue+openlayers+projs4实现坐标转换

原创 vue项目中echarts自适应问题高级解决方案

vue项目中echarts自适应问题高级解决方案：画布大小和容器大小不一致

原创 LF和CRLF的区别

LF和CRLF的区别

原创 不同tab之间sessionStorage的问题

不同tab之间sessionStorage的问题

原创 VueTreeselect在使用过程中遇到的问题及解决方法

vue-treeSelect是一款多选组件，简单好用，API丰富

转载 Vue管理后台框架选择推荐

1、element2、Vue AdminVue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板（管理系统），相当于是 Vue 版本的 Bootstrap 管理系统。3、vue-manage-system基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案 ,弥补了element中缺少图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能。4、iview-admin基于Vue.js，搭配使用iView UI组

翻译 HTML5（四）

1、HTML5 Web存储localStorage 永久存储sessionStorage（当用户关闭浏览器窗口后，数据会被删除）JSON.stringify 对象----->字符串JSON.parse 字符串----> 对象2、HTML5 Web SQL 数据库客户端数据库3、HTML5 应用程序缓存通过创建 cache manifest 文件，创建web应用的离线版本。优势：离线浏览 - 用户可在应用离线时使用它们 速度 - 已...

翻译 HTML5（三）

1、HTML5 Video（视频）<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg">您的浏览器不支持Video标签。</video>2、HTML5 Audio（音频）<audio controls> <source

原创 前端项目中引入地图的相关文档

百度地图开发平台jsAPI：http://lbsyun.baidu.com/jsdemo.htm#canvaslayer 百度地图vue-baidu-map文档：https://dafrok.github.io/vue-baidu-map/#/zh/start/installation 百度地图开放平台：http://lbsyun.baidu.com/ 高德地图vue-amap文档：https://elemefe.github.io/vue-amap/#/ 高德开放平台：https://lbs.am

翻译 HTML5（二）

1、HTML5 内联SVGSVG——可伸缩矢量图 ——改变尺寸或大小不会失真SVG与Canvas的区别：SVG是一种使用XML描述2D图形的语言。Canvas是通过JavaScript来绘制2D图形。SVG 基于 XML，意味着 SVG DOM 中的每个元素都是可用的。可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。Canvas 是逐像素进行渲染的。...

翻译 HTML5 (一)

1、简单介绍HTML5是HTML最新的修订版本。HTML5的设计目的是为了在移动设备上支持多媒体。HTML5 中的一些有趣的新特性：用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素，比如 article、footer、header、nav、section 新的表单控件，比如 calendar、date、time、email、url、searchIE9 以下版本浏览器兼容HTML5的方法，可以使用静态资源的

翻译 CSS3新特性(1)

1、新边框属性border-radius 圆角 box-shadow 盒阴影 border-image 边框图片2、CSS3圆角属性border-radius border-top-left-radius 左上角 border-top-right-radius 右上角 border-bottom-right-radius 左下角 border-bottom-left-radius 右下角3、CSS3背景backgroun...

翻译 CSS3 新特性(2)

CSS3 是最新的 CSS 标准。1、css3动画(animation)@keyframes 规则是创建动画。@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。@keyframes myfirst { from {background:red;width:100px} to {background:yellow;width:200px}}div { width:100px; height:100px; background:red;

原创 Vue 项目中添加水印

一、watermark.jslet watermark = {}let setWatermark = (str) => { let id = 'watermark0104'; if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)); } //创建一个画布 let can = document.

转载 关于前端文件上传功能

在web浏览器上传文件一般有以下几种方式：form表单上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe上传文件其中form提交数据之后会整个刷新页面；js通过ajax上传文件虽然不会刷新整个页面，但是他们都是通过使用formdata对象实现的，formdata对象在老版本的浏览器中并不支持；为了兼容老版本浏览器，使用iframe方式提交；转载自：https://www.cnblogs.com/huxianglin/p/6175678.htm

转载 关于前端实现文件下载功能

1、通过window.open()打开新页面下载文件2、通过a标签打开新页面下载文件3、通过文件流的方式下载转载自：https://segmentfault.com/a/1190000019359452?utm_source=tag-newest

转载 FormData对象

FormData的主要用途有两个：1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。2、异步上传文件一、创建FormData对象1、创建一个空对象 //通过FormData构造函数创建一个空对象 var formdata=new FormData(); //可以通过append()方法来追加数据 f...

转载 H5 FileReader对象

FileReader 是一种异步文件读取机制，结合input:file可以很方便的读取本地文件。一、input:file简介<input type="file" id="inputBox">点击按钮上传一个文件后，在控制台打印inputBox.files，如下：可以发现input.files是一个数组，由传入的file对象组成。每个file对象包含以下属性：...

原创 ES6 扩展运算符

一、扩展运算符用三个点 (...) 来表示，可以将数组或对象里面的值展开。const a = {a:1,b:2};console.log({c:3,...a}); //{a:1,b:2,c:3}二、应用1、复制数组或对象 let a = [1, 2, 3]; let b = [...a]; console.log(a); // [1, 2, 3] co...

原创 vue 中给 写死的路由 中 增加动态添加路由

本文主要介绍的是：一开始 路由写死了，但是在页面跳转的过程中需要动态增加路由（传参）的情况。step1： 写死的路由。import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export const constantRoutes = [ { path: '/login', compo...

原创 vue 中应用 vee-validate 进行表单验证

一、简单介绍： vee-validate 是一个轻量级的vue表单验证插件。二、使用步骤：1、安装：npm install vee-validate --save-dev2、main.jsimport Vue from 'vue'import VeeValidate, { Validator } from 'vee-validate'VeeValidate.Valid...

原创 vue中 调用摄像头 拍照上传图片

步骤：1、打开摄像头，显示拍照页面，初始化调用摄像头的方法2、点击 拍照，进行拍照3、确定后，上传并显示一、此功能涉及两个vue页面1、cameraPreview.vue （进行拍照的页面，如下图所示）2、main.vue（调用摄像头的页面）二、cameraPreview.vue<el-dialog :visible.sync="visible" title...

原创 fieldset lengend 的应用

转载 【IE bug 解决办法】IE下（IE10及以下）当元素为absolute定位时，点击事件失效的解决办法

从理论上来说，点击#J_pre和#J_next 应该会触发alert事件，然而实际结果是，在ie7、8、9、10（ie6及以下没有做尝试），都没有触发到该事件（ie11、firefox、chrome可以正常触发）（把#J_pre和#J_next换成div标签仍然无法触发，所以可以证明这个和用a标签没有关系）为了查看这一问题，对#J_pre和#J_next的样式分别加上来查看了一...

转载 javascript中引入百度地图

流程：1、注册百度账号2、申请成为百度开发者3、获取服务秘钥（ak）4、使用相关服务功能ps：图片来自网络  

原创 对象数组中按某个字段进行排序

var objArr = [ {  'age': 18,  'name':'小宝'  },  { 'age': 15,  'name':'小贝'  }];objArr.sort(getSortFun('asc','age)); // 'desc':'降序'; 'asc':'升序'console.log(objArr)...

原创 在vue中如何监测sessionStorage的变化？

很早以前写的笔记，很粗略，以至于我自己现在翻看都看不懂了🤡最近项目中又用到了这个知识点，各方搜集材料，整理出了更加完备的方案，供大家参考！

原创 可编辑的div，如何在输入的文字、图片或文件后面获取光标？

// 获取光标set_focus(){ let el=document.getElementById('uploadArea'); el.focus(); if($.support.msie){ var range = document.selection.createRange(); this.last = range; ...

原创 在一个可编辑的div中，将html代码转成图片，并让光标聚焦在图片的后面

//将html代码转成图片html2canvas(document.querySelector("#file11")).then(canvas =&gt; { let img = new Image(); // img.crossOrigin = '*';//解决跨域问题，需在服务器端运行，也可为 anonymous img.setAttribute("id", "can...

原创 cookie的保存与获取

一、概念        cookie是客户端与服务器端进行会话使用的一个能够在浏览器本地化存储的技术。简言之，cookie是服务器端发给客户端的文本文件；目的是用于辨别用户身份。        比如:         1, 用户登录的记住密码功能(下次再访问网站时无需输入密码了)；        2, 购物车，加入购物车的商品没有及时付款，使用cookie保存后, 可以在一定时间后再访问网站, 会...

原创 1_初识nodeJS

nodeJS对打通前后端真的是强大而神奇的存在，那么它神奇强大在哪里呢？我们一起来看看！一、nodeJS基本介绍先来说一说，nodeJS可以干什么，让大家对其有个直观的了解。1. nodeJS可以让JavaScript代码实现服务器端的功能，相当于php，jsp。    在接触nodeJS之前，我们只知道JS可以做前端，有了nodeJS，JavaScript也可以写服务器端的代码了，也就是说Jav...

原创 前端页面中几种 倒计时效果的实现方式_DATE对象

    倒计时的效果在页面中是很常见的，尤其是在电商网站上，比如：距离双11还有多少天；登录到某个网站后，多少秒后跳转到首页；秒表的倒计时；时钟的效果等等……其核心是通过DATE对象来实现的。现在我们一起来看看吧！一、距离双11还有多少天&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8...

原创 Async 异步流程控制

一、概念Async：异步流程控制。async不是node里的模块，但是在做node开发时，经常会用到，以前要用到jQuery的defer，async的功能更强大。二、安装1. 先 npm init项目(或cnpm init)2. 安装async：npm install async --save-dev三、常用的功能1. 串行无关联：串行程序的执行时间是所有函数的执行时间之和2. 并行无关联：并行程...

原创 如何给项目配置git仓库

一、 从本地版本库---&gt;远程版本库即先有本地库，后有远程库的时候，如何关联远程库。1. 初始化仓库：git init            a）在git bash里，转换路径（路径为当前项目的路径）            b)  输入 git init。就会在项目目录下产生 .git (隐藏文件)，表示项目目录里的项目代码（即所有的文件）会使用git进行版本管理。2. 把开发的代码放到本地...

原创 解决“无法定位程序输入点ucrtbase.terminate于动态链接库api-ms-win-crt-runtime-|1-1-0.dll“问题

在安装软件时，出现了“无法定位程序输入点ucrtbase.terminate于动态链接库api-ms-win-crt-runtime-|1-1-0.dll“问题。怎么解决呢？百度了一下，解决流程如下：1. window+R 打开 输入 winver.exe，如下窗口会打开，如果和我的windows版本是一样的，跳第二步；如果不一样，升级一下操作系统。2.  安装MSVisualC++ 2015动态...

原创 正则表达式（一）

一、正则的概念正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。给定一个正则表达式和另一个字符串，可以达到如下的目的：1.  给定的字符串是否符合正则表达式的过滤逻辑（称作“匹配”）；2.  可以通过正则表达式，从字符串中获取想要的特定部分。正则表达式的特点：1. 灵活性、逻辑性和...