- 博客(85)
- 资源 (1)
- 收藏
- 关注
原创 一个简单的ajax请求hooks useAxios
实现功能传递参数调用ajax请求获取数据返回数据,loading,错误信息useAxios hooks// useAxios hookimport { useState, useEffect } from 'react';import axios from 'axios';axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';const useAxios = ({ url, method, body = nul
2021-05-27 09:37:50 1630 1
原创 简单请求与预检请求
预检请求什么是预检请求?对那些可能对服务器数据产生副作用的 HTTP 请求方法(特别是 GET 以外的 HTTP 请求,或者搭配某些 MIME 类型的 POST 请求),浏览器必须首先使用 OPTIONS 方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求。服务器确认允许之后,才发起实际的 HTTP 请求。在预检请求的返回中,服务器端也可以通知客...
2020-02-27 18:03:31 3793
原创 css+js实现轮播banner
基本功能轮回播放自定义过渡时间、间隔时间上一张、下一张完整代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0...
2020-02-25 19:17:28 403
原创 vscode正则匹配替换console.log(.*)
用空白替换所有的console.log()开启正则匹配使用正则表达式console.log(.*)匹配所有console.log内容,再使用空白替换全部
2020-02-25 14:43:03 2617
原创 grid+scss实现bootstrap栅格系统
grid + scss 20行代码实现 bootstrap 栅格系统vscode插件html文件的热加载sass编译栅格核心style.scss.row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px;}@media screen and (max-width:768px) {...
2020-02-24 11:04:40 634
原创 在Vue中v-model如何和Vuex结合起来
?.vuemutations.js当读取name的时候返回的是mapState中的this.nickName,当输入数据的时候执行computed的name的set调用mutations的方法进行修改
2019-09-26 18:38:29 1945
原创 安卓、ios h5点击复制内容解决方案
let H5copyLink = () => { if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { /** * ios中不能复制属性值,只能复制文本元素节点; * (解决方案:可以把文字颜色设成背景色就能达到隐藏看不见的效果不影响显示); ...
2019-09-24 16:51:38 887
原创 antDesignPro区块源码学习
1.MVC分层在antDesignPro区块组件中,看不到state,全部被放到了model中去了,page页面只管显示交互,数据全部都在model中。通过connect来将page和model关联。2.@connect修饰符antDesignPro中个人中心区块代码说明@connect修饰符(类似java中注解)第一个回调函数作用:将page层和model层进行链接,返回model层...
2019-09-16 13:38:56 1436
原创 antDesign国际化
侧边栏/全局header的国际化可以通过修改src直接目录下的locale文件如果没起作用,检查一下路由配置的name是否相同区块内容的国际化可以通过在区块目录下创建locale文件,并引入import { FormattedMessage, formatMessage } from ‘umi-plugin-react/locale’;配置语言文件使用当切换语言时会自动...
2019-09-14 15:50:51 1798 1
原创 antDesignPro大坑 Maxium call stack size exceeded
用cnpm安装区块cnpm run fetch:blocks再安装一些区块用npx umi block add DashboardAnalysis --path=/dashboard/analysis会导致不兼容巨坑还得用npm安装https://github.com/ant-design/ant-design-pro/issues/4421https://github....
2019-09-08 14:29:26 1387
原创 antDesignPro修改底部默认的蚂蚁金服体验出品的版权信息
修改antdesign下边的版权信息const footerRender: BasicLayoutProps['footerRender'] = (_, defaultDom) => { return React.cloneElement(defaultDom as ReactElement, { links: [], copyright: '呵呵'}); }h...
2019-09-08 13:50:57 5636
原创 html5语义标签
文章目录新增元素新增结构元素headerhgroupnavsectionarticleasidefooter新增功能元素videoaudioembedmarkprogresstimerubycanvascommanddetailsdatalistdatagrid![在这里插入图片描述](https://img-blog.csdnimg.cn/20190828204019321.png?x-oss-...
2019-08-28 20:44:35 591
原创 bootstrap栅格系统原理,grid做一个不用设备监听的响应栅格
栅格系统,把屏幕分成了十二份然后是设备监听bootstrap源码下边这个div在屏幕宽度>767px的时候占3份,<768px占6份也就是在电脑宽屏上横屏可以放四个(12/3),手机上横屏可以放两个(12/6)<div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-sh...
2019-08-27 22:16:48 187
原创 css margin合并 为什么子元素的margin-top把父元素也给撑下来了
比如这样我们的本意是这样我们只需要在父容器上加上一个overflow:hidden问题就解决了块级元素的上边距与下边距有时会拼合成一个外边距,这样的现象称为“margin合并”margin合并出现的条件:块级元素只发生在垂直方向margin合并的3种场景:相邻兄弟元素margin合并父级和第一个/最后一个子元素(上边的情形)空块级元素margin合并...
2019-08-26 18:39:32 776 1
原创 AntDesignPro初体验
AntDesignPro文档https://pro.ant.design/docs/getting-started-cn按照文档命令走npm create umi Select the boilerplate type (Use arrow keys)❯ ant-design-pro - Create project with an layout-only ant-design-...
2019-08-25 19:54:33 305
原创 js new运算符的本质
文章目录两个辅助函数测试完整代码两个辅助函数Function.prototype.method = function (name, func) { this.prototype[name] = func; return this;}Object.create = function (o) { var F = function () { }; F.proto...
2019-08-23 23:45:58 243
原创 闭包
闭包的定义闭包包含自由(未绑定到特定对象)变量,这些变量不是在这个代码块内或者任何全局上下文中定义的,而是在定义代码块的环境中定义(局部变量)。 -----百度百科在日常JavaScript的代码编写中闭包是非常普遍的,只不过这种使用方法太普通了,我们并没有注意到。如果java程序员转的JavaScript一定会惊叹这种强大灵...
2019-08-21 19:29:01 148
原创 webpack打包多页面demo
项目地址:https://github.com/withwz/webpack-mulitpage-demo目录结构package.json{ "name": "wptest", "version": "1.0.0", "description": "", "private": true, "scripts": { "dev": "cross-env NODE_...
2019-08-19 21:58:25 464
原创 css3渐变背景
线性渐变(Linear Gradients)语法background: linear-gradient(angle, color-stop1, color-stop2, 3 ,4 ,5…);angle属性说明:0度是由下向上渐变;关键词:to top 0degto right 90degto bottom 180degto left -90deg径向渐变语法...
2019-08-18 19:45:57 199
原创 grid布局属性总结
Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。容器的属性属性 llllllllllllllIIIIIIIIIIIIIIIIIIIIIIII描述display属性指定容器采用grid布局grid-template-columns指定每一列的列宽 属性值详解grid-template-rows指...
2019-08-16 15:49:51 637
原创 web性能优化
文章目录http请求DOM优化CSS优化移动端服务端http请求合并JS/CSS文件非可视屏幕内内容延时加载 例如 懒加载图片获取数据首选get,浏览器执行XMLHttpRequest POST请求时分成两步,先发送Http Header,再发送data。而GET只使用一个TCP数据包(Http Header与data)发送数据,所以首选GET方法。有“阴谋预加载”,比如...
2019-08-14 14:16:51 117
原创 css123全部选择器整理
css3选择器基本选择器层次选择器伪类选择器伪元素属性选择器动态伪类选择器目标伪类选择器语言伪类选择器UI元素状态伪类选择器结构伪类选择器否定伪类选择器基本选择器选择器类型描述兼容性css版本*通配选择器*{margin:0;padding:0}, .demo * {background:orange}all1E元素选择器ul {backgroun...
2019-08-13 17:21:55 353
原创 flex属性快速查询
文章目录容器的属性项目的属性Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。容器的属性属性描述flex-direction属性决定主轴的方向(即项目的排列方向)flex-wrap项目的换行方式flex-flowdirection和warp的缩写默认是row nowrapjustify-content...
2019-08-12 21:12:47 183
原创 css 所有display属性快速查询
css2.x属性描述none此元素不会被显示block此元素将显示为块级元素,此元素前后会带有换行符inline此元素会被显示为内联元素,元素前后没有换行符inline-block行内块元素,既有宽高是内联list-item此元素会作为列表显示 示例:https://codepen.io/bb798sky/pen/PMLzvYtable...
2019-08-12 20:51:43 335
原创 [Sass]混合宏 VS 继承 VS 占位符
https://www.imooc.com/code/7041 ←a) Sass 中的混合宏使用@mixin mt($var){ margin-top: $var;}.block { @include mt(5px); span { display:block; @include mt(5px); }}.header { color: oran...
2019-08-12 19:56:51 238
原创 css3 transform 变形
文章目录transform语法坐标轴说明2D变形函数3D变形函数transform-origin属性transform语法transform: none|transform-functions [transform-functions]* ;可以有多个变形坐标轴说明z轴是垂直屏幕指向我们的https://codepen.io/bb798sky/pen/MNPedL可以从这个例...
2019-08-10 15:36:01 209
原创 css3 transition
transition四个属性transition: property duration timing-function delay;属性描述transition-property指定过渡的属性比如 width height transformtransition-duration过渡时间 单位可以是s mstransition-timing-functi...
2019-08-09 17:07:54 588
原创 css3动画 animation
animation 实现一个旋转鼠标放上暂停https://codepen.io/bb798sky/pen/KOeEZE
2019-08-09 12:56:32 211
原创 理解reduce方法,手写一个reduce方法
代码比白话更容易解释了…Array.prototype.myReduce = function (f, value=0) { for (let i = 0; i < this.length; i++) { value = f(this[i], value) } return value}let data = [4,8,15,16,23,42]let add =...
2019-08-06 19:20:34 2196
原创 koa 图片上传
app.jsconst koa = require("koa")const koaBody = require('koa-body');const app = new koa()const router = new Router();app.use(koaBody({ multipart: true}));const uploadImg = require("./routes...
2019-08-06 16:02:25 1351
原创 taro 小程序利用两层循环给选中的规格加样式
1、获取两层数组循环索引,外层索引作十位数,内层索引作个位数,生成一个一维数组2、再通过两层索引拼成的字符串同生成的数组中的索引作对比className={`sku__item ${(index + '' + indes) === selectedSku[index] && "sku__item_active"}`}完整代码import Taro, { Component...
2019-08-05 15:11:39 1556
原创 taro小程序里用css弹出选择规格的窗口
constructor() { super(...arguments) this.state = { bgShadow: false, skuPop: false } } handleClickBtn() { this.setState(() => { return { skuPop: !thi...
2019-08-04 20:31:41 1068
原创 koa动态路由
router.get("/news/:aid", async (ctx) => { console.log(ctx.params, 'ctxxxxxxxxxxxxxxxxxxxxx') ctx.body="news detail"});请求一下localhost:5000/news/111可以看到在ctx.params种有动态路由带的参数...
2019-08-04 15:08:43 584
原创 js处理异步的几种方式
1、回调函数封装了异步操作的函数接受一个匿名函数作为参数,当异步操作执行完后调用这个传递进来的匿名函数;function getData(callback){ setTimeout(() => { let name = 'xxx' callback(name) }, 1000);}getData((d)=>{ console.log(d)})缺...
2019-08-04 14:37:14 4700
原创 jsx种map循环中使用if判断
用三目运算符,jsxmap中不能再用判断语句,但是可以用表达式 { navList.map((item, index) => ( <View className='nav-title__item' onClick={this.changeNavState.bind(this, index)} key={item.title} ...
2019-08-03 17:51:38 6520
原创 类似taro-ui tab切换的导航动画
import Taro, { Component } from '@tarojs/taro'import { View } from '@tarojs/components'import './index.scss'export default class repairmanList extends Component { config = { navigationBarTit...
2019-08-03 11:43:30 2559 1
原创 at-ui at-table 中使用自定义table插入图片
https://at-ui.github.io/at-ui/#/zh/docs/table columns1: [ { title: "姓名", key: "name" }, { title: "操作", render: (h, params) => { ...
2019-07-28 12:50:23 250
原创 cssbem规范
规范BEW指 块(block),元素(element),修饰符(modifier)。__用来连接B和E 。_用来连接B和M,E和M,如 search__btn_active。-用来连接含多个单词的B或E或M。示例块:例如搜索框块,log的块,菜单块search块,用search和元素(ipt、btn)连接<ul class="search"> <input c...
2019-07-22 17:40:58 254
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人