json-server模拟后台接口

前言:

项目开发中,影响项目进程的常常是由于在前后端数据交互的开发流程中停滞,前端完成静态页面的开发后,后端迟迟未给到接口。而现在,我们就可以通过根据后端接口字段,建立一个REST风格的API接口,进而实现调用数据实现前端的独立开发。

// json-server:post请求一般为新增内容,获取数据用get
// 如果需要用到post可以用express+fs请求本地文件

方法1:

第一步:安装:命令行中输入 cnpm install json-server --save

第二步:找到build/webpack.dev.conf.js并在const portfinder = require('portfinder')这一行下面添加如下配置

              const express = require('express') //node.js的内置框架
const app = express()//请求server
var appData = require('../static/json-moni/jiekou1.json')//加载本地数据文件

var suibian= appData.suibian//获取对应的本地数据并赋值给变量

var suibian2= appData.suibian2//获取对应的本地数据并赋值给变量

var apiRoutes = express.Router()//express框架的router函数
app.use('/api', apiRoutes)//通过路由请求数据

 

第三步:设置get请求:在build/webpack.dev.conf.js下找到devServer并在watchOptions: {
      poll: config.dev.poll,
    },后面添加如下配置:

before(app) {
      app.get('api/suibian', (req, res) => {
        res.json({
          errno: 0,
          data: suibian
        })//接口返回json数据,上面配置的数据seller就赋值给data请求后调用

      }),

app.get('api/suibian2', (req, res) => {
        res.json({
          errno: 0,
          data: suibian2
        })//接口返回json数据,上面配置的数据seller就赋值给data请求后调用

      })

    }

 

方法2:

//首先var appData = require('../data.json')//加载本地数据文件
var seller = appData.seller//获取对应的本地数据 var goods = appData.goods var ratings = appData.ratings 

//然后找到devServer,在里面添加 before(app) { app.get('/api/seller', (req, res) => { res.json({ errno: 0, data: seller })//接口返回json数据,上面配置的数据seller就赋值给data请求后调用 }), app.get('/api/goods', (req, res) => { res.json({ errno: 0, data: goods }) }), app.get('/api/ratings', (req, res) => { res.json({ errno: 0, data: ratings }) }) }
所有的修改配置都需要重新启动运行命令的:npm run dev才能生效(切记 ),还有data.json数据也不能少,就放在跟目录下跟index.html同级;data.json的部分数据

 

转载于:https://www.cnblogs.com/GuGuT3T/p/8799231.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/267275.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

为什么生产环境都是linux,关于生产环境linux系统中的wheel用户组

本文系统环境:CentOS Linux release 7.7.1908 (Core)一般来说,目前linux系统中的wheel组,默认情况是没有使用到的、如果要使用wheel组,让其有具体的作用,需要结合/etc/pam.d/su文件配置很多在Linux中为了更进一步加强系…

微信小程序----全局变量

全局变量的作用 在微信小程序开发中,会遇到一个很实际的应用场景,就是一个变量会在多个页面进行使用。 例如: 1. 在微信小程序开发中使用高德地图的微信小程序开发,其中key值就需要在多个页面使用; 2. 在微信小程序开…

目录同步 linux,Linux系统目录实时同步

1.当操作系统根分区空间不够时(有大量的日志写入或应用部署在根分区),可以将单个或多个目录进行同步出来,源目录是磁盘较大的分区,目标目录是在根分区下,实际文件写入在较大的分区。[rootmysql01 ~]# mkdir /home/123 /123 …

byte转化为Bitmap,防止内存溢出

Java代码 ByteArrayInputStream is new ByteArrayInputStream(byte[]); BitmapFactory.Options optionsnew BitmapFactory.Options(); options.inPurgeable true; options.inInputShareable true; options.inSampleSize 2; try …

Hadoop点滴-HDFS命令行接口

1、-help[cmd] 显示命令的帮助信息 ./hdfs dfs -help ls1 2、-ls(r) 显示当前目录下的所有文件 -R层层循出文件夹 ./hdfs dfs -ls /log/map ./hdfs dfs -lsr /log/ (递归的)1 3、-du(s) 显示目录中所有文件大小,或者当只指定一个文件时,显示此文件的大小 ./hdfs d…

linux centos-6.5,Linux(CentOS 6.5)安装 mysql

linux下安装软件的方式很多,这里是使用简单而方便的yum来安装一、使用yum 安装mysql服务,客户端1、检查是否已经安装: yum list installed | grep mysql2、 yum list installed | grep MYSQL3、查询结果:4、这是我已经安装的mysq…

amcharts应用

查看选中的软件的下载量,通过amchart报表工具显示出软件日下载量,月下载量以及年下载量,下面简单介绍,amchart在struts2中的应用。 amCharts提供JavaScript/HTML5图表。一套包括串行(列,栏,线&a…

两种常见挂载Jenkins slave节点的方法

1、挂载slave节点的方法 在Jenkins的Master上,进入Mange node页面,可以管理node节点,例如新加、删除等操作。 其中, Name是节点名字; Description是节点描述; // of executors是该节点可以同时运行job的数…

linux下makefile中cp,make与makefile 的理解

当我们写程序过程中存在多个文件之间有复杂的包含关系时,若修改了其中一个源文件,就重新编译所有文件,一般是不必要的,并且当文件很多时,就显得非常笨拙。所有包含该文件的文件需要重新编译,而其它无关系的…

spinlock与linux内核调度的关系

作者:刘洪涛,华清远见嵌入式学院高级讲师,ARM公司授权ATC讲师。 关于自旋锁用法介绍的文章,已经有很多,但有些细节的地方点的还不够透。我这里就把我个人认为大家容易有疑问的地方拿出来讨论一下。 一、自旋锁&#x…

Python参数类型

位置参数默认参数可变参数命名关键字参数关键字参数1 def position_only(a, b):2 print(a, b)3 4 def keyword(aa, bb):5 print(a, b)6 7 def arg(a, *args):8 print(a, args)9 10 def kw(a, **kwargs): 11 print(a, kwargs) 12 13 def many1(a, b, cc, *arg…

keil用c语言怎么编辑器,用keil软件编写单片机程序的步骤

猜你感兴趣:新手教程:单片机的学习实践步骤运用单片机便是了解单片机硬件结构,以及内部资源的运用,在汇编或C语言中学会各种功用的初始化设置,以及完成各种功用的程序编制。 运用按钮输入信号,发光二极管显…

24c语言程序设计是啥,《C语言程序设计》作业答案.docx

精心整理《 C 语言程序设计》作业答案1.第 4题以下程序的输出结果是______。main(){intn[3][3],i,j;精心整理for(i0;ifor(j0;jfor(i0;ifor(j0;j)n[i1][j1]n[i][j];printf("%d\n",n[i][j]);---来源网络,仅供分享学习2/145精心整理}A.14B.0C.6D.…

体重 年龄 性别 身高 预测鞋码_【新手扫盲】身高体重性别年龄身体素质影响玩滑板吗?...

很多新手在迈入滑板大门之前都会有诸多顾虑,以为滑板跟其他运动一样,门槛很高我想说,滑板是项自由友好的运动下到3岁小宝宝,上到60岁以上老人只要你想玩,那就可以参与进来没有任何因素能阻止你玩滑板1、你比他高吗&…

c语言读入文件排序,帮忙-如何对文件排序啊

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼楼主加分哦,看看吧#include #include //#include #include #include using namespace std;void dfsFolder(string folderPath){ _finddata_t FileInfo; string strfind folderPath "\\*.*"; long Handle _…

html5点击按钮出现弹窗 怎么实现_HTML5游戏开发过程中的二三事

文/ Luiu最近跟的一款项目是HTML5手游,在这个项目中遇到并解决了诸多问题,也学习到了很多项目开发过程中需要注意的事情。这个项目自立项到现在已经过了5个多月,如今项目研发已经过了早期的忙乱阶段,于是借此机会梳理下思绪&#…

HDU 2063 过山车【二分图最大匹配】

Problem DescriptionRPG girls今天和大家一起去游乐场玩,终于可以坐上梦寐以求的过山车了。可是,过山车的每一排只有两个座位,而且还有条不成文的规矩,就是每个女生必须找个个男生做partner和她同坐。但是,每个女孩都有…

c语言编写贪吃蛇代码无错,刚学C语言,想写一个贪吃蛇的代码

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼#include#include#include#includetypedef struct snake{int a;int b;struct snake *u;struct snake *n;}snake,*snake1;typedef struct food{int a;int b;}food;void main(){char c,c0 d;int i,j,k,n1,t,at;snake p,q;snake *dd,…

blockchain_eth客户端安装 geth使用 批量转账(二)

回顾一下,前面我们讲到启动geth geth --rpc --datadir "F:/geth/Geth/" --light console 2>console.log 这一篇接着上面讲geth的使用,分为4个部分 1、创建账户 2、验证区块是否更新完毕 3、解锁账户 4、转账 此时进入到命令行模式 1、首先&…

CGContextAddLines和CGContextAddLineToPoint在线条半透明时候的区别

这两种都可以用来画线&#xff0c;前一种将整条线加入后画出&#xff0c;后一种对每个点进行和前一个点的连线。 sample1-(void)drawLine:(YJLines *)line{ int count [line.points count]; CGPoint addLines[count]; for (int j0; j< [line.points count]; j) { CGPoint …