<body>
<div class="box">
<p>图书管理</p>
<div class="container">
<div class="caozuo"> 编号:<input type="text" v-model="bid" v-model="id" disabled> 名称:
<input type="text" v-model="bookname"> <input type="button" value="提交" @click.prevent="addbook" :disabled="isSubmit"></div>
<div class="num">当前有<span>{{bookNum}}</span>本书</div>
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date |getTime("yyyy-MM-dd")}}</td>
<td><a href="" @click.prevent="updateBook(item.id)">修改</a> <a href="" @click.prevent="deteleBook(item.id)">删除</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script>
// 日期过滤器
Vue.filter("getTime", function(val, a) {
function dateFormat(date, format) {
if (typeof date === "string") {
var mts = date.match(/(\/Date\((\d+)\)\/)/);
if (mts && mts.length >= 3) {
date = parseInt(mts[2]);
}
}
date = new Date(date);
if (!date || date.toUTCString() == "Invalid Date") {
return "";
}
var map = {
"M": date.getMonth() + 1, //月份
"d": date.getDate(), //日
"h": date.getHours(), //小时
"m": date.getMinutes(), //分
"s": date.getSeconds(), //秒
"q": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
var v = map[t];
if (v !== undefined) {
if (all.length > 1) {
v = '0' + v;
v = v.substr(v.length - 2);
}
return v;
} else if (t === 'y') {
return (date.getFullYear() + '').substr(4 - all.length);
}
return all;
});
return format;
}
return dateFormat(val, a);
})
axios.defaults.baseURL = "http://localhost:3000";
axios.interceptors.response.use((res) => {
return res.data
});
let app = new Vue({
el: ".box",
data: {
list: [],
bookname: '',
bid: '',
flag: false,
isSubmit: false
},
methods: {
async getList() {
await axios.get('/books').then(res => {
this.list = res;
})
},
//提交按钮逻辑
async addbook() {
if (!this.bookname) {
return
} else {
if (this.flag) {
let res = await axios.put(`/books/${this.bid}`, {
name: this.bookname
})
console.log(res);
if (res.status == 200) {
alert('修改图书成功!')
}
} else {
let res = await axios.post('/books', {
name: this.bookname
})
}
if (res.status == 200) {
alert('添加图书成功!')
}
}
},
//修改按钮逻辑
async updateBook(id) {
let res = await axios.get('/books/' + id)
console.log(res)
this.bookname = res.name,
this.bid = res.id,
this.flag = true
},
async deteleBook(id) {
let res = await axios.delete('/books/' + id)
console.log(res)
if (res.status == 200) {
alert('删除成功!')
}
}
},
created() {
this.getList();
},
computed: {
bookNum() {
return this.list.length
console.log(this.list.length);
}
},
watch: {
async bookname(val) {
let res = await axios.get(`/books/book/${val}`)
if (res.status == 1) {
this.isSubmit = true
} else {
this.isSubmit = false
}
}
}
})
</script>
扫一扫
1768
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
