- 博客(29)
- 收藏
- 关注
RSS订阅原创 Vue 移动端页面适配 rem
先安装 postcss-px2rem-exclude 插件npm install --save postcss-px2rem-exclude 然后在 main.js 引入封装的适配函数这里封装的页面适配,是以设计图 750px , fontSize 为 40px 为标准。然后根据不同手机宽度计算各自的 fontSize.let docEl = document.documentElement;export function getSize() { ... docEl.style.font
2021-01-04 17:50:19
468
2
原创 vue3 响应式对象实现方法的不同点
vue 响应式对象是利用 defindeProperty 实现，vue3 则是使用 Proxy 来实现响应式的。二者，虽然都实现了 响应式的功能，但实现方式不一样，解决问题也有些不同。vue2 中，如果想要实现，数组元素的更新，则是需要 用到检测更新的方法 set 之类的，但 vue3的响应式对象，就完美的解决了这个问题，不要其他的什么更新检测方法了。...
2020-10-28 17:36:02
1315
原创 数组扁平化的几种常见方式
// 数组扁平化 是指将一个多维数组变为一个一维数组 const arr = [1,[2,[3,[4,5]]],6]; const res = arr.flat(Infinity) console.log(res) // reduce function flatten(arr) { return arr.reduce((pre,cur)=>{ return pr...
2020-10-27 17:55:11
211
原创 css3 伪类 :before :after 的使用
CSS3 伪类的使用。例如 :<a href=’’" title="" >我很帅在 a标签后面加上一张图片，图片 url = ‘图片地址’，一般情况下，我们习惯于用js 在 a标签后面添加图片，但相对来说，有些麻烦，但css3 伪类就可以做到。下面是 核心代码a:after{ content : url(图片地址/音频地址/视频地址);}但前提是要浏览器支持的视频和音频，才可以。...
2020-07-09 18:29:42
505
原创 async 与 await 异步使用
await 后面接一个会 return new promise 的函数并执行它await 只能放在async函数里await 和 async 必须成双成对出现。二者不可分离。要像夫妻一样，不要离开对方。await 可以接多个 promise 结果，可以这样写 await Promise.all()...
2020-07-09 18:23:26
114
原创 axios 配合 Promise 封装请求
export const http = (info) => { let token = sessionStorage.getItem("token") //post请求，设置为 ‘application/json' ，前后端约定。如果是文件上传,需要改为 formData axios.defaults.headers.post['Content-Type'] = 'application/json' // 不公开的请求，需要携带 token 用户验证参数,登陆
2020-07-08 18:16:42
628
原创 vue 移动端网页适配
移动端适配 ，简单的一句话描述就是 ： 最大程度在各个尺寸屏幕上还原设计稿最关键的是 rem，因为rem可以随根字体大小改变而改变，从而实现了自适应的功能。
2020-07-06 17:37:54
268
原创 axios 常用设置
1.拦截器在请求或响应被 then 或 catch 处理前拦截它们。比如说如果网络断开了话，可以在请求发送之前判断，当然也可以在请求中判断，但这样更方便。// 添加请求拦截器axios.interceptors.request.use( function (config) { // 在发送请求之前做些什么 if (window.navigator.onLine) { // 这里是判断网络是否断开 return request } else {
2020-07-01 18:58:20
248
原创 vue devTools 安装调试
很多小伙伴们，在开发vue 项目的时候，如果想断点调试，会发现在浏览器的source 中，只能看到vue项目打包后的js或者css项目。无法看到 vue 源文件，也就是 .vue 文件。实际上只需要做到两步，就行了。第一步 : 在 chrome 浏览器中，安装 devtools 插件。第二步 : 在 vue 项目中的配置文件中，配置 允许调试。先说第二步，具体配置是 :configureWebpack: { devtool: 'source-map'}第一步，安装 devtoo
2020-06-30 19:00:05
176
原创 gitLab的简单使用以及常用的git 命令
开发了这么久，才搞清楚GitHub和 GitLab 他们之间的区别。Github：是一个基于Git实现的在线代码托管仓库，包含一个网站界面，向互联网开放 。GitLab：是一个基于Git实现的在线代码仓库托管软件，你可以用gitlab自己搭建一个类似于Github一样的系统，一般用于在企业、学校等内部网络搭建git私服。GitLab的操作和 我们平时使用 git 基本一致，没什么不同。GitLab 常用操作和命令 :git init ------
2020-06-29 19:47:50
224
原创 函数节流
// 节流function throttle(fn,delay = 500) { console.log(delay) let timer = null return function() { if (timer) { return } timer = setTimeout(()=>{ console.log(this) fn.apply(this,argu
2020-06-19 17:10:20
152
原创 函数防抖
// 函数防抖let timer = nullinput.addEventListener('keyup',function(){ if (timer) { clearTimeout(timer) } timer = setTimeout(()=>{ console.log(input.value) timer = null },500)})
2020-06-19 17:09:45
127
原创 用 promise写一个ajax请求
function http({ url, type, data, dataType }) { return new Promise(function (resolve, reject) { var xhr = window.XMLHttpRequest ? new XMLHttprequest() : new ActiveXObject('Microsoft.XMLHttp'); xhr.onreadystatechange = function () { .
2020-06-19 11:40:21
260
原创 手写一个简单的事件绑定函数
function bindEvent(elem,type,selector,fn){ if (fn == null) { fn = selector selector = null } elem.addEventListener(type,event=>{ const target = event.target if (selector) { // 代理绑定 if
2020-06-19 09:04:17
198
原创 一次性插入多个节点-考虑性能
const listNode = document.getElementById("list")// 创建一个片段,此时还没有插入到DOM树中const frag = document.createDocumentFragment()// 执行插入for (let x=0; x<10;x++) { const li = document.createElement('li') li.innerHTML = 'List item' + x frag.appendCh.
2020-06-17 18:27:27
717
原创 手写一个简易的用 Promise 加载一张图片
function loadImg(src){ return new Promise((resove,reject)=>{ const img = document.createElement('img') img.onload = ()=>{ resove(img) } img.onerror = ()=>{ let err = new Error('图片加载失败').
2020-06-17 15:07:15
318
原创 手写一个简易的闭包
闭包的主要表现有两种 ，一个作为 函数返回值，一个作为 参数。作为函数返回值function demo(){ let a = 100 return function(){ console.log(a) }}let a = 200demo()作为参数function fn1(fn){ const a = 100 fn()}const a = 200function fn(){ console.log(a)}fn1(fn)闭包的简单应用
2020-06-17 12:57:48
4439
原创 手写一个简单的bind函数
bind 函数 重点是参数的处理Function.prototype.bindcopy = function(){ const args = Array.prototype.slice.call(arguments) const t = args.shift() const self = this return function(){ return self.apply(t,args) }}
2020-06-17 12:23:52
242
原创 使用 class 写一个简单的jquery,考虑插件和扩展性
简易的jQuery 对象class jQuery{ // 构造函数 constructor(selector){ const result = document.querySelectorAll(selector); const length = result.length for (let i=0;i<length;i++) { this[i] = result[i] } this.length = length this.selector = selecto
2020-06-17 09:50:00
150
原创 手写一个简易的js深拷贝
说道深拷贝，就不得不提浅拷贝，浅拷贝往往是指只拷贝了对象或数组的内存地址，就是说，改变之前的对象或数组时，拷贝后的对象或数组连带着都会改变，但深拷贝，不会出现前面的情况，因为，深拷贝是真正意义上的对象属性或数组元素的完全复制，不受之前对象或数组的影响。下面就来手写一个简单的深拷贝deepClone(obj={}){ // obj 是 null,或者不是对象和数组,直接返回 if (typeof obj !== 'object' || obj == null) { return obj }
2020-06-17 09:23:50
522
原创 简单通用的权限设计
数据库的权限设计是开发中一个比较棘手的问题，一般来说，如果只是简单的后台管理系统的管理员和普通管理员权限管理，可以只涉及两个主要的方面，一个是 用户，一个是权限，数据库表也可以依照此标准来设计。比方说，user（用户表），action (权限表)。再加上一个中间表 user_action （用户权限表）。三张表，这个就可以满足基本的权限开发了。对于权限而言，如果不想频繁的给用户添加多个权限，可以...
2020-04-11 21:26:16
284
原创 数据库升级 MySQL8 踩坑之路
用习惯了 MySql5.7后，对于mysql 的安装、启动、创建用户、开启远程链接，应该说是比较熟悉的。最近因为做一个python flask 的点餐项目，是一个外包项目，这次，需要用我自己的服务器，我去服务器一看，居然连mysql,还没安装，太惭愧了。于是开始了mysql 漫漫安装，调试之路。一般在 centos 上安装软禁有两种方式，一种是 下载安装包，然后编译安装，一种是使用 cento...
2020-03-18 00:32:43
313
原创 由ssl证书引发的一系列坑
自从接触到线上服务器以来，自认为对服务器的一些操作和命令还比较熟悉，对于一些常见的语言环境的搭建，文件操作，服务器配置等还算有些心得。但恰恰就是因为过于自信，差点导致整个服务器崩溃了。导火索还是一个不起眼的 ssl 安全证书。下面简述一下，我的踩坑之路。小程序的api数据接口，微信要求必须是要经过认证的https域名地址，因此后台的api接口也必须要是https的形式，昨天，公司一个小程序的数据...
2019-07-23 23:58:29
619
1
原创 composer 创建 laravel 项目
composer 借鉴了 nodejs 的 npm 和 java maven的用法，在php 构建框架时，起到了很大的作用。让创建一个框架的初始版本，又多了一个更加方便的方式，而且更加符合现在大趋势下的流行开发方式。下面，简单的介绍一下，利用composer 来安装 lavavel 项目，并如何启动。新建一个空的文件夹，在命令行中，输入以下代码，利用编辑器也可以。composer create...
2019-07-03 22:13:05
1093
原创 微信小程序新增的 components 功能
之前，一直写vue的前端的小伙伴们，对于组件的使用，很熟悉，比如，封装一个组件，往组件里传值，复用等。可是去写小程序后，会发现，小程序的组件，准确来说，应该叫模板，只能复用，wxml 和wxss，也就是只能复用 html 和 css，这样就不能传入值到组件中，实现不同情境下的复用。给写惯了vue，的开发者来说，会有些不适应，同时，给开发带来了很大的困难。好消息是，最近小程序已经支持，传入值到组件...
2019-06-30 00:01:18
1573
原创 cube-ui滚动组件 scroll-nav 的使用
对于商城项目来说，商品分类的页面，往往需要用到滚动效果。类似于下面这种。如果，纯手动用原生css的去写的话，会比较麻烦。但是如果利用cube-ui这个UI库，会很快的实现这个效果，而且兼容性还比较好。下面简单的说下，实现的过程。scroll-nav在页面引入scroll-nav 这个组件，然后在里层再嵌套一个组件，cube-scroll-nav-panel。下面是代码。 <cub...
2019-06-29 23:38:36
5208
5
原创 flex 布局属性的运用
随着浏览器对css3属性的支持，flex布局运用的越来越多。今天，简单的说下flex的几个常用属性之间的关系。flex-directionflex-direction 主要有四个属性值。 row row-reverse column column-reverseflex 布局的方向。垂直和水平。reverse 为取反。但是 reverse 后，水平和垂直方向上有些不用，水平上方向revers...
2019-06-28 18:49:59
115
原创 cube-ui 移动端滑动效果
移动端，常见的tab切换效果比较多，今天，我就用cube-ui ，这个移动端非常火的UI框架来实现。我们使用vue来做tab切换效果的时候，往往倾向于用路由实现，其实也可以用组件来实现，而且在滑动效果的细节上更加完善。
2019-06-27 17:29:00
3408
原创 移动端vue开发实用UI库
cube-ui 安装和使用在vue-cli 中安装cube-ui 的时候，需要注意版本，vue-cli 版本 >= 3.0 直接一行命令就行了。vue add cube-ui而且在安装cube-ui 的时候，它就已经自动的将组件导入到了 main.js中了，不需要手动导入了。安装cube-ui后，会自动生成这个文件。是一个配置文件。但vue-cli 版本 <= 3.0 的时候...
2019-06-21 18:24:11
369
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人