- 博客(44)
- 收藏
- 关注
RSS订阅原创 HighCharts踩坑日记
因业务需求，需要用到3d漏斗图，之前项目中一直用的echarts，没有找到3d的，于是开始踩坑HighCharts。npm install highcharts --savenpm install highcharts-vueMain.js中全局注册（也可采用局部注册的形式），见官方文档，传送门：import Vue from 'vue'import Highcharts from 'highcharts'import HighchartsVue from 'highcharts-vue'
2020-06-23 12:10:14
820
原创 Vue展开菜单组件封装
封装了一个公共菜单按钮，点击展开菜单项。调用方法 <side-menu @tabMenu="tabMenu":tabs="menuTabs"></side-menu>传入一个menuTabs对象数组，绑定一个tabMenu点击事件，子组件通过点击事件tabMenu emit 触发父组件的tabMenu，并将点击时的name传给父组件，父组件拿到name，根据不同的...
2020-01-03 17:46:11
755
原创 css盒模型与box-sizing属性
Chrome浏览器box-sizing默认是content-box。以宽度为例：content-box下元素的实际总宽度=padding+content(内容的宽度)+border，此时width设置的宽度为内容的宽度border-box下，元素的实际总宽度=padding+content(内容的宽度)+border，等于设置的width下面两张图可以很好的说明：content-bo...
2019-12-12 17:44:44
210
原创 css画正六边形
<div class="hexagon"> <div class='one'>月1</div> <div class='two'>月2</div> <div class='three'>月3</div></div>.hexagon{ position:relative;wi...
2019-08-29 14:01:36
323
原创 踩坑Vue2.0属性props之“双向绑定“
为了避免双向绑定在项目中容易造成的数据混乱，vue2.0 取消了props 的双向绑定，改成只能从父级传到子级的单向数据流。第一次在项目中遇到这样的问题，这里做一下记录。百度了一下，发现了常见的两种方式：通过创建一个props属性的副本，watch props属性 赋予data副本 来同步组件外对props的修改，watch data副本，emit一个函数 通知到组件外通过v-mod...
2019-08-09 16:15:57
965
1
原创 记录基于vue的可滚动导航以及视图切换的实现
上一篇文章介绍了一个好用的组件ly-tab，可以用于滑动、自动定位的导航，但是无法配置图标，比如我想做成下面这种效果，就没有可以配置的选项，查看了改组件的文档发现，导航底部固定的时候无法滚动。本来是想在源码的基础上改改的，但自己能力太薄弱，感觉不好改，于是我就借助作者写这个组件的思路，写了一个类似的功能出来，目前还没封装，也有一点小bug，不过已经满足了UI的需求了哈哈，下面看效果图。看完下面...
2019-08-02 17:51:37
2148
原创 可触摸滑动具有回弹效果的Vue组件使用总结
发现一个很实用的vue组件，最近做项目遇到一种常见的需要，虽说常见但是自己没有试着写过，然后去网上找了一下。需求图如下：下面的导航栏内容太多需要做成滑动的下面介绍一下我用到的这个组件：git地址根据操作引入组件即可，最终达成的效果如下动图所示。如果你有去尝试使用这个组件，发现真的是好用极了，不得不说开发这个组件的大佬真的是tql！！！在试图的切换方面作者也是提供了两种思路：1.使...
2019-08-01 14:24:41
1472
原创 react web app搭建过程总结
前端：react.js后端：node.js数据库：MongoDB前端1.npm install -g create-react-app 全局安装react脚手架2.使用脚手架创建一个react app create-react-app myapp；3.npm run eject 弹出配置文件目的是可以自定义修改webpack配置后端：1.npm install express --...
2019-07-02 11:28:04
436
原创 router-link之导航图标不高亮解决方案总结
用<router-link>做导航引发的选中图标不高亮bug；如图所示：引发bug的情况：在子路由中使用<router-link>组件，在切换<router-view>时导致选项不高亮。百思不得其解，百度说是路由配置方法不对，这里给出另外一种经过实践可用的方法。解决方案：在父组件中监听子路由变化，动态的给父组件选中的标签加上高亮class。代码：...
2019-06-11 20:02:15
1411
原创 FormData的使用之Ajax文件上传
今天使用Ajax上传文件的时候，用到了formData，最后用console.log打印formDta怎么都打印不出来，后来发现使用错误。原因是new FormData的参数是一个DOM对象，而非jQuery对象具体使用方法见下面参考链接–地址。...
2019-05-13 17:24:27
1443
原创 微信小程序支付接口对接总结
从去年11月进公司到现在，算下来总共对接过三次微信支付接口。现就前端而言，总结一下开发微信小程序支付功能的流程。1.调用预支付接口( openid、 userid这两个必传，以及一些业务参数在这个时候也传到后台)，得到交易码out_trade_no 和预支付码prepay_id；2.发送预支付码换回微信支付请求的系列参数： timeStamp: res.timeStamp, ...
2019-04-25 15:33:37
2193
原创 vue axios跨域 Request Method: OPTIONS问题
今天做跨域登录功能遇到这个问题(后端已做跨域处理)：当跨域请求为post时候，请求的method变为了options。其实跨域分为 简单跨域请求和复杂跨域请求：简单跨域请求是不会发送options请求的复杂跨域请求会发送一个预检请求options复杂跨域请求要满足以下：1、请求方法不是GET/HEAD/POST2、POST请求的Content-Type并非application/x...
2019-04-10 17:04:04
15396
6
转载 vue 改变对象的属性，视图不刷新的问题【转】
最近遇到一个问题，在vue的data数据中心定义一个对象obj，然后在触发事件时给obj添加或修改属性的时候，页面中的视图不会同步更新，只有当其他数据发生改变时，视图才会同步更新数据，按理来说vue data数据中心的数据是双向绑定的，当数据中心的数据发生改变时，视图就会同步更新才对。后来通过查阅官网资料发现：Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 g...
2019-04-04 11:20:15
401
转载 [转发]vue页面切换，滚动条始终固定在顶部
转发在使用vue脚手架做页面的时候，发现一个小bug…当你在一个页面的中间位置点击按钮进行组件跳转的时候，你会发现，你跳转到的新页面不是从顶部开始显示，而是在上一个页面点击按钮的位置显示在你视口的正中间，所以这就违背了我们网页开发的正常逻辑，针对以上发现的问题，我采取了一下解决办法，几行代码轻松搞定~话不多说，上代码：1.methods里面直接写一个函数：（函数名随便叫）menu() {...
2019-03-20 10:01:08
931
原创 Vue2.0 使用keep-alive引发的翻页bug
背景：由于浏览器回退会导致vue页面刷新。尤其是在遇到这种情况时，会引起不好的用户体验：从可翻页的列表页进入详情页，通过浏览器回退会导致页面刷新，导致翻页page变为第一页。首先介绍我使用的翻页方法，vue翻页插件：v-infinite-scroll<div class="bottom_content"> <no-data style="margin-top...
2019-03-19 21:01:39
780
1
原创 css3实现箭头效果的两种方式
具体原理不再赘述，网上有很多介绍，这里只做代码记录。可以参考CSS三角形的实现原理及运用、用css制作空心箭头(上下左右各个方向均有)，一、盒模型这种方式通过盒模型设置元素边框，关键在于移动的那1px(两个三角形错位1px形成箭头)；<!DOCTYPE html><html lang="en"><head> <meta charset=...
2019-03-18 11:44:06
2782
原创 使用nodemailer邮件发送验证码
记录一下实践nodemailer发送验证码的过程；首先参考官方文档，了解nodemailer；这里我参考的是这篇文章。内容很详细，就不怎么具体核心代码：/*** email 邮件模块**/const nodemailer = require('nodemailer');const smtpTransport = require('nodemailer-smtp-transpo...
2019-02-27 11:57:11
928
转载 echarts使用技巧echarts的图表自适应resize问题
参考文章echart图表本身是提供了一个resize的函数的。于是当浏览器发生resize事件的时候，让其触发echart的resize事件，重绘canvas。用window.onresize = myChart.resize; 可以完成自适应，就是把window的onresize事件赋值为echart的resize事件当然这是单个图表的情况，要是多个图表，发现会不起作用。多个图表可以使...
2019-01-23 19:53:10
4455
原创 微信小程序滑动页面到指定位置时，固定指定元素在顶部
2018/12/20 20:03这个需求其实很常见，首先我想到的是利用，微信小程序自带的scroll-view标签来实现，但经过几次实验均发现达不到预期效果。最后查找博客得知可以利用页面Page自带的页面滚动监听事件scrollTopFun来实现，试了以下果然成功了，稍后效果图出来了再放上来，这里先记录一下。 scrollTopFun:function(e){ console.lo...
2018-12-20 20:04:37
25252
21
原创 电脑无法打开国内网页，访问网站内容
之前遇到过好几次这个问题。一度以为是被翻墙软件反向墙了，然而今天发现并不是。解决办法：打开网络和共享中心–>以太网设置–>属性–>选择ipv4设置DNS为114.114.114.114解决问题。...
2018-10-09 18:04:46
7579
原创 字体两边居中
前几天用到的知识，这里mark一下。css中有一个属性：text-align-last。可取的值有text-align-last: auto|left|right|center|justify|start|end|initial|inherit;这里我用到了justify，可以让元素内的文本最后一行两端对齐。效果如下图：...
2018-09-27 16:54:33
427
原创 javascript闭包理解2
今天又复习了一次闭包，参考文章在chrome开发者工具中观察函数调用栈、作用域链与闭包，这样在调试中理解会更加深刻。闭包的形成需要两个条件：1.在函数内部创建新的函数；2.新的函数在执行时，访问了函数的变量对象；总结一下闭包：闭包是在函数被调用执行的时候才被确认创建的。闭包的形成，与作用域链的访问顺序有直接关系。只有内部函数访问了上层作用域链中的变量对象时，才会形成闭包，因此，我们可...
2018-09-19 16:50:02
166
原创 mui Popover弹出层区块滑动问题
区块滑动块父级元素高度大于滑动区域高度导致无法滑动一开始我都没有注意到这个问题，后来发现问题所在，仔细想想也是情理之中。如果子元素(滑动区域)高度小于父元素(滑动区域的父元素)高度，还需要滑动吗？（手动滑稽） mui 区域滑动我就不说怎么使用了，戳官方文档。 这里的popover层做为父级元素，其内部元素为滑动区域...
2018-09-06 10:53:21
3254
1
原创 h5的datalist
<datalist> 标签定义选项列表。与 input 元素配合使用，来定义 input 可能的值。<!DOCTYPE HTML><html><body><input list="cars" /><datalist id="cars"> <option value=&
2018-08-01 20:26:25
831
原创 为输入框设置禁止编辑状态
今天为输入框设置了禁止输入状态用到了$("#id").attr("disabled",true)导致下文无法获取&lt;input id="id"&gt;标签里的value,最后改为$(“#id”).attr(“readonly”,true)解决问题。 扩展： 表单中Readonly和Disabled的区别：Readonly只针对input(text / p
2018-08-01 20:12:25
1242
原创 js上传插件之webuploader
之前那个拖拽功能又出bug了，又花了两天，解决目前了发现的bug。 前面一篇文章写的我们实现了一个供用户通过拖拽实现改变上传顺序的功能。结果细心发师兄隔了一个晚上又给我们找了一个bug出来，这次的问题是。 问题：用户虽然看到自己拖拽的图片按顺序上传了，但实际上只是动画显示正常，传到数据库的图片是非正常顺序显示在用户面前的。这个bug来源于我们看问题没有透彻其根本原因，由于之前的上传js是封装好...
2018-07-20 17:37:31
460
2
原创 jquery插件之dragsort使用心得
昨天接到来公司第一个任务，这里总结一下。在今天下午以前我以为我可能永远都解决不了这个问题了，结果师兄刷刷几下的就解决了，我还是太傻了，唉。遇到的第一个任务就是在一个已经基本成熟的项目里实现按一个小功能——拖拽功能： 使用场景：用户上传图片的时候选择了一些图片，用户可以通过用鼠标拖动图片，交换图片位置。 解决方案：使用jquery里面的一个dragsort插件。 遇到的问题（bug）： ...
2018-07-18 16:48:09
7061
转载 ES6 Arrow function(箭头函数)
转载于廖雪峰的这篇文章ES6标准新增了一种新的函数：Arrow Function（箭头函数）。为什么叫Arrow Function？因为它的定义用的就是一个箭头：x => x * x上面的箭头函数相当于：function (x) { return x * x;}箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种像上面的，只包含一个表...
2018-06-12 17:34:23
455
原创 一个结合map函数与React.js中的this.props.children结合的例子
题目： 实现一个组件 BlackBorderContianer，它会把作为它的嵌套结构的 每个直接子元素 都用一个黑色边框的 div 包裹起来。例如：&amp;amp;lt;BlackBorderContainer&amp;amp;gt; &amp;amp;lt;div className='name'&amp;amp;gt;My Name：Lucy&amp;amp;lt;/div&amp;
2018-06-12 17:03:56
1067
原创 React.js挂载阶段的组件生命周期
组件的挂载指的是将组件渲染并且构造 DOM 元素然后插入页面的过程。这是一个从无到有的过程，React.js 提供一些生命周期函数可以给我们在这个过程中做一些操作。React.js 将组件渲染，并且构造 DOM 元素然后塞入页面的过程称为组件的挂载。这一节我们学习了 React.js 控制组件在页面上挂载和删除过程里面几个方法：componentWillMount：组件挂载开始之前，也就...
2018-06-11 19:11:00
3058
转载 Promise理解
摘抄自这篇文章 一个 Promise 就是一个代表了异步操作最终完成或者失败的对象。大多数人都在使用由其他函数创建并返回的promise，因此，本教程将首先探讨返回promise的使用情况。本质上，一个promise是某个函数返回的对象，你可以把回调函数绑定在这个对象上，而不是把回调函数当作参数传进函数。 比如，promise替代了下面这种旧式的函数，这种旧式函数需要两个回调函数，并最终...
2018-06-11 18:38:02
313
转载 React之JSX原理
摘抄自React小书为了让大家深刻理解 JSX 的含义。有必要简单介绍了一下 JSX 稍微底层的运作原理，这样大家可以更加深刻理解 JSX 到底是什么东西，为什么要有这种语法，它是经过怎么样的转化变成页面的元素的。思考一个问题：如何用 JavaScript 对象来表现一个 DOM 元素的结构，举个例子：<div class='box' id='content'> &...
2018-06-08 21:55:44
2917
原创 nodejs学习之路之填不完的坑（一）
今天准备把我之前写的博客网站改成一个电影展示网站（豆瓣那种），基于之前博客已经实现了登录注册、发表、修改、删除文章以及留言等功能。现在主要就是实现电影主页的展示和搜索电影、分页等。 但今天我又掉进一个坑了，可能是好久没碰nodejs的缘故吧，我把前端后端都快搞混了。 本来想直接调用豆瓣电影的api，这样我想就可以省掉写数据库啦，但是我还是太天真！ 我刚开始用了request这个模块，折腾半天...
2018-05-31 21:19:25
405
原创 hdfs常用shell命令
基于ubuntu下hadoop伪分布式操作指令。将hdfs文件系统下所有文件以级联的形式显示出来。hdfs dfs -ls -R /一次性创建一个三级文件夹。hdfs dfs -mkdir -p folder1/folder2/folder3在folder1/folder2/folder3目录下创建一个tempfile文件。hdfs dfs -t...
2018-04-24 20:12:38
810
原创 Mapreduce单词计数的例子
WordCount类package org.apache.hadoop.examples; //著名源文件存放的地方import java.io.IOException;import jvaa.util.StringTokenizer; //将字符串按空格分开import org.apache.hadoop.conf.Configuration //处理配置文件import o...
2018-04-24 20:11:21
1444
原创 hdfs文件读写
文件写入import org.apche.hadoop.conf.Configuration;import org.apche.hadoop.fs.FileSystem;import org.apche.hadoop.fs.FSDataOutputStream;import org.apche.hadoop.fs.Path;public class HdfsWriteFile{ ...
2018-04-24 20:09:59
322
转载 javascript对闭包的理解
转自 这篇文章一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。Js代码var n=999; function f1(){ alert(n); } f1(); // 999另一方面，在函数外部自然...
2018-04-24 20:04:03
139
原创 nodejs中使用jsonwebtoken模块遇到的错误
前端学习真的是要踩一路的坑啊，我之前学习新知识都是通过看视频，后来发现这种方式太慢，还不如看博客，实操一个项目学习的快。 最近在学习Nodejs的restful风格api的搭建，网上搜了搜发现学习资料还是不好找，博客上的资料都太老了，我找那篇博客都是2015年的了，但是感觉可操作性很强，写的比较小白，适合我这种新手，而且还可以练习使用下postman。再三犹豫下，我还是选了这篇来学习，只能说知识...
2018-04-12 17:26:22
6113
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人