疫情数据分析平台（三）：前端开发

针对上一期的ui设计稿，我们继续将其实现为具体的前端界面，依然是比较前期的ui代码实现，不涉及具体数据的引入和渲染。

首先开发头部导航栏，命名为header_nav（实际上由于尝试了两种设计，实际命名为header_nav2），按照之前ui设计稿的设想，我们需要四个导航选项以及一个标题

<div><div><a class="header_title" href="/">疫情数据分析平台</a></div><div class="header-nav-box"><el-menu :default-active="this.$route.path" class="el-menu-demo" mode="horizontal" @select="handleSelect" router="true" ><el-menu-item index="/" class="first_menu_item" font-size="20px">疫情地图</el-menu-item><el-submenu index="2"><template slot="title">数据分析</template><el-menu-item index="/errorpage">选项1</el-menu-item><el-menu-item index="/errorpage">选项2</el-menu-item><el-menu-item index="/errorpage">选项3</el-menu-item></el-submenu><el-menu-item index="/news_page">新闻推送</el-menu-item><el-menu-item index="/errorpage">数据可视</el-menu-item></el-menu></div></div>

注意到按钮的index直接设计成对应的path，实现点击跳转，由于vue项目是单页面应用，所以其跳转实现非常简单方便。尚不明确小组其他同学具体的功能，所以在数据分析的子列表下先写成选项1、2、3.

.header-nav-box{width: 100%;
}
.header_title{float: left;font-size: 30px;margin-top: 2px;margin-left: 10px;margin-bottom: 20px;text-decoration: none;color: black;
}
.el-menu-demo{float: left;margin-right: 10px;
}
.first_menu_item{margin-left: 800px;
}

CSS样式表如上。

最终呈现效果如图：

这个导航栏将放在我们项目的所有页面进行呈现。

同时，在早期开发时，前端会遇到一个问题：面对用户不同的分辨率以及使用的浏览器不同，其css排布会受到影响。有很多种解决方案：利用媒体查询结合固定位置设计CSS；通过插件换算长度单位设计组件等。这里采用一个综合方法：设计时CSS样式采用px，保证固定长度，同时在主页面利用函数查询用户分辨率，将其分辨率与我开发者电脑分辨率进行比例计算，并以此进行缩放代码如下：

bodyScale(){var deviceWidth=document.documentElement.clientWidthvar scale=deviceWidth/1519document.body.style.zoom=scale}

在每个vue生命周期的created中，判断用户屏幕宽度，和我当前开发环境所使用的默认浏览器及默认分辨率宽度比较（谷歌浏览器，1920分辨率下宽度为1519）。利用document.body.style.zoom进行缩放。

可以看到正常比例和缩放比例下的排布：

会自动进行缩放确保用户内容无大范围偏差。

疫情数据分析平台（三）：前端开发相关推荐

降低游戏陪玩平台系统前端开发复杂度的方式详解
优秀的程序员总是能优雅的组织自己的代码,编写思路清晰,组织结构划分合理,从小的功能组件,到大的模块结构,都能通过合理巧妙的搭配,化复杂为简单,并且提升游戏陪玩平台系统运行效率,提高游戏陪玩平台系统代码 ...
移动平台WEB前端开发技巧汇总
原名<移动平台3G手机网站前端开发布局技巧汇总>,由武方博整理的,让我们了解下移动设备上的WEB站点开发的基础知识,多些时间和精力去优化其他细节,我这里对原文的标签格式做了细微的调整,阅读 ...
DAP数据分析平台可视化组件开发
企业信息化建设会越来越完善,越来越体系化,当今数据时代背景下更加强调.重视数据的价值,以数据说话,通过数据为企业提升渠道转化率.改善企业产品.实现精准运营.有效运营,用数据来指引企业的发展. 组件使用 ...
疫情数据分析平台（四）：世界疫情地图绘制
我同时兼任前端开发以及数据可视化中的疫情地图绘制,这部分内容属于我们项目中放在首页最醒目位置的内容,也是我们比较核心的功能之一.疫情地图绘制我将利用echarts的地图控件实现世界地图的绘制,功能包括 ...
疫情数据分析平台（五）：中国疫情地图绘制
中国疫情地图相比世界疫情地图承载更多功能,因此其技术实现的难度也更高,相比世界地图echarts的绘制,中国疫情地图包含大量同步异步函数的使用,同时包含下钻(点击省份进入各省地图)和返回(回到中国地图 ...
疫情数据分析平台工作报告【2】接口API
接口api申请请求接口:/nCoV/api/overall 请求方式:GET 返回自爬虫运行开始(2020年1月24日下午4:00)至今,病毒研究情况以及全国疫情概览,可指定返回数据为最新发布数据或 ...
springboot vue mybatis mysql校园疫情数据分析平台源码
博主介绍:✌在职Java研发工程师.专注于程序设计.源码分享.技术交流和毕业设计✌ 公众号:[程序代做源码分享] 免费源码获取.精品资源.面试题库等都给你
（附源码）ssm学校疫情服务平台毕业设计 291202
ssm学校疫情服务平台摘要信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难以攻克的课题.针 ...
（附源码）mysql+ssm学校疫情服务平台毕业设计 291202
ssm学校疫情服务平台摘要信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难以攻克的课题.针 ...

疫情数据分析平台（三）：前端开发

疫情数据分析平台（三）：前端开发相关推荐

最新文章

热门文章