This is the 20th day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

preface

Hello, everyone. In the previous article, we introduced the Elementui component library, which gave our voting functionality a bit of a makeover, and after a lot of fiddling, our voting module became the best of both sides of the table. However, it is too monotonous to vote on only one topic at a time, and the voting topic is fixed, if you want to change to other topics you have to modify the source code. Today we are going to do an extension of the previous voting feature: voting is still voting, but we want to make our voting theme live and be able to vote on more than one topic at a time.

Install and configure AXIOS

In order to make our poll theme live (configurable), we need to use the third-party library AXIos to dynamically request data from the data source, so that we can define any poll theme we want without modifying the source code, which also conforms to our application development specifications.

  • Start by installing the third-party library axios. Run the command NPM install axios
  • Create an API directory in the SRC directory of the project to store the request methods of the background API interface
  • Add an http.js (optionally named) to the API directory to re-wrap AXIOS
  • The default configuration of AXIOS is global. To be compatible with different types of background interfaces, we need to create an instance of AXIOS for separate configuration so that the configuration of global and other background interfaces is not affected
  • Import axios from ‘axios’ in http.js file
  • Create a new instance of AXIos by calling axios’s create method, which takes an object type argument, sets some headers for Axios, and so on
  • Set the baseUrl of the new instance to ‘/’, the root directory (passed as an argument to the create method)
  • Set the content-type of the new instance to ‘application/json’ (passed as an argument to the create method)
  • Call axios. Interceptors. Response. Use () sets the response to intercept, in response to intercept can do some of the response data processing, such as: error page processing, etc. Since the response returned by AXIos will contain many parts, our purpose here is to return only the data part
  • Call axios. Interceptors. Request. Use () set the request to intercept, used to process validation more request information, such as setting up token, etc., we temporarily can’t use here
  • Finally, a new instance of AXIos is exported for use by other components
import axios from 'axios'
// Create a new axios instance
let http = axios.create({
	baseURL:'/'./ / set the baseURL
	headers: {// Set the header information
		"Content-Type":'application/json; charset=UTF-8'}});// Set response interception
http.interceptros.response.use(response= >{
	return response.data;
})

// Set request interception
http.interceptros.request.use(config= >{
	return config;
})
Copy the code

Analog data source

In order to dynamically set the voting theme we can’t just write the theme in code, so we can create a JSON file to simulate our data source. The JSON file must be in a public directory, otherwise a 404 error will be reported, so we can configure as many themes as we want in the JSON file, and we can also change the source code at any time. Data format is as follows:

{
	data:[
		{id:1,title:' Is the front end easy? '}, {id:2,title:'Vue3. 0Was it quick? '}, {id:3,title:' Vue3 is now being used. 0Has it been developed? '}, {id:4,title:' If I give you a high salary, let you996Would you like to? '}, {id:5Do young people need to buy a house? '}, {id:6Should young people resign naked? '}, {id:7,title:' Should I reply to the leader's message after work? '}, {id:8,title:' Do you think you should check your partner's phone? '}, {id:9,title:' Do you support going Dutch on dating? '}, {id:10Will you break up if your parents don't support you? '}}]Copy the code

Dynamically generate poll topics

Now that the API and data source are ready, it’s time to plug in the data source and get our voting theme moving: the vote.vue component that was optimized in the previous article doesn’t need to be changed, this extension just needs to change app.vue

  • Import the API module you just created in app.vue
  • Request the JSON data source under public
  • Exposes the requested data to the template via a return
  • Add the V-for directive to the Vote component in the template to display the voting subject data dynamically
  • App.vue
<template>
	<div class="main">
		<vote v-for="item in data" :key="item.id" :title="item.title"/>
	</div>
</template>
Copy the code
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
		}
	}
}
Copy the code

The rest of the code not listed in this article does not need to be changed. This is a dynamic voting function that can display any multiple voting records. If you are interested, go and try it.

conclusion

In this sharing, we made a small extension based on the previous voting function, which can dynamically load voting topics from the data source and realize different numbers of voting displays according to their business needs. In addition, each topic is independent and does not affect each other. Guys, go ahead and try it. This time to share here, like small partners welcome to like comments and attention oh!