Use of Axios and mock of data

Remember in the front?

People, not through the long night of crying, is unable to understand life, we will these pain as a lesson and learning,

until one day the real feeling grows, even thanks to the teachings of this pain                

--Sanmao

First, Axios Official document Basic reading

We'll take a look at the official example axios . Usage: Https://github.com/axios/axios

The above note is probably good, the next one to practice

Second, new Mock.json

1. Start by creating a mock file with the data you need for the first page: Carousel map, events, recommendations

②mock.json

{  "Code": 200,  "MSG": "",  "Data": {    "Swiper": [      ".. /static/carousel1.png ",      ".. /static/carousel2.png ",      ".. /static/carousel3.png "    ],    "Activity": [      {        "img": ". /static/carousel1.png ",        "Name": "Brand: Minoz Store",        "desc": "Gentle years, Amazing time"      },      {        "img": ". /static/carousel2.png ",        "Name": "Brand: Minoz Store",        "desc": "You are the earth April days"      },      {        "img": ". /static/carousel1.png ",        "Name": "Brand: Minoz Store",        "desc": "Hello, Welcome to Minoz Store"      }    ],    "Recommend": [      {        "img": "@/assets/logo1.png",        "Name": "Brand: Minoz Store",        "desc": "Hello World"      },      {        "img": "@/assets/logo2.png",        "Name": "Brand: Minoz Store",        "desc": "Hello, hahaha."      },      {        "img": ". /static/carousel1.png ",        "Name": "Brand: Minoz Store",        "desc": "Welcome to my Store"      }    ]  }}

Iii. installation of axious and some configuration of data mock

1. First to install Axios and express, why use Express? Because we need to use the Express framework for the mock of our data, we'll explain the express in detail later.

① Installing Axios and Express

Also in Package.json you can see:

② in Build->webpack.dev.conf.js's head.

// Mock data const Express = require (' Express '= Express ()var appData = require ('./... /mock/mock.json ')var router = Express. Router ()//  request Local Data app.use ('/api ', Router) via routing

③ add before method to Devsever in Build->webpack.dev.conf.js

// Add before Method     before (app) {      app.get ('/api/index ', (req, res) = = {        Res.json (          {0,          Data:appdata        })}      )    }

Iv. using Axios to obtain mock data

1. We enter the Home.vue page first to introduce Axios

2. Then write a function in methods: Use Axios to get the first page data and print it, and then call it when the Vue life cycle is the mounted stage:

mounted () {      this. Getindexdata ();    },    methods: {      getindexdata () {        Axios.get ("/api/index"). Then (res          = = Res.data;          Console.log (data);}        );      }    }

3. Finally go to the browser and see if the data is printed.

"Complementary" two more practical:

1.IDE in a direct compile run, you don't have to cmd every time

①

Ii

③

2. This project first opened CMD run, but later modified the build inside the conf.js configuration, so, in the browser to see the 404not found and other errors,

Workaround: Turn off cmd and run again!!!

If you are in the ① method:

Ok,mock data is obtained, the next step is to pass the value to the component, and then render the data to the page

Above, complete ~ ~ ~

Use of Axios and mock of data