- 博客(41)
- 收藏
- 关注
RSS订阅原创 Docker 安装 OpenLDAP 和 phpLDAPadmin
1.启动Docker2. 拉取镜像命令：docker pull osixia/openldap3.运行镜像docker run -p 389:389 --name myopenldap --network bridge --hostname openldap-host --env LDAP_ORGANISATION="sugar" --env LDAP_DOMAIN="sugar.com" --env LDAP_ADMIN_PASSWORD="ldap123" --detach ..
2022-03-29 21:01:08
1315
1
原创 Mac 安装 Docker
1. 进入官网Docker Hubhttps://hub.docker.com/editions/community/docker-ce-desktop-mac?spm=a2c4e.10696291.0.0.4cc619a4P4aEnL2. 下载 安装包这里有两个选项，根据自己电脑配置下载合适的安装包例如，我的电脑时intel ，下载intel安装包3.下载 Docker.dmg安装文件，直接双击安装完成就可以了...
2022-03-24 11:36:27
1510
原创 mac os 安装启动redis
步骤如下：1.去官网下载最新版本redishttps://redis.io/download2.解压到指定目录/Documents/redis-6.2.6(个人习惯放在Documents文件夹下)3.进入命令行窗口，cd到/Documents/redis-6.2.64.编译测试：sudo make test5.编译安装：sudo make install这里这个报错是什么原因，再研究一下，但是不影响运行6.启动服务：.src/redis-server...
2021-11-25 16:52:50
1487
原创 git pull 错分支如何撤销
1.执行it reflog 命令查看你的历史变更记录，如下：2.执行git reset --hard 回退到某个节点
2021-08-30 15:23:15
1170
原创 vue.config.js配置
// vue.config.jsconst path = require('path');const config = require('./src/config/server');const DIST_PATH = path.resolve(__dirname, './dist');const DEBUG = process.env.NODE_ENV === 'development';module.exports = { indexPath: DEBUG ? 'index.html' :.
2020-08-25 14:22:17
924
原创 Canvas + CSS3实现可视化项目开场动画
一、背景：在最近的可视化项目中，视觉设计采用钢铁的写实风格，整体页面布局为左中右，动效需要实现在刚进入页面时，左右板块撞向中间板块，产生撞击光效和火花飞散的动画效果。二、实现思路：需要考虑以下几个方面：整体页面的布局，左中右三个板块需要独立，分别绝对定位，不要耦合在一起； 使用css3实现撞击动效； 使用canvas绘制撞击后的火光和火花，光效可以径向渐变，火花飞舞的运动轨迹分别是左右方向的匀减速运动，上下方向的匀减速和匀加速，最后到飞舞消散的过程，粒子大小随机三、实现过程： 1.
2020-07-18 10:05:58
1212
3
原创 GIS地图描边特效的实现
先占个坑，有时间详细讲解先看实现效果思路•加载json•绘制闭合线，也称线环：该对象是闭合的（首尾坐标相同）•绘制面状几何体•添加矢量地理要素类地图选择器http://datav.aliyun.com/tools/atlas/#&lat=31.728167146023935&lng=104.2822265625&zoom=4阿里云提供的地理信息接口...
2020-07-17 09:31:11
2267
1
原创 可视化项目序列3D翻牌动效实现
一、背景：在最近的数据看板可视化项目中，需要实现人员信息卡片序列翻动的动效，本文主要介绍该动效的实现原理和过程。二、实现思路：1.要想实现双面翻转，首先需要定义一个3D盒子；2.3D盒子中正反重合放置两张卡片，均正面朝外；3.利用CSS旋转动效实现3D盒子的翻转；4.序列化翻转需要设置时间差。三、实现过程：1.定义3D dom，包含3D容器，相对容器，正面卡牌，反面卡牌2.样式设置，css的运用(1)外层容器的样式：transform-style ..
2020-07-17 09:22:59
587
原创 json-server模拟接口请求过程
一、背景前后端分离已经成为项目的标准开发模式，通过前后端分离，极大地提高了开发效率和开发能力。二、问题引入作为前端，在后端接口还没有提供的情况下，不可避免地要使用mock的数据。有时候，我们可以使用静态json数据来做mock，但有时候，我们并不想使用静态json数据，而是希望自己起一个本地的mock-server来完全模拟请求以及请求回来的过程。json-server是一个...
2019-12-03 20:09:33
1322
1
原创 Vue-set解决数组变化不触发视图更新问题
Vue是通过Object.defineProperty()来实现双向数据绑定的。把一个普通 JavaScript 对象传给 Vue 实例的data选项，Vue 将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为 getter/setter。每个组件实例都有相应的watcher实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的...
2019-09-12 16:57:05
3131
原创 js遍历对象数组并为每一项添加新属性
let arry = this.tableData let arryNew = [] arry.map((item, index) => { arryNew.push(Object.assign({}, item, { lineId: 1 })) })以上代码遍历数组tableData，并为每一项加入一个新属性lineId ...
2019-09-12 16:50:37
13839
1
原创 前端js实现表格数据的上移下移
vue项目需求中需要前端实现表格行数据的上移下移，效果如下实现思路：主要使用前端对数组的操作方法splice()代码： tableData: [{ name: '1', id: '1' }, { name: '2', id: '2' }, { name: '3', ...
2019-09-12 16:44:03
2852
2
原创 js根据经纬度坐标计算两点之间的距离
getDistance: (lat1, lng1, lat2, lng2) => { var radLat1 = lat1 * Math.PI / 180.0 var radLat2 = lat2 * Math.PI / 180.0 var a = radLat1 - radLat2 var b = lng1 * Math.PI / 180.0 - lng2...
2019-09-12 16:29:57
2445
1
原创 css实现序列帧闪电动效
先看效果：实现原理1、需要视觉设计师提供一张雪碧图，包含多张动画状态，也就是所谓的序列帧，依次排列在一张图上；2、前端通过css去改变背景图的位置；3、将动画持续反复，类似于我么小时候玩过的翻书小动画；代码：<div class="rightLighting"></div>.rightLighting{ width:86px; ...
2019-07-19 17:01:34
1661
原创 css实现呼吸灯动效
先看效果：实现原理：改变图片的透明度代码： <div class="breath"></div>.breath { width: 8%; height: 77%; position: absolute; right: 19px; top: 17px; background: url("../../assets/image/dru...
2019-07-19 16:39:46
2575
原创 echarts实现带光圈的环形图
实现效果：实现原理：图层的叠加（1）多个环形图的叠加（2）环形图和油表图的嵌套代码： let _that = this myChart = _that.$echarts.init(document.getElementById(this.pieId)) let data = [{value: 10, name: '香蕉'}, ...
2019-05-05 20:06:30
2467
原创 Echarts图形自适应窗口大小的变化
如果引入了JQuery的话，加入以下代码即可：$(window).resize(function () {myChart.resize()})位置如下图所示：注意：在Vue项目中，为了不影响页面性能，注意在beforeDestroy生命周期内移除对resize的监听...
2019-04-11 17:22:01
2879
1
原创 Echarts绘制极坐标系下的多色柱状图
效果图：关键点1：为了显示X轴的文本，将最大值100向左偏移设置方法：设置最大值为120，最小值0，间隔25关键点2：设置柱状图的多个颜色设置方法：完整代码： let xData = ['粥', '小笼包', '八宝粥', '炸酱面'] let yData = ['28', '35', '38', '49'] my...
2019-04-11 17:12:37
7582
4
原创 Vue项目前端性能优化
一、vue-router路由懒加载懒加载是当路由被访问的时候才加载对应组件，而不是在首页就全部加载，以此来提高首页反应速度。方法和原理 require-ensure 说明: require.ensure在需要的时候才下载依赖的模块，当参数指定的模块都下载下来了（下载下来的模块还没执行），便执行参数指定的回调函数。require.ensure会创建一个chunk，且可以指定该chunk...
2019-03-27 16:50:39
18455
6
原创 前端路由
一、什么是路由？ 路由是根据不同的 url 地址展示不同的内容或页面；二、什么是前端路由？ 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做（传统的项目是服务端根据 url 的不同，返回不同的页面实现的）；三、什么是后端路由？ 通过用户请求的url导航到具体的html页面；每跳转到不同的url，都重新访问服务端，然后服务端返回页面，页面也可以是服务端获取数据，...
2019-03-26 20:24:50
351
原创 Chrome浏览器的跨域设置
Chrome访问https网页链接失败，这时，需要配置chrome浏览器跨域操作步骤：1.打开我的电脑——C盘新建一个文件夹，命名为MyChromeDevUserData2.右键——Chrome——快捷方式——目标，在默认内容后边加上这一串内容，注意--前边留一个空格--disable-web-security --user-data-dir=C:\MyChromeDevUserD...
2019-03-19 14:02:56
2019
原创 Vue项目中的前端加密详解
在项目中我们常用到的两种加密方式：sha 256加密 RSA加密在项目中的使用方法总结如下:一、sha256加密npm安装sha256库安装完成3.可以去项目配置文件中package.json中查看4.在模块中使用,引入sha256库,对需要加密的字符进行加密传输二、 RSA加密npm安装RSA库2.安装完成3. 可以去项目配置文件...
2019-03-14 17:48:16
19633
1
原创 React开发环境搭建
React作为时下较为热门的前端框架之一，由facebook公司开创，用于搭建响应式的前端页面。react的思路是all in js，通过js来生成html，所以设计了jsx语法，还有通过js来操作css，下面我们先开始搭建React框架运行环境：1、安装node根据安装提示安装node.js，npm包管理工具也会一同安装2、查看node和npm版本号查询到版本号,说明电...
2019-03-06 17:16:37
696
原创 js实现对象数组属性值的批量查询
此方法适用于批量查询一个数组中的各个对象中的某一属性值，结果返回true 或者false示例：查询数组中name是否全部有值let search = [{name : 'a'} , {name : ' ' }]if (search.every(item => item.name !== '')) { console.log('name都不为空')} else { con...
2019-02-28 09:58:30
2122
原创 echarts在vue中的使用
1.引入：命令行运行：npm install echarts --save2.配置：在main.js中加入import echarts from 'echarts'Vue.prototype.$echarts = echarts3.在模块中的使用：写一个html<template> <div id="chartId" class="wh1...
2019-01-28 19:09:45
256
1
原创 js防止双击事件触发单击事件
1.定义timerProvinceClick变量2.将单击事件执行的方法延时500毫秒，并赋值给timerProvinceClick3.在双击事件执行时先清除单击事件4.双击不再触发单击
2018-12-26 14:30:16
5695
原创 完美解决Webpack多页面热加载缓慢问题
Webpack多页面热加载缓慢问题分析与解决一、问题引入使用webpack + vue多入口模式后，随着项目模块越来越多，整个项目的入口多达30多个，热更新变得缓慢，保存一次等待热加载的时间多达2-3分钟，这也意味着，改一下代码保存后要等2分多钟才能看到效果，非常影响开发效率。二、问题分析我们的代码无问题，而是html-webpack-plugin插件存在性能问题...
2018-12-22 14:20:32
9090
4
原创 使用sinopia搭建npm私有仓库
sinopia 的优点： 配置简单，对环境依赖少（仅 node 就够了） 支持 windows 系统下运行 不需要数据库,sinopia内置一个数据库了 是比较主流的方案 1.安装sinopia包2.配置npm3.启动sinopia，自动生成的工作目录如下(通过第一个warn可以看到具体路径)：4.打开这个文件，config.yaml默认...
2018-12-21 18:51:44
1116
原创 vue项目配置多入口多出口——方法二
问题引入：在vue项目中，我们通常使用vue-cli脚手架生成项目，生成的是一个单页面的工程，main.js是整个项目唯一的入口，整个项目都在一个index.html外壳中。但是，有时候，这种默认结构不能满足项目需要大项目使用单页面负载过重 多页面利于模块独立部署所以，我们需要将项目配置成多入口多出口模式配置方法：修改脚手架生成的目录结构如下：其中view文件夹中放置...
2018-12-19 20:27:35
5665
9
原创 将中国标准时间转化为yyyy-MM-dd
// 将Thu May 12 2016 08:00:00 GMT+0800 (中国标准时间)转化为yyyy-MM-ddparseTime (str) {if ((str + '').indexOf('-') != -1) {str = str.replace(new RegExp(/-/gm), '/')}let d = new Date(str)let newDateYe...
2018-12-04 10:49:38
3089
原创 隐藏IE自带input输入框眼睛样式
IE浏览器input输入框自带眼睛样式,有时候不需要这个样式需要隐藏,添加如下样式即可:input::-ms-reveal {display: none;}
2018-12-03 15:35:01
1601
原创 vue项目配置多入口多出口——方法一
问题引入：在vue项目中，我们通常使用vue-cli脚手架生成项目，生成的是一个单页面的工程，main.js是整个项目唯一的入口，整个项目都在一个index.html文件中。但是，有时候，这种默认结构不能满足项目需要大项目使用单页面负载过重 多页面利于模块独立部署所以，我们需要将项目配置成多入口多出口有两种配置方法：先介绍一种比较笨但是好理解的方法修改脚手架生成的目录结...
2018-11-21 21:25:22
14510
3
原创 字体图标制作以及在vue项目中的使用
字体图标的优势: 字体图标任意缩放不会失真，也大大减少请求数量,优化性能。在线生成工具: https://icomoon.io/app/#/select步骤：1. 进入网址：主页面2. 新建一个图集3. 添加.svg图片（可以使用现成的，也可以使用自定义的）使用现成的点击页面的Add Icons使用自定义的直接拖拽进图集即可添加4、生成字体文件（1）...
2018-11-02 17:34:53
527
原创 Vue数据传递的五种方法
组件（Component）是 Vue.js 最强大的功能。组件可以封装可重用的代码，通过传入对象的不同，实现组件的复用，但组件传值就成为一个需要解决的问题。1.父组件向子组件传值组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。子组件：子组件需要从父组件获取 logo 的值，就需要使用 p...
2018-11-02 16:35:23
19949
2
原创 使用node proxyTable跨域请求如何通过登录验证
问题引入：在前后端分离开发中，node 的 proxyTable可以帮助我们解决跨域请求的问题但是，在需要登录的系统中，后台一般会设置登录拦截，跨域请求需要通过登录拦截后，才能请求成功那么，如何通过登录拦截？解决：在proxyTable中携带cookie信息1.在config - index.js文件中，设置如下： 将Cookie携带在headers中，即...
2018-11-01 18:12:59
438
原创 Vue项目 前后端分离模式解决开发环境的跨域问题
在前后端分离的web开发中，我们与后台联调时，会遇到跨域的问题。比如:开发地址是 localhost:8080，需要访问 localhost:9000 上的接口。不同域名之间的访问，需要跨域才能正确请求。跨域的方法很多，在 Vue-cli 创建的项目中，可以直接利用 Node.js 代理服务器，实现跨域请求。解决方法：安装axios 在main.js中全局配置一个 baseU...
2018-11-01 17:51:08
2999
原创 vue项目使用axios如何防止get请求缓存返回304
最直接的解决方式：修改axios源码在node_modules文件夹找到这个文件找到get请求的地方，修改url所有的get请求都会带上时间戳，不会再返回304当然，如果你只想单独处理某个请求，直接给它加个随机数就好了...
2018-07-26 10:09:50
14634
原创 通过 iframe引用的vue文件之间的方法互调
假设有两个文件general.vue(这是一个vue多入口生成的实例,会被打包为一个单独的general.html)generalPage.vue(这个文件通过iframe引入general.html)那么,如何在general.vue里触发generalPage.vue中的方法vueFun?方法如下:1.在general.vue中通过parent.vueFun(params)...
2018-07-17 10:13:17
6967
原创 Vue不是内部或外部命令如何解决
最近想重新建个项目，遇到vue命令无法使用的情况解决方法：配置环境变量1.在我的电脑中搜索vue.cmd，找到它的路径2.右键计算机，属性——高级系统设置——环境变量，将 vue.cmd的路径加入环境变量3.重启命令窗口，执行正常，新项目创建成功。...
2018-06-29 10:53:06
23836
6
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人