nodeJS（express4.x）+vue（vue-cli）構建先後端分離詳細教程(帶跨域)

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

----致  西安工程大學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中文文檔