• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

基于服务器搭建部署的疫情动态地图

互联网 diligentman 6天前 7次浏览

目录

一、购买云服务器(以下以阿里云为例)

二、配置云服务器

三、连接宝塔控制面板

三、部署项目

四、外网访问

五、相关资源


一、购买云服务器(以下以阿里云为例)

基于服务器搭建部署的疫情动态地图

作为新用户的我可以白嫖一下

在上个页面拉到最下方,免费试用

基于服务器搭建部署的疫情动态地图

然后先完成个人认证

基于服务器搭建部署的疫情动态地图

在上图的页面稍微往下一点有两个试用

基于服务器搭建部署的疫情动态地图

建议初学者选第一个,好像只能二选一,我也不知道能不能都有,我选了第一个后悔了

试用的时候,地区还有操作系统随便选(地区不影响,操作系统下面需要改)

已购买的服务器如下

基于服务器搭建部署的疫情动态地图

二、配置云服务器

配置之前先把服务器停止

基于服务器搭建部署的疫情动态地图

更换操作系统

基于服务器搭建部署的疫情动态地图

采用宝塔控制面板

基于服务器搭建部署的疫情动态地图

自定义密码确认订单

基于服务器搭建部署的疫情动态地图

基于服务器搭建部署的疫情动态地图

配置安全组

基于服务器搭建部署的疫情动态地图

基于服务器搭建部署的疫情动态地图

添加端口

基于服务器搭建部署的疫情动态地图

重启服务器

基于服务器搭建部署的疫情动态地图

基于服务器搭建部署的疫情动态地图

三、连接宝塔控制面板

基于服务器搭建部署的疫情动态地图

基于服务器搭建部署的疫情动态地图

基于服务器搭建部署的疫情动态地图

其他默认,密码是刚才自己设置的密码

打开宝塔控制面板

基于服务器搭建部署的疫情动态地图

基于服务器搭建部署的疫情动态地图

在新的页面打开外网面板地址

基于服务器搭建部署的疫情动态地图

输入上图中的账号密码

(因为刚才咱们设置8888端口的时候,授权对象是咱们自己的IP地址,所以即使别人拿到了这个账号和密码也无法访问,但是如果设置成0.0.0.0所以人都以访问)

在软件商店安装tomcat

基于服务器搭建部署的疫情动态地图

基于服务器搭建部署的疫情动态地图

版本按照自己需求来

打开tomcat文件

基于服务器搭建部署的疫情动态地图

基于服务器搭建部署的疫情动态地图

改为80,和前面的80端口对应

基于服务器搭建部署的疫情动态地图

保存退出

重启tomcat基于服务器搭建部署的疫情动态地图

三、部署项目

四、外网访问

基于服务器搭建部署的疫情动态地图

五、相关资源

基于服务器搭建部署的疫情动态地图

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!--导入资源 js-->
		<script src="./js/jquery.min.js" ></script>
		<script src="./js/echarts.js" ></script>
		<script src="./js/china.js" ></script>
	</head>
	<body>
		<h2>全国确诊:<span id='num1'></span></h2>
		<h2>死亡:<span id='num2'></span></h2>
		<h2>累计治愈:<span id='num3'></span></h2>
		<h4>-------Creat By ZhaoMu<span id='num3'></span></h4>

		<div id="main" style="width: 800px;height:600px;"></div>

    <script type="text/javascript">
		let data1=[]
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
        title: {    //标题信息
            text: '全国疫情实时数据统计',
            subtext: 'data from iqiyi',
            sublink: 'http://static.iqiyi.com/gzbd/index.html',
            left: 'center'
        },
        tooltip: {
            trigger: 'item' //当鼠标选中某一个时 显示的提示内容 item表示提示data中的数据
        },

        visualMap: {
            min: 0,
            max: 2000,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],           // 文本,默认为数值文本
            calculable: true,
            show: true
        },
        toolbox: {//是否显示右侧工具栏 数据视图/保存图片/刷新数据
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
            {
                name: '确诊',
                type: 'map', //图标类型 bar line pie map
                mapType: 'china',
                roam: true, //地图能不能跟随滚轮滚动 伸缩
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                data:[] ,
            }
        ]
    };

		$.post("http://toutiao.iqiyi.com/api/route/haoduo/nCoV/detail",//请求接口的地址
				"",//发出请求时需要携带的参数
				msg=>{
				
				$("#num1").text(msg.data.totalConfirmedCount);
				$("#num2").text(msg.data.totalDeadCount);
				$("#num3").text(msg.data.totalCuredCount)
				
				//遍历msg中的data中detail 给data1赋值
				msg.data.detail.forEach( x =>{
					let str={}
					//x表示每一个省的数据
					str.name=x.provinceName
					str.value=x.confirmedCount
					//把当前组装好的json添加到数据中
					data1.push(str);
				})
				//[{name:xx,value:xx},{},{},{},]
				
				//option中的series第一个{}
				option.series[0].data = data1
				 // 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);


				},//服务器返回数据 之后自动执行的方法
				//给上边的三个span 赋值
			
				"json")
       
    </script>
		<script>
			//当整个页面加载完毕 执行以下代码
			$(function(){ //相当于 window.onload=function(){}
				//发出异步请求,请求 爱奇艺的疫情接口
				//$.post表示发出异步请求
				$.post("http://toutiao.iqiyi.com/api/route/haoduo/nCoV/detail",//请求接口的地址
				"",//发出请求时需要携带的参数
				msg=>{
				
				$("#num1").text(msg.data.totalConfirmedCount);
				$("#num2").text(msg.data.totalDeadCount);
				$("#num3").text(msg.data.totalCuredCount)
				
				},//服务器返回数据 之后自动执行的方法
				//给上边的三个span 赋值
			
				"json")//我这个客户端能够接收的响应的类型
				
			})
		</script>
	</body>
</html>

 

 


喜欢 (0)