您的位置：首页 > 移动开发 > IOS开发

axios获取数据增删改查

2018-12-19 17:03 232 查看

<!DOCTYPE html>
<html lang="en">

<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./vue.js"></script>
<!-- 1. 引入axios文件 -->
<script src="./axios.js"></script>
<style>

#app{
width:600px;
margin:10px auto;
}
.tb{
border-collapse:collapse;
width: 100%;
}
.tb th{
background-color: #0094ff;
color:white;
}

.tb td,.tb th{
padding:5px;
border:1px solid black;
text-align: center;
}

.add{
padding: 5px;
border:1px solid black;
margin-bottom: 10px;
}
</style>
</head>

<body>
<div id="app">
<div class="add">
编号:<input type="text" v-model="newId" id="myIdInput" ref="idRef">
品牌名称:<input type="text" v-model="newName" ref="nameRef">
<input type="button" value="添加" @click="addData">
</div>

<div class="add">
品牌名称:<input type="text" placeholder="请输入搜索条件" v-model="searchName" @keydown.enter="search">
</div>

<div>
<table class="tb">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
<tr v-for="(item, index) in list" :key="index">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<button @click="deleteData(item.id)">删除</button>
</td>
</tr>
<tr v-if="list.length === 0">
<td colspan="4">没有品牌数据</td>
</tr>
</table>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
newId: '',
newName: '',
list: [],
searchName: '' //获取搜索的名字
},
methods: {
// 添加数据
addData() {
let url = 'http://list'
axios.post(url, {id: this.newId, name: this.newName, ctime: new Date()})
.then(res => {
// console.log(res);
if(res.status === 201) {
// 重新刷新一下列表数据
this.getList()
}
})
},
// 获取列表数据方法
getList() {
let url = 'http://19st'
// 调用axios的get方法，获取数据
axios.get(url)
.then(res => {
console.log(res);
// 将获取回来的数据赋值给list
this.list = res.data
})
.catch(err => {
console.log(err);
})
},
// 搜索方法
search() {
let url = 'http://1list'
axios.get(url,{params: {name: this.searchName}})
.then(res => {
if (res.status === 200) {
this.list = res.data
this.searchName = ''
}
})
},
// 删除方法
deleteData(id) {
let url = `http://19list/${id}`
axios.delete(url)
.then(res => {
this.getList()
})
}
},
mounted () {
this.getList()
}
})
</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

axios获取数据 增删改查

axios获取数据增删改查