Mock数据案例

mock模拟数据：

function getHot(){
	return new Array(10).fill(0).map(()=>
		Mock.mock({
			data:{
				title:Mock.Random.ctitle(3,5),
				//desc:Mock.Random.cparagraph(),
				//img:Mock.Random.Image("100x100",Mock.Random.color()),
				color:Mock.Random.color()
			}
		})
	);
}
function getNews(num){
	return new Array(num).fill(0).map(()=>
		Mock.mock({
			data:{
				title:Mock.Random.ctitle(),
				desc:Mock.Random.cparagraph(),
				img:Mock.Random.image("60x60",Mock.Random.color()),
//				color:Mock.Random.color()
			}
		})
	);
}
Mock.mock('/hot',()=>getHot());
Mock.mock('/news',()=>getNews(10));

html页面：

     		<div class="section4 pl1 pr1">
			<div class="section4-top">
				<span onclick="showHot()">点击换一批</span>
				<span>热门话题</span>
			</div>
			<div class="section4-bottom">
				<div class="section4-content">
				</div>
			</div>
		</div>
		<div class="section5 pl1 pr1">
			<ul>
				<li>
					<div class="section5-left"><img src=""/></div>
					<div class="section5-right">
						<h3 class="one-line">标题</h3>
						<p class="one-line">内容</p>
					</div>
				</li>
			</ul>
		</div>

JavaScript获取数据：

<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mock.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mock_hot.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//轮播图
			$('.carousel').carousel({
				interval:2000
			});
			//热门新闻
			function showHot(){
				$.ajax({
					type:"get",
					url:"/hot",
					async:true,
					dataType:"json",
					success:function(data){
						//console.log(data);
						var str="";
						for(var i=0;i<data.length;i++){
							str+=`<span style="background:${data[i].data.color}">${data[i].data.title}</span>`;
						}
						$(".section4-content").html(str);
					}
				});
			}
			showHot();
			//新闻
			function showNews(){
				$.ajax({
					type:"get",
					url:"/news",
					async:true,
					dataType:"json",
					success:function(data){
						console.log(data);
						var str="";
						for(var i=0;i<data.length;i++){
							str+=`
							<li>
								<div class="section5-left"><img src="${data[i].data.img}"/></div>
								<div class="section5-right">
									<h4 class="one-line">${data[i].data.title}</h4>
									<p class="one-line">${data[i].data.desc}</p>
								</div>
							</li>
							`;
						}
						$(".section5 ul").html(str);
					}
				});
			}
			showNews();
		</script>