豪翔天下

布局

栅格布局

• el-row和el-col可以搭配实现24格的栅格布局

• el-row支持如下属性

• el-col支持如下属性

栅格布局一般会根据实际的各个分辨率下的情况来设置每个布局的宽度，如果想要直接换行，也可以某一种分辨率之和超过24，这样只要两个col超过24就会换行，例如:

1
2
3
4
5
6

<el-row :gutter="24">
  <el-col :xs="20" :sm="6" :md="4" :lg="3" :xl="1"><div></div></el-col>
  <el-col :xs="20" :sm="6" :md="8" :lg="9" :xl="11"><div></div></el-col>
  <el-col :xs="20" :sm="6" :md="8" :lg="9" :xl="11"><div</div></el-col>
  <el-col :xs="20" :sm="6" :md="4" :lg="3" :xl="1"><div</div></el-col>
</el-row>

这个周末有点闲暇时间，老婆在我身后准备期末考试(回老家一人一张书桌)，所以我准备做个年终总结。因为疫情、老婆怀孕、换工作，所以年初的计划基本全部被打乱了。

工作方面

万万没想到在上家公司的最后半年会这么累，不过也还好，这让我蓄谋已久的离职也变得顺理成章了。本来上家公司的工资一直很低，但好在工作清闲，所以虽然我一直说要离职，但始终没有下定决心。不过由于公司内部调整，阴差阳错地进入了一个业务部门。我实在无法适应大公司的业务部门，仅用半个月的时间就超过了我过去三年所有的加班时间，并且周末还得时刻神经紧绷，因为公司的问题电话会随时打给你，哪怕问题和你根本没半毛钱关系，你也得拿出电脑去解决。那种感觉是我再也不想经历的。所以，在请完婚假后第一天就去提交离职申请了。年初我就计算过，今年产检、年假、婚假、产检、离职、疫情，可能往后几十年，就数今年的假期最多了，不过假期多也没什么用，因为老婆假期不多，即使婚假也得在家复习。所以我过了所有人都无法想象的婚假: 在家撸代码。

技术方面

去年年底由于工作安排，强迫学习了Java，基本达到了能熟练开发Java项目的地步。不过由于那边业务比较单一历史框架死板，所以也没遇到多少技术难题，加班主要是因为任务太紧。6月底至今在新公司，全栈开发岗位，不过大部分是前端Vuejs + Nodejs，所以前面两周也很累的，每天下班后都需要恶补一下前端知识。但远程工作好的地方是不加班，以后我会详细介绍远程工作的爽与不爽。几周过去，也算是入门前端了，基本能够配合框架快速实现想要的效果了，也渐渐地开始尝试看Vue源码，因为总感觉自己的前端代码写得有点low。不出意外，下半年在技术上主要是针对前端和AWS的深入学习了。对了，新公司基本是用英语交流的，所以英语学习也至关重要；据老板说转正后每周有和外国友人直接语音交流的机会，不过在一群高手面前，转正还得继续努力💪。

生活方面

一方面因为换到了远程工作且新工作不给买社保，所以上半年一直在研究社保和个人所得税方面的问题，现在的我自我感觉算是半个这方面的专家了。现在，我是以个人身份参加了职工医保和养老保险，算下来一个月一千多，不用说，肯定公司帮忙交划算，不过个人如果不用其它险种和公积金，这样交才是最划算的。

另一方面，家里要迎来新成员了。做了好多的计划，买了好多的东西，本来6月份因为多干了一些活儿多几千块收入，但是618买一波母婴用品花得干干净净的。第一次知道他们为啥被称为“四脚吞金兽”了。唯一让我压力小点的就是有极大的可能是女儿，我那时相当高兴的呀。虽然我积攒已久的育儿经验都得改一下，但是女孩子的话是真的真的好轻松，感谢老婆！

为什么要用nuxt.js，主要就是因为它可以服务端渲染(SSR)，相比于传统的vue单页应用，将渲染放到服务器这边，性能肯定能得到很大提升，并且首次加载无需加载特别大的资源，且对搜索引擎友好，所以没有什么理由不用它。

目录结构

assets: 资源目录，用于组织未编译的静态资源

components: 组件目录

layouts: 布局目录

middleware: 中间件目录

pages: 页面目录

plugins: 插件目录

static: 插件目录，会被直接映射到根目录下，可以放置favicon.ico/robots.txt等文件

store: 用于组织应用的vuex状态树文件

nuxt.config.js: 个性化配置文件

Spring Initializr：Spring项目初始化工具。

打包

打包成war: mvn clean package

框架分层结构

调用顺序

Controller –> Service Interface –> Service Impl –> Dao Interface –> Dao Impl –> Mapper –> DB

BIZ层

Service(业务逻辑，可以建立子文件夹来进行分类，这样每个biz就可以更细分，如果Biz和Servic都单独作为一层，那么Biz的粒度更细，Service则是提供给别人的接口)、Schedule(定时任务)、Common(一些中间件认证登录等)、Manager、RPC Service、MQTask、JobTask。也有Service和BIZ平行的分层方式，这种情况，一般是Service在调用Biz，Biz执行数据库操作，类似于Manager。

BO(Business Object)

COMMON层

一些公共的对象，公共的抽象类、公共的异常、公共的帮助方法等

DAO层

一般是由MyBatis等工具自动生成的。

DO/PO(Data Object/Persistant Object，与数据表直接对应，也叫Entity层或者Model层)：用于存放实体类，与数据库中的属性值保持一致。

Mapper: 对数据库进行数据持久化操作，它的内部方法就是直接对数据库进行操作的。它类似于manager层。可以封装对数据库的复杂的操作。

VO(value object，类似于将数据库的字段抽象为新的业务相关的字段): VO往往用于请求处理层，即Controller。

INTEGRATE层

外部系统的一些接口

Web层

Controller、Config(一些初始化配置，例如线程池、缓存池等配置的初始化)

安装

• npm install -g @vue/cli && vue create my-project

• 可以在new Vue之前使用window.函数名=function() {}创建一个全局的函数方法

• 在vue中使用bootstrap可以直接用BootstrapVue，如果要单独安装可以这样做：npm install --save bootstrap jquery popper.js ，然后在main.js中加入即可

  1 2	import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min'

配置

vue.config.js

• 用vue-clic3脚手架新建的项目，默认是没有vue.config.js文件的，可以手动创建，如果项目根目录里面有它，它会被@vue/clic-service

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

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    outputDir: '../cordova/www',
    publicPath: '.',
    pluginOptions: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    configureWebpack: {
        devtool: 'source-map',
        plugins: [
            new CopyWebpackPlugin([{
                from: 'public'
            }])
        ],

    }

自动加载模板语法

• 模板中如果遇到这种类型的三目运算符a ? a : b，最好用{a || b}来代替

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

// v-bind
<a v-bind:href="url">...</a>
<a v-bind:href="`/api/${item.id}`">...</a> // 属性绑定的时候拼接字符串，也可以用['/api/' + item.id]的方式
<a :href="url">...</a>	// 缩写
<a title="test"></a>// 如果仅想传入一个字符串作为props给组件，那么不用加冒号
<a :hidden="shouldHidden==='letshidden'">	// 在v-bind中直接用表达式
<img v-bind:src="pic" v-for="pic in pics" />
  
// v-model
<input type="text" v-model="msg"> // 等价于<input type="text" :value='msg' @input='handleInput'>
<select v-model="selection"></select> // 如果是select那么model需要绑定到select上，可以直接获取其selected value
  
// 遍历v-for
<li v-for="item in items">{{item}}</li>
<li v-for="(item, index) in items">{{item}}的索引是{{index}}</li>
<li v-for="(value, name, index) in items">遍历key=>value格式的数组，遍历字典，顺便还有索引</li>
<li v-for="(item,index) in items"><span v-if="index !== items.length-1">判断是否是列表最后一个元素，目前没找到更好的方法</span></li>

// v-on
<a v-on:click="doSomething">...</a>
<a @click="doSomething">...</a>

// v-html，将内容不转义直接展示为html内容，如果是用户输入的内容，这里一定要防止XSS攻击，最简单的方法就是使用https://github.com/leizongmin/js-xss在外面处理一下
<div v-html="XSS(data)"></div>
<div v-html="$options.filter.myfilter(data)"></div>	// v-html中使用过滤器

// v-if, v-else, v-else-if, 条件判断
// v-show，只是控制是否展示，DOM是存在的

建议安装Mybatis-plus

Mybatis官方文档

目录结构

• Mapper.xml文件是真实的SQL语句对应关系

MyBatis生成的DAO层文件目录如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.
├── entity
│   ├── Table1.java	# 这是数据Model，即使数据记录对应的Java类，里面包含对应表的字段、注释及get和set方法
│   ├── Table1Example.java	# MySQL查询相关的一些简单的语句拼接，针对每个字段都有几个常用的SQL语句拼接方法。比如等于、大于、小于等方法
│   ├── Table2.java
│   └──  Table2Example.java
└── mapper
    ├── Table1Mapper.java
    ├── Table1Mapper.xml
    ├── Table2Mapper.java
    ├── Table2Mapper.xml
    └── ext		# MyBatis并不会默认生成，可以在这里编写自定义的查询方法
        ├── MyExtMapper.java
        └── MyExtMapper.xml

每年的认知小结

人生

• 当你老了，回顾一生，就会发觉：什么时候出国读书，什么时候决定做第一份职业，何时选定了对象而恋爱，什么时候结婚，其实都是命运的巨变。只是当时站在三岔路口，眼见风云千樯，你作出选择的那一日，在日记上，相当沉闷和平凡，当时还以为是生命中普通的一天。——陶杰《杀鹌鹑的少女》
• 就算你觉得自己是一坨臭狗屎，也会遇到一个心地善良的屎壳郎，不远万里找到你，然后当成宝贝，再不远万里把你滚回家，一路上悉心呵护着你，怕你被抢了，被踩扁了，或者撞到石头，一心想着，把你变成家里的镇宅之宝，别怀疑，世界有时候就是这么好。
• 曾经以为“老去”是很遥远的事情，突然发现“年轻”是很久以前的事了……时光，好不经用，抬眼，已然半生
• 我尊重同性恋，我理解抑郁症，我会喂楼底下的流浪狗，会给老奶奶让座位，会对店员说谢谢……纵然，我平庸，长相普通，脾气不好，曾经悲伤难过望而不得，生活的苦也在吃，但我依然，想努力地成为一个温柔善良的人。——网易评论《借我》
• 会做饭的男人又一个共同特点，那就是穷。
• 废掉一个人最狠的方式，是让他忙到没时间成长——铭哥笔记
• 人生短短急个球啊
• 人者一辈子，走走瞧瞧，吃吃喝喝，不生病，就是夫妻，如果能遇到自己爱的也爱自己的人再发点小财，就是天大的福气。——摘自《不是因为寂寞才想你》王小帅
• 少儿编程这玩意儿毫无意义，编程是工具，不是知识，送小孩去学编程等于送小孩去学说明书，急功近利也不是这么个急法。15岁之前只需要学数学和英语，前者是定义与解决，后者是表达与传播。其他学科本质上和冯唐诗集没什么区别。 ——微博 马茉莉
• 我发现不能一下子挣个几百万的话，工资再高也没用，只有财务自由才可以安心
• 最幸福的事，还有女孩子夜晚开着车，拉着那个为了未来奋斗而疲惫入睡的男孩子呀——抖音
• 所有人都在要求内向的人多说话多社交走出舒适圈，这样说的话外向的人每天都活在舒适圈里，那让外向的人也走出舒适圈，少说电话少拉别人去聚会多独处多沉默ok吗——微博，高大威溜了溜了
• 最幸福的事就是，你开着车，我坐在副驾驶，听着歌，吃着零食，跟你聊着未来，一起去找我们最想去的地方。
• 最幸福的事莫过于两个男人一个开着车，另一个坐在副驾驶，一起抽着烟，讨论这去哪找最美技师。
• 《小王子》说：仪式感就是使某一天与其他日子不同，使某一时刻与其他时刻不同。
• 春有百花秋有月，夏有凉风冬有雪。若无闲事挂心头，便是人间好时节。
• 其实我们很多人都无解了三观不合的意思，你喜欢吃西餐，我喜欢吃路边摊，这不是三观不合，但如果你喜欢吃喜欢我说你装，我喜欢吃路边摊你说我low，这才是三观不合——抖音

编程

• 在同一个公司同一个职位上一旦错过了3-5年的跳槽黄金期，员工对安逸的需求大于上进求胜的欲望，随着年龄的增大、家庭琐事的负担，人的惰性将越来越束缚内心，最终沦为朝九晚五混日子的上班族。
• 做得快不仅可以让你在单位时间内完成更多的工作，而且因为你工作得很快，所以你会觉得成本低，从而倾向于做更多。
• 1万属性，100亿数据，每秒10万吞吐，架构如何设计？——Json格式存储不同的属性
• 有些网站禁止未登录用户访问，但会对搜索引擎开绿灯。开绿灯的方式有可能只是简单地判断User-Agent。所以，只要把浏览器的User Agent改为搜索引擎的爬虫即可访问其内容。——微博tombkeeper
• (微服务的)分布式事务没有最好的解决方案，甚至说没有比较简单的解决方案，所以，最好的方法是尽量避免分布式事务，具有强一致性要求的服务并不建议拆分到不同的服务中。这也是DDD(领域驱动设计)的思想

生活

• 省一分钱真的比赚一分钱容易多了
• 一个人可以捱穷，两个人就不行，因为会忍不住把自己的穷怪罪给他。——亦舒
• 如果不能变得有钱，那就变得有趣吧
• 在赚钱这件事上，谁转不到钱， 你就不要听他们的，包括你的父母兄弟姐妹，你身边这些最亲近的人，本质上他们说这些话，都是为你好，但他们的思维，会影响你去做一些超出他们认知的事，而这种影响会导致你跟他们过上一样的生活

经历了这辈子到目前为止最魔幻也最累的一个开年，各个自媒体账号全部没有更新，这次不是迷茫，是真的太忙，导致这篇年终总结迟到这么久。

工作快四年，今年才过不到六分之一，加的班已经超过我之前所有的量了，实在是吃不消，而且加班是真的真的影响和家庭生活，一是陪伴家人的时间大量减少，二是在家里的时候十分厌恶接到公司电话，每次一接到工作电话，就免不了情绪不稳定，给家人带来困扰。以前我不换工作是因为这家公司虽然钱少，但至少干得开心，但是现在连干活都这么累了，可能真没有待下去的必要了吧。

另外一个事情就是筹备了很久的婚礼，年前各种买买买，各种联系亲朋好友，结果到最后因为疫情不得不取消了。家里人包括老婆都不想再补办了，足以看出我们的心力交瘁。

接下来再用我每年的总结及计划模版

2019总结

这是2019年初列的计划

haofly

• 博客: 日均60+，做到了90+
• 微信: 继续朝100+迈进。断断续续，没啥进展
• 小程序: 累计用户100+，我就说嘛，只要创意和名字好，总会有用户的
• 微博: 365+条，今年关注微博少了，发得也少了，因为有很多心里话不想表达
• 阅读: 12+本，大概三本，不行
• 专栏: 1个，GraphQL教程
• 智能家居: 至少一次，让家里更智能，小爱音响还算不错，但是小爱同学是真的人工智障
• 涨工资，呵呵
• 尝试新技术: Spring，Ruby语言。成功变成一个有多年开发经验的Java程序员
• 补动漫，还是补了很多的
• 每月检查这份计划。OKOK，又没做到，即使前面几个月我还设置了闹钟的

理财

• 定投基金。由于结婚要花太多钱，所以今年只顾着存钱了，加上年终奖，年底存了1万多，感动
• 坚持每天记账。坚持每天每笔记账已经超过1000天了。使用口袋记账已经超过3年了，这个软件已经很久没更新了，如果说哪天软件出现bug了，就只能
• 再次用10个月时间完成去年一年的收入。今年居然没完成，郁闷了

健康

• 平均每天1w+步，自从媳妇每天住在家里后，运动量就很少了
• 每月出门健身旅游一次，上半年坚持了一下，下半年就荒废了
• 每周至少一次大扫除，老婆在家，不得不做呀

情感

• 结婚。终于在2019920这天完成又一件人生大事
• 教会女朋友独立开车。其实她会，她只是不喜欢我坐在旁边
• 和女朋友省外旅游至少一次。居然一年没出过市。
• 带家人旅游至少一次。迫于贫穷。
• 招待新老朋友聚会至少两次。怕是不下十次了
• 平均每月回一趟家。有车后回家次数已经数不清了

2019年博客访问统计(相比去年大概翻一番)

2019年消费支出趋势(今年主要话费是10月份为全家配置保险)

安装

1

npm install pm2@latest -g

常用命令

• 基本上能使用程序name的地方也可以使用id(id一般是从0开始的)

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

pm2 start app.js	# 直接启动某个项目
pm2 start app.js --name my-app	# 设置应用名称
pm2 start app.js --no-daemon	# 以非daemon方式运行
pm2 start app.js --max-memory_restart 20M	# 当内存超过20M时就重启应用
pm2 start npm --name my-app -- run start # npm run start方式启动
pm2 start yarn --interpreter bash --name my-app -- start	# yarn start方式启动
pm2 start myscript.sh	# 如果是可执行的，那么直接start就可以了
pm2 start myscript.py --interpreter=/usr/bin/python3	# 启动任意解释器的脚本
pm2 start xxx -o ./out.log -e ./err.log	# 这样可以改变当前进程的日志输出地址，目前没找到全局修改的地方，另外-l参数是将标准输出和错误输出都输出到目标，但是同时也会输出到之前的标准输出和错误输出
pm2 start app.js --cron-restart="0 0 * * * "	# 设置自动定时重启 

pm2 stop all	# 停止所有程序
pm2 restart all	# 重启所有程序
pm2 delete 0	# 删除某个进程
pm2 delete all	# 删除所有进程

pm2 list	# 列出所有使用pm2管理的程序
pm2 prettylist	# 用json格式输出

pm2 describe 0	# 查看程序详情，比如启动命令，日志文件位置，nodejs版本，开始时间，堆栈使用情况，延迟时间
pm2 show 0	# 同上
pm2 monit	# 实时监听所有进程，和describe的输出差不多，不过这个是实时的，而且可以看到日志
pm2 monitor appname	# 查看pm2管理的所有进城的详细状态

es的引入及配置

要想使用Java版的es客户端，首先需要在pom.xml引入如下依赖

1
2
3
4
5

<dependency>
  <groupId>org.elasticsearch.client</groupId>
  <artifactId>elasticsearch-rest-high-level-client</artifactId>
  <version>7.4.0</version>
</dependency>