[WEB] vue+axios实现评论留言板
作者:CC下载站 日期:2020-08-06 00:00:00 浏览:55 分类:站长帮
效果如图
这里的评论数据以及添加数据都是用的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>
猜你还喜欢
- 03-29 [环境测试] Hexo部署GitHub Pages
- 03-22 [源码设置] 如何设置Xiuno BBS URL-Rewrite(伪静态设定)
- 03-06 [建站交流] PicGo + smms 构建图床
- 11-18 [emlog技巧] Emlog非插件显示评论者IP属地
- 11-09 [网站维护] WordPress 后台速度慢?加快仪表板速度的 15 种方法
- 11-09 [WordPress插件] 10 个最好用的 WordPress 聊天机器人插件(免费和付费)
- 11-09 [WordPress开发] 探索 WordPress 6.3 中的增强样板(Patterns)
- 11-09 [网站维护] 无需插件即可优化 WordPress 速度的 12 种策略
- 11-09 [网站安全] WordPress 安全统计:WordPress 到底有多安全?
- 09-20 [jsp技术] JSP ssm 特殊人群防走失系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计
- 09-15 [Lightsail容器] AWS Lightsail VPS:一种在云中运行容器的简单方法
- 07-28 [运维笔记] 解决网站出现"SSL_ERROR_RX_RECORD_TOO_LONG"问题
取消回复欢迎 你 发表评论:
- 精品推荐!
-
- 最新文章
- 热门文章
- 热评文章
[资料教程] 事业单位必刷题库
[技术课程] 【易锦】WEB渗透Hacker技术特训营(直播课第14期)
[课程] 轻松汽车摄影-全能课,最全汽车视频拍摄技巧(32节课)
[资料教程] 辣条制作配方及教程
[音乐] 低音炮车载340首
[课程] 夜鹰10分钟救命课(完结)
[资料] 寻道网道医精品视频课程集合15部
[资料课程] 适合3-7岁学前幼小衔接 《22天搞定拼音》,认、读、拼、写
[课程] 衣之镖-- 《辅行诀五脏用药法要》研究 线上54讲课程视频
[课程] 12节在家也能练出性感蜜桃臀,让臀部变得圆、紧、翘
[资料] [大学期末救急课] 猴博士+高斯课堂+斐多课堂,全集视频合集
[云资源] 价值2万元的老男孩Python教程
[书库] 史上最全摄影书推荐(附700本PDF版打包下载)
[云资源] 花了一千多元买的私人健身教程
[下载工具] Internet Download Manager 6.42.7 (IDM)
[影视] 灌篮高手 WEB-DL版下载/Slam Dunk/スラムダンク/灌篮高手:THE FIRST/灌篮高手电影版 2022 The First Slam Dunk 61.35G
[安卓软件] 酷我音乐APP_v10.7.6.4 去广告破解豪华VIP版
[即时通讯] 微信PC版WeChat 3.9.9.43 多开防撤回绿色版
[安卓软件] Solid Explorer文件管理器APP 2.8.38 破解版
[浏览器] Google Chrome v123.0.6312.59便携增强版
[云资源] 价值2万元的老男孩Python教程
[影视] 灌篮高手 WEB-DL版下载/Slam Dunk/スラムダンク/灌篮高手:THE FIRST/灌篮高手电影版 2022 The First Slam Dunk 61.35G
[云资源] 花了一千多元买的私人健身教程
[书库] 史上最全摄影书推荐(附700本PDF版打包下载)
[动画] 北斗神拳(1984) [两季合集] [MKV]
[资料] 抗战阵亡将士资料+续编
[电视剧] 三体 (2024) 全8集 网飞版本 中文字幕 合集
[纪录片] 河西走廊【10集 国语 中文字幕 1080P 10.8G MP4】
[电影] 2024年喜剧片·热辣滚烫 [mp4]
[影视] 铁爪 WEB-DL版下载 2023 The Iron Claw 23.48G
- 最新评论
-
杂物房内的旧档资源不保证有效CC下载站 评论于:05-14 不能**123 评论于:05-14 我想看看mw2ddyy 评论于:04-26 好东西阿zfy123123 评论于:04-18 谢谢楼主xiaoqi 评论于:04-12 勿在线解压,勿手机解压,请在电脑上用最新款压缩软件解压!推荐360压缩或者好压CC下载站 评论于:04-10 无法解压啊,客服能不能给个解压教程ravengrey 评论于:04-10 谢谢支持!!CC下载站 评论于:03-26 很棒的资源,感谢分享云体风身 评论于:03-26 感谢分享,好东西云体风身 评论于:03-26
- 热门tag