使用 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 框架.

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

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

前言

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

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

Vi / Vim 版本的选择

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

文件

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

打开/保存/退出

挂起

通过 Vim 命令

通过 Shell 命令

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

寄存器

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

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

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

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

跳转

光标移动

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

编辑

编辑模式

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

在编辑模式下，按下Esc 退出编辑模式回到 normal 模式

撤销、重做

复制、剪切、粘贴

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

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

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

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

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

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

文本对象

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

{command}[inner|a]{scope}

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

大小写转换

查找

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

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

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

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

替换

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

1

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

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

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

作用域

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

替换标志

替换标志可以叠加使用

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

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

配置

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

小技巧

1. 用剪贴板中的内容替换当前光标处的单词

viwp

参考资料

• Linux vim - Runoob
• 技巧：快速提高 Vi/Vim 使用效率的原则与途径 - 方吾松
• 在 Vim 中优雅地查找和替换 - Harttle Land
• You don’t need more than one cursor in vim - @schoteffel
• Macros - Vim Tips Wiki
• Replace a word with yanked text - Vim Tips Wiki
• Vim 全局命令 g - Ein Verne’s Blog
• Vim Text Objects: The Definitive Guide - Carbon Five’s Blog
• Vim: Jump Back To Previous or Last Cursor Position - nixCraft
• Vim 寄存器完全手册 - Harttle Land

使用技巧

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

搜索引擎相关

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

修改默认搜索引擎

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

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

快捷切换搜索引擎

学到了上面的方法你还不满足，我想在多个搜索引擎中自由切换，比如搜技术类作品用 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 安全卫士 (版本 11.2) 的电脑清理功能为例, 列举电脑中的 “垃圾” 可以分为哪些类别.

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

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

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

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

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

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

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

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

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

客户总是懒惰的.