First of all, the list content is similar to the previous list content, but here we will use the data request method in Vue to add and delete data. Then the third-party Vue component we use is vue-resource. The way vue initiates the request is similar to jQuery's ajax, and the group needs to request addresses and parameters. and method
First we see list request
Get the list
<table class=" table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>CTime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="">
<td>{{ }}</td>
<td>{{}}</td>
<td>{{}}</td>
<td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" @="del()">Delete</a></td>
</tr>
</tbody>
</table>
The list method obtained in methods to add data to get, use get request
getList(){
this.$('list').then(result=>{
var result =;
if( ===200){
=
}else{
alert("Failed to get data");
}
})
},
It should be noted that the data obtained by using vue-resource is encapsulated in the body domain of the callback data. At the same time, we need to add this method to the created lifecycle function of the Vue component to render the page.
created(){
//Calling the defined method in other methods uses this keyword ();
},
The method of adding and deleting elements is similar to this. Detailed code is given here, and no explanation is given.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4." ></script>
<script type="text/javascript" src="lib/vue-resource-1.3."></script>
<link rel="stylesheet" href="lib/bootstrap-3.3." rel="external nofollow" rel="external nofollow" />
</head>
<body>
<div >
<div class="panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Add a brand</h3>
</div>
<div class="panel-body form-inline">
<label>
Id:<input type="text" v-model="id" class="form-control" />
</label>
<label>
Name:
<input type="text" v-model="title" class="form-control" />
</label>
<label>
Keywords
</label>
<input type="text" v-model="description" class="form-control"/>
<input type="button" value="Add to" class="btn btn-primary" @click="add()"/>
</div>
</div>
<table class=" table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>CTime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="">
<td>{{ }}</td>
<td>{{}}</td>
<td>{{}}</td>
<td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" @="del()">Delete</a></td>
</tr>
</tbody>
</table>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
id:"",
title:"",
description:"",
list:[],
},
created(){
();
},
methods:{
getList(){
this.$('http://localhost:8080/list').then(result=>{
var result =;
if( ===200){
=
}else{
alert("Failed to get data");
}
})
},
add(){
this.$('http://localhost:8080/submit',{id:,title:,description:},{emulateJSON:true}).then(result=>{
var result =;
if( ===200){
();
}else{
alert("Failed to get data");
}
})
},
del(id){
this.$('http://localhost:8080/del/'+id,{emulateJSON:true}).then(result=>{
var result =;
if( ===200){
();
}else{
alert("Failed to get data");
}
})
}
}
})
</script>
</body>
</html>
There are two things in the above code that are a bit verbose. The first is url and the second is the processing of json after passing Json data. vue-resource provides two simplified operations.
url simplification
We can use it before defining a Vue object
=http://localhost:8080/;
To define the basic url of the request, then use the url of the request itself directly. However, it should be noted that after the two urls are connected, '//' is not allowed to appear, otherwise there will be problems. Generally, I will use the basic url to have more '/' at the end, while the customized url will not be
Another is to simplify the parameters that pass data.
We can use it before defining a Vue object
= true;
In this way, we can have this parameter by default when requesting, and we don’t need to add this parameter when requesting.
After simplification, the above code has been simplified to
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4." ></script>
<script type="text/javascript" src="lib/vue-resource-1.3."></script>
<link rel="stylesheet" href="lib/bootstrap-3.3." rel="external nofollow" rel="external nofollow" />
</head>
<body>
<div >
<div class="panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Add a brand</h3>
</div>
<div class="panel-body form-inline">
<label>
Id:<input type="text" v-model="id" class="form-control" />
</label>
<label>
Name:
<input type="text" v-model="title" class="form-control" />
</label>
<label>
Keywords
</label>
<input type="text" v-model="description" class="form-control"/>
<input type="button" value="Add to" class="btn btn-primary" @click="add()"/>
</div>
</div>
<table class=" table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>CTime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="">
<td>{{ }}</td>
<td>{{}}</td>
<td>{{}}</td>
<td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" @="del()">Delete</a></td>
</tr>
</tbody>
</table>
</div>
<script>
="http://localhost:8080/";
= true;
var vm = new Vue({
el:'#app',
data:{
id:"",
title:"",
description:"",
list:[],
},
created(){
();
},
methods:{
getList(){
this.$('list').then(result=>{
var result =;
if( ===200){
=
}else{
alert("Failed to get data");
}
})
},
add(){
("1");
this.$('submit',{id:,title:,description:}).then(result=>{
var result =;
if( ===200){
();
}else{
alert("Failed to get data");
}
})
},
del(id){
(2);
this.$('del/'+id).then(result=>{
var result =;
if( ===200){
();
}else{
alert("Failed to get data");
}
})
}
}
})
</script>
</body>
</html>
This case background is a simple background I made with mybatis and springboot, and everyone can also operate it on their own.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.