最近项目里的请求之前是写死http://XXXX的形式，导致部署后请求https的请求有问题，所以这里记录一下
改为 location.protocol + ‘//xxx’ 的形式
代码是生存，不是生活
最近闲来无事就想写点什么，其实说是无事可做倒不如说是自己懒惰。手上的项目的接口文档到手后早早就写起了mock数据，可是文档不是很全而且原型 和文档不断修改，距离最近一次我在群里写出缺少的接口已经过去了一周了仍然没有给我反馈，可能后台那边还有更
重要的的事情把，可是这样的情况我却总是会不断地担心，也不知道为什么。也许之前的我会去催把，可是我现在似乎习惯了拖下去，
也许自己现在是真的想安逸把。可是安逸的代价呢?代价就是把所有的开发量都堆到了deadline，只好加班可是到时候后台可不会陪你加班哦！
到了这个公司后，格外的安逸甚至变成了懒散，每天迟到偶尔加班，出差倒是经常加班。这种无计划无规律的开发模式感觉一旦换了公司，自己
会非常难受。
道理谁都懂，可是就是爱安逸，我的团长我的团里有句话说的好：”中国人命都不要了，就要安逸”，回头想想自己也是这样的。每天得过且过
嘴上说着公司的工作少可以有更多时间学习，可是真的利用好这部分时间了吗，从入行的那天起似乎就忘了自己曾经说的，下班在家也要学习。
买来的书已经落满了灰，甚至书上的只是都已经过时了，自律真的是一件很难的事情，感觉近期唯一安慰的事就是自己每天强迫自己多多少少的锻炼吧。
我不知道自己想要的生活是什么样的，甚至以后也都没有明确的计划。这几天寝室的群里都在聊着压力大，工资低的问题。可是大家都没有勇气去跳出
现有的舒适圈吧，又是感觉自己真的很失败呢。
刚才听后台说下周要开始联调，可是接口文档完全没有完善，在我看来甚至逻辑都不完整，这也是现在一个的弊端吧，好多项目初期的设计分析完全
没有前端的参与，前端只是用来进行页面开发和接口调用，可是如果原型接口设计的都不完整甚至说是行不懂，那前端做起来也是没有方向的。看来也只能
这样了，联调的时候再说吧，肯定一大堆问题。果然安逸久了都不想工作了呢。
之前买过几门小程序的课程，感觉 七月讲师 是一个很文艺的程序员，不仅代码好而且也会说很多做人的道理。可能这也是我都看下来了的原因吧，其实。。
主要还是花钱了哈哈。
感觉自己好浮躁，想要的东西很多，可是自己很弱，就像钢炼里说的那样，炼金的等价交换法则，人若想获得某样东西，必须付出另一样东西。或许现在
我需要的是让自己忙起来，就不会想那么多了吧。
总之生活还是要继续，我才25周岁没到欸。
——诸事不顺的我
给网站添加萌萌的看板娘
老规矩上来先上一个原文链接- -：
看到别的网站有个看板娘 果断百度 傻瓜方式使用下来 想具体配置的看github把
原文https://github.com/stevenjoezhang/live2d-widget
hexo next下添加背景图片(random)
老规矩上来先上一个原文链接- -：
原文https://www.jianshu.com/p/30bf702f533c
随机图片来源
原文https://source.unsplash.com/
修改背景样式
修改themes\next\source\css\ _custom\custom.styl文件，这个是Next故意留给用户自己个性化定制一些样式的文件，添加以下代码：
可以尽情的发挥你的css了
1 | body { |
修改不透明度
完成这一步其实背景就会自动更换了，但是会出现一个问题，因为next主题的背景是纯透明的，这样子就造成背景图片的影响看不见文字，这对于博客来说肯定不行。
那么就需要调整背景的不透明度了。同样是修改themes\next\source\css\ _custom\custom.styl文件。在后面添加如下代码
1 | .main-inner { |
效果
Hexo next下添加轮播图
上来先贴一个原文链接
原文https://www.jianshu.com/p/d1307d3f71bb
轮播一开始 轮播图的点击查看大图会有错 所以 网上建议fancybox 在next配置下改为了false 这样会禁用所有图片查看大图 都无法点击查看大图了
所以我还是改为了true 轮播图点击大图查看弹出错误信息就弹出把 毕竟有的文章里的图还是需要查看大图的
在themes\next\layout\macro文件下创建carousel.swig文件。
1 | {% if theme.carousel.enable %} |
在next主题（其它主题也可以）中的_config.xml主题配置文件中末尾添加如下配置：
1 | #Home carousel map, from means link, img means picture |
这里的图片链接可以是在线的 我是用的是工程里的 ： /images/xxx.xx
主要是 这里是给首页添加轮播 那么我想给我的about添加怎么办呢？
\themes\next\layout 我也没有找到对应about的swig文件
后来我发现一些没有特定的对应 都是通过过page.swig来实现的
于是再 page.swig文件中找到1
2
3
4{% block content %}
....
....
{% endblock %}
其实添加的位置你自己随意 我是在
1 | {% endblock %} |
上面一行 也就是你的markdown内容最下面 加入轮播图区域
简单判断页面 是不是about页面1
2
3{% if page.type === "about"%}
{% include '_macro/carousel.swig' %}
{% endif %}
就好了
hexo 加载音乐播放
根目录下
npm install hexo-tag-aplayer –save
然后再想使用的文章中添加
1、1
{% aplayer "歌曲名" "歌手名" "https://什么什么什么.mp3" "https://封面图.jpg" "lrc:https://歌词.lrc" %}
标签参数
- title : 曲目标题
- author: 曲目作者
- url: 音乐文件 URL 地址
- picture_url: (可选) 音乐对应的图片地址
- narrow: （可选）播放器袖珍风格
- autoplay: (可选) 自动播放，移动端浏览器暂时不支持此功能
- width:xxx:(可选) 播放器宽度(默认: 100%)
- lrc:xxx: (可选）歌词文件 URL 地址
2、1
2
3{% aplayerlrc "title" "author" "url" "封面(选填)" "autoplay" %}
[00:00.00]lrc here
{% endaplayerlrc %}
歌词的获取，可以直接找到各层次文件，或者可以直接在网易云上通过以下方法获取
http://music.163.com/api/song/media?id=863046037
其中id为网易云歌曲的id，打开链接之后，可以把”lyric”字段的值复制下来，再删除\n就可以直接放到aplayerlrc标签中了，这样就可以有歌词出现
原文https://www.jianshu.com/p/23e33d1fdc4e
有缓存 多刷新 之前设置了自动播放一直不起作用 还以为代码问题 (lll￢ω￢)
然后 $ hexo g -d 再生成部署下 发现ok
关于js网速检测的那些事
最近好久没有记录问题了，因为最近都没有写代码
这不偶然遇到旭哥问我弱网情况下判断弱网图片加载慢 从而执行弱网逻辑问题
img的onload 以及轮询img.complete我感觉都不能很好的判断是否为弱网，因为你轮询complete即使发现他的complete为true并且记录了加载时间或者为false的时间超过一个常量从而进行 判断是弱网感觉都很麻烦呢
为什么不能直接检测网速 测试出结果后 再去进行弱网操作呢？
于是上网百度一番js网络监控的方法 这里搬运一下 做一个记录
贴几个认为有用的代码图
ajax
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>js实现的网速测试方法</title>
</head>
<body>
<script>
function measureBW(fn) {
var startTime, endTime, fileSize;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if(xhr.readyState === 2){
startTime = Date.now();
}
if (xhr.readyState === 4 && xhr.status === 200) {
endTime = Date.now();
fileSize = xhr.responseText.length;
console.log(fileSize);
var speed = fileSize / ((endTime - startTime)/1000) / 1024;
fn && fn(Math.floor(speed))
}
}
xhr.open("GET", "https://upload.wikimedia.org/wikipedia/commons/5/51/Google.png?id=" + Math.random(), true);
xhr.send();
}
measureBW((speed)=>{
document.write("<div id='div1'>"+speed + " KB/s</div>");
console.log(speed + " KB/s"); //215 KB/sec
})
</script>
</body>
</html>
同样，考虑到http请求需要建立连接，以及等待响应，这些过程也会消耗一些时间，所以以上的方法可能不会准确的检测出网络带宽。
我们可以同时发出多次请求，来减少http请求建立连接，等待响应的影响，参考如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function measureBW(fn,time) {
time = time || 1;
var startTime, endTime, fileSize;
var count = time ;
var _this = this;
function measureBWSimple () {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
if(!fileSize){
fileSize = xhr.responseText.length;
}
count --;
if(count<=0){
endTime = Date.now();
var speed = fileSize * time / ((endTime - startTime)/1000) / 1024;
fn && fn(Math.floor(speed));
}
}
}
xhr.open("GET", "https://upload.wikimedia.org/wikipedia/commons/5/51/Google.png?" + Math.random(), true);
xhr.send();
}
startTime = Date.now();
for(var x = time;x>0;x--){
measureBWSimple()
}
}
measureBW((speed)=>{
console.log(speed + " KB/sec"); //913 KB/sec
},10)
-API类
还有一个：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
document.write('<div id="msg">正在测试网络延迟，请稍后...</div>');
document.write('<a href="#">电信网路</a> <span class="classtime" xl-name="电信网路"></span><br>');
document.write('<a href="#">联通网路</a> <span class="classtime" xl-name="联通网路"></span>');
var jump=1,t={},autourl=new Array(),autoname=[];
autourl[1]="http://image.baidu.com/"; //这个是电信服务器站点
autourl[2]="https://www.baidu.com/"; //这个是联通服务器站点
autoname[1]="电信网路";
autoname[2]="联通网路";
(function(){
for(var i=1;i<autourl.length;i++){
var img = new Image;
//img.onerror= auto(autourl[i]);
img.onerror= (function(j){
return function(){
t[autourl[j]] =(new Date())- t[autourl[j]]; //记入时间差
console.log(autourl[j] + " ：" + t[autourl[j]] + "ms"); //console.log(t[url] + "ms");
document.querySelector('[xl-name="'+autoname[j]+'"]').innerHTML = t[autourl[j]] + ' ms';
console.log(jump);
if(jump) {
jump=0;
document.getElementById("msg").innerText = '3秒后进入【' + autoname[j] + '】';
//setTimeout(function(){top.location=url;},3000); //setTimeout("top.location='" + url + "';",3000); //3s 即3000ms
setTimeout(function(){window.location.replace(autourl[j]);},3000);
}
}
})(i);
//闭包传值
img.src = autourl[i] + Math.random();
t[autourl[i]] = (+new Date());//记录开始载入时间
}
})();
原文链接
css属性text-decoration 为blink的问题
首先就是生成文章 title属性不能有冒号哦 我hexo g 生成的时候有报错才发现的
text-decoration: blink已经被各个浏览器废弃 谷歌 火狐 ie都没效果 这里做一个记录 （也不知道是不是我写的不对还是js写吧）
清除vue+elemnt表单验证
在项目中遇到对话框关闭或者取消后，再次打开验证错误或者表单内容依然存在的效果，如下：
解决：
form中添加 ref属性， 即ref=“XXXX”。再在dialog的@open事件的自定义回掉函数中：
this.$refs[‘XXXX’].resetFields();或者this.$refs.XXX.resetFields();
resetFields()是element官方文档 表单验证的表单方法通过给表单ref的属性来找到表单调用
具体代码截图如下：
~接下来才是重点
端午回来果然很不想工作啊最近比较烦T_T 
vue element-ui 元素绑定事件不起作用 keyup click等
自定义组件绑定原生事件必须使用 .native 修饰符
element一些标签组件 框架封装了方法 导致@keyup.enter 或者click等不好使1
2
3<el-card class="box-card" @click.native="getImagerepoVersions(item)"
<el-input name="password" :type="passwordType" @keyup.enter.native="handleLogin" v-model....
<el-button type="primary" style="width:30%;margin-bottom:30px;float: right" :loading="loading" @click.native.prevent="handleLogin('editor')"
如上 加.native即可 代表使用vue原生的事件绑定