此次项目是一个移动端的疫情数据信息展示平台,后期会将该项目上传到云平台,有机会的话也可以用于自己出行时使用。
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中引入,即可对整个项目适用;
![](https://i-blog.csdnimg.cn/blog_migrate/4117fc124cb558657f9bd56c5e5d7fae.png)
![](https://i-blog.csdnimg.cn/blog_migrate/18465306bf1bab918ed61c091f7b7b21.png)
4、移动端适配方案——vw布局
vw布局相当于把当前屏幕分成100份,即100vw=750px;
如果想要使用vw布局,需要设置根字体的大小,所以这个在base.css中进行设置。
5、搭建初步页面样式
我们在搭建页面的时候,首先要想到的是将我们的组件进行拆分,毕竟我们使用Vue的目的就是方便我们的组件化拆分嘛!
这里我们先构想一下我们可能涉及到的模块,然后之后我们不够的话可以再添加。
- 首页:我们的页面是需要有一个首页,去承载这些组件的,这里我们使用HomeView.vue;
- 病毒信息:这里是对病毒的信息进行一个简单的介绍,这里我们直接新建一个ConInfo模块(文件),来存放我们的ConInfo.vue组件。
-
疫情热点信息:这里需要在首页展示疫情热点信息,所以这里直接放在ConInfo模块。
6、接口注册
这里我们后台用到的数据全部来自网上现成的免费接口,所以需要我们注册一下。
- 疫情信息接口 ——https://www.tianapi.com/apiview/169
- 注册:我们首先需要注册天行数据 用户注册 - 天行数据TianAPI
https://www.tianapi.com/signup.html
- 申请接口:注册完成后,我们直接点击这个链接,点击申请接口即可抗击疫情API接口 - 天行数据TianAPI抗击疫情,nCoV新冠疫情实时播报。接口稳定高效、简单易用,支持免费试用再付费,欢迎使用。
https://www.tianapi.com/apiview/169
- 查看接口:申请接口后,可以在“首页”—“数据管理”—“我申请的接口”中查看该接口。
- 注册:我们首先需要注册天行数据 用户注册 - 天行数据TianAPI
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>
静态图片我还没有想好以什么形式上传,后续会想办法,项目持续更新中~~~