效果如图
这里的评论数据以及添加数据都是用的FastAPI，然后再用axios发送请求，获取评论以及添加评论。
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>工程快捷报备系统——By：Lan</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<style>
.content {
margin-top: 1.5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<ul class="nav nav-tabs">
<li>
<a href="./index.html">健康报备</a>
</li>
<li>
<a href="./who.html">谁没报备</a>
</li>
<li>
<a href="./ele.html">电费查询</a>
</li>
<li class="active">
<a href="./comment.html">留言板</a>
</li>
</ul>
<div class="content" id="box">
<form action="" role="form">
<div class="form-group">
<label class="col-sm-1 control-label">昵称</label>
<div class="col-sm-11">
<input v-model='newNick' type="text" class="form-control" id="nikename" v-model='newComment' placeholder="请输入昵称">
</div>
<div class="form-group">
<label for="content" class="col-sm-1 control-label">内容</label>
<div class="col-sm-11">
<textarea id="content" v-model='newComment' class="form-control" rows="3"></textarea>
</div>
</div>
<div class="form-group" style="text-align: center;">
<input type="button" name="" value="添加" @click='addcomment' class="btn btn-primary">
<input type="reset" name="" value="重置" class="btn btn-danger">
</div>
</div>
</form>
<table class="table table-bordered table-hover">
<caption class="text-success">
<h4>评论列表</h4>
</caption>
<thead>
<tr class="text-info">
<th class="text-center">昵称</th>
<th class="text-center">内容</th>
<th class="text-center">时间</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list" :key="index" class="text-warning text-center">
<td>{{item.nick }}</td>
<td>{{item.comment}}</td>
<td>{{item.add_Time | fmtTime('-')}}</td>
</tr>
<tr v-if="list.length === 0">
<td colspan="3">暂无评论，快来评论吧！</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="./static/js/bootstrap.min.js"></script>
<script>
Vue.filter('fmtTime', function(sourceTime, sep) {
sourceTime = new Date(sourceTime);
let y = sourceTime.getFullYear();
let m = sourceTime.getMonth() 1;
let d = sourceTime.getDate();
let h = sourceTime.getHours();
let M = sourceTime.getMinutes();
return y sep m sep d ' ' h ':' M;
});
var app = new Vue({
el: '#box',
data: {
newNick: '',
newComment: '',
list: [],
searchVal: ''
},
mounted() {
this.getcomment();
},
methods: {
getcomment() {
axios.get('/get_comment/', {
params: {
page: 1
}
})
.then(res => {
this.list = res.data;
})
.catch(err => {
console.error('获取数据失败' err);
})
},
addcomment() {
axios.get('/add_comment/', {
params: {
nick: this.newNick,
comment: this.newComment
}
})
.then(res => {
alert('添加成功');
// 添加成功之后，重新获取列表数据
this.getcomment();
this.newComment = '';
})
.catch(err => {
console.error(err);
})
}
},
})
</script>
</body>
</html>
