Vue框架Mock的使用

冷不防 2022-12-05 10:21 201阅读 0赞

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

--------------------

1：在项目里面新建一个mock文件夹，在mock文件夹里面新建一个test.json文件

![1ce582489e1100782ec2b6ed9f00203d.png][]  
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)
     })
    
     }
    }

![23d2352a92d2fb38c92a602171177ee7.png][]

![9f273e5efb76f994f71e4a758b75c41b.png][]

3:浏览器输入http://localhost:8080/api/test  
成功看到模拟数据  
![ff9f5db99b88d9f788f825890181aaea.png][]

4:使用第三方http请求库axios进行ajax请求,这里不会，可以从参考上一篇文章内容。

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

![ae61f9f7073f571edaa8a4f19fcca7a6.png][]

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里面的数据请求成功显示如下  
![f69223416a0976b7b7d5b93d52f98cba.png][]

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]

以上几章代码写在了github上面，需要的可以参考，后续会继续完善：https://github.com/wangxiaoting666/Element-UI

[http_element-cn.eleme.io_zh-CN]: https://links.jianshu.com/go?to=http%3A%2F%2Felement-cn.eleme.io%2F%23%2Fzh-CN
[https_github.com_ElemeFE_element]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FElemeFE%2Felement
[1ce582489e1100782ec2b6ed9f00203d.png]: /images/20221123/b5ad72ae6cf74c91825e18742476ea57.png
[23d2352a92d2fb38c92a602171177ee7.png]: /images/20221123/1d27a992ff9e4e4893c4e268fac98ab1.png
[9f273e5efb76f994f71e4a758b75c41b.png]: /images/20221123/17e008c328e947959fd6f53ed2d4e0e1.png
[ff9f5db99b88d9f788f825890181aaea.png]: /images/20221123/d5c926124c624c26936df1ce7583658d.png
[ae61f9f7073f571edaa8a4f19fcca7a6.png]: /images/20221123/43a30c0259fb48eebc5afe8230aaf607.png
[f69223416a0976b7b7d5b93d52f98cba.png]: /images/20221123/3f4921c7b44a41e79ef0f2c1b9be98f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/e14c2095fbb84fac966dd7dc926f29d3.png