<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[makelucky的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/makelucky</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; makelucky]]></copyright><item><title><![CDATA[接口返回blob和json两种格式时，前端怎么处理]]></title><link>https://blog.youkuaiyun.com/makelucky/article/details/121241852</link><guid>https://blog.youkuaiyun.com/makelucky/article/details/121241852</guid><author>makelucky</author><pubDate>Wed, 10 Nov 2021 09:55:53 +0800</pubDate><description><![CDATA[为什么会这样？

下载文件的接口一般会返回blob或者ArrayBuffer的格式，但是当不符合下载条件时，后端会返回json格式提示为何不能下载，但是responseType只能设置一种格式，这时只能设置responseType="blob"或者responseType="ArrayBuffer"，当返回json时，我们把blob或者ArrayBuffer格式转为json即可。

以下是接口返回json，但是因为前端设置了responseType="blob"，所以response是blob类型，这时获取]]></description><category></category></item><item><title><![CDATA[浏览器的Performance指标与性能优化]]></title><link>https://blog.youkuaiyun.com/makelucky/article/details/115950177</link><guid>https://blog.youkuaiyun.com/makelucky/article/details/115950177</guid><author>makelucky</author><pubDate>Wed, 21 Apr 2021 14:01:29 +0800</pubDate><description><![CDATA[本篇文章主要讲述performance的几个常见的性能指标，以及一些性能优化建议。








性能指标介绍



绿色是w3c规定的首屏优化的三个核心指标。

红色是谷歌规定的提升用户体验的三个核心指标。



优化指标，提升用户体验

资源优化

压缩文件、使用 Tree-shaking 删除无用代码
	服务端配置 Gzip 进一步再压缩文件体积
	资源按需加载
	通过 Chrome DevTools 分析首屏不需要使用的 CSS 文件，以此来精简 CSS
	内联关键的 CSS 代码
	使用...]]></description><category></category></item><item><title><![CDATA[git 提交时 “please make sure you have the correct access ....“ 或者 “your push would publish a prvate...”]]></title><link>https://blog.youkuaiyun.com/makelucky/article/details/114938371</link><guid>https://blog.youkuaiyun.com/makelucky/article/details/114938371</guid><author>makelucky</author><pubDate>Wed, 17 Mar 2021 17:22:28 +0800</pubDate><description><![CDATA[最近在练习git，因为网速不好所以决定将远程仓库从github搬到码云。

搬运过程中就出现了问题...... 因为好久没有用码云，所以修改了码云的用户名和邮箱。

然后一顿git remote rm, git remote add后 ,一提交代码发现了下面的错误



因为修改了邮箱地址等，导致本地ssh生成的秘钥不好用了

所以我们进入c盘用户文件找到.ssh文件夹并删除它

然后执行（也可以直接ssh-keygen生成，下面这种完全是为了好区分）


ssh-keygen -t rsa -C...]]></description><category></category></item><item><title><![CDATA[elementUI Dialog组件变成可拖动]]></title><link>https://blog.youkuaiyun.com/makelucky/article/details/114652077</link><guid>https://blog.youkuaiyun.com/makelucky/article/details/114652077</guid><author>makelucky</author><pubDate>Thu, 11 Mar 2021 09:25:45 +0800</pubDate><description><![CDATA[首先在utils文件引入directives.js文件


import Vue from 'vue'

// v-dialogDrag: 弹窗拖拽
Vue.directive('dialogDrag', {
  bind(el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    const dragDom = el.querySelector('.el-dial]]></description><category></category></item><item><title><![CDATA[echarts 地图 自定义工具栏]]></title><link>https://blog.youkuaiyun.com/makelucky/article/details/112238524</link><guid>https://blog.youkuaiyun.com/makelucky/article/details/112238524</guid><author>makelucky</author><pubDate>Tue, 05 Jan 2021 15:43:10 +0800</pubDate><description><![CDATA[话不多说先上代码



option.toolbox: {
         showTitle: true,//是否在鼠标 hover 的时候显示每个工具 icon 的标题。
         orient: 'vertical',//工具栏 icon 的布局朝向，默认为horizontal
         feature: {
            myTool1: {
                show: true,
                title: '自定义扩展方法1',
  ]]></description><category></category></item><item><title><![CDATA[原生js、jquery下拉框选中内容的获取]]></title><link>https://blog.youkuaiyun.com/makelucky/article/details/110930442</link><guid>https://blog.youkuaiyun.com/makelucky/article/details/110930442</guid><author>makelucky</author><pubDate>Wed, 09 Dec 2020 17:34:31 +0800</pubDate><description><![CDATA[&lt;select id="sel"&gt;
    &lt;option value="add"&gt;增加&lt;/option&gt;
    &lt;option value="low"&gt;减少&lt;/option&gt;
&lt;/select&gt;



下拉框可以选中某个选项后，可以获取两个内容，一个是选中后，显示的文字的值，一个是选中后，显示文字对应的value的值



获取选中后，显示的文字的值


//原生js
var sel = document.getElementB..]]></description><category></category></item><item><title><![CDATA[elementUI Tabs 文字修改大小]]></title><link>https://blog.youkuaiyun.com/makelucky/article/details/110622343</link><guid>https://blog.youkuaiyun.com/makelucky/article/details/110622343</guid><author>makelucky</author><pubDate>Fri, 04 Dec 2020 09:22:57 +0800</pubDate><description><![CDATA[直接修改是无效的

需要加入 ！important与/deep/


/deep/.el-tabs__item {
  font-size: 18px !important;
}


]]></description><category></category></item><item><title><![CDATA[重温JavaScript （一）----JavaScript的发展]]></title><link>https://blog.youkuaiyun.com/makelucky/article/details/109207676</link><guid>https://blog.youkuaiyun.com/makelucky/article/details/109207676</guid><author>makelucky</author><pubDate>Wed, 21 Oct 2020 19:13:20 +0800</pubDate><description><![CDATA[JavaScript简史

起源

JavaScript最早于1995年Netscape和Sun公司联合发布JavaScript 1.0，与Sun公司的Java无任何关系。
	DOM是一套对文档的内容进行抽象和概念化的方法，包括三个部分
核心 DOM - 针对任何结构化文档的标准模型
	XML DOM - 针对 XML 文档的标准模型
	HTML DOM - 针对 HTML 文档的标准模型（定义了所有 HTML 元素的对象和属性，以及访问它们的方法）。
   由于NetSpace与微软定义的DOM不...]]></description><category></category></item><item><title><![CDATA[Css编码小技巧、怎么使阴影自动获取主色调的暗色或者亮色， currentColor]]></title><link>https://blog.youkuaiyun.com/makelucky/article/details/107410334</link><guid>https://blog.youkuaiyun.com/makelucky/article/details/107410334</guid><author>makelucky</author><pubDate>Fri, 17 Jul 2020 15:57:22 +0800</pubDate><description><![CDATA[一劳永逸的设置明暗阴影，可以利用半透明的黑色活着白色叠加到主色调上，可以产生主色调的亮色或者暗色的变体。
	
background: red;
box-shadow: 0 .05em .25em rgba(0, 0 , 0 ,.5);

	
	
	currentColor: 一个特殊的文件关键词，它并没有绑定到一个固定的颜色值，而是一直被解析为color，它是很多颜色的初始值，会从字体等周围元素获取颜色值，如你想让&lt;hr /&gt;与周围字体颜色一样，你可以
	
hr {
    backgroun.]]></description><category></category></item><item><title><![CDATA[-moz、-ms-、-o-、-webkit- 浏览器前缀分别是那些浏览器，以及它们的缘由]]></title><link>https://blog.youkuaiyun.com/makelucky/article/details/107408848</link><guid>https://blog.youkuaiyun.com/makelucky/article/details/107408848</guid><author>makelucky</author><pubDate>Fri, 17 Jul 2020 15:30:27 +0800</pubDate><description><![CDATA[首先解释这些前缀分别是那些浏览器的


-ms-      IE
-o-       Opera
-webkit-  Chrome、Safari
-moz-     Firefox

再来解释一下为什么会出现这些前缀（参考《CSS揭秘》这本书）

    在标准制定过程中，，标准制定工作组需要站在开发者角度输入，但是他们往往没有兴趣尝试那些在生产环境中还不能正常使用的东西。然后为了解决这个问题，提出了许多方案，浏览器前缀就是其中之一。

   浏览器前缀这个方案是指每个浏览器都可实现这些实验...]]></description><category></category></item><item><title><![CDATA[ajax请求明明成功却执行失败的回调函数]]></title><link>https://blog.youkuaiyun.com/makelucky/article/details/107383320</link><guid>https://blog.youkuaiyun.com/makelucky/article/details/107383320</guid><author>makelucky</author><pubDate>Thu, 16 Jul 2020 15:10:42 +0800</pubDate><description><![CDATA[开发工程中发现ajax请求已经成功，但是却执行了请求失败的回调函数，

这是因为我请求中设置


dataType:json

但是请求直接返回我一段话而不是json对象


//出错返回格式
文件上传成功

jquery1.3版本以上对dataType有严格的判断，若返回格式不符合就会报错，去执行失败的回调函数

所以修改返回数据的格式就可以


{
   "msg": "文件上传成功"
}


...]]></description><category></category></item><item><title><![CDATA[jquery bootstarp提交带文件上传的form]]></title><link>https://blog.youkuaiyun.com/makelucky/article/details/107332766</link><guid>https://blog.youkuaiyun.com/makelucky/article/details/107332766</guid><author>makelucky</author><pubDate>Tue, 14 Jul 2020 13:44:16 +0800</pubDate><description><![CDATA[主流浏览器的ajax请求并不支持上传文件，jquery有个form的插件，可以使ajax请求携带文件，下载地址为：jhttp://lib.h-ui.net/jquery.form/3.51.0/jquery.form.min.js

网上说这个插件有两个主要方法：ajaxForm和ajaxSubmit

这里我只介绍我使用的ajaxForm吧，ajaxSubmit有机会再介绍

话不多说，上样例代码


&lt;!-- HTML代码 --&gt;


 &lt;form id="form" enctype=]]></description><category></category></item><item><title><![CDATA[highcharts 饼状图（pie）数据标签部分不显示问题]]></title><link>https://blog.youkuaiyun.com/makelucky/article/details/107209909</link><guid>https://blog.youkuaiyun.com/makelucky/article/details/107209909</guid><author>makelucky</author><pubDate>Wed, 08 Jul 2020 16:58:31 +0800</pubDate><description><![CDATA[饼状图的数据标签可能会出现 部分显示 部分不显示的问题，这时可以调一下distance和zIndex这两个属性（调整合适的值就可以将数据标签显示完全了）


plotOptions: {
		pie: {
			allowPointSelect: true,
			cursor: 'pointer',
			dataLabels: {
				enabled: true,
				format: '&lt;b&gt;{point.name}&lt;/b&gt;: {point.percentage:.1f}]]></description><category></category></item><item><title><![CDATA[vue-admin-element项目突然就起不来了]]></title><link>https://blog.youkuaiyun.com/makelucky/article/details/105816512</link><guid>https://blog.youkuaiyun.com/makelucky/article/details/105816512</guid><author>makelucky</author><pubDate>Tue, 28 Apr 2020 16:19:11 +0800</pubDate><description><![CDATA[INFO  Starting development server...
 ERROR  WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema....]]></description><category></category></item><item><title><![CDATA[npm WARN XXXXXXXX No repository field.问题]]></title><link>https://blog.youkuaiyun.com/makelucky/article/details/105816416</link><guid>https://blog.youkuaiyun.com/makelucky/article/details/105816416</guid><author>makelucky</author><pubDate>Tue, 28 Apr 2020 16:15:42 +0800</pubDate><description><![CDATA[这是因为删除node_modules文件，导致之前与代码仓库的联系消失,有两种解决方案

一：将项目设置为私有

在package.json中添加


"private": true

二：将项目的仓库地址添上即可


"repository": {
        "type": "git",
        "url": "http://baidu.com"
    }


...]]></description><category></category></item><item><title><![CDATA[百度地图Api计算两个经纬度点之间的距离]]></title><link>https://blog.youkuaiyun.com/makelucky/article/details/105389355</link><guid>https://blog.youkuaiyun.com/makelucky/article/details/105389355</guid><author>makelucky</author><pubDate>Wed, 08 Apr 2020 15:43:05 +0800</pubDate><description><![CDATA[var map = new BMap.Map("container");  
var point1 = new BMap.Point(lng1,lat1);  
var point2 = new BMap.Point(lng2,lat2);  
var distance = map.getDistance(point1,point2); 


]]></description><category></category></item><item><title><![CDATA[vue-element-admin中element组件汉化问题]]></title><link>https://blog.youkuaiyun.com/makelucky/article/details/104904029</link><guid>https://blog.youkuaiyun.com/makelucky/article/details/104904029</guid><author>makelucky</author><pubDate>Mon, 16 Mar 2020 17:39:25 +0800</pubDate><description><![CDATA[解决一：

在main.js文件中



解决二：

在main.js文件中修改两处

若想用英文则是 import locale from 'element-ul/lib/locale/lang/en'




]]></description><category></category></item><item><title><![CDATA[vue-element-admin生产环境配置]]></title><link>https://blog.youkuaiyun.com/makelucky/article/details/104903797</link><guid>https://blog.youkuaiyun.com/makelucky/article/details/104903797</guid><author>makelucky</author><pubDate>Mon, 16 Mar 2020 17:35:40 +0800</pubDate><description><![CDATA[线上环境不跨域情况（即前端和后端布置在同一个端口下）

1、vue.config.js 文件中注释掉devserver中的proxy和after



2、request.js文件将baseurl改一下（request文件拦截了所有请求，然后重新请求，这里是否改看个人情况，默认是'/prod'）



3、main.js中注释掉mock服务





线上环境跨域

跟开发环境相似，不需要上述...]]></description><category></category></item><item><title><![CDATA[动态路由  给路由加随机函数    vue路由匹配]]></title><link>https://blog.youkuaiyun.com/makelucky/article/details/103149876</link><guid>https://blog.youkuaiyun.com/makelucky/article/details/103149876</guid><author>makelucky</author><pubDate>Tue, 19 Nov 2019 20:02:03 +0800</pubDate><description><![CDATA[动态路由
当路由相同时，router-vue是不会在跳转路由的，所以，我在以动态路由的方式在url后加了随机数，但是有了随机数之后，即使相同的页面也不会有相同的url，所以router-link的acitve-class就不能够匹配到了。

这里有两个问题，一是怎么在vue模板上使用模板字符串，二是再如何匹配到正确的url，以便按钮高亮。

一，在vue模板上使用模板字符串


&lt;route...]]></description><category></category></item><item><title><![CDATA[vue模板中不能使用模板字符串问题]]></title><link>https://blog.youkuaiyun.com/makelucky/article/details/103147861</link><guid>https://blog.youkuaiyun.com/makelucky/article/details/103147861</guid><author>makelucky</author><pubDate>Tue, 19 Nov 2019 17:54:53 +0800</pubDate><description><![CDATA[只需在属性前面加：，然后将··放在“”中即可


&lt;router-link :to="`${Math.random()}`"&gt;&lt;/router-link&gt;


]]></description><category></category></item></channel></rss>