How to understand Vue front-end and back-end data interaction and display

1. Technical Overview

The data calculated by the backend is presented at the corresponding position of the front-end page, and the corresponding data and interface are changed according to the user's click operation, and then the value is passed to the backend. This technology is essential for Web development and is the link between the front-end and back-end interactions. The difficulty lies in obtaining backend data and preventing data linkage.

2. Technical Details

1. Get backend data from the interface

(1) Carefully check the type of data transmitted by the backend. The main thing is to distinguish between arrays and single data. Check the backend request method and distinguish between post and get.

(2) First, return an xxxData:[] array or a variable xxxData:<type> in data to receive the data sent by the backend.

(3) Define a request function in the method. For example, we define the function name as update. The most important thing in the request function is the request statement to obtain backend data through the API.

{params:this.xxx} is filled in with the parameters carried.

When getting, params is used as a keyword to control the transfer of all parameters. For example, if the name of the parameter is id and the value is the value myId declared in data, then the get request statement can be written as:

update(){
      this.$http.get(baseURL+`api/condition`,{params:{id:this.myId}}).then(function(res){
        this.memberData = res.body;
     });
},

When posting, you don't need to add the params keyword. Directly written as:

update(){
      this.$http.get(baseURL+`api/condition`,{id:this.myId}).then(function(res){
        this.memberData = res.body;
     });
},

The returned parameter is in the anonymous function after then.

Here, baseURL is the path of the project. If the project is deployed on a server, the general format is www.XXX.com/project name. The following api is the API interface encapsulated by the backend.

Variables defined by the front end often appear in the api/condition. If they are written directly when passing values, they will become part of the interface address. To make it represent its internal value, use ${} to get the value. For example:

console.info(`Hello everyone, my name is ${name}, I am ${age} years old this year`)
// Equivalent to console.info('Hello everyone, my name is ' + name + ', I am ' + age + ' years old this year')

(4) At this time, the request operation is not called and is executed by default, so it must be executed in real time in mounted.

The overall code presentation is as follows:

<script>
    export default {
        data(){
            memberData[], // Waiting for the receiving array to store the backend data},
        mounted(){
            this.update();//After the HTML is loaded, it is equivalent to synchronously displaying the backend data on the page},
        methods:{
            update(){
                  this.$http.get(`/api/project/${this.$store.state.project.id}`, {
                      project_id:this.$store.state.project.id,
                    }).then(doc => {
                          var code = doc.data.status;
                          var msg = doc.data.msg;
                      if (code == 0){//The request is successful, and corresponding actions can be taken according to different status code return values ​​this.memberData = doc.data.data.member//This array is stored in the backend data}			
                  })
            },
        },
    };
</script>

In the above example, doc receives the returned parameters, starting with doc.data. The data transmitted by the backend has a data structure, so .data is used again to obtain the member data in it.

Note: When I first started learning how to get data, I mistakenly quoted the request URL with single quotes ('). Here, single back quotes (`) are used.

When using Vue programming, if the event bound in the component has an incoming event name string/string parameter, then using only single and double quotes will result in string is undefined. At this time, we need to use backsingle quotes.

Compare backend project documentation:

2. Interaction between front-end and back-end value transmission

The concept of passing values ​​from the front end to the back end is the same as the previously mentioned concept of carrying parameters, and the method is the same. However, the difference is that this is an interaction that mainly passes parameters from the front end to the back end, so when there are many parameters, it is easy to cause the code to be too long and cumbersome to read and write. This will allow you to build an intermediate variable structure and pass values ​​uniformly, so you only need to fill in one parameter. For example:

var obj = {//Put all the parameters together project_id:this.$store.state.project.id,
    id:this.id,
    finish: checked,
    name:this.flowName
}
this.$http.post(`/api/project/${this.$store.state.project.id}/task/update`, obj)//Collection of direct value transfer.then(doc => {
            var code = doc.data.status;
            var msg = doc.data.msg;
			if (code == 0){
				this.update()//Automatically refresh the front end after updating the backend data, and change the appearance as you go }
    		else{
					this.$alert(msg,'false')
			}
	});

3. Display the acquired data

Compared to acquiring data, displaying data is much simpler.

First of all, the data sent from the backend must be a multi-layer structure or a collection, so when using a large array to receive the backend data, you need to declare several specific variables that you need to display in the data return. The background data must be clearly stored in the front-end variables before it can be used by the front-end. Separate the data in the array again. For example:

getTaskData:function(){
	this.$http.get(`/api/project/${this.$store.state.project.id}/task/info? id=${this.messageId}`, //According to the URL provided by the backend, the parameter after ? should be written as ${}
        {params:{project_id:this.$store.state.project.id,task_id:this.messageId}})
        .then(doc=>{
            if(doc.data.data){//It can only be obtained when data is received. If it is empty, then an error will occur when searching for the subvariable in the structure again under the passed data.
                this.taskData=doc.data.data;//The so-called overall large array contains all the transmitted data this.defaultChecked=this.taskData.finish;//Subdivide the transmitted data structure and put it into the declared variables this.taskRemarks=this.taskData.remarks;   
            }                  
            else
                this.taskData=null;
            }).catch(err=>{//Way to handle errors this.$alert("Unknown error", "false"); //The server is not set up yet })                
},

When I first came into contact with receiving data, I had a question. I didn’t know how to obtain “sub-data” like this:

After obtaining the specific data, I want to display it in HTML. Generally speaking, variables or the information they represent are displayed on a web page by inserting them into HTML tags. Variables as attribute values ​​must be implemented using v-bind. v-bind is used to bind data and element attributes. For example:

<a href="myHome.com" rel="external nofollow" >OK</a>

If you want to update the href attribute value in real time, you need to bind a custom variable to it, and the variables in double quotes will be treated as strings. At this time we need to use v-bind to achieve it. After binding, the corresponding value must be found in the vue data. When we change the url in the console, the corresponding will also change. Similarly, we can also bind the image src attribute and class attribute.

//Here url is a custom variable returned in data, storing the link string //url: "MyHome.com",
<a v-bind:href="url" rel="external nofollow" rel="external nofollow" >OK</a>
//Abbreviated as (I simply add a colon before the attribute when a variable name is needed as an attribute)
<a :href="url" rel="external nofollow" rel="external nofollow" >OK</a>

When I first wanted to change the page display data in real time, that is, to change the page display tag attributes according to the data sent from the backend, I mistakenly used DOM to control the element display. Because I have never been exposed to Vue before, my awareness of changing interface elements remains at the stage of "document.getElementById('xxx').<attribute>=xxx". This makes the code cumbersome and inefficient, and increases the coupling of the code.

4. Prevent data linkage

In the task panel module, in order to display different task details based on different clicks, it is necessary to pass the unique ID of each task. After displaying the details, there is a function to change the information. Random changes here may affect the information of other tasks and cause information confusion. The main reason is that we listened to the changes of all components at the beginning. For example, this code is called when the urgency of the task is changed:

onFlowPri(pri){
			this.taskpriority = pri
			this.$http
         .post(`/api/project/${this.$store.state.project.id}/task/update`, {//When the urgency changes, the data is transferred to the backend. Only one change changes all the data. At this time, the transfer of other old data will encounter problems project_id:this.$store.state.project.id,
				id:this.id,
				remarks:this.flowMarks,
				name:this.flowName,
				finish:this.finish,
				priority:pri,
			})
         .then(doc => {
            var code = doc.data.status;
            var msg = doc.data.msg;
				if (code == 0){
					this.update()
				}else{
					this.$alert(msg,'false')
				}
         });
},

However, transmitting changed data too early when it is unknown whether the user will save it and actively monitoring it will cause errors. Increases the complexity of the code. Especially when there is enough data that users interact with, it can cause confusion. A good way is to transfer the data required to be filled in the entire form to the backend after the user chooses to confirm and save, so that a one-time transmission ensures the accuracy of the data.

3. Technical issues

1. Automatic interface refresh

Problem description: When the user changes the properties of certain functions, the data or components displayed on the interface cannot change in real time, which requires the user to manually refresh the entire page.

Solution: First, the loading of the interface depends on the method defined in the mounted method to obtain background data (here the method is generally named update) for display. As a hook function, it requests the backend, gets back data, and does something with the router hook. It mainly relies on the API to get data, and you can directly call update when mounted or changed. That is, after a user click event occurs, update is called at the location of the corresponding event to obtain new data from the background.

2. Error in getting data array

Problem description: The backend passes an array to the frontend. After the frontend receives its own array, an error occurs when it pushes a new element into the array for the second time.

The problem seems simple on the surface. The reason is that the array I pushed is not recognized as an array. But I have checked again and again that the receiving data type is indeed declared as an array in data. The specific location of this error cannot be found. All errors are read from the runtime cache, and no source file is mapped. It's a metaphysical question.

Solution: Select the project. It's that simple. Our product is to transmit data to the background by selecting the project, that is, the project ID. Therefore, when the error message is unclear, try to find out whether there is any problem that the information is not read.

3. Transmit and display values ​​(for time)

Problem description: A more complicated problem in the front-end and back-end data interaction is the data type conversion when the time is passed as a DateTime type value. And when using a time selector, the time in the component is displayed as the time of the passed value.

As shown in the figure, the time displayed at the time setting position is wrong, while the console outputs the correct time passed in from the background. That is, the time cannot be displayed in the time selection box in real time.

When changing the time from a time selection box such as Set Time and passing it to the backend, there will be a type mismatch problem. That is, the conversion between String and DateTime.

Solution: Add the :value attribute to the time selector and use moment to constrain the time variable to be displayed. For example:

 :value="[moment(taskDetails.t_begin), moment(taskDetails.t_end)]"

Use of the time formatting component moment: You need to import the component in the script and declare moment in methods.

<script>import moment from 'moment'</script>

If you want to pass the time data back to the backend, you need to convert the String type data, that is, you need to declare and define a toDateTime function:

function toDateTime(time) {
	var date = new Date(time);
	var Y = date.getFullYear() + '-';
	var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
	var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
	var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
	var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
	var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
	strDate = Y+M+D+h+m+s;
	return strDate;
}

Normalize directly when passing values.

IV. Conclusion

1. Transmitting values ​​in Vue is a relatively simple part. It mainly involves preparing variables waiting to be received and ensuring that the data is successfully loaded. The type of data should also be noted, and the data sent from the backend should be carefully checked. The front-end and back-end interactions of Vue are implemented with relatively simple and practical templates, so it is easy to master.

2. When displaying data, you need to understand the display methods of different components. Some use item loop display, some directly quote, and more use v-bind to realize variable influence display.

3. In the development of this project, the development of the task panel and the writing of the code are very complicated and easy to confuse, because there are multiple pop-up windows and panels, the content filled in by the user and the content received and displayed from the background are different, and the data linkage between them is very terrible. If you are not careful, it is easy for a new panel data to overwrite the old data that has been displayed before. Especially for components such as forms that require user participation, it is necessary to monitor each possible interactive sub-component in real time. However, it is important to note that not every sub-component requires timely feedback, otherwise unnecessary associated actions may affect the final storage of information. Especially for forms with cancellation functions, which require a one-click reset, taking corresponding actions too early will be counterproductive.

The above is the details of how to understand the interaction and display of Vue front-end and back-end data. For more information about Vue front-end and back-end data interaction and display, please pay attention to other related articles on 123WORDPRESS.COM!