背景

约高中同学一起出去玩，聊到他的儿子喜欢看奥特曼，同学半开玩笑地说了句：“咱们童年看的那些奥特曼都不记得名字了，说不定能写个爬虫把奥特曼数据全部爬下来”。正好最近在学习python和爬虫技术，跃跃欲试的我回家就行动起来了。

思路

1. 找数据源
2. 获取奥特曼详情页url
3. 遍历，获取奥特曼信息，并存入list
4. 保存list到csv文件

源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

@SuppressWarnings({"rawtypes", "unchecked"})
    public static void shuffle(List<?> list, Random rnd) {
        int size = list.size();
        if (size < SHUFFLE_THRESHOLD || list instanceof RandomAccess) {
            for (int i=size; i>1; i--)
                swap(list, i-1, rnd.nextInt(i));
        } else {
            Object arr[] = list.toArray();

            // Shuffle array
            for (int i=size; i>1; i--)
                swap(arr, i-1, rnd.nextInt(i));

            // Dump array back into list
            // instead of using a raw type here, it's possible to capture
            // the wildcard but it will require a call to a supplementary
            // private method
            ListIterator it = list.listIterator();
            for (int i=0; i<arr.length; i++) {
                it.next();
                it.set(arr[i]);
            }
        }
    }

这是一个打乱指定List的洗牌算法，当List长度小于SHUFFLE_THRESHOLD（定义为5）或者是RandomAccess的实例时，直接以List的数据结构进行打乱，否则转为数组再打乱，最后转储回List。推测是List长度比较大时，直接swap效率降低，所以要转成数组处理。方法暂时没什么问题，主要是源码中部分注释不是很理解，整理如下。

功能概述

公司系统需要增加操作记录功能，包括编辑页面内容调整和列表页的任务分配、任务启禁用记录，记录最近一周（前6天0点-当天当前时间点）的操作记录。

思路

直接在代码中拦截工作量大，且代码侵入性高，想到用对代码侵入性较小的AOP来实现此功能。

配置文件

spring-mvc.xml中配置包扫描和aop支持

1
2

<context:component-scan base-package="xxx.xxx.xxx" />
<aop:aspectj-autoproxy proxy-target-class="true" />

需求背景

最近的需求，记录一下。一个统计表数据的接口，前端需要返回两个数组，一个是0-23的小时计数，一个是各小时对应的统计数。

思路

1. 直接使用group by查询要统计的表，当某个小时统计数为0时，会没有该小时分组。思考了一下，需要建立辅助表，只有一列小时，再插入0-23共24个小时

前言

最近在逛Github Trending时发现一个不错的开源即时聊天软件ChatWoot，通过ChatWoot可以实现网站访客与网站主人的即时通讯。这是一个比较方便的功能，于是自己动手在Hexo中添加Chatwoot。

部署Chatwoot

1. Chatwoot可以通过多种方式在生产环境部署，这里我选择了最方便的Heroku云端部署。这里有部署教程，不过因为没有中文版，而且有些细节不是很明确，所以我建议跟着这篇博客进行部署。
2. 点此一键部署

Heroku是一个支持多种编程语言的云平台即服务。在2010年被Salesforce.com收购。Heroku作为最元祖的云平台之一，从2007年6月起开发，当时它仅支持Ruby，但后来增加了对Java、Node.js、Scala、Clojure、Python以及（未记录在正式文件上）PHP和Perl的支持。

3. 自定义App name和FRONTEND_URL(这两个最好一致，比如Appname叫abc，那么FRONTEND_URL为https://abc.herokuapp.com，图中我设置的不一致结果踩了一些坑，后来把FRONTEND_URL改成和Appname一致解决了。其他选项选择默认)，确认，即可开始在云端部署APP。

实际情况概述

生产环境数据库磁盘快满了，此时：

1. 需要完全删除一个记录历史数据的大表(约160GB)；
2. 需要将一张大表中7月之前的数据全部删除。

基础知识

MySQL中，drop和truncate是DDL(data define language)操作，操作立即生效，原数据不放到 rollback segment中，无法回滚；而delete语句为DML(data maintain Language)，这个操作会被放到 rollback segment中，事务可以回滚。执行效率方面，drop>truncate>delete。

v-for的使用

v-for:作用就是用来对对象进行遍历的（数组也是对象的一种）

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<div id="app">
    <span>{{user.name}} {{user.age}}</span><br>
    <!--
        通过v-for遍历
    -->
    <span v-for="(value,key,index) in user">
        {{index}} : {{key}} : {{value}}
    </span>

    <!--
        通过v-for遍历数组
    -->
    <ul>
        <li v-for="a,index in arr">
            {{index}}:{{a}}
        </li>
    </ul>

    <!--
        通过v-for遍历数组中的对象
        :key 便于vue内部做重用和排序
    -->
    <ul>
        <li v-for="user,index in users" :key="user.id">
            {{index+1}} === {{user.name}} === {{user.age}} === {{user.content}}
        </li>
    </ul>

</div>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            user: {name:"小王",age:25},
            arr:[
                "炒面",
                "炒饭",
                "馄饨"
            ],
            users:[
                {id:"1",name:"小明", age:27,content:"吃饭时不喜欢说话"},
                {id:"2",name:"小红", age:25,content:"能吃五斤馄饨"},
                {id:"3",name:"小绿", age:25,content:"能吃八两饺子"}
            ]
        },
        methods: {},
        components: {}
    });
</script>

1
2

总结：
- 使用v-for时注意加入:key用来给vue内部提供重用和排序的唯一key(尤大推荐的做法)

Vue中事件绑定(v-on)

绑定事件基本语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div id="app">
    <h2>{{message}}</h2>
    <h2 v-text="message"></h2>
    <h2>年龄:{{age}}</h2>
    <input type="button" value="点我改变年龄" v-on:click="changeage"/>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: "hello唯有义!",
            age: 23,
        },
        methods: {   //methods 用来定义Vue中的事件
            changeage: function () {
                alert('长大一岁');
                this.age++;
            }
        }
    });
</script>

1
2
3
4
5
6
7
8
9

总结：
事件三要素：
1. 事件源：发生事件dom元素 
2. 事件：发生特定的动作 click.... 
3. 监听器 发生特定动作之后的事件处理程序 通常是js中函数
- 在Vue中绑定事件是通过v-on指令来完成的，写法是v-on:事件名 如 v-on:click
- 在v-on:事件名的赋值语句中是当前时间触发调用的函数名
- 在Vue中事件的函数统一定义在Vue实例的methods属性中
- 在Vue定义的事件中this指的就是当前的Vue实例，可以在事件中通过使用this获取Vue实例中的相关数据

笔者的话

2013年，在google工作的尤雨溪因为对于项目中使用的现有框架不满而开发了Vue。如今，Vue已然成为各大公司的前端首选，作为一名后端工程师，工作中也多多少少会接触到前端开发。本文是笔者在小破站学习Vue的笔记，如果大家感兴趣的话也可以去看看这位宝藏up主(编程不良人)的视频。
https://www.bilibili.com/video/BV1SE411H7CY

Vue引言

渐进式JavaScript框架 –Vue官网

渐进式

1. 易用 HTML CSS JavaScript
2. 灵活 开发灵活，多样性
3. 高效 开发前端页面，非常高效

后端服务端开发人员

• Vue渐进式JavaScript框架：让我们通过操作很少的DOM，甚至不需要操作页面中的任何DOM元素，就很容易地完成数据和视图的绑定。 双向绑定 MVVM
• 注意：在使用Vue的过程中页面中不要再引入Jquery
• htmlcss—>javascript—>jquery—>angularjs—>Vue

Vue作者

• 尤雨溪

前言

近来项目组工作比较繁忙，很长时间没有更新博客了。言归正传，今天这篇主要是总结下在工作中遇到的问题，避免下次再遇到浪费时间。

问题

MySQL 版本 5.7，用 group by 查询时报错

1

Expression #3 of SELECT list is not in GROUP BY clause and contains nonaggregated column 'sfmgpssit1.award_info.create_time' which is not functionally dependent on columns in GROUP BY clause; this is incompatible with sql_mode=only_full_group_by

原因

MySQL 5.7.5和up实现了对功能依赖的检测。如果启用了only_full_group_by SQL模式(在默认情况下是这样)，那么MySQL就会拒绝选择列表、条件或顺序列表引用的查询，这些查询将引用组中未命名的非聚合列，而不是在功能上依赖于它们。(在5.7.5之前，MySQL没有检测到功能依赖项，only_full_group_by在默认情况下是不启用的)