- 博客(41)
- 收藏
- 关注
原创 webpack搭建本地服务及自动刷新浏览器
搭建本地服务首先,在项目中安装webpack-dev-servernpm install webpack-dev-server -D在package.json文件中添加如下:{ "scripts":{ "dev":"webpack-dev-server --hot" }}(–hot指启动模块热替换,会自动添加webpack.HotModulePeplacementPlugin...
2020-03-11 22:30:44
498
原创 webpack常用配置整理(Loaders&Plugins)
图片处理url-loader将图片转换为base64 URIfallback指定当目标文件的大小超过limit选项中设置的限制时要使用的替代加载程序。options:{ fallback: 'file-loader'}limit最大文件大小,单位bytesfile-loader处理使用import('url')、require('url')引入的文件,将引入的文件输出至ou...
2020-03-05 22:40:35
541
原创 npm install webpack报错if you are behind a proxy,please make sure that the proxy cinfig is setproperly
npm install webpack -g报错if you are behind a proxy,please make sure that the 'proxy' cinfig is set properly.错误信息提示:若配置了代理,请确认代理被合理配置。因此去设置npm代理执行npm config set proxy http://proxy.example.com:8080参考...
2020-03-05 15:48:19
20633
原创 给Echarts地图的tooltip添加按钮
tootip配置自定义内容并提供按钮可点击查看详细信息效果如下图所示:思路:tooltip的formatter支持自定义提示框浮层内容,可在此处自定义显示内容及按钮给按钮绑定事件,触发时调用method中的方法。该方法中去做地图容器的事件监听,在回调函数中处理路由跳转显示详细信息。<template> <div id="map"></div>...
2020-03-01 14:46:10
4695
3
原创 echarts4+bmap+vue2地图显示不出来
在vue单页应用中,ak认证的获取需放在index.html的head里,否则地图将显示不出来。index.html<head> <meta charset="utf-8"> <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=S4KKfPTez9LK...
2020-02-29 18:41:24
1336
1
原创 四种gulp增量编译方式
在编译过程中,可能会出现不必要的编译,我们希望只对修改过的文件进行编译,即 增量编译。目前,用于增量编译的插件有gulp-changed,gulp-newer,gulp-cached+gulp-remember。接下来,就来试试上述插件。首先,笔者测试使用的文件目录如下:接着,在gulpfile.js文件中进行如下定义const {task, src, watch, series, p...
2019-10-09 16:30:52
892
原创 使用gulp构建项目
常用的npm包glob通配符匹配文件名gulp-clean删除文件gulp-uglify压缩js文件gulp-babel编译es6gulp-concat合并文件gulp-lessless预处理gulp-autoprefixercss兼容性处理gulp-clean-css压缩cssgulp-if条件判断gulp-connect搭建前端服务,支持热更新yargs命令行参数解析工...
2019-07-08 15:11:17
155
转载 滚动条的浏览器兼容问题
谷歌浏览器谷歌可设置大部分滚动条样式,但是无法设置内嵌式滚动条,如下图:/*滚动条整体部分,其中的属性有width,height,background,border等(就和一个块级元素一样)(位置1)width指竖向滚动条宽度 height指横向滚动条高度*/::-webkit-scrollbar{ width:10px; height:10px;}/*滚动条两端的按钮,可以...
2019-05-28 21:55:56
1996
原创 css奇淫巧计
纯css实现半圆 width:100px; height:200px; background-color:red; border-radius:100px; border-top-left-radius:100px; border-bottom-left-radius:100px;纯css实现文字渐变色动画效果<div class="list"> <span...
2019-04-28 16:21:24
12033
原创 vue登录时点击登录之后显示cannot post/
框架:vue请求插件:axios场景:实现登录功能错误场景:点击登录按钮之后,页面跳转并显示cannot post/,请求后台的接口未被调用。源码如下:<form method="post" action="" class="layui-form" > <input name="username" placeholder="用户名" type
2018-10-18 17:59:27
36339
1
原创 vue实现二级菜单的显示或隐藏
场景:二级菜单用html写死的,而不是以通过data和v-for动态生成的今天在实现的过程中,出现了问题。实现思路如下:data中设置menuIsShow为一个数组,数组的元素为boolean值,表示一级菜单是否显示或隐藏。在html中对应的二级菜单元素上绑定menuIsShow的值,如:class="{showItem:menuIsShow[0]}",然后在对应的一级菜单元素上绑定事件改变...
2018-10-11 17:35:50
6843
原创 基于vue-cli+vue2+vuex+vue-router的仿简书官网项目
由于guthub库搜索vue2项目大部分都是移动端,因此本人仿照简书官网做了pc端的实操项目。本项目为纯前端实现,所有数据均为前端自造。且仅实现了部分功能。github源码地址 https://github.com/Tempta36/fangjianshu/项目成果环境搭建npm install --gloabal vue-cli //全局安装vue-clivue init...
2018-10-09 14:52:30
1149
3
原创 axios攻略
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。Features从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRFaxios有两种用法。// 为给定 ID 的 user ...
2018-09-19 14:36:44
217
原创 设置div高度为浏览器可视窗口的高度
div { position:absolute; top:0; left:0; height:100%;}
2018-09-19 10:27:35
7684
原创 vue-cli配置反向代理解决跨域及过程理解
vue-cli提供了配置反向代理的接口,即设置config/index.js中的proxyTable。配置如下:dev: { ...... proxyTable: { '/api':{ //将www.exaple.com印射为/apis target:'https://www.exaple.com', //跨域地址 change...
2018-09-19 10:21:16
2900
1
原创 Vue2进阶知识点
数据与方法当一个Vue 实例被创建时,它向Vue的响应式系统中加入了其 data对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。// 我们的数据对象var data = { a: 1 }// 该对象被加入到一个 Vue 实例中var vm = new Vue({ data: data})// 获得这个实例上的属性// 返...
2018-09-09 18:10:48
626
原创 提交mutations之后,state的值没有发生变化
vuex相关代码(user.js)let users = [ {"username":"Lucy","password":"123456","login":false}, {"username":"qweasd","password":"123456","login":false}, {&quo
2018-08-27 20:13:41
1786
原创 vue2学习小计
双向数据绑定原理:通过数据劫持结合发布者-订阅者模式的方式实现 具体:首先对数据进行劫持监听(使用Object.defineProperty),设置一个监听器Observer,用来监听所有属性。当属性发生变化,订阅者Watcher收到属性的变化通知并执行相应的函数,从而更新视图。解析器Compile扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。 直通车指令及...
2018-08-21 16:21:46
248
转载 单点登陆
原文地址登陆:相比于单系统登录,sso(单点登录Single Sign On)需要一个独立的认证中心,只有认证中心能接受用户的用户名密码等安全信息,其他系统不提供登录入口,只接受认证中心的间接授权。间接授权通过令牌实现,sso认证中心验证用户的用户名密码没问题,创建授权令牌,在接下来的跳转过程中,授权令牌作为参数发送给各个子系统,子系统拿到令牌,即得到了授权,可以借此创建局部会话,局部...
2018-08-21 10:17:55
280
原创 vue2实战:在线翻译
源码参考:https://blog.csdn.net/qq_35788269/article/details/80655985 项目实现的功能就是左侧输入框输入需要翻译的内容,右侧输入框选择要转换的语言,点击翻译按钮就可以得到翻译的结果并显示在下方! 这个项目对于初学vue的小伙伴来说刚刚好,比较简单,能够练习配置项目环境,简单的使用vue,子组件如何向父组件传递数据等。首先,列出这个项目...
2018-08-06 15:53:54
557
1
转载 对Vue.nextTick()和mounted()的理解
Vue.nextTick()在Vue生命周期的created()函数中进行DOM操作是要放在Vue.nextTick()回调函数中。原因就是created()在执行的时候DOM只是创建出来并没有渲染在页面上,因此页面上没有这个元素也就无法对其进行操作。当页面进行某个操作后,部分DOM随数据的改变而改变,这个时候就应该将这个操作放在Vue.nextTick()的回调函数中执行。mount...
2018-07-27 09:43:00
6236
原创 初始学习vue2时整理的小知识点
1.让webpack+vue-cil项目不再自动打开浏览器打开 /config/index.js 中设置如下autoOpenBrowser: false2.superagent组件相当于jquery的ajax,提供了非常方便的api接口3.配置运行端口打开 /config/index.js 中 port 的值...
2018-07-26 16:35:20
154
原创 js实现上传图片并显示的两种实现方式(无需上传到服务器再显示)
方法一:<input type='file' id='chooseFile'><img src='' id='picToCheck'/>document .querySelector('#chooseFile') .addEventListener('change', function(){ //当没选中图...
2018-04-09 11:42:13
1195
原创 angular数据双向绑定原理
数据双向绑定就是页面操作实时反应到数据,数据变化实时显示在页面通过编写代码,将从服务器获取的数据进行处理,然后展现到视图上。每当数据有变更时,我们会再次进行渲染,从而更新视图,使得视图与数据保持一致。页面则通过用户的交互,产生状态、数据的变化,这个时候,通过代码,将视图对数据的更新同步到数据,进而同步到后台服务器。原理:页面中每绑定一个数据或者事件时,就会向$watch队列中加入一条$watch,...
2018-03-09 11:11:37
3841
原创 阻止a链接默认行为(不刷新页面更新验证码)
使用jquery在a点击事件中阻止默认行为不起作用,依旧会刷新页面,如下$('a').on('click',function(e){ var ev = e||window.event; ev.preventDefault();});将a写为如下形式,可以实现不刷新页面更新验证码<a href="javascript:void(0)"></a>
2017-09-20 22:35:09
950
转载 禁止Ctrl+鼠标滚轴浏览器页面缩放
document.onmousewheel = function (evt) { var e = evt || window.event; if(e.preventDefault && e.ctrlKey) e.preventDefault(); if(e.ctrlKey) e.returnValue = false; }; if (w
2017-08-30 18:27:08
5953
原创 清除浮动造成的父元素高度坍塌的影响
父元素float:left<div style="float:left"> <img style="float:left"></div>父元素position:absolute<div style="position:absolute"> <img style="float:left"></div>父元素display:inline-block<div style="disp
2017-08-24 11:06:05
378
原创 数组的forEach()和jquery的each()
//数组的forEach()//内部的this指向windowvar arr=[];arr.forEach(function(val,index){});//jquery的each()//内部的this指向遍历的每一个值$.each(arr,function(index,val){});$.each(obj,function(key,val){});$(arr).each(functi
2017-08-24 10:53:55
522
原创 css实现超出文本...显示
.ell { text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
2017-08-22 10:39:13
399
原创 css公用
body { margin: 0; padding: 0; font-family: "FZLT_Default","Source Han Sans","Segoe UI"; font-size: 14px; text-align: center; color: #000; min-width: 1030px; background: #eee;}a {
2017-08-18 16:46:31
317
原创 gulp插件
js文件压缩 gulp-uglifyvar gulp = require('gulp'), uglify = require("gulp-uglify");gulp.task('minify-js', function () { gulp.src('') // 要压缩的js文件 .pipe(uglify()) //使用uglify进行压缩,更多配置请参考: .
2017-08-18 14:55:12
295
转载 jquery 解决ie9及以下版本不支持placeholder属性
//解决ie9及以下版本不支持placeholder属性$.fn.placeholder = function(options) { var opts = $.extend({}, $.fn.placeholder.defaults, options); var isIE = document.all ? true : false; return this.each(fu
2017-08-17 18:40:08
393
原创 Javascript报uncaught typeerror illegal invocation错误
在用ajax向后台传值的时候把一个对象当作参数传上去了
2017-08-16 18:02:06
421
原创 阻止事件冒泡和浏览器默认行为,考虑兼容性
//事件冒泡function stopBubble(e) {//如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则,我们需要使用IE的方式来取消事件冒泡 win
2017-08-16 17:57:25
640
原创 ajax post表单后 url会变为url?id=%d%5c
ajax post表单后 url会自动改变。如下: 提交前:localhost:3000/ 提交后:localhost:3000/?user%5Bname%5D=%E5%A4%A7%E6%B4%92%E5%BA%97解决方法1:$('#form-signup').on('submit', function(ev) { ev.stopPropagation(); ev.preventDef
2017-08-16 17:54:33
1178
原创 redhat命令操作(四)
用户如何存在于系统当中/etc/passwd //用信息文件用户名称:用户密码:用户uid:用户gid:用户说明:用户家目录:用户使用的shell/etc/shadow //用户认证信息用户名称:密码:密码使用天数:最短有效期:密码最长有效期:密码警告期:密码非活跃期:密码到期日:
2016-10-30 22:32:04
400
原创 redhat命令操作(三)
man命令man 级别 目标man 1 文件名 //查找命令的帮助man 5 文件名 //查找配置文件的帮助man 退出 //按qman的快捷用法/关键字 //搜索关键字并且高亮显示结果(直接在man里面按/)n
2016-10-30 22:30:48
444
原创 redhat命令操作(二)
linux系统结构1.linux系统结构是倒树型2./bin //二进制可执行文件也就是系统命令/sbin //系统管理命令存放位置/boot //启动分区,负责系统启动/dev /
2016-10-30 22:16:03
373
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人