Mock的使用教程

Element UI手册：https://cloud.tencent.com/developer/doc/1270
中文文档：http://element-cn.eleme.io/#/zh-CN
github地址：https://github.com/ElemeFE/element

---

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页面代码参考

5:在浏览器里面，我们可以看到，mock里面的数据请求成功显示如下

---

原文作者：祈澈姑娘
关注「编程微刊」公众号 ，在微信后台回复「小程序」，获取小程序开发全套资料和500G编程资源教程。