準備工作：

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端口，并進行了交互，各位，像前后端分離進軍吧！

參考：

Vue.js――基于$.ajax實現數據的跨域增刪查改 

express中文文檔  

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。