前記
做為一個從去年六月才開始學習前端的新手，終於終於。。。我花了四天寫出了我人生中的第一個前後端都是自己完成的專案，emmm，廢話不多說，先放圖片和連結
設計思路--後端
這是我寫的第一個後端專案，因為對async和await語法的支援我選擇了koa2，因為是第一次寫後端，前期只是注重實現功能，卻對後端返回的資料規範並沒有進行詳細設計，等到我開始寫前端的時候，才發現，後端返回的是什麼玩意
下面是我的總結，
- 我遵循了
RESTful API設計規範，到最後我發現我的請求不是get就是post，對於刪除和修改，這樣不符合HTTP行為規範 - 後端返回
data資料的格式，成功狀態一定要統一格式，成功狀態一定要統一格式，成功狀態一定要統一格式，例如：一邊是{status:'ok'}表示成功處理，另一邊是返回{status:0}表示成功處理，到最後前端獲取返回值的時候，你就要不停的使用if來判斷是不是成功的返回 - 返回資料要有一個良好的設計，比如我第一次編寫的時候，登入成功我把登入人的個人資訊忘記返回回來。。。誰登入了不清楚，emmm，我又去返工改後端程式碼，讓後端把資料返回回來
我的後端程式碼地址：note-serve
我的學習參考地址：一起學Node.js koa2進階學習筆記
設計思路--前端
我本身就是在一直寫前端程式碼，並且保持了半年每天都打程式碼上傳GitHub的好習慣（就算沒打程式碼我也要上傳GitHub，這是我的GitHub地址：Mrlgm，歡迎寵幸我），前端我使用的是我自己寫的UI元件庫voir-ui，雖然沒有幾個元件，但我還是要說一下
下面是我對於前端的總結
- 要對介面的模組劃分有一個準確的思路，比如有幾個頁面，每個頁面上要有什麼模組，哪些模組是可複用的，這些如果提前思考好，對編碼的速度會有很大的提升，磨刀不誤砍柴工
- 對於自己思考不出來的如何劃分模組的專案，那就先動手寫，哪怕把一個頁面揉雜到一起了，但是隻要寫出來了，再去改就會簡單很多了，只不過很多人不願意去重構程式碼，經常寫完就丟那裡了，這樣是不行的，這樣是不行的，這樣是不行的。。。
- 對於那些輸入輸出都是比較固定的程式碼段，可以將其封裝成函式，例如：axios傳送http請求，就可以將其封裝成一個promise物件，並且將其輸入的域名，請求等引數都固定好，封裝成一個個功能函式，只需呼叫就可以獲取輸出，這樣程式碼會非常的清晰明瞭
伺服器部署
最後要提一點，nodejs怎麼部署到伺服器上在一起學Node.js中有詳細的講述，但是vue打包後的專案怎麼部署到伺服器上呢？
其實，vue打包後的專案就是靜態檔案，最簡單的方法就是用一個nodejs伺服器將其當成靜態資源載入就好了，程式碼很簡單，如下
const Koa = require('koa')
const path = require('path')
const static = require('koa-static')
const app = new Koa()
// 靜態資源目錄對於相對入口檔案index.js的路徑
const staticPath = './dist'
app.use(static(
path.join( __dirname, staticPath)
))
app.use( async ( ctx ) => {
ctx.body = 'hello world'
})
app.listen(80, () => {})
複製程式碼就是如此簡單，node開啟就可以訪問了，記得伺服器開啟80埠，如果想要關閉命令列也能訪問，只需使用pm2就好了，具體使用方法在一起學Node.js最後一章節中有詳細描述。
後記
這是我第一次在掘金上寫文章，有哪些不好的地方，也請大家指出來，我會非常感激，如果有人願意看詳細教程的話，我會將後端我編寫的思路詳細的寫出來，雖然大部分都能在我給的那兩個參考資料中找到思路，hhh
另外我的後端API也可以供大家練手前端專案，也希望大家給我個star，謝謝大家