6 vue-cli mock數據

https://www.cnblogs.com/dengxiaolei/p/7338773.html

//--------------------------------------const portfinder = require('portfinder')

const express=require('express')//liying------++
const app = express()//ly
var appData = require('../data.json')//ly加載本地數據文件
var seller= appData.seller //ly獲取對應的本地數據並賦值給變量
var goods = appData.goods //獲取對應的本地數據並賦值給變量
var ratings= appData.ratings //獲取對應的本地數據並賦值給變量
var apiRoutes = express.Router()//ly express框架的router函數
app.use('/api', apiRoutes) //ly經過路由請求數據

 

//------------------------------------------

已有代碼

watchOptions: {
poll: config.dev.poll,
}

對象後

//------------------------------------------

before(app) {
app.get('/api/seller', (req, res) => {
res.json({
// 這裏是你的json內容
errno: 0,
data: seller
})
}),
app.get('/api/goods', (req, res) => {
res.json({
// 這裏是你的json內容
errno: 0,
data: goods
})
}) ,
app.get('/api/ratings', (req, res) => {
res.json({
// 這裏是你的json內容
errno: 0,
data: ratings
})
})
}

 

 

最近本身學習vue,可是沒有後臺的數據，因此本身寫了

實現步驟：

1. 首先在vue-li目錄下text文件下建立一個json文件，來寫本身的json數據 上圖：

 

2.在項目的build文件下，配置dev-server.js文件，在內部引入你的json文件，能夠按照相關的數據進行分類。

 

3.配置內容

var appData=require('../test/data.json')

var users=appData.users

var apiRouter=express.Router()

apiRouter.get('/users',function (req,res) {
  res.json({
    errno:0,
    users:users
  })
})
app.use('/api',apiRouter)

 

 4.到這裏你的mock數據已經完成了，接下來就是發請求了

5.首先我用的是vue2官方推薦的 axios ，你須要 install一下哦！ 

 axios 步驟：

1）.npm install axios

2）.就是在你的main.js裏面引用全局註冊一下

import axios from 'axios';

Vue.prototype.$axios = axios;

3）. 好了，好了，如今你就能夠在你的組件中使用 axios了

這裏給一個get請求的

 this.$axios.get(url).then((response) => {
        // success
        this.myData = response.data.data;
      }, (error) => {
        // error
        console.log(error)
      });

嗯，到這裏你已經學會axios的使用了！！！

5. 在你的文件中發送get請求 如圖：

 

 到這裏你就能夠使用本身的數據了！！