首页 > 代码库 > 初识vue 2.0（3）：Ajax请求

初识vue 2.0（3）：Ajax请求

2024-11-04 18:48:02   208人阅读

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请求


联系
我们