小白初試koa2+vue項目搭建--在線便利貼--我想成爲全棧

前記

作爲一個從去年六月纔開始學習前端的新手，終於終於。。。我花了四天寫出了我人生中的第一個先後端都是本身完成的項目，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，謝謝你們