前言

最近在逛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在默认情况下是不启用的)

原文作者：刘望舒
文章转载自：https://juejin.im/post/58d15f1044d90400691834d4

前言

算法很重要，但是一般情况下做移动开发并不经常用到，所以很多同学早就将算法打了个大礼包送还给了老师了，况且很多同学并没有学习过算法。这个系列就让对算法头疼的同学能快速的掌握基本的算法。过年放假阶段玩了会游戏NBA2K17的生涯模式，没有比赛的日子也都是训练，而且这些训练都是自发的，没有人逼你，从早上练到晚上，属性也不涨，但是如果日积月累，不训练和训练的人的属性值就会产生较大差距。这个突然让我意识到了现实世界，要想成为一个球星（技术大牛）那就需要日积月累的刻意训练，索性放下游戏，接着写文章吧。

1.算法的效率

虽然计算机能快速的完成运算处理，但实际上，它也需要根据输入数据的大小和算法效率来消耗一定的处理器资源。要想编写出能高效运行的程序，我们就需要考虑到算法的效率。
算法的效率主要由以下两个复杂度来评估：
时间复杂度：评估执行程序所需的时间。可以估算出程序对处理器的使用程度。
空间复杂度：评估执行程序所需的存储空间。可以估算出程序对计算机内存的使用程度。

概述

单例模式（Singleton Pattern）是最基础的设计模式，也是Java面试常考问题之一。单例模式提供了一种创建对象实例的方式。单例类只有一个实例，并为所有其他类提供一个获取实例的方法。

为什么要用单例模式

优点

• 开销低：内存中只有一个对象实例，降低了系统在创建和销毁对象实例时产生的内存消耗。
• 效率高：只创建一次对象实例，GC 次数减少，提高 GC 工作效率

使用场景

• 生成 UUID(Universally Unique Identifier)。
• 计数器使用单例缓存，可以不必每次刷新都在数据库里加一次。
• 需要控制实例数量，降低系统开销的场景。

单例模式的实现方式

单例模式的实现模式大致分为以下两类：

• 懒汉式：全局单例实例在类加载时构建
• 饿汉式：全局单例实例在被第一次调用时构建

概述

概念

外观模式（Facade Pattern）隐藏了系统的复杂性，并向客户端提供了一个可以访问系统的接口。这种类型的设计模式属于结构性模式。为子系统中的一组接口提供了一个能够统一访问的高层接口，这个接口使得子系统更容易被访问或者使用。

主要组成部分

1. 门面：外观模式的核心。客户端调用门面角色，它熟悉子系统的功能。门面内部根据客户端需求封装了子系统功能的组合。
2. 子系统：实现子系统的功能。对客户端和门面都隐藏了其内部细节。子系统内部可以有系统内的相互交互，也可以提供外界调用的接口。
3. 客户端：通过调用门面来完成要实现的功能。

为什么要用外观模式

优点

1. 松耦合：解除客户端和子系统之间的耦合，让子系统内部的模块功能更易于扩展和维护。
2. 易用性：客户端不必知道子系统复杂的内部实现方式，只需跟门面交互即可。
3. 内外分离：子系统中，有些方法是对系统外的，有些方法是对系统内部相互交互使用的。子系统把暴露给外部的功能集中到门面中，从而实现客户端在不知道子系统内部细节前提下的调用

原文作者：零壹技术栈
文章转载自：https://juejin.im/post/5b48b0d7e51d4519962ea383

前言

数字签名、信息加密 是前后端开发都经常需要使用到的技术，应用场景包括了用户登入、交易、信息通讯、oauth 等等，不同的应用场景也会需要使用到不同的签名加密算法，或者需要搭配不一样的 签名加密算法 来达到业务目标。这里简单的给大家介绍几种常见的签名加密算法和一些典型场景下的应用。

正文

1. 数字签名

数字签名，简单来说就是通过提供 可鉴别 的 数字信息 验证 自身身份 的一种方式。一套 数字签名 通常定义两种 互补 的运算，一个用于 签名，另一个用于 验证。分别由 发送者 持有能够 代表自己身份 的 私钥 (私钥不可泄露),由 接受者 持有与私钥对应的 公钥 ，能够在 接受 到来自发送者信息时用于 验证 其身份。

注意：图中 加密过程 有别于 公钥加密，更多 介绍戳这里。签名 最根本的用途是要能够唯一 证明发送方的身份，防止 中间人攻击、CSRF 跨域身份伪造。基于这一点在诸如 设备认证、用户认证、第三方认证 等认证体系中都会使用到 签名算法 (彼此的实现方式可能会有差异)。