明致成-CSDN博客

二话不说就上效果图：当然我最初想要的效果图是这个样子的：来看看我们的实现代码吧：<template> <div class="demo g6"> <CommonTitle></CommonTitle> <div class="content"> <div id="container"></div> </div>

2021-09-11 09:15:27 1438

原创一、mapbox搭载vue3测试demo（1-10）

添加custom point、添加icon point、添加circle point、添加marker、添加line...

2021-08-08 14:51:43 1007 6

原创 zoomcharts图库的惊人效果——net chart

zoomcharts官网案例：https://zoomcharts.com/en/javascript-charts-library/use-cases/zoomcharts API：https://zoomcharts.com/developers/en/introduction.html源码位置：https://gitee.com/bidding-M/demo-test/blob/master/src/views/TestZoomcharts.vue...

2021-07-04 13:44:31 815

原创零基础学习cesium及demo（1-20）

测试demo地址：https://codechina.csdn.net/LiyangBai/cesium-test1、baseViewer2、addEntity1）box2）cone3）corridor4）cylinder5）ellipse6）ellipsoid7）point8）polygon9）polyline10）polylineVolume11）rectangle12）wall欢迎各位同僚指正。

2021-03-20 13:31:23 511

原创在vue项目中自定义事件总线eventHub

由于在工作中vue的项目中使用了大量是全局事件总线广播，使得某些方法在某种情况下被重复多次调用，查看了一下原因，是因为在每个单文件组件中定义的事件接收器和事件广播器在页面销毁的时候没有注销导致的。于是在保证改动量不大的前提下，决定自定义一个全局事件总线文件。之前的使用是在 main.js 文件中 vue.prototype.$eventHub = vue.prototype.$eventHub || new Vue()因此，重新定义一个文件 EventHub.js/** * Created

2021-01-03 13:49:19 755

原创 V3主要功能点总结

参考自开课吧。

2020-08-24 08:58:49 252

原创四、maptalks搭载vue3测试demo（31-40）

测试demo地址：https://github.com/Ruthevil/maptalks-test31、distanceTool32、areaTool33、drawTool34、draggabled35、editabled欢迎各位同僚指正。

2020-08-15 14:58:40 404

原创三、maptalks搭载vue3测试demo（21-30）

测试demo地址：https://github.com/Ruthevil/maptalks-test21、marker wave22、UIMarker欢迎各位同僚指正。

2020-08-08 11:07:25 516

原创记录element bug issuei：el-dialog的close事件有bug：导致回调方法被执行了两次

el-dialog的close事件有bug：导致回调方法被执行了两次目前最新版本2.13.2依旧存在这个问题!问题：el-dialog的close事件有bug：导致回调方法被执行了两次场景：如果@close的回掉方法（@close=cancel）和取消按钮@click的回调方法（@click=cancel）相同，当点击取消按钮的时候，对应的回调就会被执行两次。如果将@close=cancel改成@click.native=cancel就不会。所以@close封装有问题！【还有这个网址https:/

2020-08-03 12:38:49 3393 4

原创一、maptalks搭载vue3测试demo（1-10）

打点、画线、heatmap、marker cluster、animation marker...

2020-08-01 17:17:24 1047

原创 web前端常用工具类库

给大家分享一个工具类库：JavaScript专用https://github.com/Ruthevil/frontend-utils

2020-07-11 19:13:32 446

原创 8、Redux-进化的flux

Redux-进化的flux也是 Flux 里面“单向数据流”的思想，只是它充分利用函数式的特性，Redux 是超越 Flux 的一次进化。1、进化 Fluxflux 的 action creatorexport function addTodo(text) { AppDispatcher.dispatch({ type: ActionTypes.ADD_TODO, text: text });}redux 的 action creatorexport function

2020-05-30 17:15:56 171

原创 7、redux 的基础概念

redux 的基础概念1、三个基本原则整个应用只有唯一一个可信数据源，也就是只有一个 StoreState 只能通过触发 Action 来更改State 的更改必须写成纯函数，也就是每次更改总是返回一个新的 State，在 Redux 里这种函数称为 Reducer2、Actions一个单纯的包含 { type, payload } 的对象，type 是一个常量用来标示动作类型，payload 是这个动作携带的数据。Action 需要通过 store.dispatch() 方法来发送。

2020-05-30 17:15:10 168

原创 6、Flux

Flux一个 Flux 应用主要包含四个部分：dispatcher:处理动作分发，维护 Store 之间的依赖关系stores:数据和逻辑部分views:React 组件，这一层可以看作 controller-views，作为视图同时响应用户交互actions:提供给 dispatcher ，传递数据给 store1、单向数据流Flux 的核心：单向数据流Action -> Dispatcher -> Store -> ViewView 会通过用户交互触发 Acti

2020-05-30 17:14:30 211

原创 5、Data Flow

Data FlowData Flow 只是一种应用架构的方式，比如数据如何存放，如何更改数据，如何通知数据更改等等，所以它不是 React 提供的额外的什么新功能，可以看成是使用 React 构建大型应用的一种最佳实践。两种最主要的实现：官方的Flux更优雅的Redux...

2020-05-30 17:14:07 269

原创 4、react 组件通信

组件间通信1、父子组件通信就是通过 props 属性传递，在父组件给子组件设置 props，然后子组件就可以通过 props 访问到父组件的数据／方法，这样就搭建起了父子组件间通信的桥梁。父组件访问子组件用 refs2、非父子组件通信使用全局事件 Pub/Sub 模式，在 componentDidMount 里面订阅事件，在 componentWillUnmount 里面取消订阅，当收到事件触发的时候调用 setState 更新 UI。这种模式在复杂的系统里面可能会变得难以维护。一般

2020-05-30 17:12:36 158

原创 3、react DOM操作

DOM操作1、findDOMNode()当组件加载到页面上之后（mounted），可以通过 react-dom 提供的 findDOMNode() 方法拿到组件对应的 DOM 元素。findDOMNode() 不能用在无状态组件上。import { findDOMNode } from 'react-dom';2、Refs另外一种方式就是通过在要引用的 DOM 元素上面设置一个 ref 属性指定一个名称，然后通过 this.refs.name 来访问对应的 DOM 元素。因为无

2020-05-30 17:11:55 242

原创 2、react事件相关

react事件相关1、React 里面绑定事件的方式和在 HTML 中绑定事件类似注意要显式调用 bind(this) 将事件函数上下文绑定要组件实例上<p onClick={this.handleClick.bind(this)}></p>2、“合成事件”和“原生事件”React 实现了一个“合成事件”层，保证了和 W3C 标准保持一致，消除了 IE 与 W3C 标准实现之间的兼容问题。事件委托：“合成事件”会以事件委托的方式绑定到组件最上层，并且在组

2020-05-30 17:11:07 140

原创 1、React生命周期钩子

通过webpack+react+stylus+koa学习react框架，实现的旅游大数据大屏展示https://gitee.com/bidding-M/react-test

2020-05-30 17:10:14 133

原创使用elementUI的upload上传文件，用自定义请求（FormData）覆盖默认action，并实现表格预览excel数据

需求1、使用elementui组件库的upload上传文件2、后端接口要求前台将文件对象以FormData的形式发送请求3、前端请求接口前，要提前预览数据方法1、用elementUI组件的upload提供的 http-request 钩子覆盖默认的上传行为，实现自定义上传2、使用 xlsx 将文件流数据转换成JSON格式的数据以下是代码实现：首先安装xlsx：npm in...

2020-05-01 13:30:44 2675 1

原创 webpack构建原理（实现一个简易的webpack构建器）

webpack构建原理（实现一个简易的webpack构建器）webpack的构建原理：实现代码：执行```node bundle.js```的结果Q:没有实现判断输出目录不存在且创建的逻辑？webpack的构建原理：webpack的构建原理所在的核心文件：./lib/webpack-structure.jswebpack配置文件：./webpack.config.jswebpack的执行...

2020-04-12 16:40:12 259

原创 vue-light-timeline时间轴插件的使用

vue-light-timeline时间轴插件的使用第一步、安装：install第二步、引入：main.js第三步、使用：timeline.vue第一步、安装：installnpm install vue-light-timeline --save第二步、引入：main.jsimport LightTimeline from 'vue-light-timeline';Vue.use(...

2020-04-11 14:45:26 3102 2

原创 vue2.x源码解析分析图

vue源码中提炼出来的分析图：

2020-04-11 14:21:00 239

原创 vue2.x源码导读

dist目录输出文件说明cjs webpack1，browserfiryesm webpack2+umd 兼容cjs和amdruntime 仅仅包含运行时代码，不包含编译器环境准备1、安装依赖：npm install2、安装打包工具rollup：npm install rollup -g入口文件src\platforms\web\entry-runtime-with-co...

2020-04-11 14:16:32 238

原创 vue2.6.11版本源码运行报错问题处理

vue2.6.11版本源码运行报错问题处理1、源码下载git clone http://github.com/vuejs/vue.git2、安装npm依赖包npm install3、运行报错D:\workspace\html5\everyday2\vue>npm run dev> [email protected] dev D:\workspace\html5\everyday2\...

2020-04-01 19:53:58 1618 1

原创 nodeMailer发送邮箱验证码

nodeMailer发送邮箱验证码1、封装nodemailer对象const nodemailer = require("nodemailer");// 封装nodemailer对象let nodeEmail = { config: { host: "smtp.qq.com", port: 587, secure: false, //...

2020-03-29 10:27:20 344

原创 mongoose操作MongoDB数据库

MongoDB数据库的连接与操作1、mongoose操作MongoDB数据库const mongoose = require("mongoose")//mongoose连接数据库，数据库名：bidding-systemmongoose.connect('mongodb://localhost/bidding-system')let db = mongoose.connectiondb...

2020-03-29 10:26:23 272

原创 nodeJS异步操作

nodeJS异步操作1、promiseconst fs = require("fs")// 创建promise，使用链式调用解决回调函数的回调地狱问题let delFilePromise = () => { return new Promise((resolve, reject) => { fs.unlink("./test/test.js", (er...

2020-03-28 20:56:52 233

原创 nodeJS实现小爬虫

nodeJS实现小爬虫-批量下载图片// nodeJs实现批量下载网站图片/** * 思路： * 1、使用http模块发起请求，获取相应数据 * 2、分析HTML数据，提取所有图片地址 * 3、根据图片地址发起请求，获取图片保存在硬盘 */let http = require("http");let fs = require("fs");let path = require("...

2020-03-28 15:17:23 229

原创优秀的Express中间件

Express中间件1、全局中间件const express = require("express")const app = express()// 此处便是一个全局中间件，任何请求都会被拦截在此处// 如果不执行next()，程序就会卡在这里app.use("/", (req, res, next) => { console.log("this is a global...

2020-03-28 15:15:53 181

原创 vue使用vue-xlsx-table包读取Excel文件，并实现单元格数据可编辑

Vue读取Excel并以表格形式展现在页面上，并实现单元格数据可编辑第一步、安装：install第二步、引入：main.js第三步、使用：ExcelRead.vue最近由于公司项目需求，我在画原型图的时候发现，有个功能是前端导入Excel文件并在页面上进行预览，在预览过程中用户可能会修改某个单元格的数据。因此，本文来实现利用node包vue-xlsx-table实现此需求。第一步、安装：i...

2020-03-26 08:26:15 3962

原创 Vue中使用类封装CSS3实现的序列图动画

考虑到大家现在更多的使用的是VUe，于是呢我考虑把之前发的这篇文章（https://blog.csdn.net/LiyangBai/article/details/105028359）用es6的类去封装，然后在vue中使用它。说干就干~AnimationUtil.jsimport ColorUtil from "./ColorUtil"/** * 生成动画css字符串，生成的动画字符...

2020-03-22 15:24:57 1358