基本理念

通過對接 cnode.js 的公開 api 的列表，以及詳情頁面，實(shí)現(xiàn)一個(gè)超小型的項(xiàng)目實(shí)戰(zhàn)，盡可能的掌握 vue 的項(xiàng)目入門的各項(xiàng)關(guān)鍵配置。 
本系列博文不涉及 vuex 的內(nèi)容。因?yàn)檫@部分內(nèi)容屬于比較高階的內(nèi)容，并且在大多數(shù)中小型項(xiàng)目中是沒有多大用處的。所以情況是，大多數(shù)情況下，你并不需要 vuex。當(dāng)你需要的時(shí)候，你應(yīng)該有看懂官方文檔的水平。如果你沒有看懂官方文檔的水平，我說再多都是沒有什么用的。并且在 vue 的入門文檔中涉及這部分內(nèi)容的話，會(huì)給新手徒增煩惱，所以本系列博文不涉及 vuex 的內(nèi)容。

基礎(chǔ)概念論述

前后端分離開發(fā)模式

在若干年前，我們的 WEB 項(xiàng)目開發(fā)模式是如下的：

1. 設(shè)計(jì)師設(shè)計(jì)頁面設(shè)計(jì)稿
2. 前端工程師切成 html+css+js 的頁面
3. 后端工程師拿到前端工程師的做好的頁面，利用模板引擎或其他技術(shù)嵌套進(jìn)后端代碼中，實(shí)現(xiàn)項(xiàng)目開發(fā)。

這種開發(fā)模式的缺點(diǎn)是，哪怕頁面出現(xiàn)一點(diǎn)點(diǎn)小的改變，也需要前端人員和后端人員同時(shí)協(xié)調(diào)開發(fā)，并且后端人員不能把全部精力放在業(yè)務(wù)流程以及數(shù)據(jù)邏輯等方面，還必須和前端人員一起來處理各種兼容問題。開發(fā)效率不高，溝通繁瑣。

所以，我們推崇前后端分離的開發(fā)模式。

1. 設(shè)計(jì)師設(shè)計(jì)頁面設(shè)計(jì)稿
2. 前端工程師和后端工程師以及其他技術(shù)人員約定項(xiàng)目開發(fā)接口規(guī)范
3. 后端工程師按照約定接口規(guī)范開發(fā)相應(yīng)接口
4. 前端工程師開發(fā)頁面，并對接后端接口（可能先期采用假接口）開發(fā)頁面

與不分離的開發(fā)模式相比，對前端技術(shù)人員的技術(shù)要求高了很多，原先只需要會(huì)寫靜態(tài)頁面即可，但是現(xiàn)在必須了解如何對接接口，以及其他很多內(nèi)容。很多十年以上的前端開發(fā)人員在學(xué)習(xí)這些新內(nèi)容的過程中，崩潰了。

SPA

不是指水療。是 single page web application 的縮寫。中文翻譯為 單頁應(yīng)用程序 或 單頁Web應(yīng)用。更多解釋清參看 百度百科：SPA

所有的前端人員都應(yīng)該明白我們的頁面的 url 構(gòu)成：

http://www.fengcms.com/index.html?name=fungleo&old=32#mylove/is/world/peace

• 1

如上的 url 由以下部分組成：

1. http:// 規(guī)定了頁面采用的協(xié)議。
2. www.fengcms.com 為頁面所屬的域名。
3. index.html 為讀取的文件名稱。
4. ?name=fungleo&old=32 給頁面通過 GET 方式傳送的參數(shù)
5. #mylove/is/world/peace 為頁面的錨點(diǎn)區(qū)域

前面四個(gè)發(fā)生改變的時(shí)候，會(huì)觸發(fā)瀏覽器的跳轉(zhuǎn)亦或是刷新行為，而更改 url 中的錨點(diǎn)，并不會(huì)出現(xiàn)這種行為，因此，幾乎所有的 spa 應(yīng)用都是利用錨點(diǎn)的這個(gè)特性來實(shí)現(xiàn)路由的轉(zhuǎn)換。以我們的 vue 項(xiàng)目為例，它的本地 url 結(jié)構(gòu)一般為以下格式：

http://localhost:8080/#/setting/task

• 1

可以明顯的看到我們所謂的路由地址是在 # 號后面的，也就是利用了錨點(diǎn)的特性。

以上理解是我的個(gè)人描述，不代表百分百符合標(biāo)準(zhǔn)答案，但這樣理解是沒有問題的。

RESTful 風(fēng)格接口

實(shí)際情況是，我們在前后端在約定接口的時(shí)候，可以約定各種風(fēng)格的接口，但是，RESTful 接口是目前來說比較流行的，并且在運(yùn)用中比較方便和常見的接口。

雖然它有一些缺陷，目前 github 也在主推 GraphQL 這種新的接口風(fēng)格，但目前國內(nèi)來說還是 RESTful 接口風(fēng)格比較普遍。

并且，在掌握了 RESTful 接口風(fēng)格之后，會(huì)深入的理解這種接口的優(yōu)缺點(diǎn)，到時(shí)候，你自然會(huì)去想解決方案，并且在項(xiàng)目中實(shí)行新的更好的理念，所以，我這系列的博文，依然采用 http:/// 網(wǎng)站提供的 RESTful 接口來實(shí)戰(zhàn)。

了解程序開發(fā)的都應(yīng)該知道，我們所做的大多數(shù)操作都是對數(shù)據(jù)庫的四格操作 “增刪改查” 對應(yīng)到我們的接口操作分別是：

1. post 插入新數(shù)據(jù)
2. delete 刪除數(shù)據(jù)
3. put 修改數(shù)據(jù)
4. get 查詢數(shù)據(jù)

注意，這里是我們約定，并非這些動(dòng)作只能干這件事情。從表層來說，除get外的其他方法，沒有什么區(qū)別，都是一樣的。從深層來說包括 get 在內(nèi)的所有方法都是一模一樣的，沒有任何區(qū)別。但是，我們約定，每種動(dòng)作對應(yīng)不同的操作，這樣方便我們統(tǒng)一規(guī)范我們的所有操作。

假設(shè)，我們的接口是 /api/v1/love 這樣的接口，采用 RESTful 接口風(fēng)格對應(yīng)操作是如下的：

---

get 操作 /api/v1/love

獲取 /api/v1/love 的分頁列表數(shù)據(jù)，得到的主體，將是一個(gè)數(shù)組，我們可以用數(shù)據(jù)來遍歷循環(huán)列表

post 操作 /api/v1/love

我們會(huì)往 /api/v1/love 插入一條新的數(shù)據(jù)，我們插入的數(shù)據(jù)，將是JOSN利用對象傳輸?shù)摹?/p>

get 操作 /api/v1/love/1

我們獲取到一個(gè) ID 為 1 的的數(shù)據(jù)，數(shù)據(jù)一般為一個(gè)對象，里面包含了 1 的各項(xiàng)字段信息。

put 操作 /api/v1/love/1

我們向接口提交了一個(gè)新的信息，來修改 ID 為 1 的這條信息

delete 操作 /api/v1/love/1

我們向接口請求，刪除 ID 為 1 的這一條數(shù)據(jù)

---

由上述例子可知，我們實(shí)現(xiàn)了5種操作，但只用了兩個(gè)接口地址， /api/v1/love 和 /api/v1/love/1 。所以，采用這種接口風(fēng)格，可以大幅的簡化我們的接口設(shè)計(jì)。

以上內(nèi)容均為本人的認(rèn)知與理解，與標(biāo)準(zhǔn)教科書肯定不一樣。但有助于新人簡潔明了的理解內(nèi)容。更多內(nèi)容，請查看：RESTful API 設(shè)計(jì)指南 
另外，RESTful 風(fēng)格也不僅僅只有這幾種操作，還有更多的操作。但我們常見的操作，就是這些。就好比我們不需要掌握了男女的全部衛(wèi)生知識再去做愛一樣，我一般崇尚的是，脫掉褲子，just do it now! 我們在不斷的實(shí)踐中，不斷的提高我們的技術(shù)以及技巧，臨淵羨魚不如退而結(jié)網(wǎng)就是這個(gè)道理。

vue 是什么，以及我們?yōu)槭裁催x擇 vue

在我們公司的實(shí)際拓展中，由于選擇框架時(shí)，angular 正在新舊交替，江山未穩(wěn)，因此我們當(dāng)時(shí)嘗試在兩個(gè)項(xiàng)目中引用不同的技術(shù)路線 react 和 vue 。

實(shí)踐證明，這兩個(gè)都是非常優(yōu)秀的框架。但是同時(shí)也證明，在前端初學(xué)者的面前，vue 的學(xué)習(xí)成本明顯比 react 要低很多。

在同樣優(yōu)秀，并且都能實(shí)現(xiàn)效果的情況下，我們選擇了 vue 技術(shù)框架。

所以，選擇的理由特別的簡單——只是因?yàn)樗唵危?/p>

好，vue 是什么？

我不管官方的解釋是什么，我的解釋如下：

為了實(shí)現(xiàn)前后端分離的開發(fā)理念，開發(fā)前端 SPA 項(xiàng)目，實(shí)現(xiàn)數(shù)據(jù)綁定，路由配置，項(xiàng)目編譯打包等一系列工作的技術(shù)框架

這里，我們說的 vue 不僅僅是 vue.js 這一個(gè)文件，而是圍繞 vue.js 配套的一系列的工具。就好比我們說的 linux 不僅僅是 linux 這個(gè)系統(tǒng)核心，而是包含了一整套外圍工具的完整系統(tǒng)。

具體如下：

1. vue.js 核心，不解釋。
2. VueRouter2 實(shí)現(xiàn)路由組織工具。
3. webpack 項(xiàng)目打包以及編譯工具。
4. nodejs 前端開發(fā)環(huán)境。
5. npm 前端包管理器。
6. axios ajax 接口請求工具。
7. sass-loader 和 node-sass css 預(yù)處理。
8. element 基于 vue 的后臺組件庫。
9. iview 基于 vue 的另一套后臺組件庫。
10. vue-cli vue 項(xiàng)目腳手架。一鍵安裝 vue 全家桶的工具。

其他還有很多，我們用到哪邊，說哪邊。

命令行的重要性

如果你依然沉浸在 GUI 的圖形界面中無法自拔，對于 CLI 命令行充滿恐懼或者敵視，那么，現(xiàn)實(shí)會(huì)殘酷的告訴你，你落伍了。

雖然有很多項(xiàng)目在盡力的實(shí)現(xiàn)這些內(nèi)容的可視化操作，例如 iview 的 iView Cli ，我雖然肯定這些卓越的工程師做出的艱辛的努力，但是，不可否認(rèn)的說，它也沒有徹底的拜托命令行。

并且，命令行

更好

更快

更強(qiáng)

更裝逼

所以，無論如何，你都不應(yīng)該排斥命令行，還要積極的擁抱它，學(xué)習(xí)它，掌握它。

甚至，關(guān)注我博客的同學(xué)可能會(huì)注意到，我前面自己甚至寫了很多的 shell 的相關(guān)博客。要知道，我可是一個(gè)老前端工程師。這里我不是顯擺我的資歷，而是客觀的評價(jià)自己，已經(jīng)跟不上時(shí)代了。我所掌握的那些知識，是非常陳舊的。因此，只有不斷的學(xué)習(xí)，才能不斷的提高自己。

我對你的建議如下：

1. 拋棄 windows 操作系統(tǒng)，不管它是什么版本的 windows。
2. 購買一臺 macbook pro 沒錢購買可以選擇 黑蘋果 ，可以參考我的系列博文 打造前端MAC工作站以及相關(guān)文章索引
3. 如果不是 photoshop 的重度用戶，并且想要更深層次的掌握更多內(nèi)容，請使用 linux 系統(tǒng)。ubuntu 操作系統(tǒng)還是比較簡單上手的。有一定 linux 使用經(jīng)驗(yàn)的同學(xué)，建議使用 arch linux 操作系統(tǒng)，新手不要嘗試，因?yàn)槟阋欢ò惭b不上。
4. 除了使用 atom 或 vscode 這樣的現(xiàn)代編輯器，更推薦掌握 vim 這樣基于cli的編輯器的基本使用。能用到什么樣的層次，取決于你自己的需求，相關(guān)內(nèi)容可以參考：世界上最牛的編輯器： Vim系列博文。

最后強(qiáng)調(diào)，別問我有關(guān) windows 的問題，我很久沒用過 windows 系統(tǒng)，并且關(guān)于系統(tǒng)底層的問題，我根本就不知道如何解決。

我說的，你不一定要全部掌握或者理解。但一定要有一個(gè)起碼的概念。至少，知道我說的大概是一個(gè)什么樣的玩意兒。

第一篇博文，基本沒有涉及到任何代碼的部分，但是下面，我們要開始干活兒了。

如果文章由于我學(xué)識淺薄，導(dǎo)致您發(fā)現(xiàn)有嚴(yán)重謬誤的地方，請一定在評論中指出，我會(huì)在第一時(shí)間修正我的博文，以避免誤人子弟。