<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[localhost_1314的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/localhost_1314</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; localhost_1314]]></copyright><item><title><![CDATA[Docker 安装 OpenLDAP 和 phpLDAPadmin]]></title><link>https://blog.youkuaiyun.com/localhost_1314/article/details/123714659</link><guid>https://blog.youkuaiyun.com/localhost_1314/article/details/123714659</guid><author>localhost_1314</author><pubDate>Tue, 29 Mar 2022 21:01:08 +0800</pubDate><description><![CDATA[1.启动Docker



2. 拉取镜像

命令：docker pull osixia/openldap



3.运行镜像

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 ..]]></description><category></category></item><item><title><![CDATA[Mac 安装 Docker]]></title><link>https://blog.youkuaiyun.com/localhost_1314/article/details/123695410</link><guid>https://blog.youkuaiyun.com/localhost_1314/article/details/123695410</guid><author>localhost_1314</author><pubDate>Thu, 24 Mar 2022 11:36:27 +0800</pubDate><description><![CDATA[1. 进入官网

Docker Hubhttps://hub.docker.com/editions/community/docker-ce-desktop-mac?spm=a2c4e.10696291.0.0.4cc619a4P4aEnL2. 下载 安装包

这里有两个选项，根据自己电脑配置下载合适的安装包



例如，我的电脑时intel ，下载intel安装包



3.下载 Docker.dmg安装文件，直接双击安装完成就可以了




...]]></description><category></category></item><item><title><![CDATA[mac os 安装启动redis]]></title><link>https://blog.youkuaiyun.com/localhost_1314/article/details/121541371</link><guid>https://blog.youkuaiyun.com/localhost_1314/article/details/121541371</guid><author>localhost_1314</author><pubDate>Thu, 25 Nov 2021 16:52:50 +0800</pubDate><description><![CDATA[步骤如下：

1.去官网下载最新版本redis

https://redis.io/download



2.解压到指定目录/Documents/redis-6.2.6(个人习惯放在Documents文件夹下)

3.进入命令行窗口，cd到/Documents/redis-6.2.6



4.编译测试：sudo make test





5.编译安装：sudo make install



这里这个报错是什么原因，再研究一下，但是不影响运行

6.启动服务：.src/redis-server...]]></description><category></category></item><item><title><![CDATA[git pull 错分支如何撤销]]></title><link>https://blog.youkuaiyun.com/localhost_1314/article/details/119997809</link><guid>https://blog.youkuaiyun.com/localhost_1314/article/details/119997809</guid><author>localhost_1314</author><pubDate>Mon, 30 Aug 2021 15:23:15 +0800</pubDate><description><![CDATA[1.执行it reflog 命令查看你的历史变更记录，如下：



2.执行git reset --hard 回退到某个节点




]]></description><category></category></item><item><title><![CDATA[vue.config.js配置]]></title><link>https://blog.youkuaiyun.com/localhost_1314/article/details/108220104</link><guid>https://blog.youkuaiyun.com/localhost_1314/article/details/108220104</guid><author>localhost_1314</author><pubDate>Tue, 25 Aug 2020 14:22:17 +0800</pubDate><description><![CDATA[// vue.config.js
const 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' :.]]></description><category></category></item><item><title><![CDATA[Canvas + CSS3实现可视化项目开场动画]]></title><link>https://blog.youkuaiyun.com/localhost_1314/article/details/107424643</link><guid>https://blog.youkuaiyun.com/localhost_1314/article/details/107424643</guid><author>localhost_1314</author><pubDate>Sat, 18 Jul 2020 10:05:58 +0800</pubDate><description><![CDATA[一、背景：

在最近的可视化项目中，视觉设计采用钢铁的写实风格，整体页面布局为左中右，动效需要实现在刚进入页面时，左右板块撞向中间板块，产生撞击光效和火花飞散的动画效果。

二、实现思路：

需要考虑以下几个方面：

整体页面的布局，左中右三个板块需要独立，分别绝对定位，不要耦合在一起；
	使用css3实现撞击动效；
	使用canvas绘制撞击后的火光和火花，光效可以径向渐变，火花飞舞的运动轨迹分别是左右方向的匀减速运动，上下方向的匀减速和匀加速，最后到飞舞消散的过程，粒子大小随机
三、实现过程：

 1.]]></description><category></category></item><item><title><![CDATA[GIS地图描边特效的实现]]></title><link>https://blog.youkuaiyun.com/localhost_1314/article/details/107400740</link><guid>https://blog.youkuaiyun.com/localhost_1314/article/details/107400740</guid><author>localhost_1314</author><pubDate>Fri, 17 Jul 2020 09:31:11 +0800</pubDate><description><![CDATA[先占个坑，有时间详细讲解

先看实现效果



思路

•加载json

•绘制闭合线，也称线环：该对象是闭合的（首尾坐标相同）

•绘制面状几何体

•添加矢量地理要素类






地图选择器http://datav.aliyun.com/tools/atlas/#&amp;lat=31.728167146023935&amp;lng=104.2822265625&amp;zoom=4

阿里云提供的地理信息接口



...]]></description><category></category></item><item><title><![CDATA[可视化项目序列3D翻牌动效实现]]></title><link>https://blog.youkuaiyun.com/localhost_1314/article/details/107400251</link><guid>https://blog.youkuaiyun.com/localhost_1314/article/details/107400251</guid><author>localhost_1314</author><pubDate>Fri, 17 Jul 2020 09:22:59 +0800</pubDate><description><![CDATA[一、背景：

在最近的数据看板可视化项目中，需要实现人员信息卡片序列翻动的动效，本文主要介绍该动效的实现原理和过程。

二、实现思路：

1.要想实现双面翻转，首先需要定义一个3D盒子；

2.3D盒子中正反重合放置两张卡片，均正面朝外；

3.利用CSS旋转动效实现3D盒子的翻转；

4.序列化翻转需要设置时间差。

三、实现过程：

1.定义3D dom，包含3D容器，相对容器，正面卡牌，反面卡牌





2.样式设置，css的运用

(1)外层容器的样式：



transform-style ..]]></description><category></category></item><item><title><![CDATA[json-server模拟接口请求过程]]></title><link>https://blog.youkuaiyun.com/localhost_1314/article/details/103375693</link><guid>https://blog.youkuaiyun.com/localhost_1314/article/details/103375693</guid><author>localhost_1314</author><pubDate>Tue, 03 Dec 2019 20:09:33 +0800</pubDate><description><![CDATA[一、背景

前后端分离已经成为项目的标准开发模式，通过前后端分离，极大地提高了开发效率和开发能力。

二、问题引入

作为前端，在后端接口还没有提供的情况下，不可避免地要使用mock的数据。有时候，我们可以使用静态json数据来做mock，但有时候，我们并不想使用静态json数据，而是希望自己起一个本地的mock-server来完全模拟请求以及请求回来的过程。

json-server是一个...]]></description><category></category></item><item><title><![CDATA[Vue-set解决数组变化不触发视图更新问题]]></title><link>https://blog.youkuaiyun.com/localhost_1314/article/details/100777160</link><guid>https://blog.youkuaiyun.com/localhost_1314/article/details/100777160</guid><author>localhost_1314</author><pubDate>Thu, 12 Sep 2019 16:57:05 +0800</pubDate><description><![CDATA[Vue是通过Object.defineProperty()来实现双向数据绑定的。把一个普通 JavaScript 对象传给 Vue 实例的data选项，Vue 将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为 getter/setter。每个组件实例都有相应的watcher实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的...]]></description><category></category></item><item><title><![CDATA[js遍历对象数组并为每一项添加新属性]]></title><link>https://blog.youkuaiyun.com/localhost_1314/article/details/100776825</link><guid>https://blog.youkuaiyun.com/localhost_1314/article/details/100776825</guid><author>localhost_1314</author><pubDate>Thu, 12 Sep 2019 16:50:37 +0800</pubDate><description><![CDATA[let arry = this.tableData
      let arryNew = []
      arry.map((item, index) =&gt; {
        arryNew.push(Object.assign({}, item, { lineId: 1 }))
      })

以上代码遍历数组tableData，并为每一项加入一个新属性lineId ...]]></description><category></category></item><item><title><![CDATA[前端js实现表格数据的上移下移]]></title><link>https://blog.youkuaiyun.com/localhost_1314/article/details/100776594</link><guid>https://blog.youkuaiyun.com/localhost_1314/article/details/100776594</guid><author>localhost_1314</author><pubDate>Thu, 12 Sep 2019 16:44:03 +0800</pubDate><description><![CDATA[vue项目需求中需要前端实现表格行数据的上移下移，效果如下

实现思路：主要使用前端对数组的操作方法splice()

代码：


    tableData: [{
        name: '1',
        id: '1'
      }, {
        name: '2',
        id: '2'
      }, {
        name: '3',
  ...]]></description><category></category></item><item><title><![CDATA[js根据经纬度坐标计算两点之间的距离]]></title><link>https://blog.youkuaiyun.com/localhost_1314/article/details/100776121</link><guid>https://blog.youkuaiyun.com/localhost_1314/article/details/100776121</guid><author>localhost_1314</author><pubDate>Thu, 12 Sep 2019 16:29:57 +0800</pubDate><description><![CDATA[getDistance: (lat1, lng1, lat2, lng2) =&gt; {
    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...]]></description><category></category></item><item><title><![CDATA[css实现序列帧闪电动效]]></title><link>https://blog.youkuaiyun.com/localhost_1314/article/details/96484487</link><guid>https://blog.youkuaiyun.com/localhost_1314/article/details/96484487</guid><author>localhost_1314</author><pubDate>Fri, 19 Jul 2019 17:01:34 +0800</pubDate><description><![CDATA[先看效果：



实现原理

1、需要视觉设计师提供一张雪碧图，包含多张动画状态，也就是所谓的序列帧，依次排列在一张图上；



2、前端通过css去改变背景图的位置；

3、将动画持续反复，类似于我么小时候玩过的翻书小动画；

代码：


&lt;div class="rightLighting"&gt;&lt;/div&gt;

.rightLighting{
  width:86px;
  ...]]></description><category></category></item><item><title><![CDATA[css实现呼吸灯动效]]></title><link>https://blog.youkuaiyun.com/localhost_1314/article/details/96483918</link><guid>https://blog.youkuaiyun.com/localhost_1314/article/details/96483918</guid><author>localhost_1314</author><pubDate>Fri, 19 Jul 2019 16:39:46 +0800</pubDate><description><![CDATA[先看效果：



实现原理：改变图片的透明度

代码：


 &lt;div class="breath"&gt;&lt;/div&gt;

.breath {
  width: 8%;
  height: 77%;
  position: absolute;
  right: 19px;
  top: 17px;
  background: url("../../assets/image/dru...]]></description><category></category></item><item><title><![CDATA[echarts实现带光圈的环形图]]></title><link>https://blog.youkuaiyun.com/localhost_1314/article/details/89853821</link><guid>https://blog.youkuaiyun.com/localhost_1314/article/details/89853821</guid><author>localhost_1314</author><pubDate>Sun, 05 May 2019 20:06:30 +0800</pubDate><description><![CDATA[实现效果：



实现原理：图层的叠加

（1）多个环形图的叠加

（2）环形图和油表图的嵌套

代码：


        let _that = this
        myChart = _that.$echarts.init(document.getElementById(this.pieId))
        let data = [{value: 10, name: '香蕉'}, ...]]></description><category></category></item><item><title><![CDATA[Echarts图形自适应窗口大小的变化]]></title><link>https://blog.youkuaiyun.com/localhost_1314/article/details/89215687</link><guid>https://blog.youkuaiyun.com/localhost_1314/article/details/89215687</guid><author>localhost_1314</author><pubDate>Thu, 11 Apr 2019 17:22:01 +0800</pubDate><description><![CDATA[如果引入了JQuery的话，加入以下代码即可：

$(window).resize(function () {

myChart.resize()

})

位置如下图所示：



注意：在Vue项目中，为了不影响页面性能，注意在beforeDestroy生命周期内移除对resize的监听


...]]></description><category></category></item><item><title><![CDATA[Echarts绘制极坐标系下的多色柱状图]]></title><link>https://blog.youkuaiyun.com/localhost_1314/article/details/89215313</link><guid>https://blog.youkuaiyun.com/localhost_1314/article/details/89215313</guid><author>localhost_1314</author><pubDate>Thu, 11 Apr 2019 17:12:37 +0800</pubDate><description><![CDATA[效果图：



关键点1：为了显示X轴的文本，将最大值100向左偏移

设置方法：设置最大值为120，最小值0，间隔25



关键点2：设置柱状图的多个颜色

设置方法：



完整代码：


        let xData = ['粥', '小笼包', '八宝粥', '炸酱面']
        let yData = ['28', '35', '38', '49']
        my...]]></description><category></category></item><item><title><![CDATA[Vue项目前端性能优化]]></title><link>https://blog.youkuaiyun.com/localhost_1314/article/details/88848591</link><guid>https://blog.youkuaiyun.com/localhost_1314/article/details/88848591</guid><author>localhost_1314</author><pubDate>Wed, 27 Mar 2019 16:50:39 +0800</pubDate><description><![CDATA[一、vue-router路由懒加载

懒加载是当路由被访问的时候才加载对应组件，而不是在首页就全部加载，以此来提高首页反应速度。

方法和原理
	require-ensure
	说明: require.ensure在需要的时候才下载依赖的模块，当参数指定的模块都下载下来了（下载下来的模块还没执行），便执行参数指定的回调函数。require.ensure会创建一个chunk，且可以指定该chunk...]]></description><category></category></item><item><title><![CDATA[前端路由]]></title><link>https://blog.youkuaiyun.com/localhost_1314/article/details/88829258</link><guid>https://blog.youkuaiyun.com/localhost_1314/article/details/88829258</guid><author>localhost_1314</author><pubDate>Tue, 26 Mar 2019 20:24:50 +0800</pubDate><description><![CDATA[一、什么是路由？

　　路由是根据不同的 url 地址展示不同的内容或页面；

二、什么是前端路由？

　　前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做（传统的项目是服务端根据 url 的不同，返回不同的页面实现的）；

三、什么是后端路由？

　　通过用户请求的url导航到具体的html页面；每跳转到不同的url，都重新访问服务端，然后服务端返回页面，页面也可以是服务端获取数据，...]]></description><category></category></item></channel></rss>