How does the vue-cli project use vue-resource to obtain local json data (simulating data returned by the server), vue-clijson

How does the vue-cli project use vue-resource to obtain local json data (simulating data returned by the server), vue-clijson

Recently, vue-cli is used for a small project. In the project, vue-resource needs to be used for data interaction with the background, therefore, I used the local json data to simulate the data acquisition process in the background.

As for vue-resource installation and json preparation, I will not go into details ,,,

The procedure is as follows:

1. first introduce the structure of the project: Put the corresponding jsonfile at the most external layer together with index.html, which is called data. json.

My json data file is like this:

{"Seller": {"name": "Huilongguan (Huilongguan)", "description": "Hummingbird", "bulletin": "specifies a catering service provider. "," Avatar ":" http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg ",}," goods ": [{" name ":" hot sale list "," type ":-1}, {" name ": "Popularity list", "type":-1}], "ratings": [{"username": "3 ******* c", "avatar ": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png", "recommend": ["pumpkin porridge", "preserved meat porridge"]}, {"username": "2 ***** 3", "avatar ": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png", "recommend": ["lentils noodles"]}

2. Then add the code in the build dev-server.js:

// Simulate the data returned by the server -- start var appData = require ('.. /data. json '); var seller = appData. seller; var goods = appData. goods; var ratings = appData. ratings; var apiRoutes = express. router (); apiRoutes. get ('/seller', function (req, res) {res. json ({errno: 0, data: seller}) ;}); apiRoutes. get ('/goods', function (req, res) {res. json ({errno: 0, data: goods}) ;}); apiRoutes. get ('/ratings', function (req, res) {res. json ({errno: 0, data: ratings}) ;}); app. use ('/api', apiRoutes); // simulate the server to return data -- end

Note: After modification, re-run cnpm run dev (note that this step is required when the dev-server.js and db. json change ).

Explain the above Code:

1. First, request data in the root directory. json file. Obtain the file content and assign it to the appData variable. Then, obtain the field data and define the variables seller, goods, and ratings to assign values.

2, set the interface (Request Path) through the Router object provided by express and some methods (the get method here) and the callback function after the request is successful to process the data to be returned to the request end. (Errno is similar to the code value in the js request)

3. Finally, we need to "use" the Router object. In order to uniformly manage api interfaces, we add 'api/'to the front of the route to be requested to indicate that this path is used to provide api data. In this interface, when we access the "http: // localhost: 8080/api/sites" path, the sites object in db. json is returned to us.

3. Use resouce to obtain the data and use

export default{ data () {  return {   seller: {}  }; }, created () {  this.$http.get('/api/seller').then((response) => {   // console.log(response);   response = response.body;   const ERR_OK = 0;   if (response.errno === ERR_OK) {    let data = response.data;    console.log(data);   }  }); }, components: {  'v-header': header }};

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.