- 博客(40)
- 收藏
- 关注
RSS订阅原创 umi配置多环境变量并在docker中跑起来验证
也可以看到我们配置的process.env.UMI_ENV = test 有生效，生产环境同理可以验证。设置好不同的环境变量后，测试环境和生docker中跑起来，通过打印检查配置是否生效。最近开始自己负责一个umi项目从0到1的开发，中间遇到的环境变量配置问题记录一下，顺便再熟悉下前端项目在docker中的部署过程。其中config.test.js 和 config.prod.js 中分别配置不同的process.env.UMI_ENV的值。最后在页面中打印配置好的环境变量，不同的环境应该有不同的值。
2023-03-20 20:18:16
1189
原创 ant-design proTable 之 request 和 actionRef初识
但是到了分页的时候就没办法了，因为不比pagination组件可以设置total, proTable没有设置从页数或者总数据数的入口。这时候就要用到request, request 能自动获取表格数据，还有一个很重要的功能就是支持自动分页。一开始我以为actionRef.current里面有request方法可以重新调用，但其实不是的，直接调用reload方法会自动触发request请求。2、自动分页功能，注意这里与后端有一个交互共识就是，后端每次只返回某个页面的数据。这次只是简单用下reload。...
2022-08-31 12:12:46
5439
2
原创 腾讯云centos7.6安装jdk
背景：花58块租了一年2核2G的腾讯云服务，想要自己在上面跑一下jenkins部署流程，查看教程之后发现都要自己先安装jdk， 初次接触linux命令，记录下安装流程。硬件：本地电脑：mac m1 pro;远程服务器： centos 7.6。
2022-08-25 11:48:03
382
原创 VUE响应式原理三
前两篇文章教会我们手写一个简单的响应式系统。这篇文章主要带领我们潜入vue.js的源码来看待响应式系统。首先创建一个vue application： <div id="app"> <h1>{{ product }}</h1> </div> <script src="vue.js"></script> <script> var app = new Vue({
2022-04-05 17:07:30
817
原创 vue响应式原理二
proxy在上节课程中，我们建立了一个与vue响应式实现相类似的响应式系统。Object.defineProperty()的使用将属性转化为getter, setter方法，这样能够持续追踪依赖，在属性修改的时候能重新运行匿名函数代码。如果你有关注过vue的设计蓝图，你会发现vue 2.x 以上的版本用proxy重写过，与我们上节课所展示的不同。我在这里问了evan (尤雨溪 vue 创始人), 使用proxy重写到底是怎样实现的，重写的好处又在哪里呢？优点proxy API 让我们能为对象创建
2022-03-20 21:18:15
962
原创 vue响应式原理一
构建一个响应式系统本节课，我们将使用vue源码中相似的技能，来构建一个简单的响应式系统。这会让你更好的理解vue的设计模式，也会让你对wathcer 和dep这两个类更为熟悉。响应式系统第一次见到vue的响应式系统的时候你也许会觉得很神奇，比如下面的例子： <div id="app"> <div>Price: ${{ price }}</div> <div>Total: ${{ price * quantity }}<
2022-03-19 18:46:47
718
原创 vue配置启动项目自动打开浏览器
vue配置启动项目自动打开浏览器1.找到项目中的config文件夹内的index.js，里面有一个配置是autoOpenBrowser:false；设置为true即可(或者全局搜索autoOpenBrowser设置为true)2.打开package.json找到启动命令npm run dev 跟npm run serve(这两种命令都可以) 后面增加 --open3.在根目录下新建vue.config.js文件vue.config.js代码如下module.exports = {
2022-02-27 12:53:57
2446
原创 vue slot插槽初识
vue中，一般组件定义好之后在使用的时候往两个标签之间插入内容是无效的，如下图，子组件中的hi vue内容并不会出现。但是在定义的时候加入slot标签后，使用时插入的内容就会被添加到slot所处的位置。组件定义 let componentA = { template: `<a> <slot></slot> </a>`
2020-12-07 15:48:10
118
原创 vue组件的5中传参方式总结
1. props： 子组件使用父组件中的数据使用关键步骤：父组件中定义好数据–>子组件props中定义父组件传入数据的类型 --> 父组件使用子组件时，子组件v-bind绑定props中定义的数据到父组件的数据名， 此时在子组件中也能正常使用父组件的数据了。父组件// 在子组件中使用父组件定义的数据<template> <div> <div>我是父组件</div> <props-son :dat
2020-12-04 17:53:36
508
原创 理解防抖和节流
1.防抖什么是防抖？为什么需要防抖？在一段时间内频繁触发DOM事件监听并引起函数调用很消耗性能，并且在很多时候是不必要的。比如用户注册用户名时，前端获取用户的输入并且判断用户名是否合理，没必要在每次用户输入一个值时都一直提示。此时就需要用到防抖，实现在用户输入完成一段时间后再真正调用函数。简单来说，防抖的原理就是在事件触发n秒（自定义）后再调用回调函数，如果在这n秒内又被触发，则重新计时。以input文本输入框j为例： <div class="title">1. 防抖案例</d
2020-12-03 17:35:48
134
原创 vue-cli2 uninstall 出现问题
使用 npm uninstall -g vue-cli删除vue-cli2时出现 update to 0.00Xs , 没有删除成功的提示。运行安装新版vue命令后用vue -V检查还是出现的2.XX, 老的版本。后面查了stackoverflow 发现是因为vue cli和npm 安装在不同的目录下导致的，如果出现类似的报错，可以用which vue 和which npm 命令查看这两者各自的安装地址，如果不太一样就把旧版的vue-cli找出来整个文件夹删掉，然后再vue -V就会自动更新成最新版本的vu
2020-11-28 20:59:52
241
原创 CSS 5 种居中方法总结
元素的居中主要分为垂直居中和水平居中，其中不同类型的元素，比如块级元素，行内元素，文本等有不同的居中对齐方式。水平居中块级元素水平居中：元素设置宽高后 margin: 0 autoHTML <div id="mydiv"> 块级元素 </div>CSS #mydiv { width: 300px; height: 100px; background-c
2020-10-12 13:13:29
236
原创 echart车流量数据可视化
数据：3000条轨迹（模拟），首尾点经纬度坐标，每条轨迹的权重。权重可简单理解为同首尾点轨迹重复的次数。数据格式为：[起始点经度，起始点纬度，末尾点经度，末尾点纬度，权重]需求：可视化每条航线，并根据不同的权重给予不同的颜色。只需在本地做简单的展示就可以。以下为全部的HTML代码（注意百度地图开发者AK密码需要替换为自己的），读取的OD.JSON数据放在同一文件夹下即可：<!DOCTYPE html><html lang="en"><head> &l
2020-06-04 14:29:54
2706
原创 pandas dataframe 得到某一值所在的行索引
随便假设一个数据框：import csvimport pandas as pddata = {"year": [2010, 2011, 2012, 2013], "month": [1, 2, 3, 4], "date": [5, 6, 7, 8]}df = pd.DataFrame(data)print(df)找到指定数值所在行索引：# 找到指定数值所在行索引：# 比如2012年所在的行索引index = df[df.year == 2012].index.tolist()[
2020-06-03 15:50:49
70143
原创 echart+百度地图demo
记录在引入bmap.js时踩过的坑：首先准备3个引入：<script src="echarts.min.js"></script><script src="node_modules/echarts/dist/extension/bmap.js"></script><script src="http://api.map.baidu.com/api?v=2.0&ak=你自己的百度开发AK密码"></script>其中
2020-06-02 14:19:27
1235
原创 使用GitHub Pages部署静态页面
尝试一下将前端静态页面部署到GitHub上：如图，在github创建一个新仓库，我的已经创建好了，就叫EchartDemo:复制GitHub中EchartDemo工程地址，git clone + http:XXXX 到你想要的文件夹中，最后再把整个前端工程复制到你从github上克隆下来的EchartDemo文件夹中：3. 接下来就是提交代码了：首先cd EchartDemo进入到...
2020-04-29 12:00:59
518
原创 Echart入门（二）
使用rollup自定义构建参考echart官方文档：自定义构建echarts步骤 1首先在在根目录中使用npm安装rollup: 其中commonjs文件是为了支持在浏览器中使用requre保留字。npm install rollup --save-devnpm install rollup-plugin-node-resolve --save-devnpm install rollu...
2020-04-13 12:31:15
378
原创 Echart入门（一）
依照echart官网教程学习实现简单的饼图使用npm安装后，在echart practice文件夹下运行以下命令行失败：node node_modules/echarts/build/build.js --help报错显示有很多依赖的包没有安装，因此手动npm再次安装需要的包。...
2020-04-09 11:20:57
445
原创 python 正则匹配 search, findall方法
research方法可以搜索整个字符串，并且返回第一个匹配项的对象,之后再使用group方法返回匹配的字符串：# 匹配元前面的数字str1 = '5元/首小时'str2 = '1小时内:10元'str3 = '1小时内:15元;1小时后:1元/小时'result = re.search(r'(\d+)元', str3) # search 方法找到第一个匹配成功的字符串，并返回一个对象...
2020-03-16 21:12:47
736
原创 JS高级程序设计-第十二章：DOM2和DOM3
DOM1级主要定义的是HTML和XML文档的底层结构。2和3在此基础上引入了更多的交互能力，支持更高级的XML特性。样式HTML中有三种定义样式的方法：通过link元素包含外部样式文件，style元素定义嵌入式，style特性定义特定元素的样式。var div = document.getElementById('mydiv'); //通过div的style属性设置背景颜色...
2020-03-11 13:12:47
126
原创 JS高级程序设计-第十一章：DOM扩展
DOM主要有两个扩展，一个是Selector API, 一个是HTML5。选择符API1.querySelector()方法 返回与该模式匹配的第一个元素 //querySelector 取ID名，元素名，类名等 var body = document.querySelector('body'); var div = document.query...
2020-03-08 19:02:58
114
原创 JS高级程序设计-第十章：DOM
DOM是针对HTML，XML文档的一个应用程序编程接口(API)。它描绘了一个层次化的节点树，方便开发人员添加，修改和删除页面中的一部分。页面中的每一个标记都可以通过DOM中的一个节点表示，一共有12中节点类型，HTML元素通过元素节点表示，特性通过特性节点表示，文档通过文档类型节点表示，注释通过注释节点表示。每个节点都有一个nodeType属性，来表明节点的类型。并不是所有节点类型都受到...
2020-03-08 13:18:43
167
原创 JS高级程序设计-第八章：BOM
window对象使用var 语句 和 直接定义在window对象上的变量的区别，前者不可使用delete方法删除，而后者可以 var age = 23; window.color = 'pink'; delete age; //没有删除成功 delete window.color; console.log(age)...
2020-03-06 10:27:53
210
原创 Arcgis制作行政区划矢量文件(shp格式)
毕业设计的缘故，需要用到深圳市行政边界shp文件（包含各区边界）。直接在网上找现成又靠谱的shp文件还挺难的，我也在csdn上下载过一个付费的，还是偏差挺大的，而且也不包含各区划分情况，就想还是自己做一个。也尝试过使用百度api直接接入，看到很多技术博客都是推荐的这个，但是在使用过程中还是觉得哪里不对，可能是我的问题，没有找对方法。后来尝试了阿里的DataV，找到json文件的接口，把目标数据复制...
2020-03-05 15:27:37
10016
4
原创 JS高级程序设计-第七章：函数表达式
函数声明和函数表达式的区别使用函数声明的方法定义函数时，会有变量提升，但是函数表达式则不会；使用函数表达式来实现递归：function factorial(num) { if(num <= 1) { return 1 } else { // arguments.callee ...
2020-03-04 14:58:43
258
1
原创 JS高级程序设计-第六章：面向对象的程序设计
对象的数据属性，可以使用Object.defineProperty 方法修改和设置。Configurable， Enumerable， Writable， Value 共四个特征描述数据属性。 //数据属性的四个特征 var person = { name: 'Nicholas' }; //设置为只读属性，不可...
2020-03-03 17:00:07
97
原创 JS高级程序设计-第五章：引用类型
转换方法：所有对象都具有toLocalString, toString, valueOf 方法。调用toString可返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。var colors = ["red", "blue", "green"]; // 创建一个包含3 个字符串的数组alert(colors.toString()); // red,blue,greenalert...
2020-03-01 22:26:20
108
原创 JS高级程序设计-第四章：变量，作用域和内存问题
数据类型：基本数据类型：简单的数据段，为第三章讨论的五种基本数据类型：string, number, undefined, null, bolean. 可以操作保存在变量中的实际的值。引用数据类型：保存在内存中的对象，JS不允许直接访问内存中的位置，因此是在操作对象的引用而不是实际对象。引用数据类型是按引用访问的。引用类型可以动态的为其添加属性。函数的参数按值传递：传递参数为基本数据类型...
2020-02-29 16:44:28
98
原创 JS高级程序设计-第三章 基本概念
第三章：基本概念JS语句用分号 " ; " 结尾；在控制语句中使用代码块，哪怕只有一条语句。函数中用var定义的变量为局部变量，函数退出后就会被销毁，不能在函数外使用。省略var操作符后就会创建全局变量，可以在函数外部被访问到。五种简单数据类型：字符串，数字，布尔值，undefined, null。一种复杂数据类型：Object， 本质是无序的名值对组成。使用typeof操作符识别...
2020-02-28 14:41:33
157
原创 JS高级程序设计-第一，二章
疫情原因在家时间比较长，计划两个月把JS小红书刷一遍，2020年2月26-2020年4月26。环境配置为win10系统+VScode。第一章 JS 简介JS的实现主要包括三个部分：核心语法（ECMAScript） ：提供核心语言功能。文档对象模型（DOM）：提供访问和操作网页内容的方法和接口。浏览器对象模型（BOM）：提供与浏览器交互的方法和接口第二章 在HTML中使用JS使用...
2020-02-26 18:14:10
122
原创 git commit 规范不对导致报错
最近几次git commit 的时候总是遇到错误，抛出的问题都是：✖ subject may not be empty [subject-empty]✖ type may not be empty [type-empty]找了很久发现是描述的名称后面忘记加空格导致的。。。记录一下踩过的坑。。...
2020-02-19 13:33:24
20558
原创 常用git语法
刚开始接触使用git管理代码的时候对版本版本控制和协同开发都没什么概念有些命令行走过一次，但是没有理解整个流程，还是会经常出错。这里记录一下已经熟悉了的：1.查看代码状态: git status2.添加代码到缓存区：git add . (注意空格之后有一个"." )3.提交代码到本地仓库：git commit -m “feat: XXX” (填写对代码所做的更改，比如添加新功能等)4.将代...
2020-02-17 17:59:16
322
1
原创 Python爬虫(一) 环境配置-安装第三方库
最近开始思考毕业论文课题，想从网上爬取一点POI数据看看做空间数据分析。已有环境：windows10系统，python3.7， pycharm。还需要安装爬虫常用的第三方库。requests库安装：直接命令行： pip install requests, 出现以下报错：但是第二次重新执行命令行解决，原因不明。。。。Pandas库安装：...
2020-02-12 10:55:50
764
原创 canvas学习(一)动态扩散圆
之前看到一个用纯canvas制作渐变色扩散圆的博客，感觉效果挺好的，应该能用在地图上用作效果展示，就拿过来重新写了一下。主要将原帖中构造函数的方法改为了类，以及去掉了随机生成圆心位置的数组。原帖为：https://blog.csdn.net/www93111/article/details/72940843下面是我自己的代码：<!DOCTYPE html><html la...
2020-02-05 17:11:35
1125
原创 谷歌浏览器cors policy跨域问题
问题最近想在自己的电脑上写一些pixi js 的 demo, 编辑器是VScode，配置open in browser 插件，使用默认谷歌浏览器打开html之后发现因为cros policy 的问题，文件不能打开本地的图片文件。报错如下：解决方案按照网上大家的建议，我在桌面上添加了谷歌浏览器的图标，修改属性：修改完毕之后VScode默认的打开方式还是不能访问本地图片，但是将链接复制到从桌...
2020-02-05 11:37:03
1961
原创 廖雪峰JavaScript---filter用法
廖雪峰JavaScript—filter用法filter可以把array中的某些元素过滤掉，它可以把传入的函数依次作用于每个元素。然后根据返回值是true则保留，false 则删除元素。实例1：去除数组中的偶数var arr=[1,2,4,5,6,9,15];var r=arr.filter(function(x) { return x%2！==0 }) // 2为...
2019-09-12 09:01:36
312
原创 廖雪峰JavaScript课程--map/reduce用法
廖雪峰JavaScript课程–map/reducemap使用map把某一个函数作用在数组上。reduceArray的reduce()把一个函数作用在这个array的[x1,x2,x3…]上，这个函数必须接受两个参数，reduce()把结果继续和序列的下一个元素做累积计算，效果为：练习1： 利用reduce()求积：'use strict;'function product(ar...
2019-09-11 15:41:27
240
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人