- 博客(41)
- 收藏
- 关注
RSS订阅原创 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
488
原创 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
527
原创 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
20460
原创 给Echarts地图的tooltip添加按钮
tootip配置自定义内容并提供按钮可点击查看详细信息效果如下图所示：思路：tooltip的formatter支持自定义提示框浮层内容，可在此处自定义显示内容及按钮给按钮绑定事件，触发时调用method中的方法。该方法中去做地图容器的事件监听，在回调函数中处理路由跳转显示详细信息。<template> <div id="map"></div>...
2020-03-01 14:46:10
4606
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
1318
1
原创 四种gulp增量编译方式
在编译过程中，可能会出现不必要的编译，我们希望只对修改过的文件进行编译，即 增量编译。目前，用于增量编译的插件有gulp-changed,gulp-newer,gulp-cached+gulp-remember。接下来，就来试试上述插件。首先，笔者测试使用的文件目录如下：接着，在gulpfile.js文件中进行如下定义const {task, src, watch, series, p...
2019-10-09 16:30:52
862
原创 使用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
149
转载 滚动条的浏览器兼容问题
谷歌浏览器谷歌可设置大部分滚动条样式，但是无法设置内嵌式滚动条，如下图：/*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1）width指竖向滚动条宽度 height指横向滚动条高度*/::-webkit-scrollbar{ width:10px; height:10px;}/*滚动条两端的按钮，可以...
2019-05-28 21:55:56
1957
原创 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
12017
原创 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
34369
1
原创 vue实现二级菜单的显示或隐藏
场景：二级菜单用html写死的，而不是以通过data和v-for动态生成的今天在实现的过程中，出现了问题。实现思路如下：data中设置menuIsShow为一个数组，数组的元素为boolean值，表示一级菜单是否显示或隐藏。在html中对应的二级菜单元素上绑定menuIsShow的值，如:class="{showItem:menuIsShow[0]}"，然后在对应的一级菜单元素上绑定事件改变...
2018-10-11 17:35:50
6768
原创 基于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
1134
3
原创 axios攻略
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Features从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRFaxios有两种用法。// 为给定 ID 的 user ...
2018-09-19 14:36:44
207
原创 设置div高度为浏览器可视窗口的高度
div { position:absolute; top:0; left:0; height:100%;}
2018-09-19 10:27:35
7654
原创 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
2876
1
原创 Vue2进阶知识点
数据与方法当一个Vue 实例被创建时，它向Vue的响应式系统中加入了其 data对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。// 我们的数据对象var data = { a: 1 }// 该对象被加入到一个 Vue 实例中var vm = new Vue({ data: data})// 获得这个实例上的属性// 返...
2018-09-09 18:10:48
612
原创 提交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
1708
原创 vue2学习小计
双向数据绑定原理：通过数据劫持结合发布者-订阅者模式的方式实现 具体：首先对数据进行劫持监听（使用Object.defineProperty），设置一个监听器Observer，用来监听所有属性。当属性发生变化，订阅者Watcher收到属性的变化通知并执行相应的函数，从而更新视图。解析器Compile扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。 直通车指令及...
2018-08-21 16:21:46
233
转载 单点登陆
原文地址登陆：相比于单系统登录，sso（单点登录Single Sign On）需要一个独立的认证中心，只有认证中心能接受用户的用户名密码等安全信息，其他系统不提供登录入口，只接受认证中心的间接授权。间接授权通过令牌实现，sso认证中心验证用户的用户名密码没问题，创建授权令牌，在接下来的跳转过程中，授权令牌作为参数发送给各个子系统，子系统拿到令牌，即得到了授权，可以借此创建局部会话，局部...
2018-08-21 10:17:55
266
原创 vue2实战：在线翻译
源码参考:https://blog.csdn.net/qq_35788269/article/details/80655985 项目实现的功能就是左侧输入框输入需要翻译的内容，右侧输入框选择要转换的语言，点击翻译按钮就可以得到翻译的结果并显示在下方！ 这个项目对于初学vue的小伙伴来说刚刚好，比较简单，能够练习配置项目环境，简单的使用vue，子组件如何向父组件传递数据等。首先，列出这个项目...
2018-08-06 15:53:54
499
1
转载 对Vue.nextTick()和mounted()的理解
Vue.nextTick()在Vue生命周期的created()函数中进行DOM操作是要放在Vue.nextTick()回调函数中。原因就是created()在执行的时候DOM只是创建出来并没有渲染在页面上，因此页面上没有这个元素也就无法对其进行操作。当页面进行某个操作后，部分DOM随数据的改变而改变，这个时候就应该将这个操作放在Vue.nextTick()的回调函数中执行。mount...
2018-07-27 09:43:00
6184
原创 初始学习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
135
原创 js实现上传图片并显示的两种实现方式(无需上传到服务器再显示)
方法一：<input type='file' id='chooseFile'><img src='' id='picToCheck'/>document .querySelector('#chooseFile') .addEventListener('change', function(){ //当没选中图...
2018-04-09 11:42:13
1166
原创 angular数据双向绑定原理
数据双向绑定就是页面操作实时反应到数据，数据变化实时显示在页面通过编写代码，将从服务器获取的数据进行处理，然后展现到视图上。每当数据有变更时，我们会再次进行渲染，从而更新视图，使得视图与数据保持一致。页面则通过用户的交互，产生状态、数据的变化，这个时候，通过代码，将视图对数据的更新同步到数据，进而同步到后台服务器。原理：页面中每绑定一个数据或者事件时，就会向$watch队列中加入一条$watch,...
2018-03-09 11:11:37
3808
原创 阻止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
928
转载 禁止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
5905
原创 清除浮动造成的父元素高度坍塌的影响
父元素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
364
原创 数组的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
513
原创 css实现超出文本...显示
.ell { text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
2017-08-22 10:39:13
388
原创 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
296
原创 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
279
转载 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
381
原创 Javascript报uncaught typeerror illegal invocation错误
在用ajax向后台传值的时候把一个对象当作参数传上去了
2017-08-16 18:02:06
404
原创 阻止事件冒泡和浏览器默认行为，考虑兼容性
//事件冒泡function stopBubble(e) {//如果提供了事件对象，则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则，我们需要使用IE的方式来取消事件冒泡 win
2017-08-16 17:57:25
619
原创 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
1145
原创 redhat命令操作（四）
用户如何存在于系统当中/etc/passwd //用信息文件用户名称：用户密码：用户uid：用户gid：用户说明：用户家目录：用户使用的shell/etc/shadow //用户认证信息用户名称：密码：密码使用天数：最短有效期：密码最长有效期：密码警告期：密码非活跃期：密码到期日：
2016-10-30 22:32:04
385
原创 redhat命令操作(三)
man命令man 级别 目标man 1 文件名 //查找命令的帮助man 5 文件名 //查找配置文件的帮助man 退出 //按qman的快捷用法/关键字 //搜索关键字并且高亮显示结果（直接在man里面按/）n
2016-10-30 22:30:48
423
原创 redhat命令操作（二）
linux系统结构1.linux系统结构是倒树型2./bin //二进制可执行文件也就是系统命令/sbin //系统管理命令存放位置/boot //启动分区，负责系统启动/dev /
2016-10-30 22:16:03
353
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人