- 博客(40)
- 收藏
- 关注
RSS订阅原创 Antd表格结合react-dnd、react-dnd-html5-backend、immutability-helper实现拖拽功能
Antd可拖拽排序需要引入的其他的库配合实现，具体demo在antd官网也给了，下面是针对一些特殊的产品需求的实现及需要注意的事项，具体的要实现的功能如下图：这个表格内容分为两部分，即图中的第一部分和第二部分，并且上下两部分内容可以互相拖动，并且表格中的带箭头的所在行是可以展开和关闭，拖动后不能改变展开行顺序，在antd中的表格通过引入其他库可以实现拖动的功能，但是需要合并展开功能，某行不能拖动，某行独占一行的功能。首先通过拼接数据，实现展示第一行内容和第二行内容文案，并且拼接的数据中有name属性
2021-09-10 12:32:01
1028
原创 Axios取消接口请求方法
问题：频繁切换tab请求数据导致的数据滞后问题解决方法分为两种：第一种加入防抖函数，防止频繁切换请求接口第二种方法使用axios自带的方法来取消上一次的接口请求，具体操作如下：const {CancelToken} = axios;// 定义全局变量this.source = CancelToken.source();// 执行对应函数this.source.cancel();这个方法只需要在切换tab时先调用cancel方法取消上一次请求即可...
2021-02-19 15:42:38
794
原创 chrome://inspect/#devices调试方法及页面白屏解决
安卓使用chrome://inspect/#devices调试出现页面白屏的问题，具体解决方法在网上也搜了下相关的内容，网上给出的解决办法如下：方法一：清除缓存浏览器中访问 chrome://appcache-internals/#，会看到如下界面：缓存界面界面，将所有条目 Remove。如果这个方法没有解决白屏问题，使用方法二方法二：hosts 文件中添加如下内容：173.252.100.21 chrome-devtools-frontend.appspot.com31.13.82.17
2020-11-25 20:29:05
17895
原创 移动端问题整理
写H5页面总会碰上一些兼容性问题，之前都没有做一个完整的记录，之后碰到的问题都会记录下来。1.使用table画表格时出现iOS 边框显示不完全解决方法：有搜到相关问题，所给出的方法有：设置边框为1以上就可以了（尝试不成功），设置表格宽度为基数值如1，3，5（尝试不成功），然后自己想着办法设置td的边框为1px，然后解决...
2020-10-27 12:23:47
345
原创 在node中使用request模块和superagent请求接口
1.通过request请求接口首先是get请求的使用，如下：request({ url: 'address', method: 'GET' //get大小写都可以}, (err, res, data) => { if (err) { console.log(err) } else { const obj = JSON.parse(data); }})这里的回调有三个参数，第一个是错误信息，第二个是响应信息的集合，第三个是返回
2020-09-03 18:25:35
839
原创 puppeteer实现自动化运行jekins
使用puppeteer实现一个自动化发布qa代码工具，平时主要发布qa代码主要是通过jekins，然后搜索相应的项目，填写分支名称，构建前端代码，生成tag值，然后又搜索对应项目的node项目，再次填充之前的tag值和分支名称，还有要发布的环境。主要是通过puppeteer来实现各个功能的。下来进行各个步骤的解析，已经puppeteer功能的介绍。安装puppeteer，npm puppeteer有可能会失败，建议切换淘宝镜像源安装。1 . 首先我们要实现的是打开浏览器输入对应地址。代码如下：cons
2020-08-25 11:03:49
377
原创 React.createContext的使用以及useContext的使用
使用createContext进行跨组件间数据传递方法首先需要在父组件中定义一个容器和需要传递的默认值，然后通过Provider(生产者，简单来说就是定义数据的东西)，定义共享的数据，然后通过Consumer(消费者，就是子组件或孙子组件来使用)，具体实现代码如下：// 在父组件中定义export const Context = React.createContext({ activeKey...
2020-04-09 11:14:37
2698
原创 react Objects are not valid as a React child (found: object with keys {})问题
这个报错可能是因为将某个本应该是非object格式的数据现在变成了object来展示。我碰到这个问题的现状是定义了变量num，初始化是空字符串，然后通过接口获取数据调用setNum方法，接口后端接口正常应该返回data数据，接口现在没有data字段，项目中又将接口中没返回的data处理成data:{}，然后导致num变成对象，react解析时候又报错const [num,setNum]=use...
2020-03-26 11:20:10
10894
原创 DvaJS的数据流向和Model、connect使用
dva = React-Router + Redux + Redux-sagaDva的数据流向：改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 St...
2020-03-25 16:03:42
2157
原创 Vue.use的作用以及什么时候使用
在Vue中引入使用第三方库通常我们都会采用import的形式引入进来，但是有的组件在引入之后又做了Vue.use()操作，有的组件引入进来又进行了Vue.prototype.$something = something，那么它们之间有什么联系呢？先说一下Vue.prototype，在Vue项目中通常我们引入axios来进行请求接口数据，通过npm安装之后我们只需在我们的文件中import ax...
2019-12-04 11:27:24
11062
2
原创 Element使用小技巧
el-date-picker使用时的时间格式在使用el-date-picker进行时间选择的时候想要生成时间戳可以增加属性value-format=“timestamp” 就可以，添加change时间后选择后的时间会以时间戳的形式输出。如果想要选择时间后获取的是当日结束的时间戳，需要增加属性:default-time="[‘00:00:00’, ‘23:59:59’]"，例如以下代码：&...
2019-11-25 11:24:46
449
原创 element-ui中的el-select下拉框选中不显示问题
最近在使用element的el-select时出现了一个奇怪的坑，就是当我选中了下拉框的内容之后但是下拉框中不展示选中的label值，具体代码如下，先展示出现问题的代码<el-form-item label="推荐产品一："> <el-select filterable v-model="detail.recommendProductId" clearable @chang...
2019-10-24 20:27:58
22426
2
原创 async-await的循环请求数据
场景：循环按顺序请求数组中的接口，之所以有这样的需要是因为我要请求一个接口，但是发送的是多个不同的参数，所以我就将参数放到一个数组中，想按照数组顺序请求接口然后将返回数据放入数组中。当前项目中用到的是ES6语法async-await，所以就想着将存放接口的数组遍历循环请求一遍首先想到的方法是用forEach+async-await循环遍历数组的每一项然后请求接口，具体代码如下： let ...
2019-09-30 14:27:03
4127
9
原创 Vue引入Udesk在线打电话组件
业务需求需要在我们的CRM后台引入在线打电话功能可以直接拨打电话给客户，首先需要在Vue中引入Udesk打包后的文件，在Vue项目中有两个地方用来存放静态资源文件，分别是assets和static文件夹，两者的区别在于assets里面的文件会被webpack打包进你的代码里，而static里面的，就直接引用了，不会参与到文件的打包路径，因此一般在static里面放一些类库的文件，在assets...
2019-09-06 14:53:28
1634
原创 Webpack4升级踩坑记录
升级webpack到4以上版本，如：yarn upgrade [email protected]，如果提示错误然后运行yarn install安装package.json里所有包，并将包及它的所有依赖项保存进yarn.lock，运行后可能会出现的报错是该问题是vue-cli脚手架的一个bug，原因是chromedriver的部分文件被国内网络给墙掉了，无法下载完整的chromedirver包，需要运...
2019-07-19 17:30:57
513
原创 element下拉框的自定义筛选
在element框架中的el-select标签的子标签el-option中需要绑定两个属性，分别是label和value，通常我们对接接口和页面展示的内容是不同的，label是用于显示于页面中的内容，例如我们要实现一个下拉框，是否已婚：然后下拉框分别对应的值为是和否，选中是就传参数flag=1，否就flag=0，因此我们的在绑定el-option的属性时就应当，绑定label为是否，value为1...
2019-07-07 16:15:31
8042
原创 jq实现复制文本功能
实现该功能的主要思路是：给元素添加事件，回调获取当前内容，然后赋值到input或者textarea标签中，触发window自带的复制事件，然后隐藏input或者textarea标签即可具体代码实现：<button id="btn">这是一个需要复制的文本</button><input id="hide" type="text"><script>...
2019-06-11 17:55:49
17037
原创 nuxt.config.js配置head信息
全局设置默认 Meta 标签Nuxt.js 允许你在 nuxt.config.js 里定义应用所需的所有默认 meta 标签，在 head 字段里配置就可以了。 head: { title: 'BIGSTUDENT', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=de...
2019-06-10 14:57:08
8337
1
原创 移动端切换屏幕以及css实现页面内滑动
最近被分到了手机端做任务，需求是在原页面上加上tab滑动切换，由于之前没有做过手机端的任务心里还是有点慌慌的，于是提前先去度了一下相关的知识点，然后自己整理了一下，以备以后再次用到。通过事件touchstart和touchend来判断左滑还是右滑<div style="width: 100%;height: 3000px;background: #aaa;" id="main">...
2019-03-02 14:22:52
3079
1
原创 获取URL并将URL解析成对象
获取URL通过代码window.location.href来获取当前页面的完整的url，这个地址中也会包含URL中的参数，例如：www.baidu.com/acticle?type=food&code=2018然后我们可以对获取的地址进行拆分，先从?拆分然后获取到后半部分，然后对后半部分从&进行拆分，最后从=开始拆分，将拆分之后的地址组成一个对象，具体实现的代码如下let...
2018-12-01 14:06:35
3693
原创 Handlebars的使用方法及技巧
Templates使用模板的方法只需引入handlebars库即可使用，通过两个大括号的方式将变量包含起来，对应的数据就会展示到定义好的模板中展示，这块如果碰上数据想解析成html代码时可使用三个大括号展示<script type="text/template" id="my_tem"> <div class="demo"> <h1&g..
2018-12-01 13:01:19
2013
原创 Echarts设置点击事件
通常在使用Echarts画图之后会碰到一个需求，通过点击生成后图形具体某一项来传递相应的参数然后进行一个页面的跳转，当我遇到这个需求第一就想到了用on绑定点击事件的方法，然后就在代码上进行尝试，果然可以实现这个功能，我在这块展示的是一个柱状图，通过点击事件输出一下获取的参数可以得到什么结果呢？ 代码如下：myChart.on('click',function(params){ con...
2018-09-15 11:21:25
62535
10
原创 Echarts中数据显示实现formatter
来公司工作了两个月了，大部分时间都是在画图制表，主要使用到Echarts框架来进行数据可视化的展示，在完成需求的过程中碰到最多的问题就是数据展示时的样式需求，如鼠标放到图表上显示的内容、数据展示时的格式问题，目前为止主要是碰到了三种类型的数据显示：横纵坐标的数据显示格式问题坐标轴中柱状图或者折线图的数据鼠标滑到指定区域时的数据展示问题对于第一种横纵坐标数据显示的格式问题，如：对...
2018-09-01 14:44:09
13871
1
原创 火狐浏览器table表格的显示不全问题
解决火狐浏览器的表格展示不全 由于本人在学习前端开发以来一直使用的是谷歌浏览器，在前两天的代码提交过程中碰到了table表格的边框展示问题，在我这边是没有什么问题的，但是在我们老大那里却出现了table显示不全，然后就去百度这个问题，碰到了乱七八糟的解决方法，好多尝试后是不起作用的，最终在我的不断尝试下还是解决了。谷歌浏览器下的table样式内容如下： tabl...
2018-08-18 14:16:03
6146
原创 Angular面试方面的问题
1. ng-if 跟 ng-show/hide 的区别有哪些？ 第一点区别是，ng-if 在后面表达式为 true 的时候才创建这个 dom 节点，ng-show 是初始时就创建了，用 display:block 和 display:none 来控制显示和不显示。 第二点区别是，ng-if 会（隐式地）产生新作用域，ng-switch 、 ng-include 等会动态创建一块界面的也是如此
2017-09-19 22:54:46
1374
翻译 简单粗暴的理解Promise
js引擎是单线程的，代码段都是通过JS的异步事件轮询并发模型来执行的。 Promise是什么呢？是一个类？对象？数组？函数？不用多猜了，我们直接简单粗暴的将它打印出来console.dir(Promise)。 打印出来我们可以看到它是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。那么用Promise new出来的
2017-06-27 21:44:32
319
原创 Angular中的ng-bind和ng-model区别
ng-bind是从$scope -> view的单向绑定，是用于展示数据的。ng-model是$scope <-> view的双向绑定。<div ng-model="name">{{name}}</div><div ng-bind="name"></div>因为js是单线程，如果不使用ng-bind绑定元素会使得在代码还没运行到导入script那一步页面会先显示成{{name}}这种形式，为了避
2017-06-23 18:06:19
617
原创 JS中的垃圾回收机制
1.js中的内存管理 js具有自动的垃圾回收机制，也就是执行环境负责管理代码中使用的内存，在编写js时，不用像编写C语言那些需要手动跟踪内存的使用情况，而这种垃圾收集机制的原理很简单，就是定期找出不再使用的变量，然后释放其占用的内存，所以垃圾收集器就定期的执行这一操作。 2.局部变量的生命周期 js的局部变量只有当此函数执行的过程中存在，在执行的时候，会给当前变量在内存上分配相应的空间
2017-06-22 21:50:04
337
原创 Angular核心服务$http
$http服务封装了浏览器原生的XMLHttpRequest对象，与远程http服务器进行交互，支持多种method请求，get，post，delete等。在controller中可通过与$http获取对象，链式使用方式：$http(config).success(function(data,status,headers,config){}).error(function(data,status,
2017-06-21 11:24:55
232
原创 mysql安装步骤以及node连接mysql
mysql的安装地址：按照这个网站上的步骤安装就行，注意在安装过程中会有一个输入密码步骤。 按照这个步骤安装完成之后，下来测试是否安装成功，进入cmd后按如下操作： 1、命令行：net start mysql 如果能启动，那说明安装成功没什么问题了，如果产生发生系统错误5，拒绝访问，只需要以管理员身份访问运行cmd即可。 2、mysql -uroot -p 接着输入密码 3、mysq
2017-06-13 21:58:49
417
原创 JS中用var声明变量和不用的区别
在JS中声明变量时用var和不用var有什么区别，我查阅了很多的资料和书籍再加上我自己的理解来讲述一下我自己的看法。在函数内部声明变量 在函数内部如果用var声明变量和不用时有很大差别，用var声明的是局部变量，在函数外部访问这个变量是访问不到的，没var声明的是全局变量。在函数外部是可以访问到的。function ff(){ var a=1; console.log(a);
2017-06-12 17:23:59
4253
原创 JS函数中的this指向问题
今天我要说的是JS中的this指向，首先我们应该知道在js中函数的几种调用方式：普通函数调用作为方法来调用作为构造函数来调用使用apply/call方法来调用Function.prototype.bind方法es6箭头函数不管是通过哪种方式函数调用，我们都应该明确一点谁调用这个函数或方法,this关键字就指向谁。 1.普通函数调用function person(){ this
2017-06-05 22:18:25
614
原创 算法之JS实现冒泡排序的3种方式
今天跟同学探讨了排序算法中的冒泡排序，很早之前其实就写过这个代码，但是一直没有正式的写到博客中来，其实冒泡排序是九大排序中最简单的一个，也是最容易理解的一个排序，好了，废话不多说，我们先来谈一下冒泡排序的思想。 冒泡排序的思想：我们以从小到大排列为例，所谓冒泡排序就是在无序数组中每执行一趟选出这一趟中最大的数放在最后面，第二趟选出次大的数放在倒数第二位上，以此类推直到完成排序。下来贴代码： 第一
2017-06-04 22:30:54
4510
原创 css中的四种定位以及top和margin-top的区别
css中一共有四种定位分别是默认，相对，绝对，固定position：static，这种定位是默认的，一般没什么实际的作用。position：relative,相对定位 ，不会脱离文档流，类似于static，按顺序排列，一般设置也不会有什么变化，可以通过margin-top/right/bottom/left来改变框的位置position：absolute，绝对定位，这种定位脱离文档流，可以理解
2017-04-21 22:32:08
33040
4
原创 CSS3 3D正方体
提到36D我们会想到什么东西呢，嘿嘿嘿，老司机们，不好意思说错了，应该是3D效果，下来让我带领你们写出一个3D正方体。 先来认识下3D空间中的坐标系 再来认识下3D中的旋转，分别是绕X轴，Y轴，Z轴 单杠男x轴方向的旋转 钢管妹纸是y轴方向的旋转 转盘旋转是z轴的旋转我们先来学习三个重要的属性 1.perspective属性，属性值是某px，英文是透视，视角的意思，使用这个属性的
2017-04-19 14:04:40
988
原创 JS基本类型和引用类型赋值的区别
基本类型包括：number，string，boolean，null，undefined 引用类型包括：Object，Array，Date，RegExp，Function 通过代码来看他们的区别： var a=2; var b=a; b=3; console.log(a);//2 console.log(b);//3 首先基本类型的赋值是
2017-04-07 18:55:21
2667
原创 清除浮动
清除浮动的方法 假设现在有个div里面包含着三个div块</style> .div1{ border: 3px solid yellow; } .div4{ float: left; width: 200px; height: 200px; background: #f00; } .div2{ float: l
2017-04-05 14:03:05
241
原创 bootstrap的经典实用
bootstrap能够简化我们的代码，它的产生对我们写代码提供了很大的便利，今天我要写的就是bootstrap简单好用的实例。button：bootstrap中对于button定义了4中大小，分别是lg，md，sm，xs依次变小，使用方式首选项（大按钮）按钮的颜色分别是btn-default（默认），primary（首选项），success（成功），info（一般信息），warning（警
2017-03-17 17:08:23
307
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人