博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
mock数据(模拟后台数据)
阅读量:7041 次
发布时间:2019-06-28

本文共 1185 字,大约阅读时间需要 3 分钟。

作为前端经常需要模拟后台数据,我们称之为mock。通常的方式为自己搭建一个服务器,返回我们想要的数据。

项目中遇到的请求链接是类似这样子的:www.abc.com/user/login,而不是请求某个文件,如果采用PHP+Apache的方式就需要做路径重写,太麻烦。这里用的是nodejs搭建。

前提

1、Web应用前后端(台)分离:

后台向前台提供API接口,只负责数据的提供和计算,而完全不处理展现
前台通过Http(Ajax)请求获取数据, 在浏览器端动态构建界面显示数据

2、设计JSON数据结构

3、利用Node+express提供模拟数据

优点:可以在浏览器端访问
缺点:如果是打包发布就无法访问模拟数据, 只能是测试时使用

与以往的自己模拟的假数据不同,mockjs可以带给我们的是:在后台接口未开发完成之前模拟数据,并返回,完成前台的交互;在后台数据完成之后,你所做的只是去掉mockjs:停止拦截真实的ajax,仅此而已。

具体操作

步骤一.将 data.json 文件拷贝到 sellapp 目录下(与 index.html 同级)

模拟的数据请求是从 data.json 中读取数据,接下来就来编写这些接口。

mock数据(模拟后台数据)mock数据(模拟后台数据)

步骤二.在 webpack.dev.conf.js 中添加以下代码:

此次开发过程需要去本地数据地址进行请求,而原版配置在 dev-server.js 中,新版 vue-webpack-template 已经删除 dev-server.js,改用webpack.dev.conf.js代替,所以配置本地访问在 webpack.dev.conf.js 里配置即可。这里使用 express 框架去写一个 nodeserver,也可以用 express-router 来编写这些接口请求。

1)先获取数据:获取data.json中的数据,再分别将商家,商品,评论数据写入相应变量中

mock数据(模拟后台数据)

2)编写路由及相应接口

解析:调用 get 方法,传入 seller 接口,发送请求,服务端接受请求,返回给客户端一个json类型的数据(包括 errno 及数据),其中 errno 是开发规范所有,当其值为0时,表示返回的数据正常,当遇到一些比如权限限制时,errno 可能不为0,具体值是由也业务方规定的。因为本次项目使用的是模拟数据,所以 errno 一定为0。

mock数据(模拟后台数据)

3)运行

npm run dev,启动后输入http://localhost:8080/api/seller,如果数据正常显示,则数据能正常返回

参考原文:

PS:

1.Google可以用 jsonview 插件将返回数据格式化

2.express相关语法:

3.app.use和app.get的区别及解析:

转载于:https://blog.51cto.com/ycgit/2131889

你可能感兴趣的文章
jquery.pagination.js分页
查看>>
明晰php Zend Framework中的render
查看>>
FastJson、Jackson、Gson进行Java对象转换Json的细节处理
查看>>
Apache安全配置
查看>>
CentOS上安装Broadcom无线网卡驱动
查看>>
最简单的将手机号显示为匿名
查看>>
java高新技术<四>--类加载器、动态代理技术的深入讲解与应用
查看>>
NDK开发基础①使用Android Studio编写NDK
查看>>
Mesos + Docker Tutorial: How to Build Your Own Fra
查看>>
五章 常用Lua开发库3-模板渲染
查看>>
HttpClient 讲解 (1) 基础
查看>>
MyBatis 基础讲解
查看>>
PHP 浮点数比较
查看>>
zookeeper自动化安装配置脚本
查看>>
Java并发编程基础-Unsafe
查看>>
Executors submit()使用场景
查看>>
ReentrantReadWriteLock类的使用
查看>>
centos下安装五笔
查看>>
spring eureka-server配置
查看>>
ul动态生成li(JavaScript写)
查看>>