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里面的数据请求成功显示以下

---

原文做者：祈澈姑娘