标签：exports 接口 引入 string web程序 method com ima host
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.end(JSON.stringify(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
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 ，下一篇我们来讲解一下事件 ^_^
标签：exports 接口 引入 string web程序 method com ima host
原文地址：http://www.cnblogs.com/phptree/p/7203597.html
