建立项目接口文档_分享:一步一个脚印,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为例)

245f8801fabc86623e12626dcad98a8c.png

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)

}

}

e6ba1200a3bc5963eab2bab9908f872a.png

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))

})

}

ebc75d671664731ea11dcaae9e0ae86c.png

5、index.json文件,主要是用来构建自己的模拟数据。如:

{

"ret":true,

"data|1-10":[{

"userid": "@id()

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

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

相关文章

有效字符区域 获取textview_Android编程开发之TextView文字显示和修改方法(附TextView属性介绍)...

本文实例讲述了Android编程开发之TextView文字显示和修改方法。分享给大家供大家参考,具体如下:一. 新建一个Activity 和 Layout首先在layout文件夹中新建一个activity_main.xml,在新建工程的时候一般默认会新建此xml文件,修改其代码如下:activity_main.…

单机最大负载_电流互感器允许接入的实际最大二次负载(注电案例1865)

某国外水电站安装的水轮发电机组,单机额定容量为 120MW,发电机额定电压为 13.8kV,cosφ0.85。发电机、主变压器采用发变组单元接线,未装设发电机断路器,主变高压侧三相短路时流过发电机的最大短路电流为 19.6kA。发电机…

vue怎么vw布局好用_vue cli3项目的pc自适应布局_vw

前言vw布局的页面是等比改变的,比如我们在一个750px的屏幕宽度中使用了vw,当我们把屏幕宽度改为1920的时候,网页的整个样式包括字体都会等比放大.vw布局我用于大屏监控数据展示.下图是750屏幕宽度下的页面下图是1920屏幕宽度下的页面pc端配置1.安装postcss-px-to-viewport插件,…

python做得怎么变成exe_Python如何生成exe文件?

背景图来源:click斗鱼直播间真实rtmp地址获取(含工具类下载)​zhuanlan.zhihu.com最经典的Python爬虫(图片)案例​zhuanlan.zhihu.com写在前面:之前用python生成过可执行的exe文件(斗鱼推流地址exe ,图片exe,芳儿小团子千人成像ex…

python mkl freebsd_freebsd下之简单安装python

先su到root帐户进入/usr/ports/lang/python26然后直接make整个过程如图所示,经过漫长的编译之后...然后make install又是漫长的等待...出现Install them as needed.--------------------------------------------------------This package was built with the exper…

html video显示进度条_使用 tqdm 在 Python 应用中显示进度 | Linux 中国

如果你的程序需要一段时间才能显示结果,可通过显示它的进度来避免让用户感到沮丧。来源:https://linux.cn/article-12990-1.html作者:Moshe Zadka译者:geekpi(本文字数:3093,阅读时长大约&#…

课题开题报告范文样本_成都汽车职业技术学校举行 2020年省、市、区课题开题报告会...

01为深入贯彻落实国务院、省、市、区关于深化教育教学改革的重要精神,充分发挥教育科研的先导作用,明晰课题研究的思路并提高课题研究的针对性,1月12日,成都汽车职业技术学校举行2020年省、市、区课题开题报告会。本次开题报告会邀…

vsftp日志查看_vsftp日志xferlog格式分析(示例代码)

1、开始vsftp记录日志。修改/etc/vsftpd/vsftpd.conf 如下:xferlog_enableYESxferlog_std_formatYESxferlog_file/var/log/xferlogFTP服务器的日志设置,可以通过修改主配置文件/etc/vsftpd.conf实现。主配置文件中与日志设置有关的选项包括xferlog_enabl…

安装mysql5 1步骤_Linux系统安装MySQL详细步骤(mysql-5.1等)

第一步、查找以前是否安装有mysql使用下面命令:rpm -qa|grep -i mysql如果显示有包则说明已安装mysql第二步、如果已安装,则需要删除已安装的数据库可按以下步骤删除数据库:删除包命令:rpm -e --nodeps 【包名】rpm -e --nodeps …

mysql分页查询关键_MySQL优化教程之超大分页查询

背景基本上只要是做后台开发,都会接触到分页这个需求或者功能吧。基本上大家都是会用MySQL的LIMIT来处理,而且我现在负责的项目也是这样写的。但是一旦数据量起来了,其实LIMIT的效率会极其的低,这一篇文章就来讲一下LIMIT子句优化…

mysql r_R之RMySQL

linux,mysql和R的版本信息:Linux naci 3.19.0-16-generic #16-Ubuntu SMPServer version: 5.6.24-0ubuntu2 (Ubuntu)R version 3.1.2 (2014-10-31) -- "Pumpkin Helmet"mysql的linux安装,参照上一篇关于liunx下安装mysql的文章。1.…

mysql 字符转换函数是_MySQL日期和字符串转换函数

Mysql中to_char()和str_to_date()函数转载路径:https://blog.csdn.net/ricardo_mli/article/details/802175121.字符串转换成日期格式str_to_date(date,’%Y-%m-%d’)----->相当于Oracle中的to_char();例子:INSERT INTOt_order(order_time)VALUES(str…

mysql数据加百分号_使用MySQL SELECT语句时,在每个值的末尾添加一个百分号(%)...

要在末尾添加百分号,请使用CONCAT()函数。让我们首先创建一个表-mysql> create table DemoTable(StudentId int NOT NULL AUTO_INCREMENT PRIMARY KEY,StudentName varchar(100),StudentScore int);使用插入命令在表中插入一些记录-mysql> insert into DemoTa…

mysql 分页 jdbc_JDBC调用MySQL分页存储过程实现(一)

DROP PROCEDURE IF EXISTS pro_pager;CREATE DEFINER root% PROCEDURE pro_pager(in p_pageNo int, /*当前页*/in p_perPageCnt int, /*每页记录数*/in p_sql VARCHAR(2000), /*查询sql语句*/out v_totalRowsCnt int, /*记录总条数*/out v_totalPageCnt int) /*记录总页数*/BE…

mariadb mysql表_mysql/mariadb学习记录——创建删除数据库、表的基本命令

查看已有的数据库:mysql>show databases;--------------------| Database |--------------------| information_schema || test |--------------------2 rows in set (0.05 sec)新建数据库语句:mysql>create database wzu;Query OK,1 row affected (0.05sec)m…

zabbix proxy mysql_zabbix proxy 配置

在监控大量服务器时,如果将所有的请求都发送到一个zabbix server上,将会对我们的zabbix server造成很大的压力,我们在规划多个区域或机房进行监控的时候,会考虑到使用zabbix proxy 来代理zabbix server 的部分功能。zabbix server…

mysql修改数据库结构用哪一项_mysql alter修改数据库表结构用法

1.alter操作表字段(1)增加字段alter table 表名 add 字段名 字段类型;alter table student add name varchar(10);(2)修改字段alter table 表名 change 旧字段名 新字段名 字段类型;alter table 表名 modify 字段名 字段类型;//修…

mvc mysql linq_MVC3+Linq to sql 显示数据库中数据表的数据

1:首先创建asp.net mvc3应用程序 2:创建项目完成后 找到controllers文件鼠标右击选择添加控制器 3 为models文件夹添加一个linq to sql类文件,然后把数据库中的数据库复制进来。如截图操作 4:添加控制器好后会生成一个HomeControl…

bash给脚本加进度条_shell脚本实现多彩进度条

代码如下:1 #!/bin/bash2 i0;3 str""4 arr("|" "/" "-" "\\")5 while [ $i -le 100 ]6 do7 let indexi%48 let indexcolori%89 let color30indexcolor10 printf "\e[0;$color;1m[%-100s][%d%%]%c\r" &…

koa mysql mongodb_koa 操作MongoDB数据库

安装安装MongoDBnpm install mongodb --save引入中间件引入mongodb下面的连接模块MongoClient// 引入MongoDB 连接模块const MongoClient MongoDB.MongoClient;配置中间件定义数据库连接的地址以及配置数据库的名称let url "mongodb://localhost:27017/";let dbNam…