初識vue 2.0（3）：Ajax請求

0，模擬ajax請求，須要構建web程序，使用express 方便快捷。

1，安裝express 構建web server：

npm install -g express
npm install -g express-generator

2，建立 express 項目：

express myserver
cd myserver
npm install 

3，啓動項目，通常狀況下能夠使用：

npm start

但開發環境須要監控代碼變更並自動重啓進程，所以須要安裝 supervisor。

npm install -g supervisor

使用supervisor啓動：

supervisor ./bin/www

爲了方便管理，在項目根目錄下建立start.bat啓動腳本。

start supervisor ./bin/www

4，修改express 默認router目錄中的users.js，將請求的get參數，轉換成json直接返回 ^_^

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");//解決跨域問題
  res.json(req.query);
});

module.exports = router;

至此，web server打架完畢，能夠提供簡單的數據接口服務，效果以下：

5，構建前端ajax請求，安裝 axiso：

npm install -save axios

6，在main.js 中引入：

import axios from 'axios'
Vue.prototype.$ajax = axios
Vue.prototype.$ajax.defaults.withCredentials = true //跨域傳cookie

7，重寫Game模塊：

export default {
  name: 'game',
  data () {
    return {
      msg: ''
    }
  },
  mounted:function(){
	this.getData()
  },
  methods:{
	getData:function(){
		var _this = this;
		this.$ajax.get('http://localhost:3000/users?username=tree&password=123456').then(function(response) {
			console.log(response.data);
			_this.msg="我是Game模塊，用戶名："+response.data.username
		});
		
	}
  }
}

啓動前端開發模式，能夠觀察到瀏覽器network中有接口請求，顯示效果以下：

 

 

固然，這只是個demo ，下一篇咱們來說解一下事件 ^_^