![](https://img-blog.csdnimg.cn/20191231151627157.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端开发经验汇总
文章平均质量分 77
该专栏包含了笔者从业过程中使用过的前端技术,以及在使用过程中的采坑经历,学习历程,个人思考得到的经验,希望能给同行朋友一些启示。
毕小宝
技术路漫漫,仍然在路上的 Java 程序员!
展开
-
vuepress 打包后左侧菜单链接 404 问题解决办法
用 vuepress 搭建个人博客还是挺不错的,一个配置文件就搞定了,只需要专注编写内容的 md 文件,想到一个用途就是用它来搭建知识文档库。原创 2023-11-06 18:57:48 · 379 阅读 · 0 评论 -
DataGear 添加 Http 数据集是请求头 JSON 的格式说明
玩了一下 DataGear ,添加了一个 Http 接口的数据集,由于目标接口请求必须包含 Token 信息,所以按照配置提示添加 JSON 格式的头信息时,想象成了 JSON 对象,结果预览请求始终报错。找到 datagear-analysis 模块的 HttpDataSetTest 单元测试类,改下 http 数据集为目标路径,然后再异常的代码的地方打断点调试。当然,在不了解源码之前,这个异常看不懂,也百度不到相关资料,没办法,下载源码来看看。下载源码,打包的时候单元测试很多过不了,直接跳过。原创 2022-12-19 22:15:00 · 829 阅读 · 0 评论 -
Vue 不重新打包,动态加载全局配置的实现过程
Vue.js 如何通过全局静态文件实现配置的动态修改,而且不需要重新打包就能立即生效呢?本文记录这个问题的解决过程。原创 2022-12-10 10:59:07 · 2323 阅读 · 0 评论 -
React 如何清空 Input 和时间输入框,单独使用不含 FormItem
React 的搜索输入框是动态生成的,没有放在 Form 对象中,同时提供一个重置按钮,以便手动清空输入框的内容。网上的资料都是直接通过 Form 对象的 `resetFieldValue` 实现的,通过跟踪 `Input` 对象的属性,找到了清空的方法,整理如下。...原创 2022-07-30 10:11:52 · 3807 阅读 · 0 评论 -
React 绑定 onClick 事件不生效问题分析,原来是绑定方法二不归!初学需注意
复制粘贴的代码,没经过测试,你敢提交吗?是的,复制代码,如果觉得很简单,不想启动环境测试的话,最好的方法是目测,然后 SVN 比对分析,看看改了什么,有没有改完整。从以往的经验来看,无论复制什么代码,只要心里感觉太简单,有所松懈,就可能有坑!..................原创 2022-07-24 08:29:36 · 5349 阅读 · 0 评论 -
React 路由组件选择与页面刷新问题分析
总结最近 React 开发遇到的几个问题及解决过程。原创 2022-01-19 20:45:00 · 1752 阅读 · 0 评论 -
从传统开发转向 Vue.js 开发教程基础篇
从技术角度看,Vue.js 是关注 MVVM 模型的 `ViewModel` 层,它通过双向数据绑定,把 View 层和 Model 层连接起来,通过对数据的操作就可以完成对页面视图的渲染,不再需要开发人员关注 html 渲染层。原创 2021-04-25 11:49:48 · 524 阅读 · 0 评论 -
antd Table 组件 columns 列定义 render 属性问题
上周玩了两天 React,用 React + antd + Table 实现一个简单的列表功能,列表组件渲染时,`this` 对象跟当前组件定义不是同一个,导致定位不到对应的操作事件。原创 2021-04-19 20:18:49 · 10509 阅读 · 4 评论 -
antd Pagination 组件绑定回调函数问题整理
分页组件点击分页和 `pageSize` 的时候,需要调用当前组件的 `doSearch` 方法发送 ajax 请求给后台,请求对应页的数据。但是实现的时候,始终无法访问到当前组件的函数和 `this.state` 信息。原创 2021-04-18 18:01:14 · 1310 阅读 · 0 评论 -
JS 反爬:一分钟了解 debugger 如何劝退爬虫
爬虫之前,需要先对网站请求进行梳理,F12 打开浏览器的开发者模式是第一步,所以反爬虫的第一步就是在开发者模式下让浏览器无限循环进入debugger ,一起来看一个网站是如何劝退爬虫机器的。原创 2021-02-23 19:00:52 · 1670 阅读 · 2 评论 -
网站重写复制按键 js,就能增加用户吗?由 Vue.js 路由小知识引发的思考
技术网站重写复制按键的 js ,作为开发人员你会为了复制一段代码而注册一个用户吗?程序开发工作就是这么神奇,未经测试的代码都是不可靠的代码,解决一个小问题,你以为是一个方法名的小改动、引入一个新 jar 包的小事儿,却不知又陷入另一个泥坑。原创 2021-01-20 07:08:11 · 232 阅读 · 0 评论 -
Vue created 中的异步请求的影响分析
本文介绍 Vue 的 created 和 beforeCreate 钩子执行的两个知识点:1. 父子组件的 created 是顺次执行的,**先父后子**,即使父组件的 created 方法中有异步请求,也会等待所有的异步请求结束,才会执行子组件的 created 方法; 2. 相同组件的 beforeCreate 方法先于 created 方法执行,如果 beforeCreate 中使用await 返回一个 Promise 对象,主流程不会处理,而是继续执行 created 方法。...原创 2020-07-25 12:26:06 · 7367 阅读 · 1 评论 -
一个汉字笔画库 hanzi-writer 的小应用
最近在教小朋友写字,令人惆怅的是我竟然弄不准有些常见汉字的笔画。百度搜了下,这么多年自己写“毕”的笔画竟然是错的,提笔先写的是竖勾,而正确的第一步是一横,真有误导下一代的风险啊。网上能找到有该功能的 APP ,但下载使用过程中看到广告超多,体验很不好。原创 2019-05-17 20:30:51 · 6407 阅读 · 5 评论 -
AngularJS 模块中 resolve 参数分析
背景不久以前有一篇文章介绍过关于AngularJS路由模块参数resolve的分析,当时的分析过程是基于代码运行表象推断的,并没有具体深入源码进行探究。今天看到AngularJs 弹窗模块 $uibModal 的API中也用了resolve这个属性,跟踪源码发现其使用该参数的流程跟前面分析的结果基本一致。本文就来看看$uibModal的open方法的源码吧。$uibModal基本用法该模...原创 2019-07-04 14:09:13 · 2532 阅读 · 0 评论 -
AngularJS 路由参数 resolve 配置分析
背景最近捣鼓一个前端项目,其中有大量的在路由过程中使用resolve配置的代码,到底这个属性是什么作用,烦扰了好几天终于弄清楚了它的作用和流程。AngularJS路由语法使用AngularJS实现简单页面导航,离不开$stateProvider的路由配置,而路由配置时,如果我们需要动态添加路由页面所依赖的控制器,或者控制器实例化时的一些参数需要注入的话,我们就可以使用resolve来完成。...原创 2019-07-04 14:08:57 · 2053 阅读 · 0 评论 -
echarts地图闪烁点大小设置
背景echarts地图的散列点,需要每个区域的闪烁点的大小各不相同,主要通过属性symbolSize进行设置,如果这个值设置为一个数值,那么所有闪缩点大小就都一样,如何根据区域的值设置为不一样的呢?echarts配置项官网查找echarts的symbolSize配置项说明,我们知道可以自定义该配置项。 解决办法为symbolSize提供一个自定义的回调函数,但是这个函数该怎么...原创 2018-07-25 16:22:32 · 13652 阅读 · 1 评论 -
简单知识——跨页面信息传递
一个简单的数据查询功能,列表页面有“查看详情”按钮,跳转详情页面时列表的一条记录信息需要传递到详情页面;而详情页面有“返回”按钮,返回的同时也需要将原列表的查询条件回显。跳转方式直接是 `window.location.href`,一个典型的跨页面信息传递,属于不同页面之间共享信息的情况。那么跨页面共享信息的方式有哪些呢?本文将介绍三种方式。原创 2017-08-26 08:19:47 · 2856 阅读 · 0 评论 -
开发整理-jquery datatable插件问题总结
近日使用到了jquery的datatable插件作为页面分页列表,踩了不少坑,整理记录一下。 首先,创建table的方式有两种,一种是DataTable,还有一种是小写开头的dataTable,两种方式创建的表格对象能操作的方法也不同的,使用大写的DataTable创建的对象,有一个ajax().url().load()方法,可以动态重新加载新的请求,而小写开头的就没有。原创 2016-07-17 08:19:31 · 3141 阅读 · 0 评论 -
项目开发-树形层级结构中的数量统计
项目开发中,有一 菜单的树形结构展示时,需要统计各个菜单下记录的总数,通常如果树形结构的深度为2(只有两级菜单的话),使用for循环统计没有问题,但是如果树形菜单的深度没有限制,就不能通过两次for循环来实现统计了,只能借助递归来统计了,使用一个全局map记录每次统计的值。简单实现如下: 具有层级结构的元素Source类,省略getter/setter:public class原创 2015-03-12 16:05:09 · 4971 阅读 · 0 评论 -
项目开发-highcharts插件学习总结
1 页面定义一个DIV,指定id,设置图表的宽度和高度2 在脚本中执行图表方法highcharts();常用的语法是://指定页面加载时执行的方法$(function ( //highcharts方法实质是在设置chart的各个组成部分的值 $("#container").highcharts({chart:{},//图表类型及相关信息title:{},//原创 2014-09-03 16:08:21 · 1265 阅读 · 0 评论 -
动态生成的表单如何用 el-form 校验,你知道吗?
Vue 的 el-form 提供了表单校验功能,常规用法是用 `:rules` 属性设置校验规则,并通过 `el-form-item` 的 prop 属性绑定校验规则。但是有一种情况,如果表单位于 v-for 标签中,是动态生成的,该怎么使用 el-form-item 来校验呢?此外,如果待校验的表单是 el-popover 组件中的 readonly 表单,blur 触发不稳定,该怎么处理呢?本文继续分享这两个问题的解决办法。...原创 2020-10-12 11:51:56 · 8513 阅读 · 5 评论 -
三分钟细数 el-form 表单校验的坑点,前车之鉴,可助你避坑
Vue 的 el-form 提供了表单校验功能,通过 :rules 属性设置校验规则,并通过 el-form-item 的 prop 属性绑定校验规则。通过封装,让前端校验更方便。具体使用过程中,有几个容易出错的地方,本文来整理一下。每一个坑都是笔者亲自趟过的,写完本文后,以后应该不会再踏入相同的坑。...原创 2020-10-12 11:50:46 · 12308 阅读 · 5 评论 -
Vue 中嵌入 iframe 并进行双向通信的完整流程
Vue 应用中,需要使用 el-dialog 弹出一个 iframe 页面,该页面来源于其他项目,这就要解决 Vue 父页面和 iframe 子页面的两个通信问题: 1. Vue 父页面向 iframe 子页面传递初始化数据 2. 子页面的关闭按钮,需要通知父页面关闭 el-dialog本文将整理 Vue 中嵌入 iframe 并进行双向通信的完整过程。...原创 2020-08-05 09:15:51 · 5643 阅读 · 0 评论 -
考虑时间和选择成本,就不会对付费反感了
虽然现在是开源盛行的时代,但是源代码作为一种劳动产出品,开源固然好,收费也无可厚非,毕竟有时间成本。免费带来的筛选成本,远比付费大得多,如果只关注付费的金钱数字,而不能看到背后资源的价值,那么花钱还是不痛快的。距离公认的知识付费元年 2016 年已经四年了,转换思路,接受付费事物,投资个人成长,才能更快地成长呐!原创 2020-06-30 11:45:22 · 406 阅读 · 1 评论 -
微信小程序学习系列(一)
背景2 月份在 GitChat 上买了一个小程序开发专栏,加上碰到好几个网友咨询我会不会少儿学习类的小程序开发。所以最近决定研究一下小程序,目标是用小程序做一个少儿诗词学习l类的小应用。本文将记录微信的 HelloWorld 的目录结构,剖解首页的内容,以初步了解小程序开发的基本要素。准备工作微信开发者工具,开发工具,官网下载地址 ;JavaScript 语法基础,脚本语言;html...原创 2020-04-12 09:16:55 · 508 阅读 · 0 评论 -
前端开发笔记:记一次网站创建的过程
文章目录背景额外的请求参数img 未闭合时修改 src 无效图片加载优化切换 Tab 时滚动到顶部favicon.ico 的作用背景这两天做了一个简单的课程商城,用手机微信测试时总有一些小问题。虽然只是一个简单的应用,前后也花了两天的时间,本文来整理下期间碰到的问题。额外的请求参数微信浏览器再请求外链接时,会额外戴上一些参数,很长一串,像这样:nsukey=bOA6RWDJv%2Bx2M...原创 2020-02-15 17:19:19 · 445 阅读 · 0 评论 -
Vue 学习笔记:v-for 循环引用组件
前端开发过程中,需要动态添加操作面板,将操作面板封装成组件后,使用 v-for 引用多个操作面板。这里有两个知识点,子组件引用时怎么动态设置 ref 属性? <el-button :key="index" :ref="`btn${index}`" v-for="(btn,index) in btns"> ...原创 2020-02-07 20:52:02 · 7227 阅读 · 1 评论 -
Vue 学习笔记:sync 实现 props 双向通信
vue-admin-element 是一个比较流行的开源项目,里面有对 el-pagination 组件的二次封装,pagination,本文将整理这个组件封装时 sync 的应用。原创 2020-02-05 13:22:53 · 1606 阅读 · 0 评论 -
js 面向对象编程和 async 结合使用问题整理
背景ES6引入了Class(类)这个概念,通过class关键字可以定义类。该关键字的出现使得其在对象写法上更加清晰,更像是一种面向对象的语言。作为Java开发者,对这种写法会一见如故,但是它又跟Java的面向对象编程语法有所不同,还有一种诡异的情况是在一个js的class内部中可能this对象是undefined。本文将整理node.js编写服务端代码过程中的一些小问题,对于js而言,我是门外...原创 2019-02-28 18:07:31 · 3154 阅读 · 0 评论 -
node.js 使用 oracledb 执行事务控制
背景承接前面一篇介绍node.js封装数据库操作的文章,本文继续封装node.js中通过oracledb进行事务操作的实现过程。oracledb相比mysql好一点的是它的所有操作同时支持回调和Promise两种处理方式,所以编写同一个事务中执行多个SQL的逻辑,其代码相比mysql更简洁。async和await的控制流程首先,需要了解下async和await结合使用时,如果await返回的...原创 2019-02-27 16:44:30 · 2089 阅读 · 0 评论 -
node.js 数据库操作工具类封装
背景node.js操作对数据库的操作,目前只了解了mysql和oracledb两个模块对数据库的操作代码,它们的用法稍有不同。相比oracledb,node.js的mysql模块相对容易些,本文将整理这两种数据库的通用方法,完成简单SQL语句的执行。此外,node.js操作数据库的过程跟Java的JDBC也有很大差异。最明显的一点是node.js的数据库模块通过回调函数来处理数据库请求,而且从...原创 2019-02-19 18:01:48 · 2753 阅读 · 0 评论 -
node.js操作oracle数据库流程整理
背景node.js操作mysql数据库相当容易,但是操作oracledb就有些复杂,需要依赖oracle客户端,本文记录在CentOS7操作系统下使用node.js操作oracle数据库的过程。资源下载1、node.js解压包:node-v10.15.1-linux-x64.tar.xzhttp://nodejs.cn/download/(中文版没有Linux64的包)https://n...原创 2019-02-14 16:20:40 · 1869 阅读 · 0 评论 -
Node.js进行web开发知识清单2
承接上文,继续分析Node.js进行web开发的过程,整理知识点如下。1、使用ui-sref和ui-view实现页面导航的过程。ui-sref根据路由查找对应state的URL,并将其设置到a的href属性上;ui-view本质是占位符,最终使用a的href的内容渲染该区域;还有一个ng-view,区别是ng-router和ui-router两种路由组件。2、视图路由原理指定应用...原创 2019-01-10 14:57:46 · 249 阅读 · 0 评论 -
Node.js进行web开发知识清单
背景工作中需要了解一个前端项目,AngularJS+Node.js,所以现学相关的知识,并整理下知识列表。Node.js的启动npm installnpm start相关语法1)require引用模块,对于有参数的模块,第二个括号就是参数。const logger = require('./logger')(__filename);2)反引号,模板字符串,其中可以定义变量,最...原创 2019-01-09 16:36:07 · 277 阅读 · 0 评论 -
项目开发-dtree.js源码分析
最近项目开发中使用到了树形展示插件dtree.js,这个简单、小巧的树形结构插件,让我很惊叹:它太小了,总共代码还不到四百行,这与我以前使用的zTree相比,代码量简直是两个数量级的。而且dtree.js的界面风格我很喜欢,浅色的图标,除了能满足基本树形展示的需要,还很容易扩展(是的,它的代码很简洁),通过简单的扩展就能支持复选框、单选框等操作。 阅读dtree.js的源码,其核原创 2015-03-13 15:29:22 · 2069 阅读 · 0 评论 -
简单东西-项目开发之js总结
1 ajax非异步调用,且调用函数具有返回值 function getEncoderInfo(id){ var encoder = []; $.ajax({ type : "post", url : basePath+"/management/source/findSourceById", data : { id:id }, dataType :原创 2015-03-09 16:08:41 · 821 阅读 · 0 评论 -
项目总结-js简单易忽略的问题
1 JQuery获取radio的选中的按钮的值。$("input:radio:checked").val();选中或者取消选中某个Radio的方法,可以通过添加属性或者删除属性checked来完成$("#radioId").attr("checked",true);$("#radioId").removeAttr("checked");2 ajax请求时dataType的作用。原创 2014-11-27 17:23:09 · 13757 阅读 · 0 评论 -
项目总结-前台js小知识
1 表单中disabled的表单数据是不会原创 2014-11-16 17:08:54 · 889 阅读 · 0 评论 -
echart4.0使用dataset绘制散点图
背景散点图多维Series如何通过dataset组件传参完成散点图绘制呢?如果是多个序列的散点图,则需要单独对每个序列设置encode指定对应的y轴的取值列。应用实例以demo中的气泡图为例,结合dataset教程最后一个散点图的例子,完成数据配置过程。定义二维dataset数据:var data = [ ["Income","Life Expectancy","Populatio...原创 2019-01-25 16:27:46 · 2059 阅读 · 0 评论 -
echart4.0 map支持dataset实例
官方文档说支持 dataset 的图表有: line、bar、pie、scatter、effectScatter、parallel、candlestick、map、funnel、custom。其他几种都能在文档中找到demo,那么map类型的图表该怎么用dataset组件设置数据呢?到官网找到map的例子,然后尝试直接去掉series的data属性,并添加dataset属性,结果能正常显示,说...原创 2019-01-18 16:20:04 · 2353 阅读 · 0 评论