vue+node+mysql實現先後端分離

隨着node的出現大前端愈來愈火  火到能夠寫後端了 將來是前端的天下  哈哈哈 牛被我吹遠了，下面來看下如何運用node實現先後端分離的開發 彷佛這種分離我的以爲只適合小型項目 大型的還需後端的弟兄們支持那咱們來看看如何實現：

1.搭建vue框架  比較懶得人  菜鳥教程已經提供快速搭建的教程了  具體地址參看

http://www.runoob.com/vue2/vue-install.html

這樣咱們就搭建一個官方的帶有webpack的vue框架   

 

2.安裝MySQL  具體看教程 很簡單 

http://www.runoob.com/mysql/mysql-install.html安裝好數據庫  能夠安一個數據庫管理的客戶端  方便連接 方便操做數據庫 我用的是dbforge

3.安裝node  進入node官方網站下載一個  安裝好以後 在安裝一個npm的包管理器

4.進入cmd 的黑窗口   mac我沒有 只知道window的  mac的具體百度去吧

cd到剛纔建立的vue框架的目錄裏 執行npm  install  此步驟是安裝vue的依賴包和運行包

5.繼第四步  上面安裝的是前端的包  除此以外還要安裝node後端相關的包

後端採用的是express4.x的框架  執行node install express --save-dev，

安裝mysql驅動包  npm  install MySQL --save-dev  這樣咱們就安裝好後端基本的包了 下面開始編寫後端代碼

6.在vue的框架下 新建一個serve的文件夾  在新建一個app.js後端運行的主要入口文件

app.js的代碼以下

注意 我用的是express的router做爲路由 全部的路由放在一個router.js的文件裏

/api的意思就是當訪問/api的時候會匹配到這裏method.getALL是回調函數 寫在一個method的獨立文件裏

額 寫到這裏感受寫反了 忘記數據庫的配置   那麼咱們來看下數據庫的配置  首先是密碼帳號 寫在一個獨立的文件裏data.base.config.js 的文件  寫在這裏是爲了方便管理

sql的編寫 寫在sql.js裏

這樣 以來 咱們就搭建好簡單的後端服務 那麼下面看看如何和前端交互

前端運行在本地的8080端口上  咱們能夠看wepack 下的config文件的index.js文件 就能夠知道了

後端是運行在本地的3000端口上  考慮到跨域  咱們要用webpack自帶的代理訪問3000端口的服務，因此如圖 proxtable裏能夠加入代理的設置以及匹配方式  這樣咱們就能夠開啓先後端交互了 

在vue框架裏的某個界面裏寫一個請求 好比

而後運行vue框架 咱們會發現比沒有連上去  那是由於 node服務沒有運行 

因此要打開cmd 運行 node serve/app.js  

此處本人作了個優化 每次都要運行兩次 一個是前端的 一個是後端的  非常麻煩 太懶 沒辦法能不能一次運行就能跑項目呢  因而乎找到了node 並行兩個命令的方法  就是用 

concurrently

這個能夠一次運行兩個命令  那麼咱們就能夠改寫package.json了  寫成這樣

這樣就方便多了  

到此爲止  先後端分離就完成了 哈哈 ，本人前端菜鳥一枚