js json对象转字符串_Mock.js模拟数据实现前端独立开发
生活随笔
收集整理的這篇文章主要介紹了
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模拟数据实现前端独立开发的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小程序onload_小程序生命周期-基础
- 下一篇： c# string 转 datetime