欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

mock.js模拟数据

程序员文章站 2022-07-10 20:19:56
...
不知道大家还记不记得mockjs的特性,现在让我带大家一起回顾一下吧!!!
不知道大家注意到了没,mockjs支持支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。接下来我带大家模拟数据。

一、创建项目

全局安装     webpack

$ npm/cnpm install webpack -g

在安装     vue-cli

创建一个基于 webpack 模板的新项目

$ vue init webpack webpack-simple (一路回车哦)

安装依赖

npm/cnpm install

这时候运行npm run dev 让它跑起来,浏览器界面就会有Vue的logo,以及一些内容

二、Json-Server

项目搭建好了,需要本地模拟数据来测试接口效果。

这里使用Json-Server这个工具来构建本地Server

安装 json-server

npm/cnpm install -g json-server

安装完成后,在项目中创建json文件模拟返回的数据内容,这里我的json文件名为db.json

目录结构

mock.js模拟数据

{
    "user": {
        "name" : "Rose",
        "age" : 22,
        "sex" : "boy"
    }
}

然后执行 json-server db.json
注意:
mock.js模拟数据

执行成功后会提示已经启动了一个端口为3000的服务,在浏览器中输入localhost:3000/user 能看到如下的页面:
mock.js模拟数据

到这里,本地的server已经搭建完毕,但是,本地的server数据是死的,这时候就用到了mock。

三、使用Mock.js

Mock Server中 db.json 中的数据是是死的,我们可以借助 Mock.js 生成动态数据,增加测试的真实性。

安装mock.js

npm install mockjs –save-dev

项目中创建db.js 文件,和db.json是同级目录哦,内容如下:

mock.js模拟数据

执行 json-server db.js 再次查看 localhost:3000/user 已经能看到数据效果了

mock.js模拟数据

好啦,今天就到这里结束啦

如果大家喜欢这篇文章,记得点喜欢哦!!!