官方社群在线客服官方频道防骗查询货币工具

BBS论坛(三十)

2025年01月14日 02:16:50
news.like.tgnews.like.tgnews.like.tgnews.like.tg

LIKE.TG 成立于2020年,总部位于马来西亚,是首家汇集全球互联网产品,提供一站式软件产品解决方案的综合性品牌。唯一官方网站:www.like.tg

30.显示评论和添加评论功能完成

(1)apps/models.py

代码语言:javascript
复制
class CommentModel(db.Model): __tablename__='comment' id=db.Column(db.Integer,primary_key=True,autoincrement=True) content=db.Column(db.Text,nullable=False) create_time=db.Column(db.DateTime,default=datetime.now) post_id=db.Column(db.Integer,db.ForeignKey('post.id')) author_id = db.Column(db.String(50), db.ForeignKey('front_user.id'), nullable=False) post=db.relationship('PostModel',backref='comments') author=db.relationship('FrontUser',backref='comments')

生成到数据库

代码语言:javascript
复制
python manage.py migrate python manage.py upgrade

(2)front/forms.py

代码语言:javascript
复制
class AddCommentForm(BaseForm): content=StringField(validators=[InputRequired(message='请输入评论内容')]) post_id=IntegerField(validators=[InputRequired(message='请输入评论内容')])

(3)front/views.py

代码语言:javascript
复制
@bp.route('/acomment/',methods=['POST']) @login_requried def add_comment(): form=AddCommentForm(request.form) if form.validate(): content=form.content.data post_id=form.post_id.data post=PostModel.query.get(post_id) if post: comment=CommentModel(content=content) comment.post=post comment.author=g.front_user db.session.add(comment) db.session.commit() return restful.success() else: return restful.params_error(message='没有这个帖子') else: return restful.params_error(form.get_error())

(4)front/front_base.html

代码语言:javascript
复制
<span id="login-tag" data-is-login="1"></span>

(5)front/front_pdetail.html

代码语言:javascript
复制
{% extends 'front/front_base.html' %} {% from 'common/_macros.html' import static %} {% block title %} {{ post.title }} {% endblock %} {% block head %} <script src="{{ static('ueditor/ueditor.config.js') }}"></script> <script src="{{ static('ueditor/ueditor.all.min.js') }}"></script> <script src="{{ static('front/js/front_pdetail.js') }}"></script> <link rel="stylesheet" href="{{ static('front/css/front_pdetail.css') }}"> {% endblock %} {% block body %} <div class="lg-container"> <div class="post-container"> <h2>{{ post.title }}</h2> <p class="post-info-group"> <span>发表时间:{{ post.create_time }}</span> <span>作者:{{ post.author.username }}</span> <span>版块:{{ post.board.name }}</span> <span>阅读数:{{ post.read_count }}</span> <span>评论数:0</span> </p> <article class="post-content" id="post-content" data-id="{{ post.id }}"> {{ post.content|safe }} </article> </div> <div class="comment-group"> <h4>评论列表:</h4> <ul class="comment-list-group"> {% for comment in post.comments %} <li> <div class="avatar-group"> <img src="{{ comment.author.avatar or static('common/images/logo.jpg') }}" alt=""> </div> <div class="comment-content"> <p class="author-info"> <span>{{ comment.author.username }}</span> <span>{{ comment.create_time }}</span> </p> <p class="comment-txt"> {{ comment.content|safe }} </p> </div> </li> {% endfor %} </ul> </div> <div class="add-comment-group"> <h3>添加评论</h3> <script id="editor" style="height:100px;" type="text/plain"></script> <div class="add_comment_btn"> <button class="btn btn-primary" id='comment-btn'>发表评论</button> </div> </div> </div> <div class="sm-container"></div> {% endblock %}

(6)front/css/front_pdetail.css

代码语言:javascript
复制
.comment-group{ border:1px solid #e8e8e8; margin-top: 20px; padding: 10px; } .add-comment-group{ border:1px solid #e8e8e8; margin-top: 20px; } .add_comment_btn{ text-align: right; margin: 10px; } .add-comment-group h3{ margin: 10px; } .comment-list-group li{ overflow:hidden; border-bottom:1px solid #e8e8e8; } .avatar-group{ float:left; } .avatar-group img{ width: 50px; height: 50px; border-radius: 50%; } .comment-content{ float: left; margin-left: 20px; } .comment-content .author-info{ font-size: 12px; color:#8c8c8c; } .author-info span{ margin-right:10px; } .comment-content .comment-txt{ margin-top: 10px; }

(7)front/front_pdetail.js

代码语言:javascript
复制
$(function(){ var ue=UE.getEditor('editor',{ 'serverUrl':'/ueditor/upload/', "toolbars": [ [ 'undo', //撤销 'redo', //重做 'bold', //加粗 'italic', //斜体 'blockquote', //引用 'selectall', //全选 'fontfamily', //字体 'fontsize', //字号 'simpleupload', //单图上传 'emotion' //表情 ] ] }); window.ue=ue; }); $(function(){ $('#comment-btn').on('click',function(event){ event.preventDefault(); var login_tag=$('#login-tag').attr('data-is-login'); if (! login_tag){ window.location='/signin/' }else{ var content=window.ue.getContent(); var post_id=$('#post-content').attr('data-id'); zlajax.post({ 'url':'/acomment/' , 'data':{ 'content':content, 'post_id':post_id }, 'success':function(data){ if(data['code']==200){ zlalert.alertSuccessToast(msg='评论发表成功'); window.location.reload(); }else{ zlalert.alertInfo(data['message']); } } }); } }) ; });

现在关注【LIKE.TG出海指南频道】【LIKE.TG大客户服务频道】,即可免费领取【WhatsApp、LINE、Telegram、Twitter、ZALO云控】等获客工具试用、【住宅IP、号段筛选】等免费资源,机会难得,快来解锁更多资源,助力您的业务飞速成长!点击【联系客服】

本文由LIKE.TG编辑部转载自互联网并编辑,如有侵权影响,请联系官方客服,将为您妥善处理。

This article is republished from public internet and edited by the LIKE.TG editorial department. If there is any infringement, please contact our official customer service for proper handling.


Server deployment全球论坛人工智能论坛全球峰会发展论坛战略论坛开放论坛程序员论坛互联网峰会科技峰会
加入like.tg生态圈,即可获利、结识全球供应商、拥抱全球软件生态圈加入like.tg平台,即可获利、结识全球供应商、拥抱全球营销软件生态圈加入like.tg生态资源圈,即可获利、结识全球供应商、拥抱全球软件生态圈
加入like.tg生态圈,即可获利、结识全球供应商、拥抱全球软件生态圈加入like.tg平台,即可获利、结识全球供应商、拥抱全球营销软件生态圈加入like.tg生态资源圈,即可获利、结识全球供应商、拥抱全球软件生态圈