- 博客(42)
- 资源 (6)
- 收藏
- 关注
RSS订阅
原创 【javascript】纯原生js的轻便组织结构图，树状图，支持自定义样式
前言写这个插件呢，只是一时兴起，公司的项目中使用到了组织结构图，然后本着面向百度、谷歌编程的思想，我去摸索了半天。结果一无所获，可能这个词用的有点重了，但是就是没有符合我公司项目要求的，然后我又去了全球最大的同性社交网站（github）还是没有找到自己满意的插件。但是整个过程借鉴下来也有了自己的一些小思路，干脆自己封装一个得了（本文的插件非常简单，大佬勿喷）思路思路呢，大概是这样的，先定数据结构，因为有了结构才好拿着去定 dom 的结构。因为是结构图嘛，所以父子关系肯定是跑不掉了，那
2020-09-15 18:15:46
3968
11
原创 【vue】基于vue2.x的vue项目最最最基础模板
前言好久不见啊大家，今天想写这篇博客的时候才发现博客已经断更大半年了（手动滑稽）由于去年十二月份被公司再次发配到上海出差，而且这次主要开发的是针对IE浏览器的一个插件（c++ 和 js 的交互）所以就很长时间没有接触外网了，更别说开发外网的项目了，博客也没什么可更新的了这篇博客是插件已经基本开发完成，马上又要重新接手外网的项目了就准备重新给大家搭建个vue项目最最最最最基础模板顺便自己再回顾下一、项目基础好了，不多BB直接上干货，先说下这个项目用到的东西vue2.x vue
2020-05-27 19:42:03
3291
9
原创 【vue】使用vue-cli4.0快速搭建一个项目
前言最近公司的项目终于到了空闲期，而闲不住的我终于把目标放到了项目的迁移上面因为公司的项目比较早的原因（虽然当时vue-cli也出来了一段时间，但是不敢轻易尝试啊！）所以使用的环境还是 vue2.x版本的，而又因为公司的前端项目都是我来搭建的原因（并不是技术大佬，入职早！）所以所有项目开发的时候一直在用的 vue-cli2.0，后来项目多了也没时间就没往 vue-cli3.0 迁...
2019-10-25 13:53:42
105700
71
原创 【vue】使用vue-cli3.0/4.0搭建的项目如何区分环境
前言上一篇博客，我说了，最近公司是空闲期。基本都是处于浑水摸鱼阶段了，每天打卡上班，打卡下班但是我是属于那种有点闲不住的人，总想搞点东西玩玩所以我把公司的项目往 vue-cli4.0 进行了迁移（我原本真的只想迁移到 3.0）可以参考vue-cli4.0快速搭建一个项目迁移的过程可以说还算顺利，也没遇到什么麻烦，就是一些插件版本的升级问题最近，有人私信问到了我关于 vue...
2019-11-30 12:10:26
10212
1
原创 【vue】vuex+axios+element-ui实现页面请求loading
前言我们在平常写项目的时候，发请求的时候肯定会习惯用一个 loading 遮罩层来防止用户在没拿到数据之前误操作如果是页面同时只发送一个请求，那么无论是在组件中或者是在 axios 插件中进行请求和响应拦截都可以做到但是，当一个页面同时要发送多个请求的时候，这么做显然就不行了因为最先完成的请求会把所有请求的 loading 都给关闭举个例子，第一个请求的响应时间为 3s ，第二...
2019-10-30 15:58:06
1479
原创 【css】你未必知道的CSS冷知识
首先，需要声明一下，这篇文章是篇水文，因为我觉得1024不发篇文章不舒服。还有，本篇文章是从其他地方搬砖过来的，我会在末尾声明作者。01.【负边距】负边距的效果。注意左右负边距表现并不一致。左为负时，是左移，右为负时，是左拉。上下与左右类似2.【shape-outside】不要自以为是了。你以为自己是方的，在别人眼里你却是圆的3.【BFC应用】BFC应用之阻止外边距合并（m...
2019-10-24 15:29:31
485
1
原创 【bug】Swiper的loop模式下无法操作当前swiper-slide的解决方案
一、问题描述在开发一个 Vue 项目时，用到了 Swiper 插件，别问我为什么不用 vue-awesome-swiper，因为要自定义一些东西，用不惯 vue-awesome-swiper。好了，回到正题，下面是要实现的两个效果：1.当前的 swiper-slide 使用高亮的背景色，其他的使用暗淡的透明色。2.不同的 swiper-silde 有不同的子项内容，所以要根据当前的 s...
2019-10-12 17:03:37
4493
3
转载 【css】flex布局语法简述
网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用...
2019-09-23 16:35:15
622
原创 【vue】vue路由缓存的几种方式
在我们的日常开发中，有时候会遇到页面的缓存，特别是电商的项目，在商品列表的一些状态都是要缓存下来的。下面就简单介绍几种 vue 路由缓存的几种方式。1、全部缓存<keep-alive> <router-view></router-view></keep-alive>直接用 keep-alive 标签包裹 router-vie...
2019-09-04 14:11:45
14780
1
原创 【css】各个字号大小对照表
最近接到了两个需求，一个是打印网站的一个操作记录，一个是通过UE生成html格式的文书模板让渲染生成pdf打印。所以，字体的大小就是一个关键点，查阅资料，整理如下字号大小对照表：中文字号 英文字号（pt） 毫米（mm） 像素（px） 1英寸 72pt 25.30mm 95.6px 大特号 63pt 22.14mm 83.7px...
2019-09-03 14:19:50
8139
原创 【plugins】IE和Chrome间的相互调用
最近我司的业务跟其他的公司业务牵扯，项目的背景都是法院的项目，但是所做的功能和需求不太一样。因为是指定的客户，所以我司的业务是针对 Chrome 做的，其他司的是已经成型的 IE8 的老项目。虽然是合作的关系，但是难免少不了竞争，所以都不愿意做出相应的兼容处理。那么没办法了，只能在IE8和 Chrome 之间相互调用了，下面就简单介绍下如何相互间的调用。一、IE8调用谷歌浏览器...
2019-08-08 20:20:49
4374
5
转载 【javascript】浅谈节流和防抖
最近在负责公司的前端面试以后，迫使我不得不去重新收集一些面试题。而在这些面试题中，节流和防抖便是我认为需要总结的一个知识点。在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等。但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。...
2019-07-23 11:18:02
288
原创 【vue】浅谈vue-cli2.0的打包优化
今天在修改 config/index.js 中的 build 里面的assetsPublicPath 时，发现了其下面的productionSourceMap 和productionGzip。说句尴尬的话，之前还真没有注意到过这两个属性，现在既然发现了，那就探索下吧。带着面向谷歌和百度的编程思想，我去撸了下文档，然后简单的总结下，方便自己填坑。productionSource...
2019-07-12 10:47:21
1537
原创 【vue】webapp移动端模板
今天突发奇想，想自己搭建一套移动端的模板来方便自己以后写项目的时候不用再花费无用的时间去搭建项目。先说下这套模板的项目配置，主要使用 vw 适配移动端webpack + vue + vue-router + axios + mint-ui + sass + postcss + normalize.css具体依赖懒得打字了，直接贴 pacage.json 代码"dependenci...
2019-06-14 17:29:59
4688
1
原创 【vue】使用webpack+vue-cli搭建项目如何区分开发、测试、展示和生产环境？
今天分享下自己使用webpack+vue-cli搭建项目的时候，是如何区分开发、测试、展示、生产这四种环境的。我们随便百度怎么区分环境，会有很多种答案。但大多数都是让在 config 文件夹下新建一个test.env.js和 pre.env.js，然后再去修改一大堆的配置，显得非常的麻烦。今天给大家分享自己一直在用的一种区分环境的方法。本方法是无意间看到的一位博主的讲解，自己感...
2019-05-31 15:01:01
4187
3
原创 【vue】vue封装全局filter并统一管理
在前后端分离的项目中，经常会有后台返回的数据需要进过处理才能显示到页面上的场景。使用最多的场景就是日期和时间的处理，后台一般返回的都是时间戳，那么我们就要对时间戳进行处理。下面就拿封装全局的处理日期和时间的 filter 来展示如何 vue 如何封装全局 filter 并统一处理。在 src 目录下新建 filters 目录用来专门存放全局过滤器，如果项目的过滤器过多，那么就要按类型分...
2019-05-23 20:09:30
1389
原创 【node】从零开始用node.js编写api接口
今天开始准备自己去探索下node.js编写接口，让自己朝着全栈逐渐靠近。写此博客，就是为了记录下自己的探索以及实现过程。一、安装首先安装node.js，下载地址。 下载完成，打开 cmd 输入 node -v，如果显示出了版本号，证明安装成功。二、初始化在磁盘中找个合适的位置，创建一个文件夹用来放项目。 然后在创建的文件夹根目录打开 cmd 输入 npm init。...
2019-05-22 10:56:46
17098
5
原创 【css】css3动画实现水波浪效果
无聊写的一个小Demo，方便自己以后使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...
2019-05-21 21:23:26
5442
原创 【javascript】原生js实现列表间隔滚动
今天公司项目遇到一个需求，要求实时间隔滚动显示区块链信息，实时显示需要跟后台协商交互即可搞定。那么问题就剩下我们拿到数据如何间隔滚动了，用jquery的时候可以直接用插件来搞定。但是从接触vue之后，我就很少使用jquery写项目了，所以自己用原生coding一个，方便自己以后使用。<!DOCTYPE html><html lang="en"><h...
2019-05-20 17:52:04
985
原创 【javascript】原生js+canvas绘制图像验证码
为方便自己以后项目中使用，在此留一份原生JS实现的图像验证码代码。export function drawAuthCode(id) { var num = []; var canvas = document.getElementById(id); var canvas_width = canvas.offsetWidth; var canvas_height ...
2019-05-17 17:41:14
601
原创 【前端】前端开发规范文档
方便自己以后项目的使用，整理一套自己的开发规范。一、文件名文件名使用【小写字母】命名方式。 文件名包含多个单词时，使用半角的连接符（-）拼接，如 home-page。 某些说明文件，文件名可以使用大写字母，如 README。二、常量命名常量名使用【大写字母和下划线】命名方式。 常量名的定义方式使用const关键字定义。 常量名包含多个单词时，使用半角的下划线（_）拼接，如 M...
2019-05-16 19:19:40
1420
原创 【css】纯css实现table表格固定表头，表内容滚动
今天在写公司项目的时候，遇到了一个比较xx的问题，现公司的项目使用的是 vue2.0 和 element-ui 搭建的。那么提到 element-ui 大家都知道，他最实用的一个组件就是表格了，简直是后台管理项目必备选项。但是现公司的产品和 UI 简直丧心病狂，非让我自己用原生标签DIY，那没办法，只好 coding 了。但是 coding 的过程中，有个需求是要表头固定，表内容超出滚...
2019-05-15 16:11:26
11844
1
原创 【css】改变浏览器默认滚动条样式
这个网上很多的教程，我就不多哔哔了，直接贴代码，方便自己和大家使用。可以把下面的代码放到一个css中，然后全局引入就可以了。/* 整个滚动条 */::-webkit-scrollbar { width: 5px; height: 5px;}/* 滚动条有滑块的轨道部分 */::-webkit-scrollbar-track-piece { backgro...
2019-05-15 15:32:36
1993
3
原创 【vue】简单封装axios插件和接口的统一管理
现在很多公司的项目都是前后端分离的项目，那么说到前后端分离，必定会有ajax请求来获得后台的数据。在做jquery项目的时候，我们都会使用它封装好的方法来直接发起ajax请求。在vue项目中，我们使用最多的就是axios这个插件，下面就简单的封装下这个插件并且把接口给统一化管理。一、安装和配置1.在项目根目录下打开终端安装npm install axios -S2.安装完...
2019-05-05 14:56:20
1607
1
原创 【vue】路由不变的情况下，刷新页面
背景1：在vue写的后台管理项目中，经常会有增、删、改、查的操作，这些操作只是跟用接口跟后台交互下既然用接口交互，那肯定就是axios的异步请求，那么就是说后台数据发生了改变，但是前台的数据并没有实时的更新（每次操作完后台把列表数据重新返给你例外，但是这样的话每次交互的数据量就偏大了）背景2：在使用动态路由配置 /detail/:id 这样的情况下，由于 router-view 是复用的，...
2019-04-04 14:59:04
8316
原创 【plugins】前端常用技术插件大全
为了方便自己以后在项目中的使用，在此留链记录。用途 插件名 描述 文档 演示 icon图标 fontawesome 包含了日常用到的所有的图标，还可以设置大小、旋转、和动画 文档地址 - icon图标 iconfont 大众常用的阿里矢量图标库 文档地址 - pc端ui框架 element-ui 饿...
2019-04-01 12:03:55
579
原创 【javascript】闭包的特点和用途
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个：一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。具体看下面的代码：function f1(){ var n...
2019-03-10 21:27:23
300
原创 【javascript】javascript原生事件句柄、BOM、DOM对象属性方法总结
为方便平时的使用，把 JavaScript所有原生事件句柄、BOM 对象属性和方法、DOM 对象属性和方法总结到此博客，如有漏缺请留言告知。句柄/属性/方法 类型 说明 onabort 事件句柄 图像加载被中断 onblur 事件句柄 元素失去焦点 onfocus 事件句柄 元素获得焦点 onchange 事件句柄 ...
2019-03-10 19:04:34
354
原创 【vue】用WOW.js+animate.css实现页面滚动加载元素动画
一、场景在很多的网站中，我们发现在滚动条滑动的时候一些元素显示出来的时候是有一些动画效果的，这样看起来页面更具有活力，增加用户体验。当然这些动画我们可以通过判断滚动条的位置或者判断元素距离可视窗口的距离自己写一些动画来实现，但是当页面的动画元素过多的时候，难免有点繁琐，所以本篇博客介绍使用 WOW.js 和 animate.css 来实现页面滚动加载元素动画二、引入和使用引入和使用分为...
2018-12-15 10:08:55
4261
17
原创 【vue】用vue-cli+bootstarp手动写一个响应式的导航条
一、应用场景在很多时候，我们的网站都是要求设计成响应式也就是网站可以适应于 PC 端、平板和手机端关于响应式的设计网上有很多教程，大致分为两种：1.使用一套代码，利用媒体查询来适配不同的屏幕2.使用两套代码，根据用户的终端不同切加载不同的代码来适配两种方法各有优势和劣势，自己根据项目需求来确定具体使用哪种方法本篇博客介绍第一种方法，利用 bootstarp 的栅格系统 ...
2018-12-13 15:11:13
4555
1
原创 【vue】vue-cli里引入jquery和bootstarp
一、首先确保项目已经使用 vue-cli 脚手架搭建完毕如果不会搭建，请移步：从零搭建一个vue-cli项目二、安装jquery我们都知道 bootstarp 是依赖于 jquery 的，所有要想使用 bootstarp 我们就要先安装 jquery在命令行打开项目根目录，输入：npm install jquery --save-dev安装完成以后修改 build 文件下...
2018-12-10 17:44:40
982
4
原创 【gulp】用gulp搭建一个前端项目
一、安装与创建 1.安装node：https://nodejs.org/zh-cn/ 2.安装gulp：npm install gulp -g 3.新建一个文件夹用来存放项目 4.在命令行进入创建的文件夹输入 gulp init即可 5.新建一个gulpfile.js文件配置任务 也可以使用我搭建好的项目模板：https://download.cs...
2018-12-05 17:56:34
1119
原创 【vue】vue-router的懒加载
前言首先，说下什么是懒加载，懒加载也叫延迟加载，即在需要的时候进行加载，随用随载，一般的运用场景是图片的懒加载，但vue-router同样需要懒加载，为什么？因为像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出现长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要...
2018-10-22 14:25:06
1844
3
原创 【vue】vue组件传值的三种方式
前言vue的组件传值分为三种方式：父传子、子传父、非父子组件传值引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示： 下面我们就开始用代码（一言不合就上代码）详细的介绍vue组件传值的三种方式1、父传子子组件的代码：<template> ...
2018-10-22 14:09:02
64234
2
原创 【vue】vue路由传参的三种方式
前言vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转。传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式，这就是vue路由传参的三种方式。方式一：params 传参（显示参数）params 传参（显示参数）又可分为 声明式 和 编程式 两种方式1、声明式 router-link该...
2018-10-22 10:30:13
86882
15
原创 【vue】vue的生命周期详解
为了方便自己和大家面试时能够理直气壮的吹牛逼，特开此篇进行总结！欢迎大家评论提出此文章没有涉及到的知识点，使题库更加全面化！aaa
2018-10-18 14:34:58
984
2
原创 【小程序】保存图片到本地相册
在小程序的开发中，会经常遇见把小程序内的图片保存到本地。现在就为大家讲解图片保存到本地的方法常见的保存图片触发事件类型：长按图片触发函数保存到本地，点击按钮触发函数保存到本地回调函数代码如下：//获取图片信息wx.getImageInfo({ src: this.data.shareimg, success: function (res) { var path = res.pa...
2018-10-16 18:39:54
3451
1
原创 【小程序】获取用户信息保存到本地、全局变量
微信小程序升级后，获取 wx.getUserInfo 接口后续将不再出现授权弹窗，所以需要使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息。 微信小程序与小游戏获取用户信息接口调整说明1.在页面上创建一个button标签把 open-type 设置为 getUserInfo 代码如下：&lt;button type="default" ...
2018-10-16 17:55:54
11996
原创 【bug】Swiper动态渲染swiper-slide后轮播图划不动解决方案
一、问题描述在开发一个Jquery项目时，用到了Swiper插件，并且因为要求数据的动态性，所以swiper-wrapper里面的swiper-silde都是由Jquery动态渲染出来的DOM，结构如图所示二、问题分析在使用上图结构时，添加静态数据可以使用Swiper的所有功能，但在动态的向swiper-wrapper中添加swiper-slide时，Swiper的自动轮播和左右滑动功能就...
2018-10-16 09:53:55
6323
webapp-template.zip
2019-06-14
vue-cli+bootstarp响应式导航条
2018-12-13
summernote完整资源包(font、lang、plugin、css、js)
2018-09-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人