自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(14)
  • 资源 (1)
  • 收藏
  • 关注

原创 flex实现上中下布局

上中下、上下布局是我们网页开发中常用的布局,下面我将用flex实现这两种布局。上中下布局特点: 头尾固定,内容自适应思路: 整个盒子为layout,使用flex纵向排列,宽高为100%;header和footer均为flex-shrink: 0;,强制不缩放。main的flex-grow: 2;,默认放大,且自动滚动。经过以上操作,就实现了经典是上中下布局。布局<div id="layout"> <header id="header">这里是头部</heade

2021-04-20 11:42:09 15313

原创 js手写事件Event、手写订阅模式、手写event.js

简介: 观察者模式或者说订阅模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知。通俗来说,就像订报纸一样,只要你订阅了这个报纸,当新报发布的时候你就会收到新报纸的推送。许多场景都运用了这种订阅模式,如vue.$on、vue.$emit;Node中的EventEmitter等。其实现也是相对来说比较简单的,废话不多说,直接上代码class Event { constructor() { this.h

2020-09-10 00:42:12 1020

原创 轻松搞懂js原形和原型链,只需要打开Chrome

想要搞懂原型链,你只需打开Chrome,看再多理论,如果自己不动手,也是很难掌握的。下面就跟着笔者一步一步来console吧!

2020-08-31 11:11:56 680 2

原创 Vue商城项目、练手项目、基于Vue+Node.js+TypeScript实现的商城项目

前言: 作为Vue的初学者,经常会苦恼于没有项目练手,曾经的我也是这样子的,因此想开发一个项目提供给前端初学者。这个项目难度适中,适合初学者去开发和参考,本项目提供了现成的前后端源码、接口文档及设计图,大家可以参考设计图去实现一个商场项目,根据接口文档去对接接口,如果中间有任何问题的也欢迎加微信或QQ咨询。觉得还不错的点个Star哦~丑小喵商城说明文档项目地址预览地址:https://mall.cxmmao.com/#/接口文档:https://mall.cxmmao.com/cat-mall-ap

2020-08-29 12:21:56 5664 3

原创 手写简易版axios拦截器,实现微信小程序wx.request的封装与拦截

axios是一个功能强大的网络请求库,其中拦截器又是axios的精髓。在小程序的开发或者需要手动实现ajax的时候,没有实现对请求的拦截,开发的时候非常不方便,因此手写一个简易版的axios拦截器。

2020-08-15 17:40:18 1868 4

原创 小程序远程清除线上缓存

小程序怎么清除线上缓存呢小程序缓存是小程序优化中经常要用到的,但随着版本的迭代,有些缓存字段已经更改或者不需要使用了,而且可能对我们新的版本产生影响,那要怎么清除线上缓存呢?其实很简单,每次更新前在程序内配置一个版本号,只要检测到版本号不一样,就清除以前的缓存,具体实现如下config.jsmodule.exports = { VERSION: '1.0'}update-ve...

2020-01-14 11:57:53 598

原创 vue 3.0用history路由打包后出现空白页面

vue 3.0用history路由打包后出现空白页面,出现这个问题可以先检查两个方面1. 打包路径是否有误,这个打开控制台就可以看到,如果有出现报错,则说明打包的路径不对,这时要修改打包的路径。比如项目是放在/dist/下,访问的路径为http://127.0.0.1/dist/,那打包的路径要修改为/dist/router.js的设置export default new Router({...

2019-12-08 10:47:44 3999

原创 vue滑动进度条组件,可点击、可拖拽

刚好碰到一个功能是做audio自定义播放样式的,但又没有相关的组件,因此自己封装一个,分享给大家。大家可根据自己的需求进行样式的修改,其中有bug和不足的,欢迎大家指出。效果图录屏有点边框,请忽略~组件c-progress的使用导入import CProgress from './../components/c-progress'使用<c-progress class="c...

2019-11-24 19:29:17 10507 36

原创 js重写console.log函数

在前端开发中console.log是我们必不可少的调试工具,但是原生的console.log有两点不能很好地满足我们的需求 1. 开发时需要log,但是上线时希望去掉log,但我们不可能每一行都删掉 2. 对于Object和Array等引用类型,打印的时候是打印引用地址的值,并不是程序当前时刻的值,有时不注意就会发现打印前后是一样的,给调试带来了一定的困难

2019-10-25 22:52:14 7396 1

原创 原生ajax发送get、post请求

原生ajax发送get、post请求ajax.jstest.htmlapp.js原生ajax会有跨域问题,后台要允许跨域访问,这里是express框架以上就是原生ajax的简单运用,在一些轻量级的应用上可以自己封装一个小的ajax函数,而不用引入第三方的包,从而使代码的体积更小化ajax.jsconst ajax = {}ajax.request = function (url,data,...

2019-10-21 11:08:15 253

转载 学习日记-css限制行数

限制换行代码 overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; 测试:<text>测试高级人参水果很好吃啊啊啊啊啊哈哈哈哈哈</text>完整代码如下:text { colo...

2019-09-08 18:22:45 143

原创 Webstorm安装px2rem插件

做过前端开发的都知道,前端开发适配是一个头疼的问题,各种尺寸要算来算去,现在终于可以解决这个烦恼了,安装px2rem插件,一键解决px与rem换算的问题。现在就来演示一下怎么在webstorm怎么安装px2rem在插件。1、打开webstorm,点File --> Settings2、依次点击:Plugins --> Marketplace;输入px后回车,可以看到如下的列表;...

2019-08-24 12:06:58 3149 1

原创 Vue移动端适配,Vue一键px2rem,px2rem-loader安装使用教程

上一篇介绍了怎么安装Webstorm插件px2rwd,在开发中可以帮助我们快速地进行px和rem的换算。下面来介绍一种在Vue中px2rem的模块,该模块会自动地将px转换成rem,而不用再去换算,方便我们以后去检查项目。在写项目的过程中,我们直接写px即可,它会根据我们屏幕的大小自动地进行px和rem的换算,非常方便,快来看一下吧前提准备:已经是使用vue-cli搭建好的项目vue-cli搭...

2019-08-24 12:03:30 4562 1

转载 socket.io报错解决方法:[TypeError]: fn.bind is not a function)

socket.io报错解决方法:[TypeError]: fn.bind is not a function解决办法解决办法这是由于版本问题,只需将io.socket.clients(room)改成io.sockets.adapter.rooms[room]即可如图:// let usersInRoom = io.sockets.clients(room); //旧版本写法 le...

2018-11-01 09:11:45 5577

vuedevtool.zip

vuedevtool是一款非常优秀的vue调试工具,可以实时查看和修改vue里面的值。安装方法是在chrome上输入chrome://extensions--&gt;打开开发者模式--&gt;点击加载已解压的扩展程序,选择刚才的文件即可。安装完成后F12就可以看到控制台里面有个vue的选项了,如果没有则重启一下浏览器即可。

2019-10-23

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除