首页 > Web开发 > 详细

初识vue 2.0(3):Ajax请求

时间:2017-07-23 23:16:02      阅读:433      评论:0      收藏:0      [点我收藏+]

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 ,下一篇我们来讲解一下事件 ^_^

 

初识vue 2.0(3):Ajax请求

原文:http://www.cnblogs.com/phptree/p/7203597.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!