首页 > 代码库 > 初识vue 2.0(3):Ajax请求
初识vue 2.0(3):Ajax请求
0,模拟ajax请求,需要构建web程序,使用express 方便快捷。
1,安装express 构建web server:
npm install -g expressnpm install -g express-generator
2,创建 express 项目:
express myservercd myservernpm 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请求
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。