使用node服务实现一个模拟接口

蔚落 2022-12-05 13:54 163阅读 0赞

在uniapp的项目里面，怎么写入模拟接口数据？现在使用node服务实现几个模拟接口，当然是用mock也是可以的哦，方法有很多种，目的只有一个，就是能够娴熟的应用在项目场景里面。

1：json数据  
写在data底下的js里面  
![0a2a3399825aef4c2344c295b73396ba.png][]

json.js

let data = {
         //这里放数据
    	 "categories": [
    	     "1",
    	     "2",
    	     "3",
    	     "4",
    	     "5",
    	     "6",
    	     "7",
    	     "8",
    	     "9",
    	     "10",
    	     "11",
    	     "12"
    	 ],
    	 "data": [
    	     3,
    	     2,
    	     4,
    	     4,
    	     5
    	 ]
    }
    module.exports = {
      data: data
    }

json1.js

let data = {
        "echatX": [
            "2019-07-02",
            "2019-07-03",
            "2019-07-04",
            "2019-07-05",
            "2019-07-06",
            "2019-07-07",
            "2019-07-08",
            "2019-07-09",
            "2019-07-10",
            "2019-07-11",
            "2019-07-12",
            "2019-07-13",
            "2019-07-14",
            "2019-07-15"
        ],
        "echatY": [
            120,121,123,123,125,127,128,129,120,123,122,126,129,122
        ],
        "echatY2": [
            60,64,63,63,65,67,68,69,61,66,65,68,69,65
        ],
    	"echatY3": [
    	    60,64,63,63,65,67,68,69,161,66,65,68,169,165
    	]
    }
    
    module.exports = {
      data: data
    }

json3.js

let data = {
        "first":[
            {"name":"王小婷","nick":"祈澈菇凉"},
    
            {"name":"安安","nick":"坏兔子"},
    
            {"name":"编程微刊","nick":"简书"}      
        ]
    }
    module.exports = {
      data: data
    }

以上是自己随意造的数据啊不要过于在意了

2：在项目底下新建一个server文件夹，用来写我的node服务。

![9ab1441dacd035e14e525c40c70199cd.png][]

server.js

3：运行  
在编辑器的内置终端里面，进入文件夹server，启动刚刚写的服务

cd  server

$ node --inspect  server.js

![1908677b4324854b8476ef5ec7867ee9.png][]

4：打开浏览器，就可以看到模拟接口实现啦  
[http://localhost:3000/][http_localhost_3000]

![8273a5970a1d59b5ea068342a761993e.png][]  
http://localhost:3000/data

![02486a502c073d1ffc2a3013c0657eb6.png][]  
http://localhost:3000/data3  
![7bf1acda76e881ed98094ad8a30218de.png][]

5:测试一下，就用这个接口吧[http://localhost:3000/data3][http_localhost_3000_data3]

<template>
        <view>     
            <view class="uni-padding-wrap uni-common-mt" v-for="item in itemList">
                 <span>{
       {item.name}}</span>
                 <span>{
       {item.nick}}</span>
            </view>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {  
                     itemList: []
                }
            },
            onLoad() {
                       this.getList();
                   },
            methods: {
                 getList() {
                    uni.request({
                        url: 'http://localhost:3000/data3', 
                        success: (res) => {
                            console.log(res.data);
                             this.itemList =res.data.first;
                        }
                    });
                }
            }
        }
    </script>
    <style>
    .img {
        width: 500upx;
        height: 500upx;
        margin: 0 95upx;
    }
    </style>

好的，测试成功了，数据也可以显示啦  
![36a5d9d1b6f39113c84cf090d20ff8a9.png][]

欢迎关注【编程微刊】公众号，回复【领取资源】,500G编程学习资源干货免费送。  
![ecfa6eaab2923389fbd2ed2056d5d42c.png][]

[0a2a3399825aef4c2344c295b73396ba.png]: /images/20221123/d266d23bc53b4953aa901648cf5d4687.png
[9ab1441dacd035e14e525c40c70199cd.png]: /images/20221123/3a04873fe2414b41b8d8f04b693f0fee.png
[1908677b4324854b8476ef5ec7867ee9.png]: /images/20221123/a69cc490ce024f28b8c231558e6bb3a0.png
[http_localhost_3000]: http://localhost:3000/
[8273a5970a1d59b5ea068342a761993e.png]: /images/20221123/b59508a14795493aaa81fba3506e4124.png
[02486a502c073d1ffc2a3013c0657eb6.png]: /images/20221123/853bdaff61eb4e8690f5a2ad4cb61390.png
[7bf1acda76e881ed98094ad8a30218de.png]: /images/20221123/b4ec5b2e64044177a3b2c2c6f02ad588.png
[http_localhost_3000_data3]: http://localhost:3000/data3
[36a5d9d1b6f39113c84cf090d20ff8a9.png]: /images/20221123/5d9cea157f8444e9826b4b85657c735a.png
[ecfa6eaab2923389fbd2ed2056d5d42c.png]: /images/20221123/b5d5b7ecbc354a7d9f42fc89468af29c.png