nodeJS+vue如何構(gòu)建前后端分離

這篇文章主要介紹nodeJS+vue如何構(gòu)建前后端分離，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

準(zhǔn)備工作：

1.安裝nodejs

2.安裝依賴包express4.x

3.安裝vue-cli腳手架

這里強(qiáng)調(diào)一下，express是后端服務(wù)器，它是一個(gè)獨(dú)立的服務(wù)器，vue啟動(dòng)的是前端服務(wù)器，vue-cli中已經(jīng)集成了一個(gè)小型的express，這兩個(gè)服務(wù)器是分開放的，但是它們都是基于nodejs的。

nodeJS部分：這里我已經(jīng)認(rèn)為你搭建好了express服務(wù)器，并且能在瀏覽器中訪問(wèn)到

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'});
});

說(shuō)明：到這里后端就配置完了，我這里寫了假數(shù)據(jù)，沒有訪問(wèn)數(shù)據(jù)庫(kù)，我只讓返回了一個(gè)json對(duì)象 {name:'aaa', pwd:'123'}

只要是 http://localhost:8080/first 這個(gè)路由過(guò)來(lái)的訪問(wèn)都可以拿到這個(gè)返回的對(duì)象了

這里需要說(shuō)明的是，后臺(tái)自己本來(lái)的域名下也是可以訪問(wèn)到這個(gè)路由的，就是說(shuō)明這個(gè)域名是可以共享的。

 --重啟服務(wù)器

Vue部分：這里我已經(jīng)認(rèn)為你搭建好了vue服務(wù)器，并且能在瀏覽器中訪問(wèn)到

說(shuō)明：我們這里引入了jquery，目的是為了用他的ajax插件，這里有同學(xué)可能會(huì)問(wèn)了，為什么不用vue-resource?

vue-resource: 是Vue.js的一款插件，它可以通過(guò)XMLHttpRequest或JSONP發(fā)起請(qǐng)求并處理響應(yīng)。也就是說(shuō)，$.ajax能做的事情，vue-resource插件一樣也能做到，而且vue-resource的API更為簡(jiǎn)潔。另外，vue-resource還提供了非常有用的inteceptor功能，使用inteceptor可以在請(qǐng)求前和請(qǐng)求后附加一些行為，比如使用inteceptor在ajax請(qǐng)求時(shí)顯示loading界面

我告訴你原因: 因?yàn)槲也粫?huì)，就是這么有底氣！還有，我再聲明，如果這個(gè)項(xiàng)目里再結(jié)構(gòu)方面有哪里不合理，還請(qǐng)請(qǐng)賜教，就是這么虛心求教

1.打開vue項(xiàng)目的入口文件

2.在入口文件中編寫代碼   這里可能有人問(wèn)為什么不用模塊化開發(fā)，我在說(shuō)一遍，我現(xiàn)在還不會(huì) -_- |       -_-|       -_-| 

這里我用了百度靜態(tài)資源庫(kù)的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.因?yàn)関ue項(xiàng)目是自動(dòng)刷新的，如果沒有，你就手動(dòng)刷新一下，因?yàn)槲疫€沒搞明白它什么在哪些情況下會(huì)自動(dòng)刷新，再不行就重啟服務(wù)器，哈哈

這是現(xiàn)在的前端頁(yè)面，我們點(diǎn)擊以后看控制臺(tái)，因?yàn)樵赼jax請(qǐng)求里寫的，我們?cè)谠L問(wèn)成功success時(shí)，打印出傳回來(lái)的數(shù)據(jù)

至此，我們的前后端入門就到此結(jié)束了。。。

以上是“nodeJS+vue如何構(gòu)建前后端分離”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！