- 博客(46)
- 收藏
- 关注
RSS订阅原创 Git 的基本概念和使用方式
在本地 Git 仓库中添加文件并进行修改，使用 git add 命令将修改后的文件添加到暂存区，使用 git commit 命令将文件提交到本地 Git 仓库中。和其他开发者协作开发，需要先从远程 Git 仓库中拉取最新代码，使用 git pull 命令拉取最新代码。推送到远程 Git 仓库，可以使用 git push 命令将本地项目代码上传到远程 Git 仓库。提交（Commit）：是指将修改后的文件版本提交到本地 Git 仓库或者远程 Git 仓库。创建分支，分别进行开发，然后合并到主分支上。
2023-08-29 14:59:15
703
原创 Docker的优势
容易部署和管理：Docker的部署和管理非常容易，可以使用Dockerfile来定义镜像的构建过程，使用Docker Compose来描述应用程序的部署配置。持续集成和部署：Docker容器可以用来运行持续集成和部署的工作流，将代码构建成镜像并将其推送到仓库，最后在不同的环境中部署容器。它是Docker容器的基础。开发环境管理：Docker容器可以用来搭建应用程序的开发环境，保证每个开发人员使用的环境都是一致的。容器：Docker容器是一个可隔离的、可移植的运行环境，可以在任何地方运行Docker镜像。
2023-08-29 14:57:47
848
原创 mapbox-gl画圆注意事项
首先，要实现地图上按照一定距离（米）画圆，需要使用mapbox-gl的表达式功能（expressions），首先找到墨卡托坐标距离和屏幕上的像素换算公式。根据函数，传入圆的地理距离和圆中心点所在的纬度坐标，计算地图缩放到20级时，圆在屏幕上的像素尺寸。circle-radius 那里用stops。
2023-07-10 15:34:50
391
原创 vue3 配置数据用于for循环遇到的坑
比如需要循环一堆CheckBox，为了少在template里写代码，需要配置一组数据循环一下，配置里面包括CheckBox需要绑定的值，CheckBox group需要绑定的值，以及绑定的change事件等，有两层循环，这时最里面的循环绑定的值失去了响应性，导致CheckBox选不上。这个配置写成响应式的，即最外层包裹ref。
2022-11-22 14:47:51
600
原创 H5页面上拉加载更多，下拉加载最新数据，及Chrome测试
下拉加载最新数据：使用pulltorefreshjs插件，具体用法参考：pulltorefreshjs - npm底部上拉加载更多：文档的高度 - 被卷走的高度 - 可视区域的高度 < 某个值（自己设置）文档的高度：document.body.scrollHeight被卷走的高度:document.body.scrollTop可视区域的高度:document.body.clientHeightChrome如何测试下拉：打开F12，点击第二个手机的图标，中间选一个手机端的
2022-03-01 15:49:28
1252
原创 React脚手架项目中的小tips
1.引入css可以模块化 注意文件命名，如xxx.module.css2.配置多个代理需要在src下新建一个固定名字的文件夹该文件里的代码写法如下：const proxy = require("http-proxy-middleware")module.exports = function(app){ app.use( proxy('/api1',{ target:"http://localhost:500...
2021-07-03 21:03:17
119
1
原创 Vue 哪些数组的方法是响应式的？
因为vue是响应式的，所以当数据发生变化时，vue会自动检测数据的变化，视图会发生对应的更新。vue中包含了一组观察数组编译的方法，使用他们改变数组也会触发视图的更新。push() //往数组最后添加元素pop() //删除数组中最后一个元素shift() //删除数组中第一个元素unshift() //在数组最前面添加元素splice() //删除元素/插入元素/替换元素 splice(start,length,元素) 删除元素：第二个参数传入你要删除几个元素（如果没有传
2021-07-03 20:09:08
1805
原创 Vue过渡与动画（二）
2.通过JS钩子来设置元素进入和离开的过渡效果transition的事件处理//事件before-enterbefore-leavebefore-appearenterleaveappearafter-enterafter-leaveafter-appearenter-cancelledleave-cancelled（v-show only）appear-cancelled//添加默认样式名，:css="true",就是v-enter那些<...
2021-06-29 23:03:43
177
2
原创 Vue过渡与动画（一）
1.通过样式设置元素进入和离开过渡的效果transition组件（给一个元素添加过渡效果） 通过样式设置元素进入和离开过渡的效果 .v-enter.v-enter-active.v-enter-to.v-leave.v-leave-active.v-leave-to<template> <div> <transition> <div v-if="flag" class="box">
2021-06-29 22:30:53
100
原创 jq插件（答题专注模式）
(function ($) { $.hhh= $.hhh|| {} $.hhh.oneByOne = function (options) { this.defaults = { formWidgets: $(".form-section article.form-widget"),//获取所有题目 widgetsWrap: $(".content-wrap"),//表单内容的wrap，用于设置margin widgetParentNode: $(".form-section").
2021-06-29 10:59:54
261
原创 JS 常用方法汇总（三）
1、n-m之间的随机数function numRandom(n, m) { if (n > m) { return parseInt(m + Math.random() * (n - m + 1)); } else { return parseInt(n + Math.random() * (m - n + 1)); }}2、时间过滤器 yyyy-mm-dd hh:mm:ssfilter
2021-06-23 17:08:01
60
原创 JS 常用方法汇总（二）
MathMath本身就是一个对象, 不需要在通过构造函数去创建, 该对象中集合了很多关于数学运算的方法Math.abs() 获取一个对象的绝对值Math.round() 四舍五入Math.PI πMath.max() 求几个数的最大数Math.min() 求几个数的最小数Math.ceil() 向上取整Math.floor() 向下取整Math.random() 随机数 (随机生成0 ~1之间的数)//应用例子var arr = [1,3,5,7,9,2,90,6
2021-06-23 16:59:33
59
原创 JS 常用方法汇总（一）
除数取整：1.只保留整数部分：parseInt(5/2)2.向上取整,有小数就整数部分加1：Math.ceil(5/2)3,四舍五入：Math.round(9/2)4,向下取整：Math.floor(5/2)保留小数几位toFixed(2)大小写：1.使字符串全部变为小写：toLowerCase() \toLocaleLowerCase()2.使全部字符变为大写：toUpperCase() \toLocaleUpperCase()toLowerCase() 和..
2021-06-23 11:36:06
133
原创 jstree contextmenu的增删改等操作在节点后加一个图标点击显示
jstree官网：https://www.jstree.com.cn/api.html#/?f=toggle_node(obj)jstree的GitHub地址：https://github.com/vakata/jstree，https://github.com/vakata/jstree/wiki标题所说的操作就是要加插件，写法类似这个，也有点不一样(function ($) { "use strict"; //自己自定义图标，点这个图标出现
2021-06-23 10:10:10
421
原创 React学习（从零基础到精通）00011001
DOM的Diffing算法<script type="text/babel"> /* 1). react/vue中的key有什么作用？（key的内部原理是什么？） 2). 为什么遍历列表时，key最好不要用index? 1. 虚拟DOM中key的作用： 1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。 2). 详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新
2021-06-14 22:58:17
139
2
原创 React学习（从零基础到精通）00011000
getSnapshotBeforeUpdate钩子的使用场景<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>getSnapshotBeforeUpdate的使用场景</title> <style> .list{ width: 200px; h
2021-06-14 22:55:55
148
1
原创 React学习（从零基础到精通）00010111
react生命周期（新） <script type="text/babel"> /* 1. 初始化阶段：由ReactDOM.render()触发----初次渲染 1.contructor() 2.getDerivedStateFromProps() 3.render()
2021-06-14 22:53:38
69
原创 React学习（从零基础到精通）00010101
2. react生命周期（旧） /* 1. 初始化阶段：由ReactDOM.render()触发----初次渲染 1.contructor() 2.componentWillMount() 3.render() 4.componentDidMount() =====》常用，
2021-06-14 22:50:39
95
原创 “create-react-app myapp 创建失败”的总结
第一步：npm i -g create-react-app第二步：到你要创建的应用目录下，
2021-06-14 22:50:26
1059
原创 React学习（从零基础到精通）00010100
React组件的生命周期1. 引出生命周期 <script type="text/babel"> //生命周期回调函数===生命周期钩子函数====生命周期函数====生命周期钩子 class Life extends React.Component{ state = { opacity:1 } death = ()=>{
2021-06-13 08:56:09
100
原创 React学习（从零基础到精通）00010011
不用函数柯里化的实现 <script type="text/babel"> //#region /* 高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数 1. 若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数 2. 若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数
2021-06-13 08:54:10
85
原创 React学习（从零基础到精通）00010010
高阶函数_函数柯里化 <script type="text/babel"> //#region /* 高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数 1. 若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数 2. 若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数
2021-06-13 08:52:54
93
原创 React学习（从零基础到精通）00010001
react中收集表单数据2. 受控组件(类似vue中的双向数据绑定)，建议还是写受控组件 <script type="text/babel"> //创建组件 class Login extends React.Component{ //初始化状态 state = { username:"", password:""
2021-06-13 08:51:13
69
原创 React学习（从零基础到精通）00010000
react中收集表单数据1.非受控组件 <script type="text/babel"> //创建组件 class Login extends React.Component{ handleSubmit = (event)=>{ event.preventDefault()//阻止表单提交 const {username,password} = thi
2021-06-13 08:49:12
64
原创 React学习（从零基础到精通）1111
react中的事件处理 <script type="text/babel"> /* 1. 通过onXxx属性指定事件处理函数（注意大小写）,如onClick，原生的是onclick 1). React使用的是自定义（合成）事件，而不是使用的原生DOM事件---->为了更好的兼容性 2). React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）---->为了
2021-06-13 08:46:29
141
原创 React学习（从零基础到精通）1110
组件实例三大属性 refsReact.createRef() <script type="text/babel"> //创建组件 class Demo extends React.Component{ /* React.createRef调用后可以返回一个容器， 该容器可以存储被ref所标识的节点， 该容器是“专人专用”的，也就是
2021-06-13 08:45:06
100
原创 React学习（从零基础到精通）1101
组件实例三大属性 refs2. 回调函数形式的ref <script type="text/babel"> //创建组件 class Demo extends React.Component{ //展示左侧输入框的数据 showData = ()=>{ const {input1} = this console.log(input1
2021-06-13 08:42:56
96
原创 React学习（从零基础到精通）1100
组件实例三大属性 refs1. 字符串形式的ref（已过时） <script type="text/babel"> //创建组件 class Demo extends React.Component{ //展示左侧输入框的数据 showData = ()=>{ const {input1} = this.refs console.l
2021-06-13 08:41:02
67
原创 React学习（从零基础到精通）1011
函数组件使用props <script type="text/babel"> //创建函数组件 function Person (props){ const {name,age,sex} = props return ( <ul> <li>姓名：{name}</li> <li>性别：{sex}</
2021-06-13 08:38:00
96
原创 React学习（从零基础到精通）1010
props的简写方式 <script type="text/babel"> //创建组件 class Person extends React.Component { //对标签属性进行类型，必要性的限制 static propTypes = { name:PropTypes.string.isRequired,//限制name必传且为字符串 sex:PropTypes.string,//
2021-06-12 11:02:54
83
原创 React学习（从零基础到精通）1001
对props进行限制 <script type="text/babel"> //创建组件 class Person extends React.Component { render(){ // console.log(this); const {name,age,sex} = this.props; //props是只读的 // this.props.nam
2021-06-12 10:59:47
88
原创 React学习（从零基础到精通）1000
组件实例三大属性 ---props的基本使用 <script type="text/babel"> //创建组件 class Person extends React.Component { render(){ // console.log(this); const {name,age,sex} = this.props; return ( <
2021-06-12 10:58:20
56
原创 React学习（从零基础到精通）0111
state的简写方式 <script type="text/babel"> class Weather extends React.Component { // constructor(props) { // super(props) // this.state = { // isHot:false, // wind:"威风" //
2021-06-12 10:56:00
77
原创 React学习（从零基础到精通）0110
组件实例三大属性 state，props，refsstate <script type="text/babel"> //创建类式组件 class Weather extends React.Component { //构造器调用几次？ --- 1次 constructor(props) { console.log("constructor") super(props)
2021-06-12 10:54:05
43
原创 React学习（从零基础到精通）0101
react中定义组件函数式组件 <script type="text/babel"> //创建函数式组件 function MYComponent(){ console.log(this);//此处的this是undefined，因为babel编译后开启了严格模式 return <h1>测试</h1> } //渲染组件到页面 ReactDOM.render(<MYCompon
2021-06-12 10:49:52
59
原创 React学习（从零基础到精通）0100
jsx小练习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
2021-06-12 10:46:15
97
2
原创 React学习（从零基础到精通）0011
jsx语法规则<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
2021-06-12 10:43:08
130
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人