express+vue-cli實現前后端分離交互小例

准備工作

1、Express 應用生成器

npm install express-generator -g

2、vue-cli手腳架

npm install -g vue-cli

3、項目結構

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

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

開始

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

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

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

簡單配置

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

2、在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