nodeJS（express4.x）+vue（vue-cli）構建前後端分離詳細教程

標籤：資源   對象   編寫   www   需要   div   映射   aaa   expr   

好想再回到大學宿舍，當時床雖小，房隨小，但是心確是滿的

----致  西安工程大學a-114舍友們

轉載請註明出處：水車：http://www.cnblogs.com/xuange306/p/6185453.html沒圖片的教程都是耍流氓準備工作：

1. 安裝nodejs ---還用我教了？
2. 安裝依賴包express4.x  點這裡》》》nodeJS搭建本機伺服器
3. 安裝vue-cli腳手架 點這裡》》》vue-cli構建vue項目

　　這裡強調一下，express是後端伺服器，它是一個獨立的伺服器，vue啟動的是前端伺服器，vue-cli中已經整合了一個小型的express，這兩個伺服器是分開放的，但是它們都是基於nodejs的。

nodeJS部分： 這裡我已經認為你搭建好了express伺服器，並且能在瀏覽器中訪問到

1. 在express目錄下，安裝cors包
   1. npm install cors --save  
   2.  //這裡的--save是指把cors依賴注入到package.json中　
2. 在app.js中配置：開啟cors  //就如我配置的一樣
   
   
   

   //.............var cors = require(‘cors‘);//...............app.use(cors({    origin:[‘http://localhost:8080‘],    methods:[‘GET‘,‘POST‘],    alloweHeaders:[‘Conten-Type‘, ‘Authorization‘]}));

3. 在routes/index.js中配置一條路由映射
   

   router.post(‘/first‘, function(req, res, next) {  res.json({name:‘aaa‘,pwd:‘123‘});});

說明：到這裡後端就配置完了，我這裡寫了假資料，沒有訪問資料庫，我只讓返回了一個json對象 {name:‘aaa‘, pwd:‘123‘}

只要是 http://localhost:8080/first 這個路由過來的訪問都可以拿到這個返回的對象了

這裡需要說明的是，後台自己本來的網域名稱下也是可以訪問到這個路由的，就是說明這個網域名稱是可以共用的。

 --重啟伺服器

Vue部分： 這裡我已經認為你搭建好了vue伺服器，並且能在瀏覽器中訪問到

說明：我們這裡引入了jquery，目的是為了用他的ajax外掛程式，這裡有同學可能會問了，為什麼不用vue-resource?

 vue-resource: 是Vue.js的一款外掛程式，它可以通過XMLHttpRequest或JSONP發起請求並處理響應。也就是說，$.ajax能做的事情，vue-resource外掛程式一樣也能做到，而且vue-resource的API更為簡潔。另外，vue-resource還提供了非常有用的inteceptor功能，使用inteceptor可以在請求前和請求後附加一些行為，比如使用inteceptor在ajax請求時顯示loading介面

 我告訴你原因: 因為我不會，就是這麼有底氣！還有，我再聲明，如果這個項目裡再結構方面有哪裡不合理，還請請賜教，就是這麼虛心求教

1. 開啟vue項目的入口檔案
   

    

2. 在入口檔案中編寫代碼   這裡可能有人問為什麼不用模組化開發，我在說一遍，我現在還不會 -_- |       -_-|       -_-| 
   

   這裡我用了百度靜態資源庫的cdn載入

   <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><button>擷取json</button><script>    $(‘button‘).click(function(){        $.ajax({            type:‘POST‘,            url:‘http://localhost:3000/first‘,            headers:{                "Conten-Type":"http://localhost:3000/first"            },            success:function (backDate) {                // body...                console.log(backDate);            }        })    })</script>

    

3. 因為vue項目是自動重新整理的，如果沒有，你就手動重新整理一下，因為我還沒搞明白它什麼在哪些情況下會自動重新整理，再不行就重啟伺服器，哈哈

這是現在的前端頁面，我們點擊以後看控制台，因為在ajax請求裡寫的，我們在訪問成功success時，列印出傳回來的資料

至此，我們的前後端入門就到此結束了。。。

我們從localhost:8080連接埠訪問到了localhost:3000連接埠，並進行了互動，各位，像前後端分離進軍吧！
如果這篇文檔，協助到了你，記得打賞一下啊，1塊不嫌少，100不嫌多

 

 

 參考：

Vue.js——基於$.ajax實現資料的跨域增刪查改

構建 Express Api 五個有用的中介軟體[譯]

express中文文檔

 

nodeJS（express4.x）+vue（vue-cli）構建前後端分離詳細教程