First Knowledge Vue 2.0 (3): Ajax request

0, to simulate the AJAX request, need to build a Web program, using express easy and fast.

1. Install Express build Web server:

NPM install-g expressnpm install-g express-generator

2. Create an Express project:

3, start the project, generally can use:

NPM start

However, the development environment needs to monitor code changes and automatically restart the process, so you need to install supervisor.

NPM install-g Supervisor

Start with supervisor:

Supervisor./bin/www

For ease of administration, create a Start.bat startup script in the project root directory.

Start supervisor./bin/www

4, modify the Express default router directory of Users.js, the requested get parameters, converted to JSON directly return ^_^

var express = require (' Express '); var router = Express. Router ();/* GET users listing. */router.get ('/', function (req, res, next) {
  Res.header ("Access-control-allow-origin", "*");//solve cross-domain problem  res.end (json.stringify (Req.query));}); Module.exports = router;

At this point, the Web server fights, can provide a simple data interface services, the effect is as follows:

5, build front-end AJAX requests, install Axiso:

NPM Install-save Axios

6, introduced in Main.js:

Import Axios from ' Axios ' vue.prototype. $ajax = Axios

7. Rewrite the game module:

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= " I am the game module, user name: "+response.data.username});}}}  

Start the front-end development mode, you can observe the browser network has an interface request, the display effect is as follows:

Of course, this is just a demo, next we will explain the event ^_^

First Knowledge Vue 2.0 (3): Ajax request