小记心得

选择了electron-builder作为编译打包工具时，electron-v14.2.9-win32-ia32.zip无法从github下载包时，解决办法！

项目需求：1、服务侧推送给消息给前端，前端需要展示在右下角2、根据不同的消息类型，提供不同的操作按钮‘同意’、‘拒绝’等代码设计：1、使用websocket方式建立通道2、前端基于umi+antd+reconnecting-websocket.js开发3、使用express+express-ws+mockjs建立websocket服务通道，模拟服务端推送消息运行效果：...

electron打包软件包示例，采用loadFile方式打包electron-builder

这是一款登录页面，自动填充密码chrome浏览器插件直接下载，可使用，By Heavy实现逻辑：1 进入或刷新登录页面，可以是任何网站2 插件自动调取接口API获取到用户名和密码(见background.js)3 插件自动识别出页面中type="password"的输入框作和它的前一个type="text"的输入框，分别作为目标输入框4 插件自动向目标输入框中填充用户名和密码要点：1 插件开发技术2 background和content消息通信技术3 识别html元素

最近项目中，突然遇到这种问题，具体：页面代码：$.getJSON("http://url.url.com?jsonpCallback=?",function (json) { //1.4.2版本中，正常执行 });老版页面中用的jquery1.4.2版本，请求jsonp数据一切正常，现在突然升级到1.9.1版本，出现错误：返回成功，数据返

时分秒倒计时的js实现，如图：闲话少说，直接上代码。html代码： 剩余天数： 0天 0时 0分 0秒js代码：timer('timer');//调用方法 //时分秒倒计时方法 function timer(eleId){ var element=document.getElementById(eleId); if(element)

首先，判断是否是IE浏览器，有如下两种方式：第一种,通过userAgent信息来判断:if(navigator.userAgent.indexOf("MSIE")>0){ //是IE浏览器}第二种：通过ActiveXObject这个IE浏览器专有对象来判断:if(!!window.ActiveXObject){ //是IE浏览器}然后，判断在IE浏

1.安装typescript：npm install -g typescript2.使用命令编译文件：tsc demo.ts3.使用IDE工具webstorm，配置typescript文件自动编译功能:（1）进入设置界面（2）勾选相应设置（3）配置tsconfig.json文件，示例代码如下：{ "compilerOptions"

最近公司项目中，有对文件的导出（下载）的功能，当然普通的下载方式，比如访问一个后台文件流地址，直接生成对应的文件，下载即可，地址栏中也可携带一些控制参数等（例如?a=1&b=2），但这个项目的api接口，均采用的在headers中传控制参数方式，故而就只能采用其他方式了。于是，经过考虑，通过ajax方式请求到后台的二进制流文件，采用Blob对象的方式保存在本地，这样文件的名称，后缀规则均可...

移动端模拟导航可点击自动滑动 0.1.4。导航可左右滑动，可点击边缘的一个，自动滚动下一个到可视范围【依赖于iscroll.js】。废话不多说直接上代码：/* * 移动端模拟导航可点击自动滑动 0.1.4 * Date: 2017-01-11 * by: xiewei * 导航可左右滑动，可点击边缘的一个，自动滚动下一个到可视范围【依赖于iscroll.js】 */

今天遇到一个问题，在IE浏览器下，使用label FOR radio后，label中的图片无法选中。例如，这样的代码  这种情况下，点击label的图片将无法选中radio选项。解决这个问题，目前可以有三种方法，分别是通过JS、CSS或者HTML代码3个方面来解 决。方法一，JS：window.onload = function(){ if(documen

一个活动，拥有开始时间结束时间，分别需要去执行相关的任务，公司的一些项目中用的还挺多，随手记录一下吧，便于以后用到。代码如下：(function($){ $.actCountTimer=function(options){ //各种属性、参数 var defaults = { DurationTime:['2017010908

操作系统环境：windows环境平台：nodejs+npm官方网站：http://www.expressjs.com.cn/express4.X的有一些变化，4.x版本中将命令工具单独分出来了(https://github.com/expressjs/generator),所有要先按装express-generator，否则创建项目时，会提示express命令没找到1.安装通过应用生成器工具 express 可以快速创建一个应用的骨架。通过如下命令安装：

最近，移动端的项目越来越多，每个项目中都有登录注册界面等，异常提示的弹框和tip用的较多，于是抽出点时间封装了下对应的jquery插件，和一个函数；以便项目重用性。废话不多说，直接上代码：1  模拟alert弹出框函数//模拟alert弹出框函数；datetime：20160727；by：xiewei【依赖于flexible.js和jquery或者zepto】 fu

关于placeholder的使用，众所周知它是h5的新属性，所以IE9以下就别想用它了，不支持。那么我们必须要低版本的浏览器，做一些降级处理的兼容，原理自然就是：提示语placeholder用其他方式替代显示咯。以下是一小段兼容处理。代码如下： welcome to ixiewei world body{font:12px/1.5 "

最近项目中遇到一个令人头疼的问题，查阅各种资料，尝试各种方法，最终得以解决；哎···下面就说说这心酸的历程吧。大家都知道autocomplete属性是表单字段中的HTML5新属性，该属性有两种状态值，分别为"on" 和 "off"，该属性可省略：省略属性值后默认值为"on"，也可以省略属性名，直接写入关键字on或off。网站项目中，有登录和注册的弹框，在除chrome的浏览器中一切都ok，

最近公司的某产品中，有动态热图的展现，分别展现某个时间段的热图时间变化，例如：最近一周七天内，每天的热图分布变化图；客户提出一个需求，这个动态变化的图生成一个gif图提供下载是否可行？实现方案：1.可通过服务端生成对应gif，然后前端请求下载2.前端自己实现生成gif图片，自行下载采用方案：前端实现方式，于是在网上找各种相关的几款组件调研，均有利弊，推荐两款好用并且稳定的组件：1 html...

众所周知，作为前端开发人员，经常会遇到跨域联调的场景，那么Chrome浏览器也是我们首选的调试浏览器。Chrome浏览器跨域设置方法：在快捷方式中设置：--disable-web-security --user-data-dir如图：相信很多人也是这么做的，但是Chrome升级到66版本后，这个就不好用了，怎么解决呢：处理方式不变，设置参数修改为如下即可：--disable-web-securit......

此篇仅做简述，详细请见实际项目1 项目结构：（1）服务端eggjs开发（2）客户端umijs开发（3）数据库mysql数据库2 效果如下：3 备注：（1）数据库使用的在线数据库，下载后，需配置为自己的mysql数据库（2）涉及知识点，官方网站上均有，请自行学习https://eggjs.org/zh-cn/4 github地址：https://github...

本篇，只在umi项目非常熟练的情况下，如不清楚，可去umi官方文档了解。一，需求：1号地址：http://abc.abc.com/aaa众所周知umi项目要部署在非根目录下，配置base必须为某个目录，即base:'/aaa/'进入项目后，路由会自动以‘/aaa’为前缀，跳转正常，例如：（1）点击‘关于我们’，会路由到http://abc.abc.com/aaa/about二，需...

闲来无事，手工搭建一个webpack最基础的项目，可与项目初始化节省搭建时间，话不多说，上料！其中包含了：1 样式加载器css，sass，less2 图片加载器3 webpack-dev-server本地开发热更新4 babel配置：（1）babel：解决不支持语法转义es6转义为es5cnpm i --save-dev babel-loader @babel/core @babe...

前端开发的朋友们，不免会有要模拟假数据的时候，当然你的项目中有模拟数据的配置（如mock）则更好；但是当仅仅就是想起个服务端，模拟点假数据便于开发调用，那么今天就给大家介绍一种快捷有效的方法：express+mockjs搭建数据服务现只模拟一下四个接口供参考：http://127.0.0.1:30001/api/users get请求 列表数据http://127.0.0.1:30...

书写此篇，主要针对您的项目是create-react-app搭建的（未eject配置的），并且用的antd-design UI库还是2.x版本之前的，本篇也许对你有极大帮助。此时的antd已经是3.9.1版本了，早早的已经是3.x以上了，也不存在上述问题，那么您可以忽略此篇了！一下本人以"antd": "^2.13.2",做分析，此项目中您就会遇到，请求中有https://at.alicdn...

今天，我们增加一下对数据的增删改查的开发，这里不涉及用后台数据，而是使用json-server这个模拟数据的工具（可自行学习，这里不做详述）来实现。我们索性就对音乐页面做开开发吧：https://localhost:9999/music，现有截图如下：好，废话不多说，下面开始：1 安装json-server，运行cnpm i json-server --save-dev；根目录下新...

基于create-react-app官方脚手架搭建dva模式的项目-权限布局的开发，之前的项目骨架已经可以按照你自己的业务和项目逻辑去组装汽车了；这里依然以上项目骨架为基础，增加权限布局的开发。

基于create-react-app官方脚手架搭建dva模式的项目（三）

接上一篇：https://blog.youkuaiyun.com/xw505501936/article/details/80621740先来看下现有项目：点击 去BBB页面 如下：点击 去CCC页面 如下：好，以上是现有项目情况。下面我们让页面稍微美观一些，引入UI库，这里依然选用阿里系的antd（具体不做介绍，有兴趣的同学可官网查阅，此UI库也有针对angular的版本，也...

思索良久，决定还是记录下心得体会：一个基于create-react-app官方脚手架，搭建起来的dva开发模式的react项目。当然现今的前端市场如此强大，你可以在网络上找到你想要的任何脚手架，并且很多可以开箱即用，不可否认它们很优秀，开发它们的人或团队更值得我们竖起大拇指，为他们点赞！比较适合国人还是阿里系的一套react开发脚手架，dva-cli，antd，Umi等，当然gitHub上也有...

最近项目中有此需求，react地图组件的开发：1 输入地址可查询出对应地图位置并标记点2 能返回经纬度，并提交服务端保存3 在地图上点击某一点，也能返回对应经纬度和地址信息4 国内，国外均可使用经过调研决定，采用谷歌地图和高德地图来封装组件，当渲染地图组件时，先试图请求谷歌map的api，若能访问则使用谷歌地图，若不能访问，则调用国内高德地图，框架环境：react+dva+antd+umiJs；其...

关于布局，我们以偏向管理系统的风格为例，采用上左右布局，即：上放置logo，账户信息等公共数据，左放置菜单分类，多级导航等，右放置主体业务内容等。1 先来改造layout/layout.js，增加主体布局，并且判断是否是登录页面，布局不同，代码如下：import {connect} from 'dva';import React from 'react';import pathToR...

目前的项目架构，大家都能看到，有路由跳转的地方都是写死的url，如<Link to={'/aaa'}>,push({pathname:'/login'}),这种方式呢，没有问题，但是这样写死不太好，不便于后期维护，比如以后要改下路径，除了config.js中需要改一次，代码全篇幅都需要改一次，好累；name该怎么办呢？以下我们就来处理一下路由的优化！

获取地址栏参数

项目中有用到iScroll做移动端滑动效果的，里面有input复选框组件；此时出现了，点击复选框不起作用现象。原因：由于iscroll要监听鼠标事件和触摸事件来进行滚动，所以禁止了浏览器的默认行为。解决办法如下，由于iScroll5和4源码变化较大，所以处理方式有点不同，但是大致解决办法是一样的：方法一（元素排除法）：iScroll5版本：源码中找到事件

在仪表盘的任务增多同时，列表页的百分比圆环或圆饼也随之增多，于是顺手在仪表盘的基础上，封装了一个小小的jquery插件（jq-canvaspercent.js），暂且版本1.0吧，到以后业务的变化在对其进行功能拓展；暂时性用于页面中有多处百分比圆环的效果处理，还是不错的。jq-canvaspercent.js代码比较简单，以下直接给出插件代码和几张截图：/* * canvas

HTML5结合ajax实现文件上传以及进度显示；带进度条的HTML5上传文件（使用XMLHttpRequest对象；HTML5之FileReader的使用

数字金额转化为汉字大写金额

用法如下：1.引入MD5脚本文件1"yourUrl/md5.min.js">或者cdn文件等123"http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.js"> "http://cdn.bootcss.com

简述：经常遇到文件上传的一些前端功能，例如:会员头像编辑，身份证等证件的上传等等；而这时需要在当前页面完成整个上传过程，不刷新不跳转，就可以用到这个原理。在页面中嵌入一个隐藏的iframe元素，并且让表单的target指向iframe的name属性值，例如：form中target="tarframe06"，iframe=name="tarframe06"；然后检测，api返回的数据

html代码：js代码：console.log($('#abc'));console.log($('#abc')[0]);console.log(document.getElementById('abc'));示例如图：由此可见，$("#abc")[0]等同于 document.getElementById("abc")。参考地址：http:

官网地址：http://momentjs.com/gitHub地址：https://github.com/moment/momentcdn地址：http://www.bootcdn.cn/moment.js/