在uni-app项目里使用node服务实现模拟接口_祈澈菇凉的博客-程序员秘密

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

1:json数据
写在data底下的js里面


5640239-4b96dada7b55f5a2.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服务。

5640239-9c1cb2e12650a7ae.png

server.js

const http = require("http");
const data = require("../data/json");
const data2 = require("../data/json1");
const data3 = require("../data/json3");

const server = http.createServer((req, res) => {
    //解决跨域问题
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    res.setHeader('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    res.writeHead(200, {
    'Content-Type': 'application/json'
    });
    if(req.url === '/'){
        res.end(JSON.stringify(data.data))
    }
    if(req.url === '/data'){
        res.end(JSON.stringify(data2.data))
    }
    
    if(req.url === '/data3'){
        res.end(JSON.stringify(data3.data))
    }
});

server.listen(3000, () => {
    console.log("server is running!")
})

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

cd  server
$ node --inspect  server.js
5640239-b4cceef2ca6ef22d.png

4:打开浏览器,就可以看到模拟接口实现啦
http://localhost:3000/

5640239-54237fd90233227f.png

http://localhost:3000/data

5640239-4187ea0d0b7e972a.png

http://localhost:3000/data3
5640239-7d819bc17f279e19.png

5:测试一下,就用这个接口吧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>

好的,测试成功了,数据也可以显示啦


5640239-d4b535e609d8013b.png

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


5640239-6689c93cf145fe8b.png
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_36538012/article/details/103505335

智能推荐

nrm安装过程及报错解决_nrm const open = require('open');_是菜菜籽ya的博客-程序员秘密

打开powerShell npm install rnm -g //下载全局包nrm运行nrm时报错:nrm : 无法加载文件 C:\Users\Lenovo\AppData\Roaming\npm\nrm.ps1,因为在此系统上禁止运行脚本。有关详细信息,请 参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。所在位置 行:1 字符: 1+ nrm ls+ ~~~ + Catego

redash+mysql_Redash版本更新部署_晓荼的博客-程序员秘密

Redash,make your company data driven,connect to any data source, easily visualize and share your data……背景当前内部使用的redash版本为 0.10.0+b1774,许多新特性都不支持;新版本的redash已经支持 query params 和 filter;最新版本的redash已经支持 LD...

不用学习直接编写uni-app(uni-app 阻止冒泡事件)_沧海青竹的博客-程序员秘密

&lt;view id=”v1” @click="closeMenus('left')"&gt; &lt;view id=”v2” class="menulist" @click="al()" &gt;&lt;/view&gt;&lt;/view&gt;在uni-app页面中,经常点击v2的事件时,默认执行了al() 与 closeMenus('left')事件,但只想执行a...

NVIDIA系列显卡与AMD系列显卡性能对比,以及购买显卡的时候应该看哪些性能指标,NVIDIA显卡与AMD显卡的区别_显卡 a系列 p系列_点亮~黑夜的博客-程序员秘密

文章目录:1 NVIDIA系列显卡与AMD系列显卡性能对比2 购买显卡的时候应该看哪些性能指标3 NVIDIA显卡与AMD显卡的区别1 NVIDIA系列显卡与AMD系列显卡性能对比1、NVIDIA与AMD显卡系列性能对比——参考12、NVIDIA与AMD显卡系列性能对比——参考22 购买显卡的时候应该看哪些性能指标1、购买显卡的时候应该看哪些性能指标——参考3 NVIDIA显卡与AMD显卡的区别1、 NVIDIA显卡与AMD显卡的区别——参考12、 NVIDIA显卡与AMD显卡的区别——参考

数据库性能分析、优化入门_haiquan81_0的博客-程序员秘密

  最近参加了公司一位DBA关于数据库性能的分析,觉得讲得挺不错的,因此做下总结,也算是一种积累。 这个博文整体结构分为三个部分:第一部分,阐述数据库的数据存储结构;第二部分,SQL性能分析(核心部分);第三部分,SQL调优实例。  1 数据库的数据存储结构在开始性能优化前,首先需要对优化的对象进行了解,这样我们才能抓住问题的本质。 页面(BLOCK)数据库...

CortexM内核栈的8字节对齐及关键字 PRESERVE8_可惜花海已不再的博客-程序员秘密

注:本文只用于本人学习一、什么是栈对齐?栈的字节对齐,实际是指栈顶指针须是某字节的整数倍。因此下边对系统栈与MSP,任务栈与PSP,栈对齐与SP对齐 这三对概念不做区分。另外下文提到编译器的时候,实际上是对编译器汇编器连接器的统称。二、AAPCS栈使用规约在ARM上编程,但凡涉及到调用,就需要遵循一套规约AAPCS:《Procedure Call Standard for the ARM Architecture》。这套规约里面对栈使用的约定如下:...

随便推点

Uni-app 订单页 下拉加载更多_uniapp下拉加载更多_YoloAva的博客-程序员秘密

订单页面 下拉加载逻辑:1.给每个Tab绑定滑动触底事件reachBottom(currentIndex),传入了currentIndex。在函数内判断:为哪个index,并且对应数组比如orderTotal &gt; this.orderList.length,这就说明可以加载更多,就==》pageNum++;并调用查询订单的接口this.__init()。2.接口返回200后有个判断:若pageNum=1,将请求到的list直接赋值;若pageNum&gt;1,就用p...

MySQl中多行合并成一列_mysql多行多列合并为一行一列_爱笑的小黑同学的博客-程序员秘密

mysql&gt; select * from aa;+------+------+| id| name |+------+------+|1 | 10||1 | 20||1 | 20||2 | 20||3 | 200||3 | 500|+------+------+6 rows in set (0.00 sec)以id分组,把name字段的值打印在一行,逗号分隔(默认)mysql&gt;...

Qos拥塞管理原理_qos af ef_格洛米爱学习的博客-程序员秘密

拥塞现象的产生:拥塞发生的主要场景:速率不匹配:报文从高速链路进入设备,再由低速链路转发出去。汇聚问题:报文从多个接口同时进入设备,由一个没有足够带宽的接口转发出去。拥塞可能会引发一系列的负面影响:增加了报文传输的时延和抖动。过高的延迟会引起报文重传。使网络的有效吞吐率降低,造成网络资源的损害。加剧耗费大量的网络资源(特别是存储资源),不合理的资源分配甚至可能导致系统陷入资源死锁而崩溃。拥塞管控概述:拥塞管理,是在流量发生拥塞时,保证重要的流量能够通过,普通流量不会饿死。队

基于ROS平台的STM32小车-3-小车底盘与ROS的通信_MetaSmiles的博客-程序员秘密

介绍小车底盘与ROS通讯方式ROS平台与底盘通信协议ROS平台与小车底盘的通信一般是通过串口或者CAN总线。 我这里采用的是串口,以下为我自定义的通信数据格式:(1)底盘串口部分串口接收(1)内容:小车左右轮速度,单位:mm/s(所有数据都为 float型,float型占4字节)(2)格式:10字节[右轮速度4字节][左轮速度4字节][结束符"\r\n"2字节]串口发送...

CSDN图片上传API接口(图床)_怎么抓图床接口上传切片_space9bug的博客-程序员秘密

原创文|Space9发布日期:2019年8月24日 10:36Python 3本地图片上传实现import osimport filetypeimport requestsfrom requests_toolbelt import MultipartEncoder# 支持.jpg .gif .png .jpeg .bmp .webp,大小不超过5Mpic_path = "D...

python打包wheel文件_python wheel打包_花花少年的博客-程序员秘密

一、参考资料python打包wheel文件Python打包whl文件二、重要说明打包的package中需要包含README.md、LICENSE[非必须]和setup.py文件。三者分别是说明文档,许可证以及python setuptools所用来安装该package的构建脚本。setup.py中包含了package对应的信息(例如该package的名称、版本、作者)以及该package应当包含的程序文件和数据。三、参数解释name: 该package的名字,该名字可以由字母、数字、-组成,注

推荐文章

热门文章

相关标签