当前位置：首页 > news >正文

【“在路上”疫情信息检测】

news 来源：原创 2024/7/5 5:03:15

此次项目是一个移动端的疫情数据信息展示平台，后期会将该项目上传到云平台，有机会的话也可以用于自己出行时使用。

1、使用技术点：

组件的拆分；
使用axios进行网络请求；
在Vue中使用echarts图表；
在vue中封装tabs自定义组件；
在Vue中使用Swiper；
在Vue中使用Vant库;
项目的版本控制——GIT；
使用yarn进行项目包管理；

2、项目初始化

在之前的项目中也有总结的项目初始话的方式，这里简单复一下，如果有需要可以看前面有详细的关于项目初始化的介绍。

创建远程仓库：这里我们使用gitee仓库，为了更加贴近实际项目，我们的master分支只放项目的README文件，我们的项目放在project分支上，之后开发时基于project分支分别创建feat_develop和fix_develop分支，分别进行新建和修改操作。
初始化项目：vue create vue-ontheway
安装Axios：yarn add axios -S
安装Vant：yarn add vant -S
启动项目：yarn serve

3、项目基础结构

css初始化：在assets文件夹下创建base.css文件，用来存放项目基础css样式；
引入初始化css：直接在App.vue中引入或者在main.js中引入，即可对整个项目适用；

4、移动端适配方案——vw布局

vw布局相当于把当前屏幕分成100份，即100vw=750px;

如果想要使用vw布局，需要设置根字体的大小，所以这个在base.css中进行设置。

5、搭建初步页面样式

我们在搭建页面的时候，首先要想到的是将我们的组件进行拆分，毕竟我们使用Vue的目的就是方便我们的组件化拆分嘛！

这里我们先构想一下我们可能涉及到的模块，然后之后我们不够的话可以再添加。

首页：我们的页面是需要有一个首页，去承载这些组件的，这里我们使用HomeView.vue；
病毒信息：这里是对病毒的信息进行一个简单的介绍，这里我们直接新建一个ConInfo模块（文件），来存放我们的ConInfo.vue组件。
疫情热点信息：这里需要在首页展示疫情热点信息，所以这里直接放在ConInfo模块。

6、接口注册

这里我们后台用到的数据全部来自网上现成的免费接口，所以需要我们注册一下。

疫情信息接口 ——https://www.tianapi.com/apiview/169
1. 注册：我们首先需要注册天行数据用户注册 - 天行数据TianAPIhttps://www.tianapi.com/signup.html
2. 申请接口：注册完成后，我们直接点击这个链接，点击申请接口即可抗击疫情API接口 - 天行数据TianAPI抗击疫情，nCoV新冠疫情实时播报。接口稳定高效、简单易用，支持免费试用再付费，欢迎使用。https://www.tianapi.com/apiview/169
3. 查看接口：申请接口后，可以在“首页”—“数据管理”—“我申请的接口”中查看该接口。

7、配置公共接口地址

之所以配置公共的接口，目的是为了方便我们对于发送请求的一个统一管理，这样我们在之后需要修改请求地址的时候，就不用去每一个组件中去寻找了，直接找到我们公共的接口地址修改即可。

接口文件存放地址：src/api/base.js

/**
 * 公共的请求接口 
 **/
const base = {
  host: 'https://api.tianapi.com', //天行数据
  covInfo: '/ncov/index?key=271aaa17a71d72bf78582a79bdcce075',//疫情病毒信息
}

export default base;

8、页面结构与页面代码

/src/api/base.js

/**
 * 公共的请求接口 
 **/
const base = {
  host: 'https://api.tianapi.com', //天行数据
  covInfo: '/ncov/index?key=271aaa17a71d72bf78582a79bdcce075',//疫情病毒信息
}
export default base;

/src/api/index.js

/**
 * 请求接口的方法
 */
// 引入axios 发送请求
import axios from "axios";
//引入接口地址
import base from './base'
// 获取请求方法
const api = {
  /**
   * 从接口获取病毒信息
   */
  getCovInfo() {
    const url = base.host + base.covInfo
    // get请求接受一个参数：请求地址
    // 注意：这里我们只拿到数据，不做解析，解析在对应的组件中进行
    return axios.get(url)
  },
  
  // 自己定义了一个病毒信息对象
  cracteCovInfo() { 
    var conInfo={
      note1:'病毒:SARA-CoV-2,其导致疾病命名 COVID-19。',
      note2:'传染源:新冠肺炎的患者.无症状感染者也可能成为传染源。',
      note3:'传染途径:经呼吸道飞沫、接触传播是主要的传播途径。气溶胶传播和消化道传播途径尚待明确。',
      remark1: '易感人群：人群普遍易感。老年人及有基础疾病者感染后病情较重，儿童及婴儿也有发病。',
      remark2: '潜伏期：一般为3~7天，最长不超过14天，潜伏期可能存在传染性，其中无症状病例传染性非常罕见。',
      remark3: '宿主：野生动物，可能为中华菊头蝠。',
    }
    return conInfo
  }
}
export default api

/src/api/assets/css/base.css

/* css初始化文件 */
body,ul,li,p,h1,h2,h3,h4,h5,h6{
  margin: 0;
  padding: 0;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
  color: #333;
}
img{
  border: 0;
}
/* 移动布局 */
html{
  font-size: 13.333333vw;
}
/* 防止字体过大 */
@media (min-width:750px) {
  html{
    font-size: 100px;
  }
}
body{
  font-size: 14px;
  font-family: '微软雅黑','Arial Narrow',Arial, sans-serif;
  max-width: 750px;
  margin: 0;
}

/src/api/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

/src/api/views/ConInfo/ConInfo.vue

<template>
  <div class="info">
    <div class="cov">
      <div class="title">病毒信息</div>
      <p>{{ covDesc.note1 }}</p>
      <p>{{ covDesc.note2 }}</p>
      <p>{{ covDesc.note3 }}</p>
      <p>{{ covDesc.remark1 }}</p>
      <p>{{ covDesc.remark2 }}</p>
      <p>{{ covDesc.remark3 }}</p>
    </div>
    <div class="hot">
      <div class="title">
        <img src="../../assets/images/hot.png" width="60px" alt="" />
      </div>
      <ul>
        <li v-for="item in news" :key="item.id">
          {{ item.title }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  // 接受父组件传来的信息
  props: {
    covDesc: {
      type: Object,
      default: function () {
        return {};
      },
    },
    news: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.info {
  // 因为我们提前把根标签设置成100px   所以  0.2rem=20px
  padding: 0.2rem;
  .title {
    border-left: 0.1rem solid rgb(20, 49, 128);
    padding-left: 0.1rem;
    margin-bottom: 0.2rem;
  }
  P {
    line-height: 0.5rem;
    color: #666;
  }
}
</style>

/src/api/views/HomeView.vue

<template>
  <div class="home">
    <!-- 1.首页轮播 -->
    <!-- 注意：这里我使用的是picture标签，这个常用来做PC端和移动端图片适配的，但是不加影响不大，有兴趣的话可以百度一下哈 -->
    <picture>
      <img src="../assets/images/true.jpg" width="100%" alt="" />
    </picture>
    <ConInfo :covDesc="covDesc" :news="news" />
  </div>
</template>

<script>
import ConInfo from "./ConInfo/ConInfo.vue";
import api from "../api/index";
export default {
  components: { ConInfo },
  //快捷键：vd  快速创建data模板
  data() {
    return {
      covDesc: {},
      news: [],
    };
  },
  created() {
    // 拿到我们定义好的数据  病毒信息
    this.covDesc = api.cracteCovInfo();

    // 请求病毒信息接口=====
    api.getCovInfo().then((res) => {
      console.log(res.data);
      // 获取疫情热点信息
      this.news=res.data.newslist[0].news;
    });
  },
};
</script>

<style lang="scss" scoped>
</style>

/src/App.vue

<template>
  <div id="app">
    <!-- 路由出口 -->
    <router-view />
  </div>
</template>

<style lang="scss">
  @import url("./assets/css/base.css");
</style>

静态图片我还没有想好以什么形式上传，后续会想办法，项目持续更新中~~~