【Vue3.0】基于axios+elementui实现一个动态可配置的投票功能

这是我参与11月更文挑战的第20天，活动详情查看：2021最后一次更文挑战

前言

小伙伴们大家好。前面文章我们引入了elementui组件库，对我们的投票功能做了一下简单的美化，在经过一番的折腾后终于我们的投票模块在保证了功能的情况下，也变得美观了两全其美。然而一次只能做一个主题的投票显得太过单调，并且投票主题都是定死的，如果想换其它主题就不得不修改源码了。今天我们在前面投票功能的基础上进行一个扩展：投票还是投票，但是要让我们的投票主题动起来，并且一次能够进行多个主题的投票。

安装和配置axios

为了让我们的投票主题能够动起来（可配置），我们需要借助第三方库axios来从数据源中动态请求数据，这样以后想定义什么样的投票主题都可以，不用再去修改源码，这也才符合我们程序开发的规范。

首先安装第三方库axios。运行命令：npm install axios

在项目的src目录下新建一个api目录用于存放后台API接口的请求方法

在api目录中新增一个http.js（文件名可以随便取）用于对axios进行二次封装

axios默认配置都是全局的，为了能够兼容不同类型的后台接口，因此我们需要创建一个axios的实例进行单独配置，这样就不会影响全局和其它后台接口的配置

在http.js文件中导入axios， import axios from ‘axios’

调用axios的create方法创建axios的新的实例，该方法接收一个对象类型参数的，用于设置axios的一些头信息等

设置新实例的baseUrl为 ‘/’ 即根目录（作为参数传给create方法）

设置新实例的Content-Type为 ‘application/json’ （作为参数传给create方法）

调用axios.interceptors.response.use()设置响应拦截，在响应拦截中可以对响应数据做一些处理，比如：错误页面处理等。因为axios返回的响应会包含很多部分，我们在这里拦截目的就是只把数据部分返回出去

调用axios.interceptors.request.use()设置请求拦截，多用于处理验证一些请求信息，比如设置token等等，我们这里暂时用不到

最后将axios的新实例导出去供其它组件使用

import axios from 'axios'
//创建新的axios实例
let http = axios.create({
	baseURL:'/', // 设置baseURL
	headers:{//设置头信息
		"Content-Type":'application/json;charset=UTF-8'
	}
});

//设置响应拦截
http.interceptros.response.use(response=>{
	return response.data;
})

//设置请求拦截(暂时用不到，可以不用设置)
http.interceptros.request.use(config=>{
	return config;
})
复制代码

模拟数据源

为了能够动态设置投票主题我们不能直接把主题写死在代码中，因此我们可以创建一个json文件来模拟我们的数据源。需要注意的是，这个JSON文件必须建在public目录中才能够请求到，否则会报404错误，那么在json文件中我们想配置多少主题都可以，并且后面还可以随时更换，也不用在改源代码了，岂不美哉。数据格式如下：

{
	data:[
		{id:1,title:'前端好学吗？'},
		{id:2,title:'Vue3.0入手快吗？'},
		{id:3,title:'现在都在用Vue3.0开发了吗？'},
		{id:4,title:'如果给你高工资让你996你愿意吗？'},
		{id:5,title:'年轻人需要买房吗？'},
		{id:6,title:'年轻人要不要裸辞？'},
		{id:7,title:'下班后领导的信息该不该回？'},
		{id:8,title:'你认为该不该看伴侣的手机？'},
		{id:9,title:'你支持约会AA制吗？'},
		{id:10,title:'爸妈不支持你们在一起会分手吗？'}
	]
}
复制代码

动态生成投票主题

api和数据源都已经准备好了，接下来就是接入数据源然后让我们的投票主题动起来：上篇中已经优化好的vote.vue组件不需做任何改动，本次扩展只需修改App.vue即可

在App.vue中导入刚刚创建好的api模块

请求public下的json数据源

将请求回来的data数据通过return暴露给模板

在模板中给Vote组件添加v-for指令，将投票主题数据动态的展示出来

App.vue

<template>
	<div class="main">
		<vote v-for="item in data" :key="item.id" :title="item.title"/>
	</div>
</template>
复制代码

import vote from './views/Vote.vue'
import http from './api/http'
import {ref} from 'vue'

export default{
	components:{vote},
	setup(){
		const data = ref([]);
		http.get('/data.json').then(res=>{
			data.value = res.data;
		});
		return {
			data
		}
	}
}
复制代码

其它没有在本文中列出来的代码就是不需要改动的，到此一个动态的可展示任何多投票记录的投票功能就完成了，感兴趣的小伙伴快去试试吧。

总结

本次分享基于前面的投票功能我们又做了一个小小的扩展，实现可以动态的从数据源中加载投票主题，并且还能够根据自己的业务需求实现不同个数的投票展示，并且每个主题都是独立的互不影响的。小伙伴们快去试试吧。本次分享就到这里了，喜欢的小伙伴欢迎点赞评论加关注哦！

【Vue3.0】基于axios+elementui实现一个动态可配置的投票功能

前言

安装和配置axios

模拟数据源

动态生成投票主题

总结

猜你喜欢