day32

数据请求和对应的渲染操作

软件开发流程

1.需求提出(产品经理)(需求分析文档)

2.指定对应的原型图(架构师或者产品经理或者UI)

3.UI根据原型图进行设计(UI设计)

4.后台根据需求文档做对应的概要设计和详细设计

5.后台进行编码(根据详细设计进行编码)(接口设计)

6.前端要根据UI的设计图 进行前端编码(mock)

7.前后台联吊(后台给对应的接口前台把这个接口的数据获取渲染)

8.测试(黑盒 白盒测试 禅道 (测试功能))

9.运维(上线)

数据的模拟(mock)

1.后台mock数据(具备后台)

2.mock的数据json数据(通过对应的mock.js文件来做成服务)(具备mock.js)

3.jsonserver(第三方的mock工具)mock数据(具备node)

4.使用mock平台来进行数据mock (jsonplacehold fastmock apipost...底层采用的还是mock.js)

json-server mock数据(基于json文件来mock)

下载一个node(安装)

node -v

npm -v

安装淘宝源

npm config set registry https://registry.npm.taobao.org //淘宝镜像
npm config set registry https://registry.npmmirror.com //官方镜像

安装对应的json -server

npm i json-server -g

运行对应的命令来监听对应的json文件

json-server --watch mock.json -p 8888 ##--watch后面接的是文件名 -p后面是对应端口号

数据的传递(页面的url传递)

读取页面的url里面的值变成一个对象

function getParams(){
//用于存参数的对象
let params = {}
location.href.split("?")[1].split("&").forEach(str => {
var strArr = str.split("=")
params[strArr[0]] = strArr[1]
});
return params
}

数据的请求

function loadData(page=1,limit=4){
$.ajax({
type:
"
get
"
,
url:`http://10.41.12.8:8888/shops?_limit=${limit}&_page=${page}`,
success(data){
}
})
}

相关的渲染

//先把ul变成空
$('ul').empty()
data.forEach(shop => {
var htmlCode = $('ul').html()+ `
<li>
<a href="./details.html?id=${shop.id}">
<img class="seckill_mod_goods_link_img" data-lazy-img="done"
src=
"
${shop.pirUrl}" data-webp="no">
</a>
<h4 class="seckill
_
mod
_
goods_title ">${shop.goodTitle}</h4>
<p class="seckill_mod_goods_desc">
${shop.goodDesc}
</p>
<div class="seckill
_
mod
_
goods_info">
<span class="seckill_mod_goods_info_txt">
<span class="seckill_mod_goods_price">
<i class="seckill
_
mod
_
goods_price_now"><em>¥</em>${shop.price}
</i>
</span>
<a href="#" class="seckill
_
mod
_
goods_info_i">立即抢购</a>
</div>
</li> `
$("ul").html(htmlCode)
});

加入购物车

 

标签：npm,shop,day32,json,数据,对应,mock
来源： https://www.cnblogs.com/he-maoke/p/16438508.html