利用axios獲取到數據后，渲染到視圖層，完成真正的前后端添加刪除功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/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">
品牌名稱：<input type="text" v-model="newName">
<input type="button" value="添加" @click="addData">
</div>
<div class="add">
品牌名稱：<input type="text" placeholder="請輸入搜索條件" @keyDown:enter="searchData">
</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 | fmtTime('-')}}</td>
<td>
<button @click="delData(item.id)">刪除</button>
</td>
</tr>
<tr v-if="list.length === 0">
<td colspan="4">沒有品牌數據</td>
</tr>
<!-- 動態生成內容tr -->
</table>
</div>
</div>
</body>
<script>
Vue.filter('fmtTime',function (sourceTime,sep) {
sourceTime = new Date(sourceTime);
let y = sourceTime.getFullYear();
let m = sourceTime.getMonth();
let d = sourceTime.getDate();
// 處理完之后，必須要return一個字符串
return y + sep + m + sep + d;
});
let vm = new Vue({
el:'#app',
data:{
newId:'',// 獲取編號框中的值
newName:'',// 獲取品牌名稱框中的值
list:[],
searchVal:''
},
mounted () {
// 頁面一加載完成就執行getList方法
this.getList();
},
methods: {
//獲取數據
getList(){
axios.get('http://www.liulongbin.top:3005/api/getprodlist',{params:{searchvalue:this.searchVal}})
.then(res => {
if (res.data.status === 0) {
this.list = res.data.message;
}
})
.catch(err => {
console.error('獲取數據失敗' + err);
})
this.searchVal = '';
},
//刪除數據
delData(id){
axios.get(`http://www.liulongbin.top:3005/api/delproduct/${id}`)
.then(res => {
if (res.data.status === 0) {
alert('刪除成功');
// 刪除成功之后，重新獲取列表數據
this.getList();
}
})
.catch(err => {
console.error(err);
})
},
//添加數據
addData(){
axios.post('http://www.liulongbin.top:3005/api/addproduct',{name:this.newName})
.then(res => {
if (res.data.status === 0) {
alert('添加成功');
// 添加成功之后，重新獲取列表數據
this.getList();
this.newName = '';
}
})
.catch(err => {
console.error(err);
})
},
//搜索商品名稱
searchData(){
this.getList();
}
}
})
</script>
</html>
