JAVA基础--Mockjs

mock模拟动态数据

1.1. mockjs介绍

引入:刚刚的数据写死的,数据是不应该写死的。真实情况是我们应该发请求到后端去拿数据的。但是现在是前后端并行开发,现在还没有后端,只有接口的描述。所以前端要去模拟假数据来进行测试

Mock.js (官网Mock.js)是一款数据模拟生成器,旨在帮助前端攻城师独立于后端进行开发,模拟假数据进行测试

1.2. mockjs作用
复制代码
1. 根据数据模板生成模拟数据
2. 模拟后端接口,响应数据
1.3. 快速入门
1.3.1. 安装mockjs
复制代码
npm install mockjs
1.3.2. 新建mockDemo.js
java 复制代码
//引入mockjs
let Mock=require('mockjs')
let data=Mock.mock({
    //规则:值
    'list|5':[{
        'id':1,
        'name':'测试'
    }]
})
console.log(JSON.stringify(data))
1.3.3. 测试
复制代码
node mockDemo.js
1.3.4. 其他规则
java 复制代码
//引入mockjs
let Mock=require('mockjs')
let data=Mock.mock({
    //规则:值
    'list|5':[{
        'id': '@increment',
        'name': '@cname',
        'phone': /^1[0-9]{10}$/,
        'email': '@email',
        'address': '@county(true)',
        'createTime': '@date("yyyy-MM-dd")'
    }]
})
console.log(JSON.stringify(data))

2. mock模拟接口

引入:虽然数据出来了,但是数据应该是通过请求调用而产生的

2.1. 接口文件user.js
java 复制代码
//import Mock from 'mockjs' // 引入mock方式一
let Mock=require('mockjs') // 引入mock方式二
​
//构建集合数据
var dataList = []
for (var i = 0; i < 53; i++) {
    dataList.push(Mock.mock({
        'id': '@increment',
        'name': '@cname',
        'phone': /^1[0-9]{10}$/,
        'email': '@email',
        'address': '@county(true)',
        'createTime': '@date("yyyy-MM-dd")'
    }))
}
​
//参数1:当前页  参数2:每页显示的条数  参数3:集合数据
//返回值:当前页的分页数据
function pagination(currentPage, pageSize, list) {
    console.log(list);
    console.log(currentPage, pageSize);//1 5
    //js的slice(开始索引,结束下标)是数组的截取方法,相当于字符串的substring,也是左闭右开的
    //例子:[1,2,3,4].slice(1,3) => [2,3]
    //假如集合有53条数据,当前页currentPage为1,每页pageSize5条,那么就是list.slice(0,5) - 就是前5条[第一条数据,第6条数据)
    //假如集合有53条数据,当前页currentPage为2,每页pageSize5条,那么就是list.slice(5,10) - 就是5-10条,就是第二页
    return list.slice((currentPage-1)*pageSize, currentPage*pageSize)
}
​
// 获取当前页的分页数据
//参数1:发送的请求地址  参数2:发送的请求方式   参数3中opts接收调用时传递的参数
//参数3即为.vue中调用是传递的参数:{"currentPage":1,"pageSize":5}
//返回值为totals【总数量】和 data【当前页的分页数据】
Mock.mock(new RegExp('/user/list'), 'post', (opts) => {
    var list =dataList;
    console.log("=======================user.js=====================");
    console.log(opts);//Object { url: "/user/list", type: "POST", body: "       {\"currentPage\":1,\"pageSize\":5}" }
    console.log(opts.body);//{"currentPage":1,"pageSize":5} - 参数传进来是json格式的字符串
    var currentPage = JSON.parse(opts.body).currentPage;//1
    var pageSize = JSON.parse(opts.body).pageSize;//5
    var totals = list.length;
    list = pagination(currentPage, pageSize, list)
    return {
        'totals': totals,//总条数
        'data': list//当前页数据
    }
})
2.2. 引入user.js
复制代码
//在main.js中导入该js
import user from '../mock/user.js'

3. axios调用接口

上面只是模拟了一个接口,但是这个接口还必须得调用。vue更新到2.0之后,官方推荐使用axios请求服务器数据。axios和其他的ajax库都很类似,他是基于promise的http库,可以用在浏览器和node.js中

3.1. 安装axios
复制代码
npm install axios --save
3.2. 使用axios调用接口
javascript 复制代码
//User.vue中使用功能axios调用user.js中模拟的接口
<script>
    //引入axios
    import axios from "axios";
    export default {
        name: 'User',
        data(){
            return {
                tableData: [] //一开始是没有数据的
            }
        },
        mounted(){//页面被加载后,等到Vue实例挂载完毕之后再去获取实例,这个方法会自动触发
            axios.post("/user/list",{"currentPage":1,"pageSize":5}).then((result)=>{
                console.debug(result);
                //成功之后给数组赋值
                this.tableData = result.data.data;
            }).catch((result)=>{
            })
        }
    }
</script>

写在最后:mockjs是一个模拟动态数据的工具,在项目开发过程中有所运用。这篇博文给大家介绍了一些基础的知识,希望能够给大家带来帮助。笔者小,中,大厂均有面试经历,目前是一名全栈工程师,坚持分享java全栈知识,希望能够和大家共同进步。

相关推荐
2401_85702623几秒前
Spring Boot框架下的知识管理与多维分类
spring boot·后端·oracle
XinZong2 分钟前
【VSCode插件推荐】想准时下班,你需要codemoss的帮助,分享AI写代码的愉快体验,附详细安装教程
前端·程序员
ErvinHowell10 分钟前
文件MD5生成性能大提升!如何实现分片与Worker优化
前端·vue.js·算法
cooldream200911 分钟前
使用Spring Validation实现数据校验详解
spring boot·校验·validated
微服务技术分享11 分钟前
专为成长型企业打造的Java CRM系统源码:CRM客户关系管理系统技术解析与功能构建
java·crm客户关系管理系统源码·鸿鹄crm客户关系管理系统·鸿鹄crm客户关系管理系统源码
琪露诺大湿12 分钟前
JavaEE-多线程初阶(4)
java·开发语言·jvm·java-ee·基础·1024程序员节·原神
Java程序员-小白20 分钟前
Spring Shell——快速构建终端应用,自定义终端命令
java·后端·spring
想做白天梦26 分钟前
LeetCode :150. 逆波兰表达式求值(含求后缀表达式和中缀转后缀表达式)
java·前端·算法
远望樱花兔29 分钟前
【d63】【Java】【力扣】141.训练计划III
java·开发语言·leetcode
过期动态30 分钟前
详解Python面向对象程序设计
开发语言·python·pycharm·django