express+vue-cli實現先後端分離交互小例

準備工做

一、Express 應用生成器

npm install express-generator -g

二、vue-cli手腳架

npm install -g vue-cli

三、項目結構

.
├── server    //放置服務端代碼
└── view     //放置前端代碼

express是後端服務器，它是一個獨立的服務器，vue啓動的是前端服務器，vue-cli中已經集成了一個小型的express，這兩個服務器是分開放的。

開始

在根目錄下生成服務端項目 - server

//生成項目
express server
cd server
cnpm install

//運行項目
set DEBUG=server:* & npm start     //Windows平臺

簡單配置

一、在express目錄下，安裝cors包
npm install cors --save

二、在app.js中配置：開啓cors,就以下圖

添加接口，新建或者卸載其餘的同個文件中都行

在根目錄下生成前端項目 - views

//生成項目
vue init webpack views
cd views

cnpm install

//運行項目
npm run dev

下載axios

cnpm i --save axios

//在main.js中配置
import axios from 'axios'  //引入

Vue.prototype.$axios = axios;
axios.defaults.baseURL = 'http://localhost:3000';

請求數據

init(){
  this.$axios.get('/login').then(res=>{
    console.log(res)
  }).catch(err=>{
    console.log(err)
  })
}

結果

源碼地址：https://github.com/adoctors/express-vue-cli