登录  |  注册
当前位置：网站首页 > 更多 > 站长帮 > 正文

[WEB] vue+axios实现评论留言板

作者：CC下载站 日期：2020-08-06 00:00:00 浏览：71 分类：站长帮

效果如图

这里的评论数据以及添加数据都是用的FastAPI，然后再用axios发送请求，获取评论以及添加评论。

<!DOCTYPEhtml>
<htmllang="en">

<head>
<metacharset="UTF-8">
<title>工程快捷报备系统——By：Lan</title>
<metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script>
<scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script>
<linkrel="stylesheet"href="static/css/bootstrap.min.css">
<style>
.content{
margin-top:1.5rem;
}
</style>
</head>

<body>
<divclass="container">
<divclass="rowclearfix">
<divclass="col-md-12column">
<ulclass="navnav-tabs">
<li>
<ahref="./index.html">健康报备</a>
</li>
<li>
<ahref="./who.html">谁没报备</a>
</li>
<li>
<ahref="./ele.html">电费查询</a>
</li>
<liclass="active">
<ahref="./comment.html">留言板</a>
</li>
</ul>
<divclass="content"id="box">

<formaction=""role="form">
<divclass="form-group">
<labelclass="col-sm-1control-label">昵称</label>
<divclass="col-sm-11">
<inputv-model='newNick'type="text"class="form-control"id="nikename"v-model='newComment'placeholder="请输入昵称">
</div>
<divclass="form-group">
<labelfor="content"class="col-sm-1control-label">内容</label>
<divclass="col-sm-11">
<textareaid="content"v-model='newComment'class="form-control"rows="3"></textarea>
</div>
</div>
<divclass="form-group"style="text-align:center;">
<inputtype="button"name=""value="添加"@click='addcomment'class="btnbtn-primary">
<inputtype="reset"name=""value="重置"class="btnbtn-danger">
</div>
</div>
</form>
<tableclass="tabletable-borderedtable-hover">
<captionclass="text-success">
<h4>评论列表</h4>
</caption>
<thead>
<trclass="text-info">
<thclass="text-center">昵称</th>
<thclass="text-center">内容</th>
<thclass="text-center">时间</th>
</tr>
</thead>
<tbody>
<trv-for="(item,index)inlist":key="index"class="text-warningtext-center">
<td>{{item.nick}}</td>
<td>{{item.comment}}</td>
<td>{{item.add_Time|fmtTime('-')}}</td>
</tr>
<trv-if="list.length===0">
<tdcolspan="3">暂无评论，快来评论吧！</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<scriptsrc="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<scriptsrc="./static/js/bootstrap.min.js"></script>
<script>
Vue.filter('fmtTime',function(sourceTime,sep){
sourceTime=newDate(sourceTime);
lety=sourceTime.getFullYear();
letm=sourceTime.getMonth()+1;
letd=sourceTime.getDate();
leth=sourceTime.getHours();
letM=sourceTime.getMinutes();
returny+sep+m+sep+d+''+h+':'+M;
});
varapp=newVue({
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>


猜你还喜欢

您需要 登录账户 后才能发表评论

取消回复欢迎 你 发表评论:

精品推荐！
欢迎 访客 登录没有账号？
  • 最新文章
  • 热门文章
  • 热评文章
最新评论
热门tag
友情链接

关灯