数据分析疫情图——day1

- 日理万妓 2023-01-05 05:11 122阅读 0赞

### 数据分析疫情 ###

*   *  一. 创建javaweb项目
     *  二.前端练习
     *   *   *  1.导入视频
             *  2. 获取二维码
             *  3. 实现跳转连接
             *  4. 简单界面构建

前言：

> 本来还得在学校见习的，因为疫情改成了上网课，虽然没有了在学校和同学们讨论的欢乐，但也很有趣。今天是第一天，我们的老师 要带我们做的项目是分析全国疫情的图（老师也很辛苦啊），打算每天记一下笔记，让自己知道没白学

本文已收录进我的小破站[chenyunzhi.top ][chenyunzhi.top]在这里插入代码片

> 软件：eclipse  
> 环境：jdk 1.8以上

## 一. 创建javaweb项目 ##

新建-》Dynamic Web Project  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 2]

## 二.前端练习 ##

创建前端文件  
![在这里插入图片描述][20210111180010846.png]

#### 1.导入视频 ####

> 在src中放入视频路径

![在这里插入图片描述][20210111180551499.png]

如果出现：播放本地MP4文件只有声音没有图像。  
可以看这篇文章[HTML5 video标签只有声音没有图像][HTML5 video]

效果展示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 3]

#### 2. 获取二维码 ####

1.  导入三个包放到WEB-INF/lib里面  
    ![在这里插入图片描述][20210111180735149.png]
2.  创建包和类  
    **直接右击src就行**  
    ![在这里插入图片描述][20210111181533882.png]  
    ![在这里插入图片描述][20210111181634229.png]

驼峰命名法(反向) ：cn.tedu.exe

> 解释：如果多个单词组成的，每一个单词都是小写的，多个单词之间使用 . 分隔开

**在创建类之前我们先修改一下他的生成模版**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 5]

类同理

![在这里插入图片描述][20210111181550659.png]  
在java类里面编写代码

package cn.tedu.exe;
    import org.junit.Test;
    import cn.tedu.qr.CreateQR;
    
    /** * @author chenyunzhi * @email 1156028692@qq.com * @version * @time 下午3:26:17 * @description */
    
    public class textqr { 
    	
    	//main方法
    	public static void main(String[] args) { 
    		System.out.println("生成二维码");
    	}
    	//单元测试方法:双击选中方法的名称，找到JUnit test运行
    	@Test
    	public void testor() { 
    		System.out.println("单元测试----testor()");
    		String url="叫爸爸";//二维码扫码出来的内容
    		String fileName="D:\\java文件\\textproject\\WebContent\\picture\\1.png";//二维码存放的地址
    		//创建二维码
    		CreateQR.create(200, 200, url, fileName);
    		System.out.println("创建二维码成功");
    	}
    
    }

**运行方法**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 6]

**运行效果**  
![在这里插入图片描述][20210111183533535.png]  
![在这里插入图片描述][20210111183620975.png]  
放入html里面

<img alt="" src="./picture/1.png">

#### 3. 实现跳转连接 ####

创建一个`main.html`和一个`word.html`

代码  
main.html跳转word.html

<div>
    	<span>全国疫情实时追踪情况</span>  <a href="word.html" target="_blank">全球疫情</a>
    </div>

#### 4. 简单界面构建 ####

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>新冠肺炎疫情</title>
    </head>
    <body>
    	
    	<div>
    		<span>全国疫情实时追踪情况</span>  <a href="word.html" target="_blank">全球疫情</a>
    	</div>
    	
    	
    		<h2>时间</h2>
    	
    	<div>
    		<div><h1>9433</h1></div>
    		<div><h1>3</h1></div>
    		<div><h1>88888</h1></div>
    		<div><h1>666</h1></div>
    		<div><h2>累计确诊</h2></div>
    		<div><h2>现有疑似</h2></div>
    		<div><h2>累计治愈</h2></div>
    		<div><h2>累计死亡</h2></div>
    	</div>
    	
    	<div>中间的地图</div>
    	
    	
    	<div>
    		左边的部分一
    	</div>
    	
    		
    	<div>
    		左边的部分二
    	</div>
    	
    	
    	<footer>
    		By Fever    
    		网址跳转：<a href="baidu.com">百度</a>
    	</footer>
    </body>
    </html>

> 本人博客：[https://blog.csdn.net/weixin\_46654114][https_blog.csdn.net_weixin_46654114]  
> 本人b站求关注：[https://space.bilibili.com/391105864][https_space.bilibili.com_391105864]  
> 转载说明：跟我说明，务必注明来源，附带本人博客连接。

请给我点个赞鼓励我吧  
![在这里插入图片描述][20200507113619405.png_pic_center]

[chenyunzhi.top]: http://chenyunzhi.top/posts/9e95.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70]: /images/20221119/62469ec40c724b44b14a33aa59f66cb6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210111175838494.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210111175928556.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA==,size_16,color_FFFFFF,t_70
[20210111180010846.png]: https://img-blog.csdnimg.cn/20210111180010846.png
[20210111180551499.png]: https://img-blog.csdnimg.cn/20210111180551499.png
[HTML5 video]: https://blog.csdn.net/qq_33237207/article/details/53405873?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210111180513479.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA==,size_16,color_FFFFFF,t_70
[20210111180735149.png]: https://img-blog.csdnimg.cn/20210111180735149.png
[20210111181533882.png]: https://img-blog.csdnimg.cn/20210111181533882.png
[20210111181634229.png]: https://img-blog.csdnimg.cn/20210111181634229.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2021011118281583.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2021011118283766.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA==,size_16,color_FFFFFF,t_70
[20210111181550659.png]: https://img-blog.csdnimg.cn/20210111181550659.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210111183834319.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA==,size_16,color_FFFFFF,t_70
[20210111183533535.png]: https://img-blog.csdnimg.cn/20210111183533535.png
[20210111183620975.png]: https://img-blog.csdnimg.cn/20210111183620975.png
[https_blog.csdn.net_weixin_46654114]: https://blog.csdn.net/weixin_46654114
[https_space.bilibili.com_391105864]: https://space.bilibili.com/391105864
[20200507113619405.png_pic_center]: https://img-blog.csdnimg.cn/20200507113619405.png#pic_center