Web前端
关注
分享
扫一扫
XiaooSe
从事于web前端开发，热爱健身，程序员中的撸铁者。勇于尝试，驾驭人生。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
html、css文本换行，内容左边标齐
实现下图所示的效果随着屏幕大小的变换,对同一段落使其左边序号位置不动，内容左边标齐 下面为实现代码 html<p class="fd1 importwords">2.4 您有责任妥善保管账户信息及账户密码的安全，您需要对账户以及密码下的行为承担法律责任。您同意在任何情况下不向他人透露账户及密码信息。</p><p class="fd1 i...原创 2018-08-09 17:05:46 · 2580 阅读 · 0 评论 -
this.setState修改某一对象的某个属性值，其它保留不变
state中数据如下class Illegals extends React.Component { constructor(props) { super(props); this.state = { pageNav: { pageSize: 20, pageNum: 1, total: 50 } ...原创 2019-05-16 18:58:53 · 11309 阅读 · 1 评论 -
create-react-app 打包后资源路径引入不正确
解决方案在根目录下package.json配置 homepage: '.'为避免麻烦，使用HashRouter代替BrowserRouter原创 2019-05-21 19:27:48 · 2564 阅读 · 0 评论 -
react中index中引入ckplayer播放器
1. 下载包到本地 网址： http://www.ckplayer.com/将包解压放于public文件夹下3. index.html中引入ckplayer.js在body标签下添加script type="text/javascript"> // 动态生成腳本 // urls----script.src地址数组、callback---回调函数 ...原创 2019-05-16 15:16:44 · 2166 阅读 · 9 评论 -
react中查看图片大图插件react-zmage的用法
近期react项目有使用到查看大图这一功能，特此记录下react-zmage的使用心得插件官方地址 https://zmage.caldis.me/ 使用方法yarn add react-zmage -S 或者 npm install react-zmage -S在需要的地方引入 import Zmage from 'react-zmage' 将页面中的i...原创 2019-05-16 14:09:56 · 8010 阅读 · 1 评论 -
解决跨域的几种方式
1.document.domain由于js同源策略的限制，脚本只能读取和所属文档来源相同的窗口和文档属性对于有公共的上级域名，这些服务器上的页面之间的跨域访问可以通过document.domain来进行默认document.domain存放的是载入文档的服务器的主机名,可以手动设置这个属性，不过只能设置成当前域名或者上级域名，并且必须要包含一个.号。举例：zy.ttdvideo.com ...原创 2019-05-21 15:25:29 · 527 阅读 · 0 评论 -
后台管理系统导出数据列表返回二进制数据,下载后为null
导出文件，后台返回二进制数据前台ajax请求需要设置responseType: arraybufferArrayBuffer对象，表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer 不能直接操作，而是要通过类型数组对象或 DataView 对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。这里我使用的自己封装的axios公共配置impo...原创 2019-05-21 14:15:07 · 846 阅读 · 0 评论 -
map标签与area标签构建映射图片解析
一、需求分析 在给的UI设计图，有两个a标签或者button,以往需要将其分成三部分背景图，两个下载按钮需要将背景图放于一div中，按钮相对背景图做定位或者其它方式.它的优点：按钮点击的动态效果可以自行添加，美观；它的缺点：自适应适配难做，设备宽度有大有小，按钮的定位在某些程度上会存在偏差； 花费时间长；简单功能复杂化；优化方案使用map标签，area标签，img标签，Adobe...原创 2019-05-24 14:50:38 · 1253 阅读 · 1 评论 -
获取省市级数据转换为 antd中Cascader组件数据要求
后台获取数据格式如下[ {cid: 51, city: "北京市", pid: 1, province: "北京市"}, {cid: 106, city: "天津市", pid: 2, province: "天津市"}, {cid: 6, city: "上海市", pid: 3, province: "上海市"}, {cid: 338, city: "重庆市", p...原创 2019-05-10 17:09:25 · 1681 阅读 · 0 评论 -
antd table如何默认选中第一行，并添加背景色
table配置<Table columns={this.state.columns} dataSource={this.state.tableData} bordered // loading rowClassName='table-box-detail' pagination={false} // scroll={{y: ...原创 2019-05-17 17:33:39 · 7454 阅读 · 1 评论 -
统计字符串出现次数最多的字符,且次数最大且相同的不止一个
// 统计一个字符串中出现次数最多的字符 function strMaxCount(str) { let obj ={}; if(str.length === 0) { alert('字符串为空,无法统计,请输入字符串'); } else { // 遍历字符串 ...原创 2019-05-27 14:59:57 · 586 阅读 · 0 评论 -
git分支拉取develop分支最新代码
拉取最新的代码首先 git checkout develop 切换到develop分支— 执行 git pull 拉取最新代码再切换到 所修改分支 使用 gIt merge develop 合并代码原创 2019-09-24 16:27:17 · 5731 阅读 · 0 评论 -
mbox整合多个store
1.store/index.js (根store)// 整合两个storeimport NativeStore from './nativeStore';import IpcStore from './ipcStore';const nativeStore = new NativeStore();const ipcStore = new IpcStore();export defa...原创 2019-09-04 11:05:34 · 1412 阅读 · 0 评论 -
根据ID 进行分类
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-08-02 11:25:04 · 635 阅读 · 0 评论 -
Ie浏览器和其它浏览器设置不同的css样式
@媒体查询@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { #breadcrumb { z-index: auto !important; }}原创 2019-07-23 10:15:34 · 1388 阅读 · 0 评论 -
js中文件流下载导出excel文件方法
需求：数据列表导出为excel文件，通过向后台请求接口，返回的结果一般有两种方式：1. 后台返回excel文件http地址（后台会在服务器生成，前端请求url再下载一遍，浪费服务器资源，优点：前端处理方便）2. 后台返回二进制文件流（后台不会再服务器生成文件，只需前台进行解析，不占用服务器资源）代码1.http地址形式window.location.href="后台返回的地址"2.二...原创 2019-07-11 16:05:13 · 6583 阅读 · 0 评论 -
this指向
this的指向，就是那个对象调用函数，函数里面的this指向那个对象es6提供了箭头函数没增加了我们的开发效率，但是箭头函数里面，没有this,箭头函数里面的this是继承外面的环境...原创 2019-06-10 15:41:27 · 271 阅读 · 0 评论 -
react 16版本 生产环境取消控制台输出
npm run eject 暴露create-react-app配置在webpack.config.js代码：// 配置取消console.logconst UglifyJsPlugin = require('uglifyjs-webpack-plugin');在minimizer数组中添加new UglifyJsPlugin( { ...原创 2019-06-13 16:48:29 · 2678 阅读 · 0 评论 -
moment 时间戳转为固定格式时间错误
moment转为时间正确的转换格式应如下：moment(value).format('YYYY-MM-DD HH:mm:ss')注意：可能导致错误的：moment(value).format('YYYY-MM-DD hh:mm:ss');moment(value).format('YYYY-MM-DD Hh:mm:ss');moment(value).format('YYYY-MM-...原创 2019-05-23 11:47:01 · 4395 阅读 · 0 评论 -
echarts图像下载与和传参传给后台导出excel文件
需求分析将echarts图像以file形式传给后台，以excel列表形式进行下载导出图像与列表掌握内容canvas图像下载到本地，转成Blob对象，转成file文件FormData添加其它需求参数js-file-download下载后台返回的二进制文件Step1: canvas图像下载到本地，转成Blob对象，转成file convertCanvas(canvas) { /...原创 2019-05-20 16:49:09 · 1980 阅读 · 0 评论 -
react组件通信解析: 1. 父子组件传值 2.父子组件方法互相调用
父组件 parent.jsximport React from 'react';import Child from './child';class Parent extends React.Component { constructor(props) { super(props); this.state = { queryInfo: { a: ...原创 2019-05-20 14:07:12 · 391 阅读 · 0 评论 -
IP地址正则表达式
基本满足所有的IP判定IP判定函数function isValidIp(ip) { // 正则表达式 var reg2 = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-...原创 2018-11-05 19:21:35 · 2810 阅读 · 0 评论 -
idea(2018.1.4版本)创建react-native项目,windows、android真机测试以及安卓夜神模拟器测试运行
在初识react-native项目上，因为个人从事前后端的开发，使用idea比较方便，环境搭建下载node.js 网址：https://nodejs.org/en/ 安装完成后，进入cmd命令行窗口，输入 node -v和npm -v; 备注：如若出现node不是内部程序等错误,检查及添加环境变量，如若环境变量没问题； 小窍门：重启电脑下面其...原创 2018-09-04 11:46:25 · 2734 阅读 · 1 评论 -
IDEA入门实用快捷键整理
最常用Ctrl+F:查找文本 Ctrl+Shift+F:全文搜索Ctrl+Shift+S:高级搜索Ctrl+Alt+left/right:返回至上次浏览的位置Ctrl+Y:删除当前行Ctrl+Shift+Up/Down:向上/下移动语句Ctrl+D:复制当前行 Shift+Enter:向下插入新行 Ctrl+Enter:向上插一行 10.Shift+F6:重构 - 重...原创 2018-09-04 09:52:03 · 210 阅读 · 0 评论 -
前端进阶目标
Step.1 前端工程化开发主流框架：Vue、React、Angular 自动化平台: webpack gulp 协作工具： git Step.2 H5为主的移动开发微信小程序 微信二次开发 ReactNative.js移动端开发框架 Step.3 逐渐成长的全栈Node.js Step.4 拥抱虚拟现实VR/ARWEBGL ...原创 2018-08-28 09:42:56 · 1386 阅读 · 0 评论 -
vue前端开发必备
vue框架前端开发所用工具及网站总结工具列表vue.js devtools 调试工具 AdGuard广告截器 WEB前端助手 react Developer tools网站列表http://www.iconfont.cn/ 阿里巴巴矢量图标管理...原创 2018-08-26 11:10:53 · 1651 阅读 · 0 评论 -
React-router4简约教程(转载url：http://react-china.org/t/react-router4/15843)
React-router和React-router-dom的选择什么react-router和react-router-dom？往往开始会比较懵逼。下面我们就来一探究竟。 React-routerReact-router提供了一些router的核心api，包括Router, Route, Switch等，但是它没有提供dom操作进行跳转的api。 React-rout...转载 2018-08-26 10:36:57 · 307 阅读 · 0 评论 -
数据处理，foreach循环应用
需求： Array数组中每一项的name值与数组的arr属性中每一个bizName值相等，即arr中的bizName值应该全为'餐厅'或便利店，foreach循环实现let arr = [ { name: '餐厅', arr: [ {bizName: '111', certId: '', certName: '', certT...原创 2018-08-15 17:22:50 · 570 阅读 · 0 评论 -
js事件委托
事件委托（小白详解） 前几天去面试，有这么一道面试题，如下，只给ul绑定事件，然后点击每个li输出它的内容。拿到题目纯属懵逼，接触到的只是对Li进行遍历，添加点击事件。 <ul id="ul"> <li>1</li> <li>2</li> <li>3</li> <li>4</li></ul>偶然看到事件委托这一技术，才恍然大悟。下原创 2017-10-29 19:11:47 · 372 阅读 · 0 评论 -
rpx,p,rem在小程序中的应用
rpx首先是微信小程序解决自适应屏幕的尺寸单位。微信小程序规定的屏幕宽度为750rpx。例如：一般按设备屏幕宽度进行设计，屏幕宽度除以750 既可以转换为px微信小程序也支持rem尺寸单位， rem 规定屏幕的宽度为20rem。例如：1rem = (750/20)rpx = 37.5 rpx参考自：https://blog.youkuaiyun.com/starleejay/article/det...转载 2018-11-16 15:03:38 · 458 阅读 · 0 评论 -
js交流网站平台
https://runjs.cn各种大神的js小插件原创 2019-02-21 15:43:33 · 590 阅读 · 0 评论 -
react-router4 嵌套子页面路由设计
App.jsx 文件中import {BrowserRouter, Redirect, Switch, Route} from 'react-router-dom';import Login from './page/logoin';import Main from './component/Main';import NotFound from './component/NotFound'...原创 2019-05-07 17:20:18 · 2163 阅读 · 0 评论 -
antd 国际化如何解决
前提 已对antd的按需引入做了配置moment 是处理日期的插件yarn add moment -S 即可或者 npm install moment按照图下引入原创 2019-05-14 14:34:21 · 5048 阅读 · 0 评论 -
create-react-app创建，ie11不兼容
问题描述按照官方文档使用yarn create react-app centre-app 创建工程使用yarn start, chrome浏览器可正常访问以下为packge.json配置文件但在ie11下报如下图错误经过百度、必应、google一通后，发现并没有react@16.8.6版本的解决方案，最后在github官方issues中找到解决方案，记录分享下。1. yarn ad...原创 2019-05-06 19:46:50 · 5683 阅读 · 5 评论 -
es6 Set和Map数据结构
// Set去除数组的重复成员[…new Set(array)]Array.from(new Set(array))二、垃圾回收原理浅析现在各大浏览器通常用采用的垃圾回收有两种方法：标记清除、引用计数。Symbol是Es6引入的一种新的原始数据类型，表示独一无二的值，它是JavaScrpt语言的第7种数据类型：前6种分别是Undefined,null，Boolean ,string Nu...原创 2019-03-15 17:18:00 · 222 阅读 · 0 评论 -
Vue3.0项目报错: history模式下 Uncaught SyntaxError: Unexpected token <
history模式下 vue.config.js中publicPath不要设置为相对路径正确如下原创 2019-03-11 11:46:37 · 4033 阅读 · 0 评论 -
BOM和DOM的区别
BOM是浏览器对象模型，用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。DOM是文档对象模型，用来获取或设置文档中标签的属性，例如获取或者设置input表单的value值JavaScript由3部分组成：ECMAScript：解释器、翻译兼容性：完全兼容DOM：Document Object Model （文本对象）兼容性：部分不兼容BOM：Browse...原创 2019-03-07 20:00:30 · 323 阅读 · 0 评论 -
vue中iE11 input select使用backspace使浏览器回退解决
参考网址：http://www.cnblogs.com/lujiulong/p/6019638.html在utils中添加preventBackspace.js文件代码如下：export const banBackSpace = (e) => { let ev = e || window.event // 各种浏览器下获取事件对象 let obj = ev.relate...原创 2019-02-28 14:55:23 · 1766 阅读 · 0 评论 -
浏览器内核解析
四大浏览器内核优缺点Trident:因为在早期IE占有大量的市场份额，所以以前有很多网页是根据这个Trident的标准来编写的，但是实际上这个内核对真正的网页标准支持不是很好，同时存在许多安全Bug。Gecko:优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，缺点是消耗很多的资源，比如内存。Webkit:优点就是Webkit拥有清晰的源码结构、极快的渲染速度，缺点是对网页...转载 2019-02-27 15:04:45 · 785 阅读 · 0 评论