Day29-数据请求和渲染

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

软件开发流程

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)
});

加入购物车