web开发
Luck Young
个人网站https:/www.wlittleyang.com
展开
-
使用koa、Nginx处理vue项目的history模式
使用koa处理vue项目的history模式在vue项目的路由中默认是hash模式,又叫前端路由,根据浏览器url地址栏中的变化,使用onhashchange事件监听做出相应的操作,不会向服务器发送请求。但是若采用了history模式,就大大不同了,history不怕前进不怕后退就怕刷新,history模式是由浏览器提供的history api来处理。而且将vue项目(非ssr)打包后的静态资源...原创 2020-05-06 11:14:13 · 1378 阅读 · 0 评论 -
pm2常用命令
p2m常用命令pm2 start app.js # 启动app.js应用程序pm2 start app.js --name="demo" # 启动应用程序并命名为 "demo"pm2 start app.js --watch # 当文件变化时自动重启应用pm2 start script.sh # 启动 bash 脚本...原创 2020-03-10 10:18:37 · 393 阅读 · 0 评论 -
Mac 关于MongoDB数据库的安装和设置全局环境变量
下载进入官网点击Software选项选择社区版本(Community Server),选择好系统,点击下载。我这里也会附上官网给的链接,点击下载安装因为我们下载的是tgz格式,直接双击加压就好,然后将解压后的那一坨放在/usr/local这里面,也最好重新去个名字,可以使用mac的终端直接输入/usr/loca进入。然后可以有选择性的在此目录下创建一个文件夹(data/db)存放mongo...原创 2020-02-28 15:56:59 · 617 阅读 · 0 评论 -
关于vuex-router-sync的作用
我为什么要转载这篇文章呢?原因其实很简单,也是让人失望。事情的经过是这样的,我在别人的代码里看vuex-router-sync,我当时就在想为什么要用这个东西,这个东西可以解决什么问题,可以带来什么好处,在什么样的场景下需要用它,用它是不是会比其他方案更加方便。然后我首先还是选用了百度进行搜索,翻了3页,都没有找到一篇像样的问题,真正去说这个东西的作用,都是人云亦云,搜索了半天,终于看到了上面的链...转载 2020-02-19 11:37:36 · 812 阅读 · 2 评论 -
Vue中使用Vue.use注册全局插件-组件、指令、过滤器等
在Vue项目中我们往往会用到功用组件,使用在不同层次、不同地方的的组件,以至于我们每次都会去import组件并且使用components注册,如果是两个三个还能接受,但是比如element-ui框架中el-button这样的组件使用频率是非常的高,那就非常繁琐。Vue官方文档中给我们提供了在main.js中使用Vue.component()的方式注册全局组件,这样是很好的,但是在我看来不算...原创 2019-12-13 10:25:01 · 1067 阅读 · 0 评论 -
js 将数据按需分类
classifyDemand 函数说明该函可将数组按字段分类,并将字段或自定义名称作为索引便于查找,分类显示,大大提高了试图的遍历压力。函数体/** * @param arr 需要分类的数组 * @param value -> object | array * @param key -> string * @param nickName -> string *...原创 2019-12-10 13:39:43 · 675 阅读 · 0 评论 -
自定义组件实现双向绑定
在很多情况下我们都会使用到自定义组件的双向绑定,今天我这里使用vue的model属性来实现双向绑定,其实原理还是一样的,只是我觉得这样做会不那么繁琐。父组件<template> <child v-model="message" /></template>export default { data() { return { ...原创 2019-11-25 21:21:16 · 599 阅读 · 0 评论 -
简单封装Element-UI表单验证
我相信大家在使用element-ui框架的时候都避免不了使用它的表单组件,其中表单验证的使用频率颇高。由于自己工作的原因会使用到很多表单,而且都需要验证,而本人人又特别懒不想写那些重复代码,就连c、v键都不想使用。于是我对element-ui的表单验证进行了一定的封装。首先来看一下目录结构reg-exp-maven.js 存放正则表达式validate.js 写通用的校验方法val...原创 2019-11-22 16:59:04 · 1330 阅读 · 2 评论 -
eslint 配置参数表(中文解释)
eslint 配置参数,0是关闭,1是打开,[]里面配置详细格式"no-alert": 0,//禁止使用alert confirm prompt"no-array-constructor": 2,//禁止使用数组构造器"no-bitwise": 0,//禁止使用按位运算符"no-caller": 1,//禁止使用arguments.caller或arguments.callee"no...原创 2019-11-06 14:48:59 · 1953 阅读 · 0 评论 -
js实现根据最小值,截取数组
根据传递的最小值截取数组,并将其作为首位。在做分页的时候还是很有用的,在前端,有些时候为了页面能够美观,有时候列表数量不一致,这样就能控制分页的页码。// 传递的最小值截取数组并将最小值添加到首位function minArrSplice(min, arr) { if (!arr || arr.length < 2) return arr; let _index = 0; ...原创 2019-10-21 09:39:56 · 348 阅读 · 0 评论 -
JsZip+FileSaver实现打包文件并下载
这里使用jszip进行文件打包,可以创建文件夹,创建文件。然后使用FileSaver进行下载,这里使用FileSaver下载是因为这个工具可以下载大文件,而且效率非常高。一下代码示例,简单模块化了一下,为了能够上传下载文件。'use strict';import JsZip from 'jszip'import { saveAs } from 'file-saver'export cl...原创 2019-10-17 13:44:57 · 6755 阅读 · 0 评论 -
使用纯css实现类似于CSR方块排列
有需求就有方案。现在遇到一个问题是后台返回已经格式化好的CSR,但是在前端页面显示是不像在代码编辑器中一样会自定排版。之前看了有js方案的,传送门,这样解决是没问题,但是用来处理CSR的会出现一个问题就是会重新组合字符串的长度,但是这不是我们需要的,回溯到最初,布局本来就是CSS的事,我们先来看一张没有添加样式的CSR只能用一个“丑”来赞美了。接下来我就要传递秘籍了,直接上代码。...原创 2019-09-24 18:01:11 · 455 阅读 · 0 评论 -
js 服务器链接失败跳转错误页面处理
一般我们在处理请求服务的时候不免会遇到服务器连接不上的情况,而现在开发网站应用一般读书采用路由的方式,也非html静态文件开发,列入使用vue脚手架开发网站应用的时候,我们会将对请求服务器的操作进行封装到一个单独的文件,会用一个总的post或者get等方法。当我们请求服务端的时候如果返回的是服务器连接失败的情况想用路由跳转的指定的提示页面却发现就会出现两个Vue事例,这样跳转就没有意义的,完全无效...原创 2019-09-04 14:32:42 · 2586 阅读 · 0 评论 -
输入框实时搜索、查询(截流函数)
在检索数据的时候需要当输入完内容之后就开始自动请求接口查询结果,但却不是onchange这种观察的方式,性能上是不行的。截流函数使用的是监听键盘事件,停止敲击键盘后一定时间便自动请求接口。如下: //截流函数 const delay = (function() { let timer = 0; return function(callback, ms) { ...原创 2019-08-28 16:00:46 · 1162 阅读 · 0 评论 -
简单又实用的css提取器(Chrome扩展程序)
cssviewer可以说是一款非常好的Chrome上css提取器插件,一键点击,一键选择,可以支持抓去dom,style,dom-id,dom-class等等。Google 商城传送门GitHub 项目传送门下面就是随便抓了写这篇文章的页面的一个dom样式...原创 2019-08-08 23:34:09 · 3557 阅读 · 1 评论 -
vue+wangEditor使用
vue + wangEditor 小试牛刀在新的后台管理项目中由于需要对文章、商品进行一些相关编辑,于是加入了富文本编辑器,最先是用了vue-quill-editor,发现界面有点难看,后来换ckeditor,试了好几个npm包,后来没有实现:( 全是泪,后来想起之前一个网友推荐的wangeditor这个编辑器,在官网看了一下,介绍的很详细,下面就来看看再下是如何实现的,由于刚刚开始用,目前功能...转载 2019-08-02 10:05:45 · 2711 阅读 · 0 评论 -
js获取视窗的常用属性和功能总结
网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth (包括边线的宽)网页可见区域高:document.body.offsetHeight (包括边线的宽)网页正文全文宽:document.body.scrollWidth网页正文全...转载 2019-07-19 17:58:03 · 538 阅读 · 0 评论 -
ts封装格式化时间
之前一直在用js时间工具,往往用Date.prototype.format的方式来封装,虽然代码量上会比ts少,但是为什么还用ts封装,自然是为了提高B格呀!最近一段时间迷恋上了ts,之前写了一年的java现在用上这玩意儿真是慢慢的回忆啊,每一次写构造函数、getter和setter方法的时候都会想起最初的java导师为我们讲解这两个的区别,功能,优化,现在感觉真的很感谢当时的松哥!废话说完了就来...原创 2019-07-12 00:11:59 · 4764 阅读 · 0 评论 -
作为前端内网穿透我推荐localtunnel
在做开发的时候避免不了测试、调试、接口对接……等等流程,内网穿透是一种好的解决方案。什么是内网穿透?我就简单的解释一下:将本地地址映射到一个公共地址,让其他用户也能访问。原创 2019-07-13 21:53:51 · 1471 阅读 · 0 评论 -
ES6入门
安装ES6环境ES6是需要依赖与node上运行的,虽然现在很多浏览器也支持了不少ES6的语法,但是为了兼容我们可以将ES6转换成es5然后再向浏览器输出。使用Babel转换ES6首先我们再根目录初始化一下:1.首先在根目录创建src和dilst文件夹,src下创建一个index.js(用来写ES6)-src //用于编码 --index.js-dilst //用于输出2...原创 2019-07-13 16:15:56 · 239 阅读 · 0 评论 -
关于jsp引入jquery插件时jquery插件报错解决方案
在一次web项目开发中,我的界面需要用到jquery插件,但是将jquery插件引入web项目时jquery文件出现了一个小红叉,点进jquery源码看是关于.catch的一个错误,应该是与jsp中的代码发生了冲突。我在网上搜寻了诸多例子,发现了下面这种解决方案,于是分享给大家:先看我的结构点进源码可以看见.catch的错误在出现小红叉的jquery文件处鼠标右键点原创 2017-11-20 09:58:33 · 717 阅读 · 0 评论 -
使用IntelliJ IDEA Community Edition 2017.3.3创建Maven项目
工具: IntelliJ IDEA(专业版),maven3.x 、jdk1.7+步骤1,做完图中的5个步骤将就选择Next步骤2做完图中的2个步骤将就选择NextGroupID和ArtifactID说明:https://zhidao.baidu.com/question/511003382.html项目根目录说明:http://blog.csdn.net/yangha原创 2018-02-01 00:17:02 · 1009 阅读 · 0 评论 -
URL:bootstrap.min.css.map
在做一个jsp练习的时候遇到引入bootstrap.css的时候出现了URL:bootstrap.min.css.map 404的错误。解决办法:删除bootstrap.min.css文件内容最后一行/*…………*/内容即可详细见:http://www.3021.com.cn/bootstrap-css-map-404/转载 2018-01-24 20:47:08 · 14013 阅读 · 3 评论 -
CSS实现DOM两边延伸效果
今天在做开发的时候突发奇想做一个鼠标放上去,底部边框向两边延伸的动画效果。主要思想是用DOM的伪元素来代替它自身的border,然后设置伪元素的width和height的动画效果。代码如下:html:<div id="box"> <div>摸我</div></div>css:<style type="text/css">原创 2018-07-10 10:47:27 · 2301 阅读 · 0 评论 -
Less 循环
Less循环可以设置参数的值,也可以生成类,在CSS3动画中真是6得不要不要的。下面我就实现一个分页符的响应式,在>896px的屏幕下显示10个数字按钮,小于只显示5个数字分页按钮。1、首先我们先设置循环函数 /*隐藏大于5 的分页符*/ .hidden-numBtn(@n , @i : 5) when (@i <= @n){ li:nth-chi...原创 2018-07-20 15:48:33 · 1926 阅读 · 0 评论 -
五个技巧写出更好的js条件语句
解决JavaScript中不必要的条件嵌套,多余判定,参数设置,以及参数不确定性。<script> 'use strict'; //1.使用Array.includes来处理多重条件 /** * 如果我们要找到符合我们需要的鞋子 * 符合的有"Asics" , "Nike" , "Adidas"...原创 2018-10-11 16:43:05 · 497 阅读 · 0 评论 -
ES6新增语法
九个ES6新增语法的使用和演示为了测试使用class定义类来便于调用测试,代码可以之间粘贴复制使用Let声明关键字 Const声明关键字 箭头函数 默认参数 For…of…循环 展开属性 Map集合 静态方法 Getter和Setter方法class Method { //构造方法 constructor(){ Method.a = 1;...原创 2018-10-22 09:07:39 · 1006 阅读 · 0 评论 -
js将一个数组分割成多个子数组
在做一个项目的时候需要将得到的json数据分组显示,于是自己写了个算法。将一个长数组分割成许多小数组保存起来。/** * 分割数组创建二维数组封装 * @param data 数组 * @param senArrLen 需要分割成子数组的长度 */let splitArr = (data , senArrLen)=>{ //处理成len个一组的数据 let d...原创 2018-11-01 16:25:57 · 17270 阅读 · 1 评论 -
CSS圣杯布局(双飞翼布局)
我在网上看了有关于css圣杯布局的文章,有很多直接丢代码给效果,看得我云里雾里。首先按我的理解来讲述一下圣杯布局吧。首先他的作用就是:像淘宝网那样,中间先渲染,两边后渲染,其次中间的内容是自适应高度的。最好的例子就是淘宝网了。样式:1.三列布局2.中间板块先渲染,自适应高度宽度3.两边定宽那我们就开始实现,HTML代码 <div> &l...原创 2019-04-21 11:52:54 · 293 阅读 · 0 评论 -
css中z-index失效的问题
今天用css做一个效果在本地文件的时候是可以实现的,但是在Vue框架的时候就不会出现的大BUG,因为Vue的节点都是渲染出来的,在以下情况会导致z-index失效父标签 position属性为relative; 问题标签无position属性(不包括static); 问题标签含有浮动(float)属性。解决这类问题的方法就比较残忍了,也是三种方式position:relative改为...原创 2019-05-03 15:51:13 · 891 阅读 · 0 评论 -
Vue获取(返回)上一个路由
Vue获取上一个路由或者说返回到上一个路由可以用三种方法实现1.使用钩子函数beforeRouteEnterbeforeRouteEnter(to, from, next) {}以及其他两个钩子函数请看:https://www.cnblogs.com/lhl66/p/9195901.html关于路由守卫,每个路由是又独立守卫的:https://www.jianshu.com/p/...原创 2019-05-25 08:52:22 · 20925 阅读 · 0 评论 -
css实现凹圆圈,小透明
先来效果图实现优惠券的方式来展示,直接上代码,css我用了less.coupons{ width: 100%; height: 100px; margin: 15px 0; position: relative; display: flex; justify-content: space-between; ...原创 2019-05-24 11:30:58 · 2975 阅读 · 3 评论 -
Vue 路由拦截(登陆拦截---没登陆不能访问其他页面,登陆后不能访问登陆页面)
vue不断填坑中,首先要在需要拦截的路由添加meta: {requireAuth: true},然后使用路由钩子函数beforeEach拦截处理。import Router from 'vue-router'const routes = [ { path: '/controlPanel', name: 'ControlPanel', ...原创 2019-06-17 15:41:59 · 7973 阅读 · 5 评论 -
axios的基本使用
axios的使用模板axios({ url : './source', method : 'GET', data : {id : '123'}, responseType : 'json', timeout : 1000 }).then((res)=>{ console.log(res); }).catch((err)=&g...原创 2019-06-17 15:43:34 · 310 阅读 · 0 评论 -
解决webpack使用ip访问
设置如下,既可以用ip又可以用localhost访问原创 2019-06-12 08:22:19 · 4208 阅读 · 0 评论