![](https://img-blog.csdnimg.cn/20190927151132530.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
文章平均质量分 78
前端tips
coderzyc
初学者
展开
-
node端将二进制文件从后端获取到并转换成base64发送给前端
遇到了一个场景:用node做中间件,后端传过来了一个图片的二进制流,需要node端对其转码成base64再传给前端错误写法:const res = await netWork.get('/auth/verifycode')//传输后端的网络请求 得到二进制文件let imgPrefix = `data:image/${imgType};base64,`let buffer = new Bu...原创 2020-04-14 14:00:18 · 1797 阅读 · 0 评论 -
简单易懂的promise 与 async await 相关知识解析
简单易懂的promise 与 async await 相关知识解析什么是promise为什么要有promise?其实promise的本质就是为了解决回调地狱的问题,例如const fs = require('fs')fs.readFile(filepath,(err,data)=>{ if(err){ return } fs.readFile(...原创 2019-10-15 19:40:38 · 200 阅读 · 0 评论 -
CSS让元素消失的方法
1.position:absolute;top:-999px;left:-999px;(比元素本身的width和height大即可)2.display:none;3.visibility:hidden;4.height:0;or width:0;(前提是没有border)5.opacity:0;6.transform:rotateY(90deg);backface-visibili...原创 2019-04-14 23:54:06 · 3791 阅读 · 0 评论 -
Fetch 用法
Fetch 用法promisepromise是es6中的对象promise <->成功/失败 异步new Promise((resolve,reject)=>{ //resolve 成功 reject 失败 resolve(num)//将会走成功的then回调 reject(num)//将会走失败的then回调}).then((num)=...原创 2019-10-05 23:05:34 · 297 阅读 · 0 评论 -
vue3.x解决自适应问题
方案先搭好脚手架vue create webpack //创建的是3.x的脚手架采用 lib-flexible + postcss-pxtorem 两个包解决npm i lib-flexible postcss-pxtorem -s//在main.js中引用:import 'lib-flexible'//在package.json中引用:"postcss": { "p...原创 2020-02-02 00:20:53 · 762 阅读 · 0 评论 -
Node链接MySQL数据库及封装
Node链接MySQL数据库配置包:mysql下载 npm i mysql -sindex.js中引入模块const mysql = require('mysql')//配置数据库//创建连接池const pool = mysql.createPool({ host:"localhost", port:"3306", user:"root", p...原创 2019-11-15 22:54:44 · 569 阅读 · 0 评论 -
Ajax简单原生使用原理
Ajax原生步骤1.获取xhr对象let xhr = ''//由于存在兼容问题,所以需要判断是DOM浏览器还是IE浏览器if(window.XMLHttpRequest){ xhr = new XMLHttpRequest()}else{ xhr = new ActiveXObject()}2.配置发送方式和发送路由等信息xhr.open("get/post"...原创 2019-11-15 22:54:04 · 118 阅读 · 0 评论 -
zepto简单总结
zepto.js1.概述针对现代浏览器的JSDOM库 (IE10+)比起jquery:更轻量兼容性更小通常用作移动端浏览器上文档:https://www.html.cn/doc/zeptojs_api/2.选择器语法和jquery一模一样,但不支持jquery原创选择器$(“div:odd”)$(“div:even”)$(“div:first”)$(“div:last”...原创 2019-10-17 18:42:05 · 383 阅读 · 0 评论 -
什么是BFC及BFC的作用
BFC的全名为Block Formatting Context,块式格式上下文BFC是一个独立的布局环境,这个盒子内部构造如何都不会影响这个盒子外部 并且在一个BFC中块元素和行元素会垂直的沿着其父元素的边框排列.BFC布局规则:1.内部的盒子会竖直排列,挨个放置2.盒子的垂直方向距离由margin决定,一个BFC中的两个相邻盒子margin会重叠3.BFC中每一个盒子的margin-l...原创 2019-04-01 20:27:53 · 283 阅读 · 0 评论 -
标准盒模型和怪异盒模型的区别及box-sizing应用场景
一:标准盒模型和怪异盒模型的区别标准盒模型:这种盒模型设置width的时候的值是内容区的宽度,如果再设置padding和margin,border的话盒子的实际宽度会增大怪异盒模型:这种盒子的width设置的值为盒子实际的宽度,border和padding的设置不会影响盒子的实际宽度和高度如下实验:<!DOCTYPE html><html> <head&g...原创 2019-04-02 12:54:05 · 6387 阅读 · 2 评论 -
垂直居中的几种方式
一:元素在盒子中(假设盒子的高度为h):1.父元素设置relative,子元素设置position:absolute; top:calc(50%-h/2);2.父元素设置relative,子元素设置position:absolute; top:50%;margin-top:-h/2;3.父元素设置relative,子元素设置position:absolute;top:50%;transfor...原创 2019-04-11 23:16:55 · 264 阅读 · 0 评论 -
滑动门解决方案
滑动门是基于精灵图技术和内边距的一种应用,一般应用于子导航中的菜单布置.效果为一个li,这个li的宽度不固定,会随着放入的字数增加而宽度增加1.不用精灵图,仅仅使用背景色代替精灵图的滑动门:这样的菜单只需要padding即可,但是切记不能用margin,不然虽然菜单会随着字数的多少扩大,但是如果有hover后背景改变特效的话效果不一样,而且一般不是我们想要的效果2.用精灵图的滑动门(主要是用...原创 2019-04-09 18:23:41 · 206 阅读 · 0 评论 -
子元素浮动导致父元素高度塌陷的解决方法
子元素浮动会导致子元素脱离正常的文档流,所以会导致父元素塌陷,解决方法如下1.为父元素添加固定高度,这样做的话如果子元素比较高的话一样会超出去2.为父元素添加position:absolute属性,使父元素一样脱离文档流3.为父元素添加.clearfix类,类写法如下.clearfix::after{ display:block; content:''; height:0; cle...原创 2019-04-01 20:14:07 · 1370 阅读 · 0 评论