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

一、购买云服务器（以下以阿里云为例）

二、配置云服务器

三、连接宝塔控制面板

三、部署项目

四、外网访问

五、相关资源

一、购买云服务器（以下以阿里云为例）

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

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

然后先完成个人认证

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

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

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

已购买的服务器如下

二、配置云服务器

配置之前先把服务器停止

更换操作系统

采用宝塔控制面板

自定义密码确认订单

配置安全组

添加端口

重启服务器

三、连接宝塔控制面板

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

打开宝塔控制面板

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

输入上图中的账号密码

（因为刚才咱们设置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 mapmapType: '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.provinceNamestr.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>

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

CDN服务器是什么意思？CDN服务器搭建部署
CDN服务器是什么意思?CDN服务器搭建部署什么叫CDN服务器? cdn服务器的优点和设计原理 CDN服务器搭建部署一.CDN服务器搭建前打算(文中以LuManager来构建CDN虚拟主机) 二. ...
一台服务器搭建部署两个或多个Redis实例
问题描述: 今天程序那边说测试服里面有两个项目,为了数据不冲突,想一台服务器搞两个Redis实例, 然后自己这边查询了一下,确实可以这么整,只需要区分端口号和区分配置文件方面就行, 原理与nginx和 ...
2021最新阿里云购买学生机服务器搭建部署一条龙服务
一.购买服务器 1.进入阿里云官方网站,滑到底部点击学生机限时领取阿里云服务器1折优惠券 image.png 2.进入学生机购买页面,选择轻量应用服务器,第一次购买建议选择3个月,点击购买 imag ...
从零搭建一个基于React+Nextjs的SSR网站(四)：如何搭建服务器并部署Nextjs项目
个人博客源码:https://github.com/shaotianyu/blog-front PS: 如果你有疑惑,可以给我留言,咱们一起解决它. 从零搭建一个基于React+Nextjs的SSR网 ...
【云服务器】基于docker容器部署Halo项目的个人博客搭建并部署到云服务器
目录 1 docker快速部署halo个人博客 2 主题设置(本文使用的是M酷Joe 2.0版本的主题,下载链接放在下面了) 2.1 API报错解决方案 2.2 首页分栏设置 2.3 轮播图的修改 2 ...
windoes服务器搭建Jenkins和部署war项目
目录背景环境准备安装JDK Tomcat maven 安装Jenkins 安装解决无法下载插件安装中文插件构建项目解决入站规则总结背景背景介绍:由于工作原因,小编申请新的服务器环境 ...
docker 启动容器的时候没-p 后面怎么加-p_基于Docker搭建基础自动化部署
阅读本文约需要7分钟大家好,我是你们的导师,我每天都会在这里给大家分享一些干货内容(当然了,周末也要允许老师休息一下哈).上次老师跟大家分享了下SpringBoot如何实现全链路调用 ...
基于git（分布式版本控制系统）的各种服务器权限工具对比 Gitlab服务器搭建以及邮箱、LDAP配置实现公司多人协同开发
前言作为大一的小朋友,虽然学的专业和CS有那么一点关系,但放到实习的工作当中,那是完全不够用了:( 在实习老师的指导和帮助下,在实习的头个礼拜,逐步接触了解了git--开源分布式版本控制系统.并在第 ...
基于apache搭建文件下载服务器
CentOS6下使用Apache部署HTTP服务 [日期:2018-05-08] 来源:Linux社区作者:火星的小白 [字体:大中小] Apache--目前用于实现http服务的软件有许多, ...

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

一、购买云服务器（以下以阿里云为例）

二、配置云服务器

三、连接宝塔控制面板

三、部署项目

四、外网访问

五、相关资源

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

最新文章

热门文章