Flex 布局 / 纯原生 JavaScript 手写属于自己的疫情信息页面

最新推荐文章于 2022-05-26 17:51:02 发布

热心码农小冯

最新推荐文章于 2022-05-26 17:51:02 发布

阅读量3k

点赞数 10

分类专栏：前端文章标签： ajax javascript css

本文链接：https://blog.csdn.net/m0_46441797/article/details/114884130

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用腾讯提供的疫情信息接口

疫情信息接口如下：

https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=chinaDayList,chinaDayAddList,nowConfirmStatis,provinceCompare

第一步：纯原生JS实现异步请求（ajax）

为什么使用纯原生的方法实现？

虽然各种js框架层出不穷，但是企业面试官会更青睐于可以使用原生js实现一些功能的同学；
可以让我们从本质上理解异步请求（ajax）；
框架有很多，你曾经有没有为选择哪些框架而纠结过呢？比如jquery封装了ajax，axios也封装了ajax，那么作为学习阶段，就从现在开始不再犹豫和纠结，使用原生js来实现吧，等到我们进入到了工作环境，再去根据公司的那一套技术体系选择吧，总之，掌握了原理，再去学那些封装好的东西，就会轻而易举了！这也是为什么企业面试官总喜欢问一些你平时写项目都用不到的那些底层知识！

先建立目录结构，建立一个css目录来存放style.css，再于主目录建立一个index.html文件，没错，只有两个文件就可以了😁：

在这里插入图片描述

上代码！

index.html（注释必读！！！）[ 简单版本，一些特殊情况没有考虑 ]

<script>
	// 定义一个名为 data 的变量，用这个变量接收返回来的数据
    let data;
    // 我们新建一个 XMLHttpRequest 对象用于在后台与服务器交换数据
    // 并把这个新的对象赋值给一个名为 ajax 的变量
    // 这个变量名你想叫什么就叫什么，方便后续的调用即可
    let ajax = new XMLHttpRequest();
   	// 下面这个函数的第一个参数是指你想要以何种请求类型去请求后面的接口，一般为 get 或 post
   	// 想深入了解请求类型请学习HTTP请求相关的内容，面试也会经常被问到
   	ajax.open('GET','https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=chinaDayList,chinaDayAddList,nowConfirmStatis,provinceCompare');
   	// 每当 readyState 改变时就会触发 onreadystatechange 函数
   	// 一共有4个状态：
   	// 0：初始化
   	// 1：建立连接
   	// 2：请求已经接受
   	// 3：请求处理中
   	// 4：请求已完成
   	// 所以我们在 onreadystatechange 函数中应该判断 readyState 的值，当它为 4 时再进行一定的数据操作
    ajax.onreadystatechange = function(){
        // readyState == 4说明请求已完成，数据就绪
        if(ajax.readyState == 4){
            if(ajax.status == 200 || ajax.status == 304){
            	// 请求到的数据赋值给变量 data
                data = ajax.responseText;
                // 打印数据到控制台
                console.log("我们接收到的数据为：" + data);
            }
        }
    }
    // 发送请求
    ajax.send();
</script>

理解了上面的代码后，让我们来测试运行吧，直接保存，然后打开这个html文件，然后"Ctrl+Shift+I"打开控制台，看看能接收到什么样的数据：
在这里插入图片描述

这是JSON格式的数据，JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。

大概就是这样一种格式：

	Tom = {
		"name": "Tom",
		"age": 18,
		"data": {
			"someTag": "someText",
			"nums": [1, 2, 3]
		}
	}

第二步：分析接收到的数据，以及使用它！

在分析之前，我们要先做一件事，由于 responseText 返回来的数据是文本格式的，我们先把它转成JSON格式，然后才能以JSON格式去访问它，以及去掉console.log()中的字符串：

index.html

// 改成这样就ok了
if(ajax.status==200 || ajax.status==304){
	data = JSON.parse(ajax.responseText);
	console.log(data);
	}

然后我们去访问它的一些内容，因为数据太多，我们要进行筛选，选择我们感兴趣的部分：
在这里插入图片描述
假如我们对这个"chinaDayList"数组感兴趣，那我们就去选择它！

index.html

if(ajax.status==200 || ajax.status==304){
	data = JSON.parse(ajax.responseText);
	// 把下面改成这样，就可以访问到这个数组了，同学可不可以理解呢？应该没问题！
	console.log(data.data.chinaDayList);
	}

修改之后我们重新打开文件，并打开控制台，看看输出的是啥：
在这里插入图片描述
没有问题！我们得到了这个长度为60的数组，并且每个数组元素的内容又是一个JSON对象！咱们再来看里边有啥：

我们随便点开一个数组，可以看到，有confirm，也就是累计确诊病例数，有date，也就是指这是截至于哪一天的数据，有heal，也就是累计治愈人数，还有nowConfirm，也就是现有确诊，我们得到了好多信息。

我们就选择这个数组的第 60 个元素来当作我们的素材吧，因为此数组的最后一个元素就是累计至每天的前一天的最新数据！

第三步：把数据写入HTML！

我们先创建几个HTML节点用于接受我们的数据：

index.html ( 就先建两个吧，道理是一样的 )

<h2>累计确诊：</h2>
<p id="confirm"></p>
<h2>累计治愈：</h2>
<p id="heal"></p>

然后我们把接收到的数据注入到这两个p标签中：

index.html

            if(ajax.status==200 || ajax.status==304){
                data = JSON.parse(ajax.responseText);
                // 为了方便调用再封装一次数据
                let some = data.data.chinaDayList[59];
                console.log(some);
                // 新加的两行代码，同学们应该可以理解！
                document.getElementById("confirm").innerHTML = some.confirm;
                document.getElementById("heal").innerHTML = some.heal;
            }

然后刷新我们的页面，就会出现这样的内容：
在这里插入图片描述
和我们在微信健康上看到的数据是一样的，莫名的成就感油然而生，是不是！

在这里插入图片描述

到此为止，我们已经完成了一半了，剩下的工作就是美化了，如何用css让页面变得更好看呢？

第四步：用css对页面进行简单的布局

我们先把这两块内容分别用两个div包起来，再用一个div把这两个div包起来，再给它们起个类名，方面我们使用css选择器进行选择：

index.html

<div class="father">
	<div class="child">
		<h2>累计确诊：</h2>
		<p id="confirm"></p>
	</div>
	<div class="child">
		<h2>累计治愈：</h2>
		<p id="heal"></p>
	</div>
</div>

导入css文件：

index.html

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    // 导入css文件
    <link rel="stylesheet" href="css/style.css">
</head>

然后就是css文件了，我们一步步来：

style.css

.child {
    /*背景颜色*/
    background-color: #cfffff;
    /*边框弧度*/
    border-radius: 5px;
    /*外边距*/
    margin: 10px;
    /*内边距*/
    padding: 10px;
    /*字体颜色*/
    color: #868686;
}

设置好之后，我们再次刷新一下页面，如果没有出错，应该是这个样子的，是不是变帅了一点（每个同学审美不同，可以根据自己的口味自行调色🤣）：

在这里插入图片描述

第五步：响应式布局：flex

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
同Nodejs同一年出世！
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称 “容器” 。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

我们先把我们最大的div设置为flex容器：

style.css ( 我们只加这一处代码，看看有什么变化 )

.father {
    display: flex;
}

结果（其实做之前我也不知道什么结果，大家一起学习！实践是检验真理的最高标准！）：

在这里插入图片描述
他们竟然被列在了同一行！
我们再加一行代码：

style.css

.father {
    display: flex;
    // 使 items 竖向排列，如不设置，默认横向排列
    flex-direction: column;
}

原来有个属性可以设置排列的方向，不出意外，设置了这个属性后，你的页面恢复了之前的样子，但是我们就想横向排列，所以我们只是为了测试，测试完后，把这一行代码删掉！

现在，我们再加几个数据显示，照葫芦画瓢即可（做成下面的效果）：

在这里插入图片描述
我们再了解一个属性，加入一行如下代码：

style.css

.father {
    display: flex;
    /*我是新来的*/
    justify-content: center;
}

然后看下效果，你五个小div是不是居中了呢，没错，这个属性就是干这个的！

然后我们尝试调整高宽比，看看在移动端是否有相同的阅读体验：

在这里插入图片描述
可以看到，没问题，这就是 flex 布局对响应式的支持！

同学们可以根据兴趣自己选择一些这个接口返回的数据，进行自己的布局，欣赏自己的作品！

完结！

热心码农小冯

关注

10
点赞
踩
15

收藏

觉得还不错? 一键收藏
9
评论
Flex 布局 / 纯原生 JavaScript 手写属于自己的疫情信息页面

文章目录使用腾讯提供的疫情信息接口第一步：纯原生JS实现异步请求（ajax）第二步：分析接收到的数据，以及使用它！第三步：把数据写入HTML！第四步：用css对页面进行简单的布局第五步：响应式布局：flex完结！使用腾讯提供的疫情信息接口疫情信息接口如下：https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=chinaDayList,chinaDayAddList,nowConfirmStatis,pr
复制链接

扫一扫