![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
毕业设计日记
文章平均质量分 66
小蘑菇mmp
一朵小蘑菇
展开
-
【毕设Day14】
毕设Day14前言一、新增疫情新闻列表1.CovidInfo文件接收Home组件传过来的数据2.展示数据二、新增疫情导航栏1.新建风险地区Area、核酸检测Test、防疫物资Prevention、出行政策Travel文件2.路由导入3.编辑风险地区Area页面前言第14天啦!!!加油加油加油!!!一、新增疫情新闻列表1.CovidInfo文件接收Home组件传过来的数据 props: { // 疫情描述 covidInfo: { type: Object,原创 2022-02-27 23:03:13 · 343 阅读 · 0 评论 -
【毕设Day13】
毕设Day13前言一、引入Vant第三方库1.通过npm安装Vant2.引入组件:自动按需引入组件 (推荐)二、疫情期间疫情出行防疫政策1.新建CovidVant.vue文件2.使用Cascader 级联选择3.引入库前言第13天啦!!!加油加油加油!!!一、引入Vant第三方库1.通过npm安装Vantnpm i vant@latest-v2 -S2.引入组件:自动按需引入组件 (推荐)babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写原创 2022-02-22 19:01:53 · 409 阅读 · 0 评论 -
【毕设Day12】
毕设Day12前言一、使用Swiper轮播图1.安装低版本的Swiper2.使用模板二、增加轮播图标识1.增加标识卡2.轮播图绑定标识卡,实现点击标识卡,切换对应轮播图3.实现点击轮播图,切换对应标识卡三、疫情曲线图1.在base.js中添加疫情曲线图api2.在index.js中封装请求折线图函数covidImage()3.在CovidSwiper中请求数据前言第六天啦!!!加油加油加油!!!一、使用Swiper轮播图1.安装低版本的Swiper网址:https://github.com/su原创 2022-02-21 22:03:16 · 149 阅读 · 1 评论 -
【毕设Day11】
毕设Day11前言一、新建内容组件Content.vue1.Tabs父组件传内容数据给content子组件展示2.对数据进行遍历3.根据高亮,分开显示二、将组件导出三、中国地图和世界地图使用Tabs组件1.CovidMap使用Tabs组件前言第11天啦!!!加油加油加油!!!一、新建内容组件Content.vue1.Tabs父组件传内容数据给content子组件展示内容数据在Tabs的slots里面<!-- ul导航 --> <ul class="nav">原创 2022-02-21 09:41:06 · 95 阅读 · 0 评论 -
【毕设Day10】
毕设Day10前言一、封装自定义组件tab1.封装tab选项卡2.Tabs组件使用插槽(默认组件里面不能加内容)3.Tab组件使用props接收数据二、实现tab栏的颜色切换1.tab.vue绑定点击样式条件2.Tab获取父元素Tabs的值,Tabs获取父元素App的值3.Tab增加点击事件4.Tab使用computed进行数据的监听前言第10天啦!!!加油加油加油!!!一、封装自定义组件tab1.封装tab选项卡新建tabs组件(Tabs.vue、Tab.vue),并且挂载到全局main.j原创 2022-02-19 19:47:13 · 178 阅读 · 0 评论 -
【毕设Day9】
毕设Day9前言一、新建世界地图1.echarts.js文件新增worldMap方法2.将世界国家的英文名映射为中文二、国外疫情数据接口1.获取接口2.base.js引入接口3.index.js创建getWorldMap方法4.CovidMap调用接口三、绘制世界地图1.CovidMap文件 绘制世界地图前言第9天啦!!!加油加油加油!!!一、新建世界地图1.echarts.js文件新增worldMap方法2.将世界国家的英文名映射为中文echarts.js文件导入utils/country.原创 2022-02-09 14:00:58 · 96 阅读 · 0 评论 -
【毕设Day8】
毕设Day8前言一、新建省份地图1.echarts.js文件增加provinceMap方法2.utils/map.js新建地图的引入文件二、City.vue页面1.增加显示地图的容器2.对数据进行处理3.解决问题:api数据与echarts数据的匹配前言第8天啦!!!加油加油加油!!!一、新建省份地图1.echarts.js文件增加provinceMap方法//省份地图--- provinceMap(id, cityName, data) {原创 2022-02-08 23:43:16 · 91 阅读 · 0 评论 -
【毕设Day7】
毕设day6前言一、新建浮窗跳转页面(城市页面)1.新建views/City.vue2.引入库3.引入库二、使用步骤1.引入库2.引入库3.引入库前言第七天啦!!!加油加油加油!!!一、新建浮窗跳转页面(城市页面)1.新建views/City.vue配置路由: { path: '/city', name: 'City', // 异步加载 component: () => import('../views/City.vue') }路由跳转方式:路原创 2022-02-08 15:34:15 · 99 阅读 · 0 评论 -
【毕设Day6】
毕设day6前言一、自定义提示框浮层内容1.使用formatter回调函数2.设置浮窗可以点击3.设置提示框触发的条件前言第六天啦!!!加油加油加油!!!一、自定义提示框浮层内容1.使用formatter回调函数tooltip: { formatter: function (data) { //data={name:'',value:''} //注意return的符号,不是单引号return `<div>省份原创 2022-02-04 23:12:40 · 75 阅读 · 0 评论 -
【毕设Day5】
毕设day5前言一、使用echarts插件二、绘制中国地图1.引入对应省份的js文件2.基础使用3.使用方法三,将echarts开发成Vue插件4.使用china.js5.新建Covid/CovidMap三、使用 挖数据 调用全国各个城市疫情数据1.接口地址2.请求数据3.字段转换4.字段插入地图前言第五天啦!!!加油加油加油!!!一、使用echarts插件方法一:直接引入echarts 直接挂载main.js vue实例上方法二:在组件内部使用图标 echarts方法三:开发成Vue插件安原创 2022-02-03 23:48:38 · 176 阅读 · 0 评论 -
【毕设Day4】
毕设Day4前言一、使用天行api数据二、CovidInfo病毒信息介绍并且设置样式1.编写html代码2.设置蓝色条纹样式3.设置信息样式三、CovidNum疫情数据并且设置样式1.新增时间过滤器和数据过滤器方法前言第四天啦!!!加油加油加油!一、使用天行api数据1、调用getCovidInfo(),将请求的数据放在Home组件中,CovidInfo子组件和CovidNum子组件进行调用 created() { console.log(this.$api); this.$a原创 2022-02-02 23:37:31 · 151 阅读 · 0 评论 -
【毕设Day3】
毕设Day3前言一、请求疫情信息数据1.在api文件夹下base.js文件请求数据2.index.js里面封装3.将api挂载全局(挂载到Vue原型上,使全局都可以访问)前言第三天啦!!!加油加油加油!一、请求疫情信息数据完整接口地址:http://api.tianapi.com/ncov/index?key=412004cd81d5f87c2ea0900ac5b5f4c11.在api文件夹下base.js文件请求数据//所有网络请求/接口的地址const base = { //网原创 2022-02-02 22:46:22 · 156 阅读 · 0 评论 -
【毕设Day2】
毕设Day2前言一、1、创建CovidInfo.vue和CovidNum.vue文件二、移动端适配1.在header中放入首页图片,并进行移动端适配三、注册 挖数据四、注册 天行数据前言第二天啦!!!加油加油加油!一、1、创建CovidInfo.vue和CovidNum.vue文件CovidInfo.vue:疫情简介CovidNum.vue:疫情数据报错:中途出现页面不显示的情况。原因:写name的时候没有加单引号。解决方法:更改Vue模板文件->首选项->用户片段-&g原创 2022-02-02 22:28:30 · 182 阅读 · 0 评论 -
【毕设Day1】
毕设Day1前言一、项目初构二、创建项目1.gitee新建项目DataPlatform2.下载VScode插件Gitee三、项目初始化1.CSS初始化(属于static文件)2.安装axios3.新建工具文件夹4.新建接口文件夹src/api前言毕设开干!我将会在这里记录每一天的进度!!!加油加油加油!一、项目初构项目名称:疫情实时展示设计(移动端)项目简介:本项目基于Vue.js搭建了一个疫情实时展示系统,根据国家卫健委以及世界卫生组织、Worldometer Coronavirus等渠道获取原创 2022-02-02 22:03:27 · 198 阅读 · 0 评论