- 博客(41)
- 收藏
- 关注
RSS订阅原创 vue拖拽辅助线+改变元素大小组件
vue-dragline项目根据react-dragline 改写为vue。支持拖拽辅助线，改变元素大小，元素拖拽功能Installationnpmnpm install vue-dragline --saveyarnyarn add install vue-draglineExample<template> <draggable-container> <draggable-child v-for="item in initia
2022-04-11 15:59:44
2701
2
原创 webpack基础学习-入门篇
本文对webpack做个基础的学习了解，后续会陆续推出相关的进阶文章，希望大家可以通过文章能够对wbpack有个全新的认识。本文demo地址：https://github.com/BadMooncc/webpack-demo.git1、背景由于现代浏览器到目前为止不支持js的模块化，但随着项目越来越大模块化无疑更易于项目的管理和维护。那么我们需要用但浏览器不支持，怎么办呢。webpack由此诞生。由于webpack基于node平台，所以…你要稍微会一点node。2、webpack是什么？we
2021-01-23 14:38:24
479
原创 从0开始搭建webpack-eslint配置教程
从0开始搭建webpack-seslint配置教程前言为了提高代码可读性，以及团队风格统一。便于日后维护，代码风格统一就显得尤为重要。本文从0开始为生成的vue项目增加webpack，脚手架使用webpack simple1、准备工作首先初始化项目，打开命令行执行vue init webpack-simple eslint-demo,接下来我们进入项目文件夹内。项目目前是没有eslin...
2020-04-03 17:35:32
442
原创 mac下notification桌面通知不支持http协议的解决办法
sudo /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --unsafely-treat-insecure-origin-as-secure="http://your.domain.com" --user-data-dir="/Users/baidu/ChromeTestProfile"命令行执行该命令，将红色文本...
2019-01-21 19:16:30
1866
原创 chrome下音频无法自动播放的解决办法
众所周知，chrome浏览器在18年4月起，就在桌面浏览器全面禁止了音视频的自动播放功能。不光是这样，在页面加载完毕的情况下，用户没有click、dbclick、touch等主动交互行为，使用js直接调用.play() 方法的话，chrome都会抛出如下错误：直到用户有交互之后，再次调用play()方法才会正常播放。但是对于开发来说，很多情况下我们还是需要让音频自动播放的，比如实时消息通知...
2019-01-17 19:54:06
41438
18
原创 canvas实现文字水平居中
今天接到一个需求，需要在浏览器tab页的icon上显示消息的数量，无奈只能用canvas来实现。实现的过程中就碰到文字居中，对canvas完全没用过的我来说简直是让人抓狂，百度出来的答案要么太复杂，要么说的不清楚。接下来我们就来看下，在canvas中如何让文字在画布中水平居中首先呢，我们先在html中加入canvas标签，如下：<canvas id="myCanvas" width...
2019-01-12 17:51:53
29097
8
原创 vue中nextTick的用法
用法：对于nextTick的用法官方是这么介绍的：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM，那么这句话是什么意思呢，其实简单来说就是，当我们修改数据后，视图层的数据更新是异步的，既：当修改过数据后立即输出绑定改数据的dom元素，该dom元素中的数据还是未更新过的。说这么一大串不如来一段demo做演示：<template&...
2018-11-23 13:58:25
963
原创 vue项目node中间层脚手架
直接去git拉取脚手架即可，支持pm2启动。目前仅支持转发一个域名，后续会不断完善，喜欢的给个star啦～有疑问的可以在评论区留言～脚手架地址：https://github.com/BadMooncc/vue-server-middle...
2018-10-27 22:01:59
2254
3
转载 git合并远程仓库上的提交记录
有时候，我们用git提交代码时，因为我们的疏忽，会导致同一个问题，修改多次，因为反复提交多次，最终稳定下来，我们想把git上这些不成熟的提交记录合成一个终极记录。例如：git上依次有如下提交（按提交时间从新到旧）：提交记录k提交记录m提交记录n4提交记录n3提交记录n2提交记录n1提交记录p提交记录q现在，我们想将提交记录n1～n4合并成一个提交记录n，怎么...
2018-10-21 14:49:46
1679
原创 vue .sync修饰符的用法
背景：日常开发时，我们总会遇到需要父子组件双向绑定的问题，但是考虑到组件的可维护性，vue中是不允许子组件改变父组件传的props值的。那么同时，vue中也提供了一种解决方案.sync修饰符。在此之前，希望你已经知道了vue中是如何通过事件的方式实现子组件修改父组件的data的。如果你对此还不了解父子组件如何通过$emit实现双向通信，那就点我先了解下吧.sync修饰符：首先我们知道，...
2018-09-28 11:24:02
7501
4
转载 vue项目中使用scss
原文出处：https://segmentfault.com/a/1190000009802725一 概述随着sass/less等css预处理器的出现，编写css变的越来越有乐趣。所以现在越来越多的人在项目中喜欢使用scss或者less。（我自己就是一个）。由于最近在写一个vue项目。所以就把写项目期间每天的一些知识点写在博客里。所以最近的博客应该都会和vue有关。今天要和大家分享的就是如何...
2018-09-19 18:13:31
365
原创 前端常见算法面试题
虽然算法在前端开发中很少会得以使用，不过面试中总是会有一些经典的算法面试题。显然，学习算法对于任何工程师提高编程能力和提高理解分析问题的能力都是有帮助的，接下来放几道常见的前端面试中出现的算法题供大家学习，当然，这些题目的解法未必是最优的，仅供大家学习参考。 // 判断是否回文 var str = 'resiviser'; function reserve(str) { ...
2018-09-14 23:24:02
12220
5
原创 cors实现请求跨域
简介CORS：全称"跨域资源共享"（Cross-origin resource sharing）。CORS需要浏览器和服务器同时支持，才可以实现跨域请求，目前几乎所有浏览器都支持CORS，IE则不能低于IE10。CORS的整个过程都由浏览器自动完成，前端无需做任何设置，跟平时发送ajax请求并无差异。so，实现CORS的关键在于服务器，只要服务器实现CORS接口，就可以实现跨域通信。请...
2018-09-14 18:59:16
60081
原创 vue项目中引用echarts的几种方式
准备工作：首先我们初始化一个vue项目，执行vue init webpack echart,接着我们进入初始化的项目下。安装echarts，npm install echarts -S //或cnpm install echarts -S安装完成之后，我们就可以开始引入我们需要的echarts了，接下来介绍几种使用echarts的方式。全局引用：首先在main.js中引入...
2018-09-04 19:37:07
6342
5
原创 element-ui配合node实现自定义上传文件
某些情况下，使用element-ui的upload组件默认上传无法满足我们的需求，so～今天主要介绍如何使用element-ui实现自定义上传，以及后端如何接收上传的文件信息和其他信息，根据element-ui文档，http-request可以自定义上传方法，会覆盖掉默认的上传。首先我们来看前端代码：<template> <div style="margin-top...
2018-09-04 14:11:41
4730
1
原创 jsonp跨域原理解析
背景：由于浏览器同源策略的限制，非同源下的请求，都会产生跨域问题，jsonp即是为了解决这个问题出现的一种简便解决方案。同源策略即：同一协议，同一域名，同一端口号。当其中一个不满足时，我们的请求即会发生跨域问题。举个简单的例子：http://www.abc.com:3000到https://www.abc.com:3000的请求会出现跨域（域名、端口相同但协议不同） http:/...
2018-09-01 19:25:07
74672
39
原创 moment.js时间戳与时间相互转换
举例时间：var time = new Date(); //Tue Aug 28 2018 09:16:06 GMT+0800 (中国标准时间)时间戳：var timestamp = Date.parse(time); //1535419062000 （Date.parse() 默认不取毫秒，即后三位毫秒为0）moment转时间：moment(time).valueOf(); //...
2018-08-28 09:25:46
188573
1
原创 js运算符优先级
优先级 运算类型 关联性 运算符 20 圆括号 n/a ( … ) 19 成员访问 从左到右 … . … 需计算的成员访问 从左到右 … [ … ] new (带参数列表) n/a new … ( … ) 函数调用 从左到右 … ( … ) 18 new (无参数列表) 从...
2018-08-13 16:44:32
578
原创 vue基础之过滤器(filter)的使用
使用方式：<!-- 在双花括号中 -->{{ message | formatDate }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatDate"></div>那么，我们该如何去写过滤器呢？接下来我们假定一种场景，后端返回的一个 时间列表大概是长下边这样的：[ ...
2018-08-07 18:03:06
27155
2
原创 Http协议基础
简介：HTTP协议，即超文本传输协议(Hypertext transfer protocol)。是一种详细规定了浏览器和万维网(WWW = World Wide Web)服务器之间互相通信的规则，通过因特网传送万维网文档的数据传送协议。HTTP协议是用于从WWW服务器传输超文本到本地浏览器的传送协议。它可以使浏览器更加高效，使网络传输减少，从而保证计算机正确快速地传输超文本文档。...
2018-07-18 14:08:59
316
原创 echarts散点图多点重合鼠标移入数据无法全部显示的解决办法
代码地址：https://github.com/BadMooncc/echarts-scatter转载注明出处：https://blog.csdn.net/badmoonc/article/details/80983854如若不想看我啰嗦，可以直接去项目查看代码，代码实现非常简单echarts散点图trigger设置为item的情况下，多个点重合在一起当我们鼠标指向该点时，数据只会显示...
2018-07-10 14:12:46
14907
4
原创 使用scp上传、下载服务器文件
linux 本地文件上传到服务器scp ~/desktop/demo.txt [email protected]:/root/scp <本地文件路径> username@服务器ip:<服务器文件路径>从服务器下载文件scp [email protected]:/root/demo.txt ~/desktop/scp username@服务器ip:<服务器文件路径...
2018-06-28 11:57:28
259
原创 git clone非master分支代码
举个例子，现在我们要clone dev分支的代码执行 git clone -b dev <仓库地址> 这样clone到本地的就是dev分支，可以通过git branch查看这样就完成了对指定分支到本地的clone，dev是远程仓库的分支名称，远程仓库一定要有这个分支 不然是不可以的。...
2018-06-27 17:12:31
3093
原创 mac下通过ssh脚本实现免账号密码连接运服务器
由于xshell没有mac的版本，其他的客户端也不想做尝试，于是查了一些mac连接服务器的方法。一般情况下，我们可以在mac的终端里使用ssh <username>@<ip> 这个命令来实现登陆服务器：如图中红线圈中的几行所示，通过简单的两部，即可连接上我们的服务器，但是这种方式存在一种问题，就是没办法保存密码和ip地址，如果我们的服务器有三四个，每次连接都要输...
2018-06-25 20:19:54
7973
1
原创 vue非父子组件通信
关于非父子组件通信的解决办法，vue的官网也有明确的说明，即：通过$emit和$on的方式进行通信。而我刚学习时，查了很多网上写的例子，对我这样的初学者还是不太友好，就像下面这种：简单一看，咦～这么简单（其实用法确实如此）。好，直接复制粘贴到自己的项目中去，然后才发现，我去～怎么不能用！。大家是不是像我一样是这么写的：组件A<script>import Vue from 'vue'...
2018-06-09 16:44:42
340
原创 原生js组件化开发简单轮播图实例代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2018-06-09 15:22:07
524
原创 js常用正则表达式
//1验证手机号 var reg_phone=/^[1][356789][0-9]{9}$/;//验证手机号 var phone=16657111330; console.log(reg_phone.test(phone),'verify phone'); //2 url参数转为json对象 var url='htt...
2018-05-22 17:03:47
265
原创 vue递归组件的用法
概念：组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。之前在写组件时总有些疑惑，为什么export default导出的对象中有个name属性，今天看过递归组件之后，才发现这个name属性的一个比较重要的作用。（当然。name属性的还有其他的用处）。用法：1、首先我们要知道，既然是递归组件，那么一定要有一个结束的条件，否则就会使用组件循环引用，最...
2018-05-20 11:21:04
50383
18
原创 git常用命令总结
1，git config --global user.name 'username' 设置用户名 git config --global user.email '[email protected]' 设置全局email2，git init 初始化版本库3，git status 查看当前状态4，git add 'filename' 将修改过的文件添加到暂存区5，git c...
2018-05-19 17:02:08
141
原创 移动端页面适配方案rem.js
var rem=(function(doc, win) { var docEl = doc.documentElement,//获取整个文档元素 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',//兼容safari和其他浏...
2018-05-18 17:08:20
1188
原创 浅谈promise对象的工作原理
推荐一篇讲解promise内部原理的博文，个人感觉讲的还是比较清晰的-《三十分钟让你彻底明白promise对象》然后配合下边的草图理解起来或许会容易些。本图如有问题，烦请指正。...
2018-05-18 16:55:35
1039
原创 mac下使用npm install -g name无法安装全局包的解决办法
mac下当我们装好node环境时，执行 npm install -g name命令时，通常回报错，刚接触mac的同学可能也会比较晕，如下图我们可以看到 permission denied这个报错，原因是权限不够。解决办法也很简单，我们使用sudo获取权限即可：sudo npm install -g name...
2018-05-17 12:20:52
8406
原创 vue入门项目实战
简要说明：本项目使用vue+vuex+vue-router+axios，比较适合vue初学者学习研究，项目实现也比较简单，对初学者学习比较友好。对于单纯想学习vuex的同学，也可以看一下，本项目使用vuex也比较简单，学习起来也会容易一些。如果此项目对您的学习有一定帮助，请把star点亮（非常感谢），我会在后期不断维护本项目。请直接点此链接进入https://github.com/BadMoonc...
2018-05-17 12:02:09
1731
原创 js相等运算符与严格相等运算符
最近在看js犀牛书巩固js的基础知识，突然感觉打开了新世界的大门。看到相等运算符(==)与严格相等运算符也叫恒等运算符(===)这一块时，觉得以前对这两个的了解真的是知之甚少。所以决定写篇文档，一方面可以在日后回顾，另一方面也希望有更多入坑的同学看到，能够对js的提升有所帮助。先来说下严格相等运算(既===)有哪些特性(区别特性在一下代码片段中详解)//1，如果两个值类型不同，则他们不相等，代码如...
2018-04-28 17:37:43
852
原创 一个新奇的数组排序方法
最近在复习基础知识的时候，看到Math对象的max方法时，突然想起来前一段经常看的数组排序方法，但是没有发现有用Math.max方法实现的排序，于是闲来无聊，就自己写了一个比较逗的排序方式，此排序法纯属娱乐，似乎我目前看起来也没什么实用价值，不过，还是写篇文章分享下思路，毕竟有点个人想法不容易。思路：通过利用Math.max()方法的特性(传入几个参数，返回其中最大一项)，我们可以把一个无序数组a...
2018-04-27 16:49:41
284
1
原创 js为动态添加的元素增加事件（事件委托）
我们在日常开发中有时会通过js创建一些元素，但是如果使用原始的for循环给创建的节点添加事件的方法往往行不通：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><
2017-10-17 12:59:38
7509
1
原创 linux服务器部署nodejs环境(阿里云centOS)
步骤：1.首先通过wget命令下载nodejs,(在此之前使用cd~进入用户的文件夹，这个路径就是在进入linux服务器时的默认路径)wget https://nodejs.org/dist/v8.6.0/node-v8.6.0-linux-x64.tar.xz这里下载的是最新版本的，有需要其他版本的可以自行改版本号即可2.解压node包tar xvf node-v6.9.5-linu
2017-10-17 11:55:56
832
原创 js遍历不规则的多维数组（json对象）
直接进入正文：我们有时候处理数据，可能会遇到一些不规则(无法预料的数据结构)，那么拿到这种数据我们如何进行遍历操作呢？举个例子：var data= { a: { one: 1, two: 2, three: {four:'2',five:'4'} }, b: { six: 4, seven: 5, eight: 6 }, c: { nine: 7, ...
2017-09-28 15:23:57
8958
3
原创 promise对象的简单用法
promise对象是es6中提出的解决异步回调的一种方案，作为一个新手，最近刚刚把这个玩意给弄明白些。来写这篇文章，希望能得到一些高人的指点，同时我也觉得对于新手不了解promise的朋友们会有一些帮助。废话不多说，关于介绍promise的话不多说了，有同学不明白的可以自行百度，本文只写一个promise的简单实例，相信稍微看过一些promise的朋友，但是对他又比较畏惧的(因为之前我不懂这个
2017-09-22 21:35:23
481
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人