小泼猴案例页面的动态渲染

1.首先我们自己准备一个假的后端数据接口用来模拟，通过在在线平台fast mock上我们可以完成。

2.在动态渲染之前我们先写好静态的HTML页面和css样式，在写完后开始准备写js

3.在js中我们需要引入axios来对接口进行ajax调用

（method是进行调用的方法，url是上面写的模拟接口，有了这个后我们就可以用then来接收数据）

4.接收到数据后先用foreach对得到的数据进行遍历，这里的item指的是正在遍历的数组成员，index指的是该数组成员的下标。遍历后我们就可以进行字符串的拼接了。拼接完后我们在外面准备一个大的div容器来接收拼接完的字符串，最后通过innerHTML来把这些字符串渲染到HTML页面上，实现数据的动态渲染。

———————————————————————————————————————————

心得体会：

1.在进行动态渲染的过程中，我曾经想过通过for循环来生成空的div和p标签，然后再往这些空的标签添加数据来实现动态渲染，但是最后失败了。

2.通过这个案例我认识到了很多网页都需要后端的数据来渲染的，并不是想我以前写的HTML加css那种写死数据的网页，在工作中我们都需要动态的数据来完成工作。

小泼猴案例页面的动态渲染相关推荐

小泼猴案例操作问题以及解决方法2
运用onclick事件来触发音乐播放暂停功能原理:在div盒子里面放一个audio标签存放我们想要播放的音乐,然后通过js来控制音乐的播放,然后再用一个button标签来输入οnclick=&quo ...
微信小程序使用三元运算符动态渲染布局
今天在写微信小程序时,被坑到了, <!--.wxml-> <view class="row-in {{to_top ? 'to-top' : 'to-bottom'}}&q ...
微信小程序获取数据接口动态渲染Echarts折线图
上篇文章介绍的是最简单的折线图配置方法,若是放到开发的项目中还需要进行一些改动,比如,如何调用接口获取数据动态渲染折线图: 为了更好的体验项目开发中调取接口获得数据渲染折线图,我让朋友给我开发了接口模 ...
七十、Vue城市页面Ajax动态渲染和兄弟组件数据传递
2020/10/29. 周四.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
小泼猴案例操作问题以及解决方法1
问题1:网页和浏览器顶部多出来一个8px的边距解决方法:html的body会自带一个8px的外边距,设计一个css来解决即可 * {margin: 0;padding: 0;border: 0;/* ...
scrapy模拟浏览器爬取51job(动态渲染页面爬取)
scrapy模拟浏览器爬取51job 51job链接网络爬虫时,网页不止有静态页面还有动态页面,动态页面主要由JavaScript动态渲染,网络爬虫经常遇见爬取JavaScript动态渲染的页面. ...
扫码普通二维码跳转微信小程序指定页面（体验服和开发服跳转链接不能动态传参）
好久不见,时隔多年我又来记录问题来了,记录这次问题的主要原因是减少你我去搜索资源的时间,下面开始讲讲我越到的问题.(下面说的是针对小程序体验版或者开发版哈,正式环境不存在这个问题) 需求:pc端扫码登 ...
layui进度条：调用、参数设置、动态渲染、数据热更新（含案例、代码）
文章目录 layui进度条:调用.参数设置.动态渲染.数据热更新 (含案例.代码) 一.demo案例 1.1. 应用 · 截图: 1.2. 案例 · 全部代码: 二.自定义案例 2.1. 部分代码: ...
Scrapy爬虫框架（实战篇）【Scrapy框架对接Splash抓取javaScript动态渲染页面】
(1).前言动态页面:HTML文档中的部分是由客户端运行JS脚本生成的,即服务器生成部分HTML文档内容,其余的再由客户端生成静态页面:整个HTML文档是在服务器端生成的,即服务器生成好了,再发送 ...

小泼猴案例页面的动态渲染

小泼猴案例页面的动态渲染相关推荐

最新文章

热门文章