建立项目接口文档_分享:一步一个脚印,vue入门之使用mockjs搭建vue项目测试服务器...
在以前的文档中,我们构建了vue项目的整体架构,详见vue入门:vue项目架构设计起步,现在我们主要对其中的mock server 进行完善。
一、概述
前后端分离的项目优点之一就是可以前后端并行开发,互不影响。那么在后端接口没有完成之前,我们怎么进行前端项目的测试呢,这就需要我们自己构建一个前端测试服务,自己模拟假数据,以便于我们的前端开发工作。
这里我主要是应用mockjs做的mock server,并在vue2.0项目中进行使用。
mockjs可用来生成随机数据,并拦截 Ajax 请求,返回模拟的响应数据。
mockjs数据类型丰富,支持多种数据类型,如文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
mockjs增加了前端单元测试的真实性,用法简单。
mockjs的功能强大,语法也很多,具体可以查看mockjs官方文档
二、使用
1、在vue项目中安装依赖
npm install mockjs --save-dev
2、建立项目文件结构
根目录下建立mock文件夹,然后分别构建util.js 、index.js 、json文件(以index.json为例)
3、util.js文件,主要是用来进行json数据读取方法的封装。内容如下:
// 引入外部资源
const fs = require('fs')
const path = require('path')
module.exports = {
// 用于被index.js进行调用
getJsonFile (filePath) {
// 读取指定的json文件
const json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')
// 解析并返回
console.log(json)
return JSON.parse(json)
}
}
4、index.js文件,主要是用来定义各个接口方法。内容如下:
const Mock = require('mockjs')
const util = require('./util')
module.exports = function(app) {
// 监听请求
app.get('/api/index', (rep, res) => {
// 响应时,返回 mock data的json数据
const articleList = util.getJsonFile('./index.json')
// 将json传入 Mock.mock 方法中,生成的数据返回给浏览器
res.json(Mock.mock(articleList))
})
}
5、index.json文件,主要是用来构建自己的模拟数据。如:
{
"ret":true,
"data|1-10":[{
"userid": "@id()
建立项目接口文档_分享:一步一个脚印,vue入门之使用mockjs搭建vue项目测试服务器...相关推荐
- python生成接口文档_使用apiDoc实现python接口文档编写
使用apiDoc实现python接口文档编写 apiDoc的安装 npm install apidoc -g 生成api的终端命令:apidoc -i 代码所在路径-o 生成文件的路径 接口文档的编写 ...
- api数据接口文档_接口文档示例(Taobao/jd/pinduoduo/开放接口调用)
api数据接口文档_接口文档示例 本文主要是提供了一个接口文档的范文,内容修订历史.目录.时序图.接口要素描述.接口说明.使用示例.字典.FAQ. 使用MD格式文档(makedown),选择原因,容 ...
- postman项目接口文档和登录步骤原理
培训内容 实训项目:非常果岭-发现模块接口测试,单接口.流程脚本编写: 使用工具:postman 培训方式 1)postman使用说明 2)项目接口文档和登录步骤原理 一.首先了解postman使用 ...
- 对接接口文档_接口自动化测试框架设计思路
接口自动化测试--框架设计思路 1 前言 之前文章跟大家分享了一下自己在接口自动化测试中进行测试准备的一些相关知识点,接下来本篇文章详细分享一下接口自动化框架设计的思路总结,希望能对初次探索接口自动化 ...
- 开发接口文档_更优更稳更好,看文档驱动开发模式在AIMS中的优势
[摘要]程序员常会说:我最讨厌别人写的代码没有文档,我也最讨厌自己需要写文档. 有一个很老的梗: 我最讨厌别人写的代码没有文档,我也最讨厌自己需要写文档. 有这种想法的程序员应该算是一个老鸟了,对于 ...
- 开发接口文档_产品经理必懂的接口文档撰写方式
做产品经理的难免会调研各式各样的第三方需求能力.以满足产品提供用户的市场价值,比如第三方登录.图像识别.风控算法,都有专注的服务厂商. 企业无需自己花时间和精力投入在具有较高技术壁垒或时间成本的需求上 ...
- restful 接口文档_第 16 篇:别再手动管理接口文档了
作者:HelloGitHub-追梦人物 大多数情况下,开发的接口都不是给开发这个接口的人用的,所以如果没有接口文档,别人就无法有哪些接口可以调用,即使知道了接口的 URL,也很难知道接口需要哪些参数, ...
- 对接接口文档_产品经理所理解的接口
本文目标用户: 1.在产品设计中遇到有关于接口对接的经历,但是之前没有接触过类似对接. 2.想了解产品眼中的接口到底是什么东西? 3.对于已经明确了解并有相关对接的产品大佬们,欢迎你们指点. 一.AP ...
- 如何解析lvx文档_建站零基础入门:手把手教你如何自助建站
使用阿里云云服务器ECS搭建网站有多种方式,本文主要介绍自助建站的流程. 建站方式 使用ECS建站的方式如下表所示.请根据实际业务需求,选择适合您的建站方式. 自助建站步骤 1.选择服务器. 不同网站 ...
最新文章
- CesiumLab V1.2 新功能 倾斜数据处理
- Delphi使程序的窗口出现在最前面并激活
- Css中路径data用法
- Python 自带IDLE中调试程序
- Java访问指示符 访问修饰符
- 插值法:拉格朗日插值、牛顿插值
- 虚幻四人行 Epic公司四创始人发展史(下)
- java 有选择的查询_如何在Java中将准备好的语句用于选择查询?
- 源代码管理之SVN服务器搭建和使用
- 参加Sun公司的新产品的发布会议
- create table as select性能测试
- 下一步linux命令bzip,linux基础命令---bzip2
- 【转】利用匿名namespace解决C++中重复定义的问题
- 数据分析:数据分析工具:SPSS、RapidMiner、KNIME、Kettle
- CMSIS-DSP lib 矩阵运算示例和源码
- 当当1024购书活动,100张4折优惠券,薅羊毛啦!
- Codevs_P1907HDU_P1565 方格取数3(最大流)
- 台式计算机安装无线网卡驱动程序,台式机无线网卡驱动,详细教您台式机无线网卡驱动如何安装...
- 【第十一篇】字体设置css变形(transfom)4种
- 免费的网课API接口附加题库
热门文章
- 从零单排HBase 02:全面认识HBase架构(建议收藏)
- 华为麒麟990芯片发布;谷歌宣布开源创新隐私保护技术;阿里20亿美元全资收购网易考拉;中国联通将设立100亿5G创新基金……...
- 华为面试改革,我们该怎么跟进?
- 吴老师用计算机输入一份稿件,分数乘除法易错题复习1.pdf
- wow mysql dbc_DBC中悲观锁介绍附案例详解
- Apollo 分布式配置中心 搭建篇
- OpenOffice+JodConverter实现Office文件到PDF的转换
- java.net.NoRouteToHostException: Cannot assign requested address
- VScode 常用快捷键
- pom.xml中添加阿里云Maven中央仓库配置