js json对象转字符串_Mock.js模拟数据实现前端独立开发
在后端接口尚未完成时, 前端开发人员只能请求静态文件的方式来模拟数据, 非常繁琐, 使用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})()
效果图:
js json对象转字符串_Mock.js模拟数据实现前端独立开发相关推荐
- js中的json对象和字符串之间的转化
字符串转对象(strJSON代表json字符串) var obj = eval(strJSON); var obj = strJSON.parseJSON(); var obj = ...
- JS 将JSON对象转换为字符串
effectRow["inserted"] = JSON.stringify(inserted); JS 将JSON对象转换为字符串 转载于:https://www.cnblogs ...
- js json 对象相互转换
字符串转对象(strJSON代表json字符串) var obj = eval(strJSON); var obj = strJSON.parseJSON(); var obj = JSO ...
- json对象和字符串相互转换
var data= {"name":"小明","pwd":123456};//这是一个json的对象 json的字符串 既然是字符串就是用引 ...
- 含有function的JSON对象转换字符串与反转
因为项目需要,需要将easyui中的datagrid列动态排序,所以需要将默认的一些配置存入数据库中,如下的格式: [{field: 'FID', title: 'id', hidden: 'true ...
- 微信小程序中,json对象与字符串相互转换
微信小程序中,json对象转字符串,以及字符串转json对象,具体代码如下: //这是一个json对象 var jsonobj = {"orderId":"3308908 ...
- js给对象添加变量属性 js 更改对象中的属性名 数组对象中每个对象添加一个字段-map用法和forEarch用法
js给对象添加变量属性 & js 更改对象中的属性名 & 数组对象中每个对象添加一个字段-map用法和forEarch用法 1.js给对象添加变量属性 1.js创建一个对象或者在原有对 ...
- javascript json对象转字符串形式
2019独角兽企业重金招聘Python工程师标准>>> /*** json对象转字符串形式*/function json2str(o) {var arr = [];var fmt = ...
- json对象与字符串互转方法
字符串转json对象: var data = eval( '(' + str + ')' ); json对象转字符串: var jsonStr = JSON.stringify( obj ); 转载于 ...
最新文章
- Build SSCLI20 under VS2008 full Document (完全手册)
- AI电磁组中的NN到底有什么优势?
- lucene Index Store TermVector 说明
- PAT甲级1028 List Sorting:[C++题解]排序,cin和cout会超时
- jCryptoJS 、C#互通加密(MD5版)
- 关于URL指向的icon的存储问题
- 现代通用计算机的雏,1834年巴贝奇设计的( )是现代通用计算机的雏形 答案:分析机...
- MVC之前的那点事儿系列(4):Http Pipeline详细分析(上)
- linux popd 命令,Linux中的pushd推入和popd弹出命令
- c语言折半查找法找字符,C语言折半查找法练习题冒泡排序
- 拓端tecdat|python研究汽车传感器数据统计可视化分析
- ASP.NET---母板应用
- html打印表格样式,HTML打印表格
- xss-labs靶场全通关
- 离开百度的50余位AI大牛,假如组一个这样的公司……
- NSIS教程(4): 调用Windows API
- 深入剖析RGB、CMYK、HSB、LAB
- 如何用GIS做城市购房选址分析
- 七牛云上传图片并返回图片URL
- HTB----Heist(Hard)
热门文章
- 错误处理:安装torch-sparse、torch-spline、torch-scatter、torch-cluster
- pytorch笔记:torch.nn.MaxPool2d
- 文巾解题 12. 整数转罗马数字
- 文巾解题 203. 移除链表元素
- MATLAB应用实战系列(四十五)-matlab任意图形轮廓坐标提取【含源代码】
- 深度学习核心技术精讲100篇(五十二)-用户画像系统构建全思路解析
- matlab基础入门之教你如何实现最小二乘法(附MATLAB代码)
- python画图的模块_python强大的绘图模块matplotlib示例讲解
- 量化派基于Hadoop、Spark、Storm的大数据风控架构--转
- QQ会员亿级Web系统的容错性建设实践--转