自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(285)
  • 资源 (7)
  • 论坛 (1)

原创 Electron开发桌面端程序

一、配置开发环境安装nodejs,这个网上教程很多二、创建应用1.创建项目文件目录electron-app/├── package.json├── main.js└── index.html2.初始化项目npm init初始化过程中填写相关信息,最终生成的package.json文件{ "name": "electron-app", "version": "1.0.0", "description": "", "main": "main.js",

2020-09-11 18:06:50 43

原创 Vue自定义组件实现v-model双向绑定

核心点:1.父组件啥也不用干只需要绑定v-model值2.子组件接收的props属性必须为value3.子组件data中必须定义一个属性接收value的值4.子组件watch监听value值同步给定义的属性5.子组件watch监听定义属性的值通过$emit(‘input’)同步给父组件父组件<template> <div> <p>父组件当前的值:{{num}}</p> <button @click="btnClick"&gt

2020-08-21 20:02:44 109

原创 百度地图缩放或拖拽时多边形覆盖物消失问题

问题产生的原因使用的point点不是通过使用new BMap.point()实例化出来的,所以会导致覆盖物忽隐忽现的情况产生测试代码提示:示例里需要加上自己的百度地图key才能正常显示<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="v

2020-08-05 17:12:27 132

原创 Chrome80版本请求接口未携带cookie问题

浏览器更新后发现登录接口莫名验证失败,比对请求参数后发现,发送第二次请求时cookie未携带第一次请求成功后端设置的JSESSIONID,导致后端接口又设置新的JSESSIONID,后面的请求因JSESSIONID不同验证不通过。在网上搜索问题找了原因,是因为浏览器升级后对跨域接口默认的安全策略变了,需要手动修改策略。解决方案1.如果是用axios请求接口,先设置 axios.defaults.withCredentials = true2.打开谷歌浏览器在Chrome中访问chrome://fla

2020-08-04 11:04:01 888

原创 SCSS for、each循环

for循环$colors: (key: default, value: gray), (key: red, value: red), (key: orange, value: orange), (key: yellow, value: yellow), (key: cyan, value: cyan), (key: blue, value: blue), (key: purple, value: purple);@mixin color($key,

2020-07-22 09:51:59 107

原创 百度地图自定义地图类型瓦片底图

提示:请使用自己申请的《百度地图key》替换代码中的《此处使用你自己的key》<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>自定义地图类型瓦片</title> <style> html, body { heig.

2020-07-16 16:53:40 312

原创 百度地图突破19级缩放限制解决方案

百度地图默认最大缩放级别为19级,但在某些场景中需要结合自定义贴图实现更高级别的视图通过下面这种方式就能自定义最大最小缩放层级提示:请使用自己申请的《百度地图key》替换代码中的《此处使用你自己的key》<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>百度地图突破19级缩放限制</title> &lt

2020-07-16 15:49:41 321 3

原创 vue clipboard 复制到粘贴板功能

import Clipboard from 'clipboard';//复制到粘贴板function handleClipboard(text: string, event: MouseEvent) { const clipboard = new Clipboard(event.target as Element, { text: () => text, }); clipboard.on('success', () => {

2020-07-13 16:10:55 193

原创 Vue+Elementui+Axios+TypeScript+downloadjs下载文件

<template> <el-button type="primary" size="large" @click="fileDownload">下载模版文件(Excel文件)</el-button></template><script lang="ts">import { Component, Vue } from 'vue-property-decorator';import axios from 'axios';import

2020-07-10 11:14:48 168

原创 Vue+Elementui+Axios+TypeScript上传文件

<template> <el-upload ref="upload" action accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" :limit="1" :file-list="fileList" :auto-upload="false

2020-07-10 10:47:48 138

原创 Nginx部署Vue项目刷新页面404

vue项目router用的是history模式,用nginx代理服务器部署后只能看到主页,刷新或跳转其他页面就会出现404。解决方法:修改nginx.conf配置文件,将客户端发来的url重定向到默认的index.html,才能正常访问。关键代码:try_files $uri $uri/ /index.html;完整配置:server { listen XXXX; //端口号 server_name XXX.XXX.XXX.XXX; //本机IP地址

2020-06-29 16:21:07 459

原创 vue项目运行在二级域名打包配置

1.修改vue.config.js中的publicPathmodule.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/', //打包时区分开发环境与生产环境静态资源路径 ...}2.修改src/router/index.js路由模式为hash(删除mode: 'history’后默认是hash模式){ // mode: 'history' // 默认为hash} ...

2020-06-28 20:33:08 409

转载 axios下载文件流处理返回值

使用 axios 请求 api 下载导出一个文件时,接口返回值可能会出现两种情况:1、文件流2、json 对象responseType 值的类型值数据类型''DOMString(默认类型)arraybufferArrayBuffer 对象blobBlob 对象documentDocumnet 对象jsonJavaScript object, parsed from a JSON string returned by the servertextDOMString实例返回值不同情况的处理方式,举例

2020-06-23 10:42:07 434

原创 递归获取祖先id集合

function getAncestors(result, id, arr) { arr.some(item => { if (item.id === id) { result.unshift(item.parentId); getAncestors(result, item.parentId, arr); return true; } }); return result;

2020-06-22 16:30:54 152

原创 axios过滤重复请求及批量取消请求

实现思路:把每次发送的请求及参数通过CancelToken创建标记添加到vuex的一个列表中,响应完成后从vuex的列表中删除该标记每次添加标记到列表时先与列表比对是否重复,未重复正常添加,重复则不添加并取消该次请求。通过循环vuex的请求标记列表,可以批量取消所有请求。http.ts该文件封装了axios的请求,对每次的请求通过cancel的createInterceptUrl方法创建标识,然后通过axiosPendingModule的addPending方法记录在vuex的列表中,响应结束后通

2020-06-17 11:57:48 189

原创 Promise.all在文件上传中的应用

Promise.all可以将多个Promise实例包装成一个新的Promise实例。Promise.all获得的成功结果的数组里面的数据顺序和发送请求的顺序是一致的,而不会根据响应结果的顺序排序。Promise.all失败的时候则返回最先被reject失败状态的值,与成功的返回顺序是不同的。Promse.all在处理多个异步处理时非常有用,例如表单中上传相册,需要所有图片上传完毕得到地址才能提交表单,可以通过Promse.all控制一个loading变量的状态来校验提交条件。上传相册的例子:.

2020-06-12 12:20:02 141

原创 商品规格SKU笛卡尔积计算

typeScript 版function cartesianProductOf(...args: any[]) { return args.reduce( (total: any, current: any) => { let ret = [] as any[]; total.forEach((a: any) => { current.forEach((b: any) => {

2020-06-10 16:18:42 513

原创 vue typescript mixins混入

person-mixins.tsimport { Component, Vue } from 'vue-property-decorator';@Componentexport default class PersonMixins extends Vue { public name: string = "Zhangsan"; public say(msg: string) { console.log(msg); }}home.vue<template>

2020-05-28 17:40:31 569

原创 Git撤销本次pull rebase(变基) 回退到pull前的代码

1.输入命令查看本地记录git reflog列表记录:2.找到本次rebase之前的id3.执行命令回退git reset --hard ca606c64.执行命名取消rebase状态git rebase --abort

2020-05-22 16:12:02 943

原创 vue typescript 使用tinymce5富文本编辑器

GitHub上地址https://github.com/tinymce/tinymce-vue1.安装tinymce、tinymce ts声明文件npm install tinymce -Snpm install @types/tinymce -S安装之后,在 node_modules 中找到 tinymce/skins 目录,然后将 skins 目录复制到 public/tinymce目录下同时下载简体中文语言包文件,复制到 public/tinymce目录下skins文件夹及zh_CN

2020-05-18 16:59:42 675 4

原创 reduce实现递归查找属性

let peoples = { zhangsan: { name: '张三', height: 170, child: { name: '张小小' }, }, lisi: { name: '李四', weight: 200, wife: { name: '杨玉环' }, }, wagnwu: {

2020-05-14 18:39:47 232

原创 JavaScript array reduce

语法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)未设置initialValue值时首次运行prev 对应 arr[0] ,current对应arr[1] ;总共执行次数是arr.length - 1let arr = [{num: 1}, {num: 2}, {num: 3}];let obj = arr.reduce((prev, current)=>{ console.

2020-05-09 17:34:10 85

原创 Vuex持久化vuex-persistedstate

import createPersistedState from 'vuex-persistedstate';const store = new Vuex.Store({ plugins: [ createPersistedState({ storage: window.sessionStorage, //持久化数据存储到sessionStorage reducer(val) { return {

2020-05-08 19:16:54 146

原创 动态创建iframe页面内容

<!DOCTYPE html><html><head> <title>动态创建iframe页面内容</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta http-equiv="content-type" co...

2020-04-13 18:30:00 461

原创 动态创建iframe在Firefox中报错NS_ERROR_FAILURE

Firefox中通过脚本动态创建iframe空标签,在未设置src时有时会报下面这个错解决方法是先设置src为有效的url,在onload后再替换里面的dom

2020-04-13 17:55:57 357

原创 Nodejs koa2读取服务器图片返回给前端直接展示

const fs = require('fs');const path = require('path');const mime = require('mime-types'); //需npm安装const Koa = require('koa'); //需npm安装const app = new Koa();app.use(async (ctx) => { let file...

2020-04-10 16:21:31 1122

原创 Nodejs读取文件后缀名

const path = require('path');const extname = path.extname('hello.jpg'); //获取文件后缀名console.log(extname); // .jpg

2020-04-10 15:46:03 632

原创 vue中jsx语法解析字符串标签

使用domPropsInnerHTMLrander(){ let str = '<span>aaaa</span><span>bbb</span>'; return (<span domPropsInnerHTML={str}></span>);}

2020-04-10 11:02:47 232

原创 vue中使用jsx条件判断

简单结构用三元表达式rander() { return (<div>{ this.isNumber ? <span>11111</span> : <p>aaaa</p>}</div>)}复杂结构用块级if elserander() { if (this.isSimple) { return (<span...

2020-04-10 10:52:31 442

原创 vue清除地址栏路由参数

let path = this.$route.path; //先获取路由路径this.$router.push(path); //再跳转路由路径,query参数没带过去,所以被清除了

2020-04-09 14:44:03 4052 2

原创 Mockjs批量生成随机JSON数据

配置参数var Random = Mock.Random;Random.date('2018-08-dd');var dataMock = Mock.mock({ 'list|50': [{ 'simCar|13000000000-19900000000': 1440191734422, 'operator|1': [ '移动...

2020-03-31 15:19:44 3553 2

原创 moment获取历史和未来年、月、日、时、分、秒、时间

历史时间moment().add(-1, 'Y'); //获取当前时间-1年的时间moment().add(-1, 'M'); //获取当前时间-1月的时间moment().add(-1, 'D'); //获取当前时间-1天的时间moment().add(-1, 'H'); //获取当前时间-1小时的时间moment().add(-1, 'm'); //获取当前时间-1分钟的时间mom...

2020-03-31 12:14:28 546

原创 获取一组坐标的中心点

/** * 获取一组坐标的中心点 * @param {Array} points 坐标集合 * @returns {Object} 中心点 */function getCenter(points = []) { let point = { lat: 0, lng: 0 }; if (points.length) { ...

2020-03-20 20:16:08 341

原创 百度地图设置圆形覆盖物的最佳视角

此方法为不严谨的计算,勉强能用/** * 设置圆覆盖物最佳视角 * @param {Object} point 坐标点 * @param {Number} radius 直径 */function setCircleBestViewport(point, radius) { //地图缩放最大层级为20级,比例尺对应显示的米数为20米,假设圆的直径是100米 //地图在20...

2020-03-20 18:49:17 197

原创 vue在scss中使用js的变量

<template> <div> <span v-for="item in list" :style="{'--text': item.text, '--color': item.color}"></span> </div></template><script>export...

2020-03-12 11:58:39 5415

原创 vue开发分页组件

组件效果图组件用法<pagination :show-jumper="true" :total="100" :currentPage="20" :pagerCount="7" @prev-click="prevClick" @next-click="nextClick" @prev-quick-click="prevQuickCl...

2020-03-10 11:03:16 88

原创 Git修改远程仓库地址

方式一:命令直接修改git remote set-url origin https://github.com/lihefei/xxx.git方式二:命令先删除再添加git remote rm origingit remote add origin https://github.com/lihefei/xxx.git方式三:修改config文件在项目根录的.git文件夹下找到conf...

2020-03-06 14:41:40 234

转载 Git多分支并行开发合并策略

一、项目背景项目AB分支同时进行开发时,A分支开发过程中有其他分支B上线,并且B分支上线版本已同步(merge)到master,则须合并已上线版本到正在开发的分支A上,避免A分支上线时覆盖B分支的代码,导致功能倒退。二、命令行合并步骤1.切换到开发分支A:git checkout 【开发分支】2.合并master到开发分支(因为B已经同步到master,于是将master合并到A,保证...

2020-02-20 15:56:36 1011

原创 uni-app开发微信小程序

添加分享功能可以自定义点击按钮分享,同时在onLoad平级添加onShareAppMessage方法<!-- #ifdef MP-WEIXIN --><button open-type="share">立即分享</button><!-- #endif -->onLoad(option) {},onShareAppMessage(re...

2020-02-10 23:04:06 130

原创 VSCode可视化调试Vue代码

1.安装扩展Browser Preview安装完成后在侧栏会多出一个图标,点击后就能打开内置谷歌浏览器2.安装扩展Debugger for Chrome3.在项目里创建launch.js文件会在当前项目下生成文件夹和配置文件4.编辑launch.jsurl与项目启动后的地址保持一致{ // Use IntelliSense to learn about possib...

2020-01-06 14:00:00 1770

Editplus JSON格式化插件.zip

Editplus JSON格式化插件,使Editplus工具拥有格式化json代码的功能,提高工作效率

2019-10-17

HTML5压缩图片.zip

通过html5的canvas实现对图片的压缩,实现步骤: 1.通过文件选择按钮获取本地图片 2.获取本地图片的dataURI数据创建本地图片预览 3.创建canvas画布图片预览 4.通过canvas的toDataURL()方法返回压缩后的图片格式的dataURI 5.用canvas返回的dataURI创建压缩后的图片预览

2019-10-15

深入理解JavaScript执行上下文、函数堆栈、提升的概念.pdf

详细讲解javascript中执行上下文、函数堆栈、变量提升的原理,对代码解析运行过程有更深层的理解

2019-06-14

js实现html转图片并下载保存

用js通过html2canvas.js和canvas2image.js两个库,实现把页面转换成图片并保存到本地

2019-03-13

layui2.2.5表格排序功能自定义扩展

layui框架表格只支持数字排序,不能支持自定义排序,于是自己修改底层源码上增加了自定义排序功能

2019-01-17

React Native基础视频教程

01.JavaScript基础 02.ECMAScript 新功能 03.React 基础 04.React 路由 05React Native基础知识 06.React Native进阶 07.R React Native高级 08ECMAScript 2105(es6) 09React Native视频教程-项目实战

2018-12-11

听晴明老师从头讲React Native

01 基本原理与开发环境搭建 【录播】React Native架构和原理的简单介绍(16分钟) 免费试学 【录播】macOS iOS环境搭建(19分钟) 免费试学 【录播】macOS Android环境搭建(17分钟) 免费试学 【录播】Windows Android环境搭建(10分钟) 免费试学 【录播】Android设备的使用和注意事项(8分钟) 免费试学 02 JavaScript、Node、ES6基础 【录播】JavaScript基础(12分钟) 【录播】ES6基础(12分钟) 【录播】Node基础(15分钟) 【资料】JavaScript、Node、ES6基础课件(zip,633.0KB) 03 React基础一 【录播】React JSX基础(13分钟) 【录播】初识React组件化开发(43分钟) 【资料】React基础一课件(zip,1.1MB) 04 React基础二 【录播】组件的生命周期(24分钟) 【录播】组件间通信(31分钟) 【资料】React基础二课件(zip,1.1MB) 05 实战之前的准备 【录播】开发工具选用WebStorm(9分钟) 【录播】官方组件和文档一览(15分钟) 【录播】项目的基本结构(23分钟) 【录播】如何规范项目代码(18分钟) 06 试写电影列表 【录播】基本样式和布局(27分钟) 【录播】Flexbox和多列布局(25分钟) 【录播】FlatList的基本用法(14分钟) 【录播】评分星星(22分钟) 【资料】素材(zip,1.9MB) 07 获取网络数据 【录播】获取网络数据(44分钟) 【录播】刷新和分页的补充(11分钟) 08 使用react-navigation跳转页面. 【录播】StackNavigator(页面跳转)(25分钟) 【录播】TabNavigator(选项卡切换)(13分钟) 【录播】针对安卓的界面调整(6分钟) 09 电影详情页 【录播】本地缓存数据(27分钟) 【录播】悬浮层与绝对定位(20分钟) 【录播】使用Linking调用播放视频(15分钟) 10 打包发布 【录播】Android打包发布(10分钟) 【录播】iOS真机调试和打包发布(11分钟) 免费试学 11项目源码 【资料】项目源码(zip,2.2MB)

2018-12-11

lihefei_coder的留言板

发表于 2020-01-02 最后回复 2020-03-17

空空如也
提示
确定要删除当前文章?
取消 删除