Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Mock.js的应用
Blogger Information
Blog 50
fans 0
comment 0
visits 31564
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Mock.js的应用
手机用户1580651468
Original
978 people have browsed it

Mock.js的应用

一、生成10篇文章

一）代码段

  1. // 生成10篇文章的代码
  2. //-------------------//
  3. const Mock = require("mockjs");
  4. const titles = {
  5.     // 1文章id
  6.     'id|+1':1,
  7.     //2栏目id
  8.     column:'@integer(100,200)',
  9.     // 3文章标题
  10.     username: "@ctitle(3,8)",
  11.     //4发布日期
  12.     ReleaseDate:`@date(yyyy年MM月dd日)`,
  13.     //5作者
  14.     author:"@cname",
  15.     //6简介
  16.     briefintroduction:"@csentence(50)",
  17.     //7文章内容
  18.     Articlecontent:"@cparagraph(50)",
  19.   //   生成图片占位符
  20.   img3: "@image('200x200','#f00','#fff',''php.cn')",
  21.   //生成域名
  22.   url:'@url',
  23. };
  24. const opts={
  25.     'titles|10':[titles],
  26. }
  27. const data = Mock.mock(opts);
  28. console.log(JSON.stringify(data, null, 4));

二）生成的效果图

二、文章的渲染

一）代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>文章渲染</title>
  8. </head>
  9. <body>
  10.  <button onclick="getData()">请求文章数据</button>
  11.  <table border="1">
  12.     <caption>文章</caption>
  13.     <thead>
  14.         <tr>
  15.             <td>id</td>
  16.             <td>栏目</td>
  17.             <td>题目</td>
  18.             <td>发布日期</td>
  19.             <td>作者</td>
  20.             <td>文章简介</td>
  21.             <td>文章内容</td>
  22.             <td>图片</td>
  23.             <td>链接</td>
  24.         </tr>
  25.     </thead>
  26.     <tbody>
  27.     </tbody>
  28.  </table>
  29.     <script>
  30.  async function getData(){
  31.      const response =await fetch('titles.json')
  32.      const titles = await response.json()
  33.      console.log(titles)
  34.      const tbody =document.querySelector('tbody')
  35.      titles.forEach((title)=>{
  36.         const data=`
  37.           <tr>
  38.             <td>${title.id}</td>
  39.             <td>${title.column}</td>
  40.             <td>${title.username}</td>
  41.             <td>${title.ReleaseDate}</td>
  42.             <td>${title.author}</td>
  43.             <td>${title.briefintroduction}</td>
  44.             <td>${title.Articlecontent}</td>
  45.             <td>${title.img3}</td>
  46.             <td>${title.url}</td>
  47.           </tr>
  48.         `   tbody.insertAdjacentHTML('beforeend',data)
  49.      })
  50.  }
  51. window.onload = getData()
  52.     </script>
  53. </body>
  54. </html>

二）效果图

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post