木头的博客

我是木头 有些想法 有点精力

0%

使用 Vue + Koa 打造全栈应用《时光·印象》图片分享应用 系列教程

前言

之前在学校用前端 pjax 无刷新跳转 + 后端 php 服务端渲染做了一个应用, 用来做校内的图片分享网站, 后来离校后就没怎么管了, 所以只做了一点就弃坑了.

最近又想起来那个项目, 所以这次抱着学习的心态使用 vue + koa 来重新将这个项目拾起来, 一方面可以学习一些当下的新框架了解前段发展趋势, 另一方面也可以充实下自己的简历.

选型

下面列出该项目的技术选型, 以及原因 (按重要程度排序)

  • Vue (v2.5) 单文件组件 响应式

    以及 vue-router vuex axios

    选 Vue 作为前端框架是因为他的单文件组件做模块化开发很方便, 还有现成的脚手架工具 vue-cli, 以及对 @尤大信仰

  • Koa (v2.5) 中间件

    以及 koa-router koa-jwt

    选用 Koa 而非 Express 是因为 Express 了解过一些, 想换个口味试试. Express 也确实感受过回调地狱的痛, Koa 的洋葱模型似乎很不错!

    后端只用来提供 API 接口不做 SSR.

  • MySQL (v8.0) SQL Database

    常规的关系型数据库,深入学习一下 MySQL,为全栈发展打好坚实的基础

  • Eslint 语法检查 防傻瓜

    Eslint 进行代码风格检查和防傻瓜还是非常方便的, 尤其是配合其自带的 --fix 功能自动进行代码格式化. 避免在 coding 的过程中出现一些傻瓜式的语法错误带来的不必要的时间浪费.

    使用 Eslint Standard 配置(Vue 使用 @vue/standard 配置)

  • ES6, Stylus 语法糖 预处理

    语法糖! 提高 coding 效率. 但是 Stylus, 一个小众的 css 预处理器, 提供了非常高效和酷炫的写法.

  • Yarn 依赖安装

    用 Yarn 就是因为快! 比 npm 快了不是一丁半点! yarn 执行项目内 bin 文件也非常方便, 免去了安装全局依赖的烦恼.

阅读全文 »

tips: 解决办法在文章底部,请使用右侧导航直接跳转到 解决办法

问题描述

最近在使用 centos 7 时需要升级到 nodejs 10 版本,直接执行 yum update nodejs 发现 yum 源里还是 6.x,并且提示已经是最新版本了。。

??什么鬼,去 nodesource 查看原来需要将 nodesource 源升级一下,so,执行以下命令

1
2
curl -sL https://rpm.nodesource.com/setup_10.x | bash -
yum upgrade nodejs

竟然发现还是 6.x 版本

1
2
3
4
5
6
7
8
====================================================================================================================
Package Arch Version Repository Size
====================================================================================================================
Installing:
nodejs x86_64 2:6.11.2-1nodesource nodesource 17 M

Transaction Summary
====================================================================================================================

咦?难道是需要将 node 先卸载了吗?于是 yum remove nodejs 然后 yum install nodejs。。。然后是你猜到的结果,还还还还是 6.x 版本。。。

阅读全文 »

相信前端的同学们已经接触过栅格化布局了, 只要你用过 bootstrap 或者一些其他的 css 框架.

栅格化布局是一个非常方便的布局方式, 尤其是它的自适应布局, 可以根据屏幕大小缩放容器的宽度.

preview

今天我们用一个 css 预处理器 stylus 来编写一个 只有 50 行代码, 能自定义栅格数, 能响应多个断点, 能推能拉的栅格化布局!

阅读全文 »

前言

这里是一篇个人学习使用 Linux 操作系统时遇到的一些常见问题以及资料的集合. 用来在日后的操作中做一个 QA 索引. 如果它也能帮到你就再好不过了.

阅读全文 »

(整篇文章都是用 vim 编辑的哦~)

注意:无插件 vim 笔记。个人使用 Vim 作为 tty 编辑器和辅助开发工具配合主力 IDE 使用(IDEA Vim、VSCode Vim),为了保证通用性与便捷性,不打算使用插件。

Vi / Vim 版本的选择

Vim 是 Vi 的升级版本,比 Vi 多了语法高亮等更多特性。就版本而言,软件的新版本往往会修正旧版的一些缺陷和不足,所以说能用新版本尽量使用最新版本。

文件

Vim 打开后默认在 normal 模式,要进行文件操作,我们需要进入到命令模式,按下 : 进入命令模式

打开/保存/退出

命令作用
:w保存
:w {filename}另存为
:1,3w {filename}将 1-3 行另存为 filename(参考范围限定符
:1,3w >> {filename}将 1-3 行追加到 filename 末尾
:q退出(如果有改动则会退出失败)
:q! ZQ抛弃修改并退出
:wq保存并退出
:x ZZ保存并退出(如果有修改,否则直接退出)

挂起

通过 Vim 命令

命令作用
:!{cmd}用来执行某一条 shell 命令。如 :!cat database.conf
:sh进入 shell 环境。执行结束需要返回 Vim 编辑环境时,输入 exit 或按下 ctrl + d 即可。

通过 Shell 命令

利用 Linux 作业机制,按下 ctrl + z 将当前程序放在后台执行。然后使用 fg 命令重新回到 Vim 编辑器。 详情参考Unix 或 Linux 中&、jobs、fg、bg 等命令的使用方法

目录

在 normal 模式下,键入 :E 可以打开当前文件所在目录(Explore 模式),然后可以使用 j k 选择目录

按键(在 Explore 模式下)作用
j选择下一个文件
k选择上一个文件
-前往上一级目录
R重命名
D删除文件
s切换排序(name/time/size/extension)
x执行文件

多窗口

命令作用
Ctrl-wv :vsp filename左右分割窗口
Ctrl-ws :sp filename上下分割窗口
Ctrl-wc关闭当前窗口
Ctrl-wq关闭当前窗口, 如果是最后一个窗口则退出 Vim
Ctrl-ww移动光标到下一个窗口
Ctrl-wl / Ctrl-wh移动光标到右/左边的窗口
Ctrl-wj / Ctrl-wk移动光标到下/上边的窗口
Ctrl-wL / Ctrl-wH移动窗口到左/右边
Ctrl-wJ / Ctrl-wK移动窗口到下/上边
Ctrl-w< / Ctrl-w>水平分屏向左/右调整窗口大小
Ctrl-w- / Ctrl-w+水平分屏向上/下调整窗口大小
Ctrl-w= / Ctrl-w+水平分屏向上/下调整窗口大小

还可以直接打开目录

命令作用
:E在当前窗口打开目录
:He / :He!在当前窗口下/上方打开目录
:Ve / :Ve!在当前窗口右/左方打开目录

缓冲区

当你打开多个文件时,这些文件都保存在缓冲区中,你可以使用 :ls 查看缓冲区内容,然后使用 :buffer [n] 查看缓冲区 n 中的文件

命令作用
:bnext :bn查看下一个缓冲区文件
:bprevious :bp查看上一个缓冲区文件
:blast :bl查看最后一个缓冲区文件
:bfirst :bf查看第一个缓冲区文件

多标签页

命令作用
:Te打开一个新标签页
gt / gT到下/上一个标签页
2gt到第 2 个标签页
:tabs查看所有标签页
:tabclose 2关闭第 2 个标签页
:bufdo tab split将缓冲区的文件转成 tab

会话

你可以将你当前打开的 window 和 tab 保存起来供下次使用

命令作用
:mksession session_file.vim将当前工作区保存在文件中
:mksession! session_file.vim将当前工作区保存在文件中,覆盖

然后使用 :qa:wqa 来退出 vim, 下次你就可以使用 vim -S session_file.vim 来恢复工作区啦

跳转

光标移动

按键(单位从小到大)作用
h / l光标向左/右移动
w W / b B移动到下一个词/上一个词的开头(W B会忽略连字符)
e E移动到当前词的末尾(E会忽略连字符)
0 / ^ / $移动到硬行首/软行首(缩进后)/行尾
j / k光标向下/上移动一行
( / )移动到语句的开头/末尾
{ / }移动到段落的开头/末尾
%跳转到匹配的括号
20g :20跳转到 20 行
zt / zz / zb让光标所在行居于屏幕顶部/中央/底部
H / M / L跳转到当前屏幕的顶部/中央/底部行
Ctrl-y / Ctrl-e向上/下滚一行
Ctrl-u / Ctrl-d向上/下翻半页 (up)
Ctrl-b / Ctrl-f向上/下翻一整页 (backward)
gg :0 / G :$跳转到文件开始/末尾
\.`跳转到光标上一次位置
'.跳转到光标上一次位置所处的行
Ctrl-I / Ctrl-O向前/后追溯光标位置

这些操作之前都可以加上数字来控制接下来的操作执行多少次,例如按下20j向下跳转 20 行,5Ctrl-e向下滚动 5 行

文件跳转

命令作用
:bnext :bn查看下一个缓冲区文件

编辑

insert 模式

刚打开 vim 时处于 normal 模式,我们需要进入 insert 模式才可以输入内容。

按键作用
i / a在光标位置前面/后面进入 insert 模式
I / A在软行首/行尾位置进入 insert 模式
o / O在下一行/上一行新起一行进入 insert 模式
c更改当前字符并进入插入模式
s删除当前字符进入 insert 模式
C ss删除当前行进入 insert 模式
r R在光标位置进入替换 insert 模式,r 替换一个字符后自动退出 insert 模式
x X向后删除字符(delete)/退格(backspace)
10x向后删除 10 个字符 (仅限当前行)

在 insert 模式下,按下Esc 退出 insert 模式回到 normal 模式

按键作用
Esc回到 mormal 模式
Ctrl-O临时执行一条 normal 模式下的命令,然后回到 insert 模式
Ctrl-I相当于按下 Tab

insert 模式一些其他实用的快捷键

按键(insert 模式)作用
Ctrl-h删除光标前的一个字符
Ctrl-w删除光标前的单词
Ctrl-j相当于按下 Tab

撤销、重做

按键作用
u撤销
Ctrl-R重做
.重复上一次操作

复制、剪切、粘贴

在 normal 模式下按下y进入复制模式,按下d进入删除(剪切)模式。接下来只需要跟跳转命令(如0(行首) G(文件末尾))即可操作相应的范围

需要注意的是,剪切时会将移除的内容放入剪贴板。

按键作用
yy Y复制当前行
yG复制到文件末尾
y$复制到行尾
6yy y6y复制 6 行
dd剪切当前行
dw删除到下一个词的开头
d$ D剪切到行尾
dG剪切到文件末尾
d10G剪切当前行到第 10 行
J合并下一行
p P粘贴在光标后面/前面
2p粘贴 2 次
Ctrl-r{x}在 insert 模式或命令模式下粘贴 x 寄存器的内容

你还可以在选区模式下按下 y 复制整个选区,按下 d 剪切选区

值得注意的是,vim 的剪贴板是带有寄存器(Register)的,类似历史记录功能,你可以将不同的内容复制到某一个寄存器内,粘贴时选择相应的寄存器即可。

要使用寄存器,具体的使用方法是在复制/剪切/粘贴命令前输入"x,其中 x 可以是 a-z* 还有 ",如果指定为*,则指令将会与操作系统进行交互,如果指定为 " 则会使用上一次的寄存器。

例如输入 "*p 就会把系统的剪贴板的内容粘贴到编辑器中。

文本对象

Vim 的智能之处在于它知道你的内容如何进行范围的界定,通过以下命令的 combo 来高效的进行编辑

{command}[i|a]{scope}

也就是说,除了 dd yy 这种命令之外,任何命令包括 y d s c

按键作用
iw“inner word” 选择内联单词
it“inner tag” 选择内联 tag (指的是 xml/html 标签内容)
i"“inner quotes” 选择内联引号
ip“inner paragraph” 选择内联段落
is“inner sentence” 选择内联句子
as“a sentence” 选择一个句子

缩进

按键作用
>> / <<向右/左缩进
2>> / 2<<向右/左缩进 2 次
=自动缩进当前行
=%自动缩进当前代码块
gg=G G=gg自动缩进当前文件

其他

按键作用
~将光标位置的字母大小写互换
guw将光标位置的单词变为小写
gUw将光标位置的单词变为大写
guu将当前行所有字母变为小写
gUU将当前行所有字母变为大写
g~~将当前行所有字母变为大小写互换
Ctrl-A将光标位置的数字自增
Ctrl-X将光标位置的数字自减
5Ctrl-A将光标位置的数字增加 5
ga查看光标位置字符的 ascii 码
g8查看光标位置字符的 utf-8 编码

查找

在 normal 模式下直接按下 /?,然后输入要搜索的关键字按下回车即可。(/是向下查找,?是向上查找)

查找支持正则表达式,如果需要特殊字符,则需要 \ 转义。

查找默认大小写敏感,可以在末尾加入 \c 忽略大小写

命令作用
/{word}向下查找 word
?{word}向上查找 word
* g*查找光标所在位置的单词(g*忽略忽略单词边界)
# g#反向查找光标所在位置的单词(g#忽略忽略单词边界)
n N查找下/上一个(在?搜索下是相反的)
:nohighlight :nohl取消搜索高亮显示

上面的查找是跨行的,如果你想要在行内进行查找,可以使用 f F t T 命令

命令作用
f{x} /F{x}查找右/左边的 {x} 字符
t{x} /T{x}查找右/左边的 {x} 字符, 光标定位在字符左边
; ,查找下/上一个(在 F T 搜索下是相反的)

替换

在命令模式下按下:,然后输入s字符进入替换模式,相关语法如下

1
:{scope}s/{regexp}/{result}/{flag}

其中scope为替换的作用域,regexp为正则表达式,result为要替换的结果,flag 为替换标志

例如 :.,+6s/foo/bar/g 的意思为,在当前行及下 6 行的范围内(.,+6)将所有的(g)foo替换为bar

寄存器

Vim 提供了一些存放剪贴板及宏的内存区域,我们称之为 Register,也叫做寄存器。Vim 提供了 10 类共 48 个寄存器供我们使用。

你可以使用 "aY 来复制一整行到寄存器 ‘a’ 中,然后按下 "ap 来粘贴寄存器 ‘a’ 中的内容。

除了 a-z的 26 个命名寄存器,Vim 还提供了一些特殊的寄存器

寄存器作用
""匿名寄存器. 使用 d c s x 时,被删除的寄存器会进入该寄存器内。
"00 号寄存器. 保存着被拷贝来的字符串, 当使用命名寄存器拷贝时,不会被存入该寄存器
"1 - "91-9 号寄存器. 保存着上次被删除的行和段落,编号为历史记录
"-小删除寄存器. 不足一行的删除操作会被放入该寄存器内,如 dw cb dt) 等指令
"a - "z命名寄存器. 该寄存器只有指定时才会被写入,同时录制宏时也会保存到命名寄存器中
小技巧: 使用小写字母时会替换寄存器的内容,使用大写则会追加。
":只读寄存器. ": 存储了上次 command 模式下的命令,和 : 对应
".只读寄存器. ". 存储了上次 insert 模式中插入的字符串,和 . 重复上次命令是一样的
"%只读寄存器. 存储了当前文件的路径,是相对 vim 工作目录的路径
"#buffer 交替文件寄存器. 存储了当前 vim 的交替文件
"=表达式寄存器. 当键入 "= 时会跳到命令行模式,此时可以输入任何 vim 表达式并保存到该寄存器中
"* "+该寄存器存放了系统的剪贴板的内容. 在 X11 系统中, "* 指鼠标拖放选中区域, "+ 指系统剪贴板
"~有文本拖放到 vim 中时,被拖拽的文本会存储在这里
"_黑洞寄存器. 所有存储到该寄存器中的内容都会消失,避免影响任何寄存器的内容
"/搜索模式寄存器. 存放了上一次搜索的关键词,与 / 对应

值得一提的是,任何寄存器中的值都是可以拷贝到命令模式中的。 你可以在命令模式下直接输入 "ap, 也可以在命令行模式下输入 <Ctrl-R>a 来执行。

作用域

  • .(或留空) 当前行
  • % 全文
  • ,范围
  • 1,$ 第 1 行到最后一行
  • .,+2 当前行与接下来 2 行
  • '<,'> 选区范围 (在 visual 模式下输入:会直接补全)

替换标志

替换标志可以叠加使用

  • (留空) 只替换一次
  • g 全局替换
  • i 忽略大小写
  • c 替换前确认

进行替换确认时,y n 表示替换/不替换当前位置,a q 表示替换/不替换所有,l 表示替换当前位置并退出

命令

读取 shell 命令

你可以使用 :r!datedate 的输出插入到当前光标位置

配置

关于配置,可以进入命令模式输入 set 来临时设置配置,也可以配置在 .vimrc 永久生效

配置名说明
clipboard=unnamed设置对接系统剪贴板
ignorecase设置默认进行大小写不敏感查找
incsearch敲键的同时搜索,按下回车把移动光标移动到匹配的词; 按下 Esc 取消搜索。
number nu显示行数
relativenumber rnu显示相对行数
so=5设置滚动屏幕时上下保留的行数
smartcase如果有一个大写字母,则切换到大小写敏感查找
wrapscan设置到文件尾部后是否重新从文件头开始搜索

Tips

  1. 将某处内容替换可以进入选区选中要替换的内容后直接按 p 进行替换
  2. 可以使用 CTRL-[ 代替 ESC,左手小指 CTRL,右手小指 [ 熟练后很方便
  3. 想要跳转到当前软行首使用 0w 会比 ^

参考资料

使用技巧

现在的互联网都鼓励大家使用 Chrome 浏览器,它很强大,本身简洁,支持非常多的插件。但正因如此,大家都比较懒不愿意去花时间学习适应一个新的产品去打造适合自己的浏览器,所以我在这里写下一些使用 Chrome 浏览器的小技巧供大家参考学习。

搜索引擎相关

相信不少朋友不愿意使用 chrome 浏览器是因为它默认的搜索引擎是 google,而对于国内环境来说,普通用户不使用特别手段是上不了 google.com 的,所以你在地址栏输入向搜索的关键词时会跳转到 google 导致无法显示,从而必须先进入到 baidu.com 然后再进行搜索。

修改默认搜索引擎

那有没有简单的方法能够将 chrome 浏览器的默认搜索引擎切换为百度呢?当然有。

进入设置页面,找到 搜索引擎 一栏,将默认搜索引擎切换为百度即可

switch-search-engine

快捷切换搜索引擎

学到了上面的方法你还不满足,我想在多个搜索引擎中自由切换,比如搜技术类作品用 github,搜视频用 bilibili,搜百科用 wikipedia,搜地名用 map.baidu.com。

按照一般思路,搜百科用 wikipedia 的话要先去 zh.wikipedia.org,然后在该站点的搜索栏中键入要查询的关键字,总共两个步骤。

那我现在教你一个快捷的方法:直接在地址栏键入 wikipedia,然后按下 tab 键,会发现地址栏变成这样:(不过要保证你之前用过 wikipedia 的搜索功能)

阅读全文 »

自己在使用 git 的过程中遇到了不少问题, 最终我都会花时间把它们解决. 这里记录下我遇到这些场景时的解决办法, 并总结一下各种方法的优缺点, 让大家少走点弯路.

使用案例

正在做一个功能, 这时临时需要做别的修改

你可能会遇到这种情况: 当你正在做一个功能(feature-A)时, 这个功能并没有开发完, 但这时有同学喊你紧急修复一个线上 bug 或者要你 pull 一下代码. 这种情况下你会怎么做呢 ?

  • A.

    1
    2
    3
    4
    5
    6
    git add .               // 将当前改动提交至暂存区
    git commit -am "save" // "保存"一下这些改动
    git checkout master // 切换到 master 分支
    // some change commit
    git push origin master // 修复完成后提交
    git checkout feature-A // 切换回功能分支继续开发
  • B.

    1
    2
    3
    4
    5
    6
    7
    git add .
    git commit -am "temp" // 临时"保存"一下这些改动, 因为我最后会撤销它
    git checkout master
    // some change commit
    git push origin master
    git checkout feature-A // 切换回开发分支
    git reset --mixed HEAD^ // 撤销上一次提交并恢复工作区
  • C.

    1
    2
    3
    4
    5
    6
    git stash               // 存储工作区和暂存区
    git checkout master
    // some change commit
    git push origin master
    git checkout feature-A // 切换回开发分支
    git stash pop // 还原工作区和暂存区

正确姿势

C. 使用 git stash 功能

阅读全文 »

本文是针对小白的科普向文章, 我会尽量使用浅显通俗的语言, 让小白们尽可能看懂.

很多人有这样一个误区, 在使用电脑感觉比较 “卡” 时, 就想清理一下电脑里面的垃圾来加快运行速度. 但我到底该不该时常清除电脑中的 “垃圾” 呢? 换句话说, 清理 “垃圾” 真的能加速电脑运行吗?

下面我们简单介绍一下 “垃圾”, 如果你只想知道该不该清理, 直接跳到底部结论部分即可.

360中的垃圾清理

我使用 360 安全卫士 (版本 11.2) 的电脑清理功能为例, 列举电脑中的 “垃圾” 可以分为哪些类别.

阅读全文 »

写在前面: 应用推荐的相关文章其实一直想做, 因为我自己用的一些软件或应用都非常小众, 感觉很轻量 / 实用, 不像 360 全家桶那些应用浓重的商业气味. 这类软件知道的人不多, 介绍给朋友时他们总有种 “你哪来这么多有意思的软件啊!” 的感觉, 所以写下这个系列的文章, 让这类软件让更多的人知道, 支持作者, 支持优质应用 !

我先慢慢积累一些推荐, 后面我会做成一个应用小仓库之类的东西, 推荐一些小众的、轻量的、实用性非常高的应用程序。

阅读全文 »

前几天我的姐姐让我帮她做一个公众号的头像, 也作为她以后店谱的 LOGO, 举手之劳的事情就答应了, 但我也不是很清楚她喜欢哪种风格的, 我就随便选了几种风格列了一个简单的表格给她选, 她也随手选了一两个比较喜欢的.

为了做出让她更满意的头像, 也怕我对风格理解的偏差, 我就给了她一个素材网站, 从里面选出自己喜欢的元素, 并让她选好后告诉我.

第二天我问她的时候, 她也没有上去选, 我说那我直接帮你做了吧, 她说好, 并且她本也是这么打算的. 最后我就按她之前选得风格, 添加了一些我觉得比较好看的元素, 做好后就给她了, 最后她也很满意.

logo-avatar 图: 我帮她设计的公众号头像


通过一件这么小的事, 突然想起了以前帮客户设计网页的时候也遇到过类似的情况. 你觉得按照自己喜欢的方式完成客户的目标, 总有种 “ 不是最完美 “ – 达不到客户心中想要的那种结果的感觉.

以前看书的时候, 看到那些 “ 把客户当作傻子, 当作一个刚学会说话的小孩 “ 这样的字句的时候不以为然, 客户应当有他们自己的想法. 但现在看来事实本应如此, 是我在当前领域涉及较深时, 思考问题总喜欢复杂一些, 全面一些, 考虑的很多. 但客户的要求有时候并不是那么高, 甚至他们有时候不介意去 “ 抄 “ 别人的页面.

所以说, 隔行如隔山. 他们需要的是你的专业知识, 他们也不清楚到底这样的设计有怎样的思考, 怎样的用途, 你尽管按照自己的想法去做好每一个环节, 而不要想着尽量让客户参与进来, 这样有时反而会耽误工期或让客户觉得你不太专业.

客户总是懒惰的.