When we are working on a project, there may not be a backend to provide the interface simulation data, then as the front-end will need to write their own JSON file simulation data load. In Vue only need Vue-resource (also can use Axios, installation method and Vue-resource like, specific use method can go to Axios official website to view, Here I use Vue's plugin vue-resource) and json-server to interact with each other to achieve the data simulation.
1. Install Vue-resource (Ajax request) and Json-server (mock data): NPM install Vue-resource--save--registry=https://registry.npm.t aobao.org--verbose npm Install json-server--save--registry=https://registry.npm.taobao.org--verbose 2. After the installation is successful, the dependency Vue-resource is introduced in the Main.js, and in the Vue you can use the $http for AJAX requests to see how it works. ：
3. Configure the service configuration in the Dev-server.js file of the build folder, as shown in: Note: (1). Since the local service that our Vue opens is localhost:8080, the port for mock data monitoring cannot be 8080, as long as there is no conflict. I use localhost:8081 here, so the 73rd line in the figure is port+1. (2). The Data.json in the 68th line of the figure is our fake data file, which is usually placed in the index.html sibling directory, and if not, the path needs to be modified. (3). If there is no proxy access, the first parameter of line 72nd directly writes the interface name, but generally we will use the proxy access, so here is the '/api ', the proxy settings are explained in the next step. 4. At the same time we need to make a proxy table, here I use the API, access to the agent can get to the data, the Config folder in the Index.js file for proxy configuration, as shown in the red box:
The Data.json file was arbitrarily written as shown in:
At this point, npm run Dev re-opens the service and enters the service address to see that the mock data has been successfully:
6. Then the data is requested in the project using AJAX, we have previously installed the Vue-resource plug-in and the dependency injection, in the project can directly make the request, as shown: the effect on the console output is as follows:
Further console.log (res.body) output effects are as follows:
At this point we have implemented mock data mock-up requests in Vue Project and hope to be of help to everyone. If you want to reprint please indicate the source: http://www.cnblogs.com/zishang91/p/7680569.html, in order to have errors can be modified in time, if there are shortcomings, please forgive and guidance, thank you!!!
Vue how mock data simulates AJAX requests
