在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

智能推荐

vue2 使用vue-org-tree 组件完整示例Demo vue2-org-tree-程序员宅基地

文章浏览阅读1.2w次,点赞8次,收藏37次。安装完成后,vue2项目根目录下package.json自动更新以上 2个包信息。安装vue2-org-tree, 然后再安装样式 less-loade。_vue2-org-tree

WEB渗透SQL注入(常见数据库手工注入方法)!-程序员宅基地

文章浏览阅读882次,点赞24次,收藏20次。union select 1,column_name,3,4...from information_schema.columns where table_name = 表名;Oracle:and 1=2 union select '1','2'...from dual(虚表)

从零开始搭建opencv3.0交叉编译环境(Ubuntu14.04+eclipse)(四)_opencv3 交叉编译-程序员宅基地

文章浏览阅读2.7k次。本次是opencv3.0的交叉编译前几次的教程已经安装了opencv3.0并测试,基本工具不重复叙述交叉编译用友善之臂的编译工具,官网地址:http://www.arm9.net/download.asp我测试过另一个交叉编译工具,编译的时候会出错换成友善之臂之后就成功了。。。我下载的是4.4.3版本http://arm9download.cncncn.co_opencv3 交叉编译

POJ 3207 Ikki's Story IV - Panda's Trick(2-sat)_ikki's story iv - panda'strick-程序员宅基地

文章浏览阅读162次。Ikki's Story IV - Panda's TrickTime Limit: 1000MS Memory Limit: 131072KTotal Submissions: 11303 Accepted: 4133Descriptionliympanda, one of Ikki’s friend, likes playing games with Ikki. Today after min..._ikki's story iv - panda'strick

错误处理-程序员宅基地

文章浏览阅读58次。# -*- coding=utf-8 -*-# author=zyq#错误处理#某些代码可能出错时,就用try来运行,如果执行出错,则后续代码不会执行,而是直接跳转到错误代码处理代码,即except语句#执行完except后,如果有finally语句,则执行try: ..._2.运行以下代码,输出错误信息,简述错误原因,并说明如何处理该错误。-*- coding: utf-8 -*一#生成一个元素符合正态分布的二给数组,并打印该数组import numpy as nparr2=np. random. randn(10, 5)print(生成的随机数组为: \n' ,arr)错误信息:

Java StringBuilder toString()方法与示例-程序员宅基地

文章浏览阅读4.4k次。StringBuilder类的toString()方法 (StringBuilder Class toString() method)toString() method is available in java.lang package. toString()方法在java.lang包中可用。 toString() method is used to represent string deno..._stringbuilder.tostring()

随便推点

luogu 3488 [POI2009]LYZ-Ice Skates 线段树 + 思维-程序员宅基地

文章浏览阅读77次。Code:#include <bits/stdc++.h>#define setIO(s) freopen(s".in","r",stdin), freopen(s".out","w",stdout) #define maxn 1000000 #define ll long long #define lson (now<<1) ..._p3488 [poi2009]lyz-ice skates

面向VBA一维数组的实用自定义函数-程序员宅基地

文章浏览阅读995次。UDF.dll包含了一组实用的用户自定义函数,提供了数组处理的快速方法,可以在VB6、VBS、32位VBA中调用。看完如下的实例代码,就明白它的用处了。Private MyUDF As New UDF.ArrayConversionSub 是否包含某元素() Dim Array1(2 To 5) As String Array1(2) = "Word..._vba自定义数组函数怎么写

Helm Chart模板详述和样例_helm chart template-程序员宅基地

文章浏览阅读4.4k次,点赞5次,收藏12次。Helm最核心的就是模板,即模板化的Kubernetes清单文件,模板经过渲染后会被提交到Kubernetes中,本质上就是Go语言的template模板,模板文件位于template/目录中。将Kubernetes清单文件中可能经常变动的字段,通过指定一个变量,在安装的过程中该变量将被值value动态替换掉,这个过程就是模板的渲染。变量的值定义在values.yaml文件中,该文件中定义了变..._helm chart template

Matlab 如何生成三维图像_matlab输出三维图-程序员宅基地

文章浏览阅读1w次,点赞21次,收藏13次。介绍两种方法,用surf和Curve Fitting,两者的区别在于:surf方法出的图是固定的,视角不可改变。Curve Fitting方法的三维图可以转动视角。一、surf例如有代码:% 生成数据xn1 = linspace (0 , 4) ;% 定 义 x1 的 点 列 默 认 是 100 个 0 4 代 表 上 下 界xn2 = linspace (0 , 4) ;% 定 义 x2 的 点 列[ X1 , X2 ] = meshgrid ( xn1 , xn2) ;% X、Y 轴 数 据_matlab输出三维图

汉字排序法(汉字转拼音)_现代汉字排序法类型?-程序员宅基地

文章浏览阅读3.9k次。 汉字排序法(汉字转拼音)1.国家标准汉字代码 汉字字数繁多,属性丰富,因而汉字代码体系也较复杂,包括: (1)汉字机内码。它们是汉字在计算机汉字系统内部的表示方法,是计算机汉字系统的基础代码。(2)汉字交换码。它们是国_现代汉字排序法类型?

Linux 读取一行字符串,利用Shell脚本循环读取文件中每一行的方法详解-程序员宅基地

文章浏览阅读1k次。linux shell 的 利用Shell脚本循环读取文件中每一行的方法详解前言本文主要给大家介绍了关于使用Shell脚本循环读取文件每一行的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。一、使用for循环for line in `cat filename`doecho $linedone或者for line in $(cat filename)doecho $line..._使用linux shell 脚本读取一行文字中的第一个空格和第二个空中之间的字符串 很抱

推荐文章

热门文章

相关标签