Vue-use mock.js to simulate the data interface

Json analog data

Design the structure of json data

The business store interface includes the data of ordering, evaluation, and business information (the data displayed in the head is also business information), and the data of these three aspects has no order relationship directly, so you can use the object structure to store them.

// The goods array [] can be used to store these data objects (not ordered but of the same type)
// In addition to the category name of each food category, there is also a foods data to store this food category
// Each object in the Foods array is a food instance
{
    "goods":[
        {
            name: "Select Package",
            foods: [
                {
                    name: "Pumpkin porridge",
                    price: 9}}]]."ratings":[
        {}
    ],
    "info":｛｝
}
// All evaluation data belong to the same type, can use array to store [{evaluation 1},{evaluation 2}..]
// The merchant information data has no order and can be stored uniformly in the object
Copy the code

• Save the designed data.json mock data in the Mock folder

Use MockJS to simulate the data interface

npm install --save mockjs
Copy the code

• Define the mockServer file under the Mock folder to configure the interface for mock mock data

/* Use mockJS to provide the mock data interface */
import Mock from 'mockjs'
import data from './data.json'

// Returns the goods interface
Mock.mock('/goods', {code: 0.data: data.goods})
// Returns an interface for ratings
Mock.mock('/ratings', {code: 0.data: data.ratings})
// Return the info interface
Mock.mock('/info', {code: 0.data: data.info})

// export default ??? There is no need to expose any data to the outside, just save it to be executable
Copy the code

• Load the mockServer file in main.js

  import './mock/mockServer.js'
  Copy the code

Ajax requests the data that MockJS mocks

1. Define ajax request methods in API /index.js

   /* * Get the merchant information (the following request is intercepted by mock and returns no proxy required) */
   export const reqShopInfo = () = > ajax('/info')
   /** * get the merchant rating array */
   export const reqShopRatings = () = > ajax('/ratings')
   /** * get the array of merchant items */
   export const reqShopGoods = () = > ajax('/goods')
   Copy the code

2. Write a vuex configuration for managing data received from the background

   // 1. state
   goods: [].// List of items
   ratings: [].// List of merchant reviews
   info: {} // Merchant information
   
   // 2. mutations-type
   export const RECEIVE_GOODS = 'receive_goods' // Receive an array of items
   export const RECEIVE_RATINGS = 'receive_ratings' // Receive an array of merchant ratings
   export const RECEIVE_INFO = 'receive_info' // Receive merchant information
   
   // 3. mutations
   [RECEIVE_INFO] (state, {info}) {
     state.info = info
   },
   
   [RECEIVE_RATINGS] (state, {ratings}) {
     state.ratings = ratings
   },
   
   [RECEIVE_GOODS] (state, {goods}) {
     state.goods = goods
   }
   
   // 4. action
   // Get the merchant information asynchronously
     async getShopInfo ({commit}) {
       const result = await reqShopInfo()
       if (result.code === 0) {
         const info = result.data
         commit(RECEIVE_INFO, {info})
       }
     },
   
     // Asynchronously get the merchant rating list
     async getShopRatings ({commit}) {
       const result = await reqShopRatings()
       if (result.code === 0) {
         const ratings = result.data
         commit(RECEIVE_RATINGS, {ratings})
       }
     },
   
     // Asynchronously get the list of merchant items
     async getShopGoods ({commit}) {
       const result = await reqShopGoods()
       if (result.code === 0) {
         const goods = result.data
         commit(RECEIVE_GOODS, {goods})
       }
     }
   Copy the code

3. Test to obtain merchant information data in shop.vue

   // The info data can be viewed in vuex on the console
   mounted () {
   	this.$store.dispatch('getShopInfo')}Copy the code