- 博客(51)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 tomcat 配置自签名证书
前言： 项目应用中，我们会遇到https请求的场景，有两种解决方案：一种是申请ssl证书，第二种是创建自签名证书。一、创建自签名证书之前是你的机器已安装JDK环境（这里不做赘述）。 下面我们开始制作自签名证书： 打开 cmd 命令窗口，输入命令： 给域名配置httpskeytool -genkey -v -alias tom...
2019-12-31 16:44:16
2416
原创 谷歌底图调用
谷歌底图谷歌地图OGC WMTS 服务规则： 服务地址： http://mt1.google.cn/vt/lyrs=m@157&hl=zh-CN&gl=cn&x=${col}&y=${row}&z=${level}&s=Gali其中：z即为瓦片的层次，0层覆盖全球；y为行，从上往下为0~2...
2019-08-16 11:09:43
776
原创 Three.js 插件实现360全景
前言： 有些小伙伴在开发过程中可能会遇到全景展示的需求，我们借助于Three.js的photo-sphere-viewer.js库即可实现无插件的方式实现全景图片的展示。只需要浏览器支持WebGL和canvas就可以。三步实现全景：一、引入js库： <script src="./libs/three.min.js"></script>&l...
2019-08-02 11:10:33
1893
原创 JS 前端导出CSV文件
前言： 长期以来，在做文件下载功能的时候都是前端通过ajax把需要生成的文件的内容参数传递给后端，后端通过Java语言将文件生成在服务器，然后返回一个文件下载的连接地址url。前端通过location.href = url或者window.open(url),完成文件的下载。如果希望在前端直接出发某些资源的下载，最方便快捷的方法就是使用HTML5原生的download属性。...
2019-07-25 17:47:29
1188
原创 Oracle修改字符集
服务端字符集修改1、确认服务端字符集确认服务端字符集select userenv(‘language’) from dual;2、修改服务端字符集首先以 DBA 身份登录 Oracle。Windows 系统下直接在命令行下运行命令 sqlplus /as sysdba 或在 SQL PLUS 下运行命令 /as sysdba。然后依次运行命令：shutdown immed...
2019-07-18 16:53:43
212
原创 React 项目实现多语言切换
前言： 在做项目过程中，遇到一个需求就是支持多语言，实现国际化的功能。感谢React社区的强大，提供了umi-plugin-locale插件来实现国际化的功能。首先我们是基于 Umi 搭建的项目。umi-plugin-locale约定 在 src/locales 中引入 相应的 js，例如 en-US.js 和 zh-CN.js，注意：文件名称要和locale的值要对...
2019-04-27 17:47:41
3179
原创 React 路由参数传递
React路由可以处理明确的url，也可以动态的去匹配 url中的参数路径。传参方式有三种：方式一： 通过params 1.路由表中 <Routepath=' /sort/:id ' component={Sort}></Route> 2.L...
2019-04-07 21:32:17
1298
原创 Redux 与路由
要开发一个富客户端应用，有一个东西必不可少，那就是路由（router）系统。在React生态环境中，React-Router是公认的中最优秀的路由解决方案。它提供了与React思想十分贴切的声明式的路由系统我们通过<Router>，<Route>这两个标签以及一系列的属性定义整个React应用的解决方案。一、路由的基本原理： 1、保证视图和URL的同步...
2019-04-07 11:00:59
698
原创 Redux 之middleware简介
一、middleware由来： 面对多种业务场景，Redux提供了 middleware 来扩展特定场景下的功能。例如：监听每个dispatch发送的每一个action。每个middleware处理一个相对独立的业务需求，通过串联不同的middleware实现变化多样的功能。action会先经过 middleware处理，在传给reducer来处理。/** * 输入系统日...
2019-04-06 19:26:41
146
原创 Redux 简介
一、Redux是什么？ Redux的核心代码可以理解为一个库，同时强调与Flux类似的架构思想。它提供若干个API让我们去调用store,并能够去更新store中的最新状态。“React应用”是指使用了redux这个npm包并结合了视图层实现（例 React），及其他前端应用必备的组件，（路由库，Ajax请求库）组成的完整的类Flux思想的前端应用。二、Redux 三个原...
2019-04-06 17:21:23
822
转载 React Flux架构模式
前言： MVC是一种架构模式，它通过关注数据界面分离，来鼓励改进应用程序结构。MVC强制将业务数据（Modal）与用户界面（View）分离开，通过控制器（Controller）管理逻辑和用户输入。这种模式的缺点是：在你项目越来越大的时候，逻辑越来越复杂，数据流动的方式就很混乱。 在此基础上，又衍生出来了MVVM,由VM(ViewModal)q取代了C(Controller...
2019-03-31 20:44:27
333
原创 React 之 setState
前言： state是React中非常重要的概念。React通过管理状态来实现对组件的管理，React通过this.state来访问state,又通过this.setState()来更新state,当this.setState()方法被调用时，React会重新调用render函数来重新渲染UI。一、setState异步更新 setState通过一个队列机制实现state更新。...
2019-03-17 16:20:00
220
原创 React 之 Virtual DOM
一、 Virtual DOM 实际上是在浏览器端用Javascript实现的一套DOM API ,它之于React一个虚拟空间，包括一整套Virtual DOM、生命周期的维护与管理，性能高效的diff算法和将Virtual DOM展示为原生的DOM的Patch方法等。当开发者使用React时，此时的<div>标签并不是原生的<div>标签，它其实是Reacts生...
2019-03-17 15:21:26
256
原创 Less 简单使用（一）
一、前言 Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。在越来越多的项目中都已经在使用Less或Sass方式替代原来的css书写方式了。使用方式：$ npm install -g less二、简单语法： 1、变量： 输入：...
2019-03-09 15:52:08
226
原创 React——样式处理
一、 样式处理是React非常重要的一个环节。需要用到CSS Modues的概念及用法。我们会用到两种方式： 1、使用className prop来设置类名； 2、使用style设置内联样式； 内联样式的 style是以一个 json对象的形式设置的。 样式中的像素值：const style ...
2019-03-06 22:48:56
775
转载 JS获取JSON对象键值对中key值的方法
一、使用 Object.keys(obj)方法获取 JSON对象的key值。 Object.keys( ) 会返回一个数组，数组中是这个对象的key值列表。Polyfill要在原生不支持的旧环境中添加兼容的Object.keys，请复制以下代码段：if (!Object.keys) { Object.keys = (function () { var ha...
2019-03-06 17:18:19
23543
原创 React的受控组件与非受控组件
受控组件<input type="text" value={this.state.value} onChange={(e) => { this.setState({ value: e.target.value.toUpperCase(), }); }}/><input>...
2019-03-04 21:28:21
137
原创 React 的事件系统
一、 React基于Virtual DOM 实现了一个SyntheticEvent（合成事件）层，完全符合W3C标准，不会存在IE标准的兼容性问题。 同样支持冒泡机制，所有的事件都自动绑定到最外层上，如果需要访问原生事件对象，可以使用nativeEvent属性。在原生事件可以使用阻止冒泡行为可以阻止合成事件的冒泡，而合成事件使用阻止冒泡行为不能阻止原生事件的冒泡行为。注意： 在...
2019-03-03 17:44:58
145
原创 React 中的refs
一、 refs是React中非常特殊的prop，可以附加到任何一个组件上（仅有状态组件），当组件被调用时会创建一个改组件的实例，而refs就会指向这个实例。 它可以是一个回调函数。 例:通过ref获取input的实例，调用focus()方法。import React, { Component } from 'react';class Demo extends C...
2019-03-03 16:42:47
438
原创 ES7前端异步：async/await浅解
在最新的ES7（ES2017）中提出的前端异步特性：async、await。什么是async、await？async顾名思义是“异步”的意思，async用于声明一个函数是异步的。而await从字面意思上是“等待”的意思，就是用于等待异步完成。并且await只能在async函数中使用通常async、await都是跟随Promise一起使用的。为什么这么说呢？因为async返回的都是一个P...
2019-02-25 10:45:59
472
原创 React中使用esri-loader
一、前言 随着前端的发展，框架的选择也越来越多，arcgis js api 在集成到React 中也是提供了良好的适配通过esri-loader。二、使用 首先要先引入 esri样式<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8">...
2019-02-15 15:15:39
2016
原创 fetch 请求封装
import fetch from 'dva/fetch';import NProgress from 'nprogress';function parseJSON(response) { return response.json();}function parseText(response) { return response.text();}function che...
2019-01-28 14:42:46
317
原创 天地图调用服务
前段时间 ，天地图对服务的调用方式做了升级，需要添加tk秘钥。现整理了 天地图 服务的服务地址： 矢量服务：http://t0.tianditu.com/vec_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default...
2019-01-22 14:24:11
6407
9
原创 React 设置多个className
在一个元素上设置样式，有一个固定的样式，然后还有一个使用三元运算符根据条件添加的样式。比如说有一个固定样式"title":<div className="title">标题</div>，然后还要一个点击高亮的样式:<div className={index === this.state.active ? "active" : null}>标题&
2018-12-12 15:45:31
21745
1
原创 React 父子组件之间的通信
前言： React是单向数据流，当有多个组件需要共享状态的时候，这就需要把状态放到这些组件共有的父组件中，相应地，这些组件就变成了子组件，从而涉及到父子组件之间的通信。父组件通过props 给子组件传递数据，子组件则是通过调用父组件传给它的函数给父组件传递数据。父组件 App.jsimport React, { Component } from 'react';import ...
2018-11-11 20:01:25
2193
原创 React 生命周期函数
前言 生命周期函数指某一时刻组件会自动执行的函数，用来管理组件。先来张大图便于理解各个周期函数的执行时刻：一、constructor： constructor(props) { super(props);//此句必须在该方法首行。}用来构造组件的初始化，this的绑定。二、componentWillMount ： 1...
2018-11-11 16:56:09
128
原创 ArcGIS 发布自定义打印模板
前言： 除 ArcGIS Server 附带的 PrintingTools 服务外，有时可能还需要发布用于 web 打印的其他服务，之前是可以通过修改打印模板的文件来改变打印模板的、但10.5之后的版本这种方式就无效了，需要自己发布打印服务来定制更加丰富的模板了。步骤： 1、通过ArcMap制作您所需要 ArcMap 文档 (MXD) 文件夹，这些文档含有用于 Web 地图打印的...
2018-10-14 12:38:00
2817
原创 下载JS生成的文件
前言： 最近项目遇到一个场景，调用一个接口返回的数据为dataUrl，需要转换为图片并下载。 在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，冠以mime-type。解决思路： 利用HTML5中<a>标签的特性来实现此功能，1、首先创建一个a标签元素、2、将a标签的href属性指向目标数据dataUrl，3、通过改变a...
2018-09-28 18:26:49
223
原创 从零创建React项目
前言：作为前端三大流行框架Angular、Vue、React一、需要准备的环境：1、Node : Node.js是一个Javascript运行环境，不是一个js库，也不是一个框架，实质是对Chrome V8引擎进行了封装。2、Git : 用来执行命令脚本。3、VSCode : 编辑器，个人喜好， 轻量级，插件多，编辑界面颜值高。（以上内容请自行下载安装）二、项目搭建：...
2018-09-25 21:55:13
126
原创 JS 解析url参数为json对象
一、将url中的参数解析为json对象： 使用正则表达式： function getQueryObject(url) { url = url == null ? window.location.href : url; var search = url.substring(url.lastIndexOf("?") + 1);...
2018-09-20 17:28:50
5281
转载 ES6 Module(模块)的语法
概述历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。在 ES6 之前，社区制定了一些模块加载方...
2018-09-08 11:30:06
303
原创 Redis集群
Redis集群搭建 要想搭建一个最简单的Redis集群，那么至少需要6个节点：3个Master和3个Slave。为什么需要3个Master呢？如果你了解过Hadoop/Storm/Zookeeper这些的话，你就会明白一般分布式要求基数个节点，这样便于选举（少数服从多数的原则）。 这里，我将采用一种“偷懒”的方式，在一个Linux虚拟机上搭建6个节点的Redis集群。（因为开启...
2018-08-31 16:59:28
85
转载 ES6 中 class的继承
简介Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。class Point {}class ColorPoint extends Point {}上面代码定义了一个ColorPoint类，该类通过extends关键字，继承了Point类的所有属性和方法。但是由于没有部署任何代码，所以这两个类完全一样，等于复制了一个...
2018-08-29 22:53:43
126
转载 ES6 的 class用法
简介JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';};var p =...
2018-08-29 22:36:07
143
转载 ES6 Generator 函数的异步应用（二）
异步编程对 JavaScript 语言太重要。Javascript 语言的执行环境是“单线程”的，如果没有异步编程，根本没法用，非卡死不可。本章主要介绍 Generator 函数如何完成异步操作。传统方法ES6 诞生以前，异步编程的方法，大概有下面四种。回调函数 事件监听 发布/订阅 Promise 对象Generator 函数将 JavaScript 异步编程带入了一个全新的...
2018-08-21 18:08:04
243
转载 ES6 Generator 函数的语法（一）
基本概念Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。本章详细介绍 Generator 函数的语法和 API，它的异步编程应用请看《Generator 函数的异步应用》一章。Generator 函数有多种理解角度。语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。执行 Generator 函数会返回一个遍...
2018-08-21 18:04:00
297
1
转载 ES6 Promise对象
Promise 的含义Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promi...
2018-08-21 16:07:09
108
转载 ES6 数组的解构赋值
数组的解构赋值也可以说是 解析解构赋值，根据数组的解构来进行赋值，好处是代码更简洁，可读性好。基本用法ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。以前，为变量赋值，只能直接指定值。let a = 1;let b = 2;let c = 3;ES6 允许写成下面这样。let [a, b, c] = ...
2018-08-21 14:01:39
239
转载 Arcgis API for js 自定义 infoWindow
一、前言 地图开发中弹出气泡框，使用esri原生的简直是┭┮﹏┭┮，所以还是自已写一个吧。 主要是继承InfoWindowBase模块。现定义一个模块InfoWindow(抄袭人家的名字，哈哈~~)二、整个文件 InfoWindow.js如下：define([ "dojo/Evented", "dojo/parser", "dojo/on", "...
2018-06-14 17:34:21
2826
转载 Arcgis API for js 加载 天地图服务
一、前言 做地图开发，免不了加载地图，现描述一下加载天地图的方式。二、自定义一个模块，暂称为TDTLayer 继承TiledServiceLayer，其中包含加载注记图层，即当创建时，type传参即可。 贴代码/** * 加载天地图,构造器不传参数type只加载地图,传参时加载注记; */define(["dojo/_base/declare","esri/layers/...
2018-06-13 11:09:33
3266
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人