Mock的使用

Element UI手冊：cloud.tencent.com/developer/d… 中文文檔：element-cn.eleme.io/#/zh-CN github地址：github.com/ElemeFE/ele…

---

1：在項目裏面新建一個mock文件夾，在mock文件夾裏面新建一個test.json文件

test.json:

{
    "first":[

        {"name":"520","nick":"我愛你"},

        {"name":"521","nick":"我願意"},

        {"name":"1314","nick":"一輩子一世"}
    ]

}
複製代碼

2:在build目錄下找到webpack.dev.conf.js文件，編寫如下代碼

// mock code
const express = require('express')
const app = express()
const posts = require('../mock/test.json') 
const routes = express.Router()
app.use('/api', routes)

// 若是是post請求，那麼將get改成post便可
devServer: {
 ...
 before(app){
 app.get('/api/test', (req, res) => {
  res.json(posts)
 })

 }
}

複製代碼

3:瀏覽器輸入http://localhost:8080/api/test 成功看到模擬數據

4:使用第三方http請求庫axios進行ajax請求,這裏不會，能夠從參考上一篇文章內容。

methods: {
            getData() {
                axios.get('http://localhost:8080/api/test').then(response => {
                    console.log(response.data);
                }, response => {
                    console.log("error");
                });
            }
        }
複製代碼

vue頁面代碼參考

<template>
    <div id="app">
    </div>
</template>
<script>
    import axios from "axios";
    export default {
        name: "app",
        data() {
            return {
                itemList: []
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                axios.get('http://localhost:8080/api/test').then(response => {
                    console.log(response.data);
                }, response => {
                    console.log("error");
                });
            }
        }
    }
</script>

複製代碼

5:在瀏覽器裏面，咱們能夠看到，mock裏面的數據請求成功顯示以下

---

原文做者：祈澈姑娘