在后端接口尚未完成时, 前端开发人员只能请求静态文件的方式来模拟数据, 非常繁琐, 使用mockjs, 我们可以对ajax请求进行拦截, 随机生成各种各样的数据, 包括图片, 非常方便, 由于实在肝不动了, 就少说两句, 直接上代码?
项目结构:
index.html:
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Documenttitle> <style> * { margin: 0; padding: 0; box-sizing: border-box; } html { font-family: Fira Code Retina; } table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } td { text-align: center; }style> head> <body> <table> <thead>thead> <tbody>tbody> table> <script src="js/mock.js">script> <script src="js/axios.js">script> <script src="js/index.js">script> body>html>
index.js:
// 使用async await简化异步操作;(async () => { // 截取url中的查询字符串 (?name=tom&age=18) function getQueryStringByUrl(url = location.href) { return url.slice(url.indexOf('?')) } // 将查询字符串转为json对象 function queryStringToJSON(queryString = location.search) { // 如果为空则返回它本身 if (queryString.trim() === '') { return queryString } const json = {} // 先删除? queryString = queryString.replace('?', '') // 以&分割为数组 queryString.split('&').forEach(item => { // 以=分割为数组, 解构出键和值 const [key, value] = item.split('=') json[key] = value }) return json } // 配置项, 表示2秒后返回数据 Mock.setup({ timeout: 2000 }) // 拦截目的地为http://test.com的get请求 Mock.mock(/http:\/\/test\.com/, 'get', function ({ url }) { // 得到查询字符串 const queryString = getQueryStringByUrl(url) // 得到pagenum和pagesize const { pagenum, pagesize } = queryStringToJSON(queryString) // 模拟一些数据 const users = Mock.mock({ // 总数: 1000~2000的随机整数 total: '@integer(1000, 2000)', // 当前页码: 字符串转数字 pagenum: +pagenum, // 页数: 字符串转数字 pagesize: +pagesize, // 用户列表: 长度为pagesize的数组 [`users|${pagesize}`]: [ { // 头像: 随机50*50px大小的头像 avatar: `@dataimage(50x50, 某某)`, // 唯一id: 自增 id: '@increment()', // 用户名: 随机姓名 username: '@name()', // 年龄: 18~40的随机整数 'age|18-40': 1, // 电话: 11位随机数字组成的字符串 tel: '@string("number", 11)', // 邮箱: 随机邮箱 email: '@email()', // 地址: 随机省市区地址 address: '@county(true)', // 创建时间: 随机日期和时间 createTime: '@datetime()', // 状态: true和false各二分之一几率 'state|1': true, // 角色: 普通用户,vip,svip各三分之一几率 'roleName|1': ['普通用户', 'vip', 'svip'] } ] }) return users } /* 以下是DOM操作 */ // 获取thead const thead = document.querySelector('thead') // 获取tbody const tbody = document.querySelector('tbody') // 携带参数请求mock返回的数据, 解构出data const { data } = await axios.get('http://test.com/users', { params: { pagenum: 1, pagesize: 10 } }) // thead中的html字符串 // 先得到键数组, 返回由html字符串组成的新数组, 再以空字符串将新数组拼接为一整个thead html字符串 const theadHTML = `${Object.keys(data.users[0]) .map(value => `${value}`)
.join('')}
` // tbody中的html // 遍历data.users, 返回由html字符串组成的新数组, 再以空字符串将新数组拼接为一整个tbody html字符串 const tbodyHTML = data.users .map(value => { // 由users的长度决定tr的个数 // 由users中每个对象的属性的个数决定td的个数 // 如果是图片或者base64图片则嵌套一个img标签, 如果不是则直接返回 const tr = ` ${Object.values(value)
.map(item => {
if (
/^data:image/.test(item) ||
/^http.+\.(png|jpg|jpeg|webp|gif)$/.test(item)
) {
return ``
}
return `${item}`
})
.join('')}
` return tr }) .join('') // 渲染HTML thead.innerHTML = theadHTML tbody.innerHTML = tbodyHTML})()
效果图: