前后台分离之数据模拟

在前后端分离的项目中,前后端约定好接口以后,就开始进入各自的开发阶段了,这时候我们前端不可避免的就需要进行数据模拟,那么怎么进行数据模拟呢?我觉得有两种:

  1. 客户端 模拟数据,也就是在我们的前端项目中,使用js手写或者使用mockjs。使用这种方式的时候,不管怎么分离,代码中都会存在多余的东西,如独立开发时使用模拟数据,而前后台联调时就要注释掉之前的模拟数据,这样来回的切换,开发体验真的是很不爽有没有?
  2. 服务器端 模拟数据,我私以为这种应该是更好的方式吧?独立开发时,将ajax库的baseurl设置为本机服务器端的url,而前后端联调时只需将baseurl改为相应的url即可。这样只需要简单的修改baseurl就可以随意切换所需要的数据了,其他的东西都无需更改,很方便有没有?

下面就来个小小的demo吧。

假设前后端的接口约定如下: baseurl: http://test.com

获取用户列表:

  1. 接口地址: /index/getUserList
  2. 所需参数(GET):无
  3. 输出参数说明 | 参数 | 类型 | 参数名说明 | | :-------------: |:-------------:| :-----:| | id| Number| 用户id | | username | String | 用户名 | | realname | String | 真实姓名|

接下来就可以进行后台搭建了。

既然是前端,无疑是选择nodejs作为后台语言了,框架的话express,koa,thinkjs就随意了,我就偷下懒用 thinkjs 给大家说一说了。

$ npm install -g think-cli
$ thinkjs new demo;
$ cd demo;
$ npm i; 
$ npm i mockjs --save;
$ npm start

如此一来,后台服务器就已经启动了。

因为浏览器的跨域问题,后台服务器还需要设置CORS。在app/controller/base.js中添加以下代码:

__before() {this.setCORS();const isOption = this.isMethod('options');if (isOption) {this.ctx.json();return false;}}setCORS() {this.header('Access-Control-Allow-Origin', this.header('origin') || '*');this.header('Access-Control-Allow-Headers', 'x-requested-with,token');this.header('Access-Control-Allow-Methods', 'GET,POST,OPTIONS,PUT,DELETE');this.header('Access-Control-Allow-Credentials', true);}

接下来就是根据接口编写相应的函数对应接口了,

index/getUserList接口对应的函数为app/controller/index.js文件中的getUserListAction,

getUserListAction() {var data = Mock.mock({'arr|3-9': [{'id| 1': 1,'username': '@email','realname': '@name',}]});return this.ctx.success(data.arr);}

注:thinkjs单模块路由默认最大支持三级路由,多模块路由默认最大支持四级路由。单模块时,两级路由A/B对应的函数为controller/A.js的BAction函数,三级路由A/B/C对应的函数为controller/A/B.js的CAction函数;多模块可类比。若修改后thinkjs访问接口报错,可能是thinkjs未加载修改后的文件,重新启动试试。

今天就介绍到这里了,有问题的欢迎下方进行评论。

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

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

相关文章

碎玻璃:诊断生产Cassandra问题

我刚刚在健康市场科学(HMS)成立二周年之际,我们几乎一直在这里与Cassandra一起工作。 那时,我们遇到的问题很少。 就像我曾经使用过的其他几种技术一样,Cassandra“行之有效”。 但是,就像我曾经使用过的*…

java 一维数组_java基础 ---- 一维数组

为什么要使用数组: 因为不使用数组计算多个变量的时候太繁琐,不利于数据的处理。-------- 数组也是一个变量,是存储一组相同类型的变量声明一个变量就是在内存中划出一块合适的空间声明一个数组就是在内存中划出一块连续的空间数组长度就是…

四则运算2

作业描述: 悲催的二柱子接到了老师要求给软件增加一些小小的功能,具体要求如下: 1、除了整数以外,还要支持真分数的四则运算(需要验证结果的正确性); 2、一次出的题目避免相互重复; …

Java中的策略设计模式-示例教程

策略模式是行为设计模式之一 。 当我们对一个特定任务有多种算法,并且客户端决定在运行时使用的实际实现时,将使用策略模式。 策略模式也称为策略模式 。 我们定义了多种算法,并让客户端应用程序将算法用作参数。 此模式的最佳示例之一是采用…

MySQL数据库主从复制

使用gtid (也需要开启binlog日志) CHANGE MASTER TO MASTER_HOST’192.168.95.11’, MASTER_USER’mysql12’, MASTER_PASSWORD’mysql12’,MASTER_AUTO_POSITION 1; 使用binlog CHANGE MASTER TO MASTER_HOST’192.168.95.12’, MASTER_USER’mysql…

vue-cli 3.0 使用全过程讲解

2018年8月13日更新: 恭祝vue-cli 3.0.0 官方正式版发布,此后我们可以正式在3.0环境下进行项目开发了。 此文发布以来受到了很多朋友的阅读,但我深知这篇文章还是很浅显的,因此,我会在后续的 3.0 使用过程中分享我遇到…

java反射机制在spring_Java反射机制在Spring IOC中的应用

IOC:即“控制反转”,不是什么技术,而是一种思想。使用IOC意味着将你设计好的对象交给容器控制,而不是传统的在你的对象内部直接控制。本篇文章主要讲解一下IOC底层实现的原理(反射),Bean容器的实现,就不对I…

【图像处理】Haar-like特征

特征提取的原理、代码等; 如果是白黑白,是减去一个黑的还是2个黑的,网上有不同的说法;应该需要看原论文了。 论文原文 The sum of the pixels which lie within the white rectangles are subtracted from the sum of pixels in t…

mysql获取某个表的所有字段名

转载:mym43210 mysql安装成功后可以看到已经存在mysql、information_schema和test这个几个数据库。 information_schema库中有一个名为COLUMNS的表,这个表中记录了数据库中所有表的字段信息。 知道这个表后,获取任意表的字段就只需要一条sele…

neo4j / cypher:悬挂查询参数

一直以来,我一直在使用neo4j的密码查询语言, 迈克尔一直在告诉我在查询中使用参数,但是查询的性能始终可以接受,因此我没有必要。 但是,最近我正在研究一个数据集,并使用类似于以下的代码创建了约500个节点…

java调用浏览器组件来_Java 网页浏览器组件介绍

在使用 Java 开发客户端程序时,有时会需要在界面中使用网页浏览器组件,用来显示一段 HTML 或者一个特定的网址。本文将介绍在界面中使用浏览器组件的四种方法,给出示例的代码,并且分析每种方法的优点与不足,便于 Java …

前端入行两年--教会了我这些道理

1.前言 光阴似箭,日月如梭。不得不感慨时间过得很快,2017差不多结束了,一下子我从事前端开发的时间已经两年了。这两年可以说是一波三折,回想这两年的经历,让我忍不住了写下了这篇文章,记录自己在这两年经历…

解决Nginx: [error] open() Nginx.pid

使用nginx -c的参数指定nginx.conf文件的位置 sudo /usr/sbin/nginx -c /etc/nginx/nginx.conf 转载于:https://www.cnblogs.com/vannn/p/9756132.html

巴霍巴利王

巴霍巴利王 惊心动魄的宫廷政变,必然铸就新的王朝更迭。时代的婉转,终究选上得民心的君主。我们的故事就这样悄无声息的将你带入幽深的宫廷内院。 夜幕之中,面对寒冷与杀戮,一位身负重伤王室女人,抱着一个新生儿&#…

Java中的观察者设计模式-示例教程

观察者模式是行为设计模式之一 。 当您对对象的状态感兴趣并希望在发生任何更改时得到通知时,观察者设计模式很有用。 在观察者模式中,监视另一个对象状态的对象称为Observer ,而正在监视的对象称为Subject 。 根据GoF,观察者模式…

华为大数求和 java_大数乘积java

{"data":{"id":"8000-000000437045-0","name":"SEO专题页栏目分发组","type":"1","position":"8000-000000004003-0","status":1,"linkList":[{"id"…

IdnentiyServer-使用客户端凭据访问API

情景如下:一个客户端要访问一个api,不需要用户登录,但是又不想直接暴露api给外部使用,这时可以使用identityserver添加访问权限。 客户端通过clientid和secrect访问identitserver的Token Endpoint,获取accesstoken; 接…

重要·Flutter 首个预览版 发布

今天,InfoQ China 主办的 GMTC 全球大前端技术大会在北京举行,在这次大会中 Google 宣布发布 Flutter 首个预览版。这无疑让 Flutter 迈上了一个新的台阶。于此同时推出了 Flutter 社区中文资源 。可能有些同学还不了解 Flutter,这里再普及一…

复习做UWP时涉及到的几种加密签名相关

复习做UWP时涉及到的几种加密签名相关 原文:复习做UWP时涉及到的几种加密签名相关本人菜鸟一枚,大学里凭兴趣学了一点WP的皮毛,后来又幸运(或者不幸)的进了一家专注于Windows生态的公司做了一段时间的UWP。在博客园写点自己遇到的…

Java中的中介器设计模式-示例教程

中介者模式是行为设计模式之一 ,因此它处理对象的行为。 中介器设计模式用于在系统中不同对象之间提供集中式通信介质。 根据GoF,中介者模式意图是: 通过封装不同对象集相互交互和通信的方式,允许松散耦合。 允许每个对象集的动作…