flask 新闻管理系统搭建试验

本文分前后两个部分,前半部分是跑通该项目的过程,后半部分是提炼其中的评论功能到其他项目的过程

带评论模板的项目:

博客https://github.com/goalong/flask-demo

https://github.com/13697165025/FlaskMyBlog

*新闻https://github.com/blue-harddisk/flask

一个新闻web,具体功能:登录注册,首页有分类,新闻详情页面有点赞,评论,回复评论功能,个人中心,后台管理

新建news_website的py3.7虚拟环境

activate

使用requirements安装:

pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple

pip install -r requirements.txt -i http://pypi.douban.com/simple

pip install -r requirements.txt -i http://pypi.hustunique.com/simple

pip install -r requirements.txt -i http://pypi.sdutlinux.org/simple

pip install -r requirements.txt -i http://pypi.mirrors.ustc.edu.cn/simple

MarkupSafe无法正常安装

报错:

Command errored out with exit status 1: python setup.py egg_info Check the logs for full command output.

cannot import name 'Feature' from 'setuptools'

setuptool版本的问题,python3源中的setuptools已经升级到46以上。所以导致pip安装失败.参考:https://blog.csdn.net/pengshengege/article/details/105113561

pip install --upgrade pip setuptools==45.2.0

报错:

Failed to build mysqlclient

无法打开包括文件: “mysql.h”: No such file or directory

参考:

https://blog.csdn.net/weixin_30564785/article/details/99818573?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

https://segmentfault.com/a/1190000016563585

https://blog.csdn.net/cn_1937/article/details/81533544?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

感觉都很麻烦,最后把它从requirement中删除了,运行时自动装上了最新版mysqlclient

使用migrations迁移数据库

https://www.cnblogs.com/senlinyang/p/8387007.html

为了导出数据库迁移命令,Flask-Migrate 提供了一个MigrateCommand 类,可附加到Flask-Script 的manager 对象上。在这个例子中,MigrateCommand 类使用db 命令附加。

manager.add_command('db', MigrateCommand)

在维护数据库迁移之前,要使用init 子命令创建迁移仓库:

python hello.py db init

python manage.py mysql init

报错:Directory migrations already exists

删除文件后重新运行

migrate 子命令用来自动创建迁移脚本:

python hello.py db migrate -m "initial migration"

python manage.py mysql migrate -m "initial migration"

报错:

File "D:\ProgramData\Anaconda3\envs\news_website\lib\site-packages\sqlalchemy\dialects\mysql\mysqldb.py", line 102, in dbapi

    return __import__('MySQLdb')

ModuleNotFoundError: No module named 'MySQLdb'

尝试安装MySQLdb

pip install mysql-python -i https://pypi.tuna.tsinghua.edu.cn/simple

报错:

_mysql.c(42): fatal error C1083: 无法打开包括文件: “config-win.h”: No such file or directory

    error: command 'C:\\Program Files (x86)\\Microsoft Visual Studio\\2017\\BuildTools\\VC\\Tools\\MSVC\\14.16.27023\\bin\\HostX86\\x64\\cl.exe' failed with exit status 2

参考:https://blog.csdn.net/weixin_42840933/article/details/85274313

https://www.cnblogs.com/SH170706/p/10082987.html

下载包,从dos命令行进入下载后的文件夹,执行下面命令:

pip install mysqlclient-1.3.14-cp37-cp37m-win_amd64.whl

这个版本是对的,可以用MySQLdb模块

    spec.loader.exec_module(module)

  File "<frozen importlib._bootstrap_external>", line 728, in exec_module

  File "<frozen importlib._bootstrap>", line 219, in _call_with_frames_removed

  File "migrations\env.py", line 87, in <module>

    run_migrations_online()

  File "migrations\env.py", line 72, in run_migrations_online

    connection = engine.connect()

Traceback (most recent call last):

  File "manage.py", line 30, in <module>

    manager.run()

配置:

SQLALCHEMY_DATABASE_URI

mysql://username:password@hostname/database

匹配数据库名与配置database名,再次运行,成功

使用db upgrade 命令把迁移应用到数据库中:

python hello.py db upgrade

python manage.py mysql upgrade

尝试启动项目报错:

redis.exceptions.ConnectionError: Error 10061 connecting to 127.0.0.1:6379. 由于目标计算机积极拒绝,无法连接。.

参考:https://blog.csdn.net/qq_41192383/article/details/86559296

下载并安装Redis-x64-3.0.503.msi,地址:

https://github.com/MicrosoftArchive/redis/releases

安装完成后,启动服务(找到安装路径,双击redis-cli.exe文件即可)

requirement装的redis==2.10.6为python提供的模块redis-py

启动项目:

python manage.py runserver

http://localhost:5000/

点击新闻列表时报错:

File "D:\anacondaProject\flask\info\user\views.py", line 138, in news_release

    category_list.pop(0)

IndexError: pop from empty list

判断是否为空:

users = session.query(user).filter(user.id == '234).all()#users为object列表

if(len(user) == 0):

print "数据库中没有id为234的用户‘’

else:

print "数据库中包含id为234的用户“

if(len(categorys)!=0):

            for category in categorys:

                category_list.append(category.to_dict())

            # 删除第0个元素

            category_list.pop(0)

发布报错:

File "D:\anacondaProject\flask\info\user\views.py", line 151, in news_release

    index_image = request.files.get("index_image").read()

AttributeError: 'NoneType' object has no attribute 'read'

判断是否为空

成功发布新闻与评论:

其中评论部分的数据库实现:

Comment表:

Comment-like表:

Sql转储并导入

Info/models中News类有有关评论的数据库查询方法

class News(BaseModel, db.Model):

    """新闻"""

    __tablename__ = "info_news"

 

    id = db.Column(db.Integer, primary_key=True)  # 新闻编号

comments = db.relationship("Comment", lazy="dynamic")

# dynamic: 不加载记录,但提供加载记录的查询,也就是生成query对象,只可以用在一对多和多对多关系中,不可以用在一对一和多对一中

即 lazy屬性的對向關系模型只能是多的一側

relationship的第一个参数表示这个关系的另一个数据库模型是哪个,这里是User,第二个参数backref表示给关联的数据库模型添加一个属性,这里是role。

也就是说,你可以通过User模型的role这个属性去访问Role模型,比如你在views.py中的查询结果,你可以通过user.role.name得到roles表中对应记录的name,user.role.id则得到roles表中对应记录的id

class Comment(BaseModel, db.Model):

    """评论"""

    __tablename__ = "info_comment"

 

    id = db.Column(db.Integer, primary_key=True)  # 评论编号

    user_id = db.Column(db.Integer, db.ForeignKey("info_user.id"), nullable=False)  # 用户id

    news_id = db.Column(db.Integer, db.ForeignKey("info_news.id"), nullable=False)  # 新闻id

    content = db.Column(db.Text, nullable=False)  # 评论内容

    parent_id = db.Column(db.Integer, db.ForeignKey("info_comment.id"))  # 父评论id

    parent = db.relationship("Comment", remote_side=[id])  # 自关联

    like_count = db.Column(db.Integer, default=0)  # 点赞条数

 

    def to_dict(self):

        resp_dict = {

            "id": self.id,

            "create_time": self.create_time.strftime("%Y-%m-%d %H:%M:%S"),

            "content": self.content,

            "parent": self.parent.to_dict() if self.parent else None,

            "user": User.query.get(self.user_id).to_dict(),

            "news_id": self.news_id,

            "like_count": self.like_count

        }

        return resp_dict

class CommentLike(BaseModel, db.Model):

    """评论点赞"""

    __tablename__ = "info_comment_like"

    comment_id = db.Column("comment_id", db.Integer, db.ForeignKey("info_comment.id"), primary_key=True)  # 评论编号

    user_id = db.Column("user_id", db.Integer, db.ForeignKey("info_user.id"), primary_key=True)  # 用户编号

添加:

注意user_id news_id等原表不统一的字段处理--user_id只去除外键,news_id去除外键并改名music_id,同时在数据库中修改字段名,删除两表外键

在基类时间报错:

module 'datetime' has no attribute 'now'

我引入的是datetime,而非第二层,参照用户处使用datetime.datetime.now()

修改comment中todict方法下用户相关:

"user_id": self.user_id,

"user": User.query.get(self.user_id).name,

 

Info/news/views中有新闻详情展示所有评论,添加评论,与赞的方法

# 详情页

@news_blue.route("/<int:news_id>")

@user_login_data

#使用了装饰器,增加@functools.wraps(f), 可以保持当前装饰器去装饰的函数的 __name__ 的值不变

def news_detail(news_id):

    user = g.user

#。。。省略部分代码

    """

        获取到新闻评论列表

        1 :我们需要查询新闻评论表,在查询的时候,直接通过新闻id就可以查询,因为所有的评论都是针对新闻产生的

    """

    comments = Comment.query.filter(Comment.news_id ==

                                    news_id).order_by(Comment.create_time.desc()).all()

    comments_list = []

    # 获取到新闻详情页面评论点赞的数据

    # TODO

    commentLike_list = []

    comment_like_ids = []

 

    if user:

        # 根据user.id,查出用户点赞过的CommentLike对象

        commentLike_list = CommentLike.query.filter(CommentLike.user_id == user.id).all()

        # 遍历CommentLike所有对象,查出点赞评论的id

        comment_like_ids = [comment_like.comment_id for comment_like in commentLike_list]

 

    for comment in comments:

 

        comment_dict = comment.to_dict()

        comment_dict["is_like"] = False

        # comment_like_ids:所有的评论点赞id

        if comment.id in comment_like_ids:

            comment_dict["is_like"] = True

        comments_list.append(comment_dict)

 

    data = {

        "user_info": user.to_dict() if user else None,

        "click_news_list": news_list,

        "news": news.to_dict(),

        "is_collected": is_collected,

        "comments": comments_list,

        "is_followed": is_followed

    }

 

    return render_template("news/detail.html", data=data)

先再play中加,成功后移植到detail路由

原先的user一直使用session保存,但没有为他申明变量,多次调用有点繁琐:

如果没有设置session时,获取到的session就是None

尝试获取后再判user是否为None

判空:

`if x is not None`是最好的写法,清晰,不会出现错误

删除了data中对user\news的储存,因为该用法把user\news当作带to_dict方法的对象了,

"click_news_list": news_list,

"is_followed": is_followed

"is_collected": is_collected,

也因为不需要删除了

click_news_list

登陆后报错:

name 'Comment' is not defined

因为没有导入到view

 

 

# 点赞

@news_blue.route("/comment_like", methods=["POST"])

@user_login_data

def comment_like():

    user = g.user

    if not user:

        return jsonify(errno=RET.SESSIONERR, errmsg="请登陆")

 

    comment_id = request.json.get("comment_id")

    news_id = request.json.get("news_id")

    # 判断当前用户的动作,到底是想点赞,还是想取消点赞

    action = request.json.get("action")

 

    comment = Comment.query.get(comment_id)

 

    if action == "add":

        # 用户想点赞

        comment_like = CommentLike.query.filter(CommentLike.comment_id == comment_id,

                                                CommentLike.user_id == user.id).first()

        # 查询出来之后,需要判断当前这条评论用户是否已经点赞,如果查询出来为空,说明之前没有点赞,那么就可以点赞

        if not comment_like:

            comment_like = CommentLike()

            comment_like.comment_id = comment_id

            comment_like.user_id = user.id

            db.session.add(comment_like)

            # 因为点赞了,所以需要把当前的评论进行加1

            comment.like_count += 1

 

    else:

        # 取消点赞的动作

        comment_like = CommentLike.query.filter(CommentLike.comment_id == comment_id,

                                                CommentLike.user_id == user.id).first()

        if comment_like:

            db.session.delete(comment_like)

            comment.like_count -= 1

 

    db.session.commit()

    return jsonify(errno=RET.OK, errmsg="点赞成功")

 

# 评论

@news_blue.route("/news_comment", methods=["POST"])

@user_login_data

def news_comment():

    user = g.user

    if not user:

        return jsonify(errno=RET.SESSIONERR, errmsg="请登陆")

    news_id = request.json.get("news_id")

    # 评论的内容

    comment_str = request.json.get("comment")

    # 评论的父id

    parent_id = request.json.get("parent_id")

    """

       用户评论:

           用户如果在登录的情况下,可以进行评论,未登录,点击评论弹出登录框

           用户可以直接评论当前新闻,也可以回复别人发的评论

           1:用户必须先登陆才能进行评论,如果不登陆,直接返回

           2:如果需要评论,那么就需要知道当前评论的是哪条新闻,如果想知道是哪条新闻,那么就可以通过news_id 查询出来新闻

           3:如果评论成功之后,那么我们需要把用户的评论信息存储到数据库,为了方便下次用户在进来的时候可以看到评论

    """

    news = News.query.get(news_id)

    comment = Comment()

    comment.user_id = user.id

    comment.news_id = news.id

    comment.content = comment_str

    # 不是所有的新闻都有评论

    if parent_id:

        comment.parent_id = parent_id

 

    db.session.add(comment)

    db.session.commit()

    return jsonify(errno=RET.OK, errmsg="评论成功", data=comment.to_dict())

前端何处news_id传到后端request.json.get("news_id"),确定是Json

和表单中其他内容接收方式相同,可能是submit时js传过来的

去除news = News.query.get(news_id)查数据库部分

新增评论路由时报错:

@news_blue.route("/news_comment", methods=["POST"])

NameError: name 'news_blue' is not defined

记得将路由名改为该蓝图名

报错:

line 521, in news_comment

    comment.user_id = user.id

AttributeError: 'str' object has no attribute 'id'

改为session取出的user_id

报错:

sqlalchemy.exc.OperationalError: (_mysql_exceptions.OperationalError) (1048, "Column 'music_id' cannot be null") [SQL: 'INSERT INTO info_comment (create_time, update_time, user_id, music_id, content, parent_id, like_count) VALUES (%s, %s, %s, %s, %s, %s, %s)'] [parameters: (datetime.datetime(2020, 4, 7, 16, 21, 17, 132015), datetime.datetime(2020, 4, 7, 16, 21, 17, 132015), 48, None, '1', None, 0)] (Background on this error at: http://sqlalche.me/e/e3q8)

line 530, in news_comment

    db.session.commit()

提交前为comment.music_id赋值

报错:

return jsonify(errno=RET.OK, errmsg="评论成功", data=comment.to_dict())

NameError: name 'jsonify' is not defined

from flask import jsonify

报错:

File "D:\anacondaProject\music-website-flask\app\home\views.py", line 433, in play

    comment_dict = comment.to_dict()

  File "D:\anacondaProject\music-website-flask\app\models.py", line 153, in to_dict

    "user": User.query.get(self.user_id).to_dict(),

AttributeError: 'User' object has no attribute 'to_dict'

在comment model中to_dic方法调用了

"user": User.query.get(self.user_id).to_dict(),

因此修改为:

"user": self.user_id,

"news_id": self.music_id,

报错:

return jsonify(errno=RET.SESSIONERR, errmsg="请登陆")

return jsonify(errno=RET.OK, errmsg="评论成功", data=comment.to_dict())

NameError: name 'RET' is not defined

原导入方法:

from info.utils.response_code import RET

是一堆常量,OK为0,SESSIONERR为4101,修改:

return jsonify(errno="4101", errmsg="请登陆")

return jsonify(errno="0", errmsg="评论成功", data=comment.to_dict())

点赞路由同上一样改

Html

{% if data.user_info %}

            <form action="" class="comment_form" data-newsid="{{ data.news.id }}">

                <div class=" person_pic">

                    <img src="{% if data.user_info.avatar_url %}

                    {{ data.user_info.avatar_url }}

                {% else %}

                    ../../static/news/images/person01.png

                {% endif %}" alt="用户图标">

                </div>

                <textarea placeholder="请发表您的评论" class="comment_input"></textarea>

                <input type="submit" name="" value="评 论" class="comment_sub">

            </form>

        {% else %}

            <div class="comment_form_logout">

                登录发表你的评论

            </div>

        {% endif %}

 

        <div class="comment_count">

            {{ data.news.comments_count }}条评论

        </div>

 

        <div class="comment_list_con">

            {% for comment in data.comments %}

                <div class="comment_list">

                    <div class="person_pic fl">

                        <img src="{% if comment.user.avatar_url %}

                {{ comment.user.avatar_url }}

            {% else %}

                ../../static/news/images/person01.png

            {% endif %}" alt="用户图标">

                    </div>

                    <div class="user_name fl">{{ comment.user.nick_name }}</div>

                    <div class="comment_text fl">{{ comment.content }}</div>

                    {% if comment.parent %}

                        <div class="reply_text_con fl">

                            <div class="user_name2">{{ comment.parent.user.nick_name }}</div>

                            <div class="reply_text">

                                {{ comment.parent.content }}

                            </div>

                        </div>

                    {% endif %}

                    <div class="comment_time fl">{{ comment.create_time }}</div>

 

                    <a href="javascript:;" class="comment_up

                    {% if comment.is_like %}

                        has_comment_up

                    {% endif %} fr"

                       data-commentid="{{ comment.id }}"

                       data-likecount="{{ comment.like_count }}"

                       data-newsid="{{ data.news.id }}">

                        {% if comment.like_count > 0 %}

                            {{ comment.like_count }}

                        {% else %}

                            赞

                        {% endif %}</a>

 

                    <a href="javascript:;" class="comment_reply fr">回复</a>

                    <form class="reply_form fl" data-commentid="{{ comment.id }}" data-newsid="{{ data.news.id }}">

                        <textarea class="reply_input"></textarea>

                        <input type="button" value="回复" class="reply_sub fr">

                        <input type="reset" name="" value="取消" class="reply_cancel fr">

                    </form>

                </div>

            {% endfor %}

        </div>

 

新增form中:

data-newsid="{{ data.news.id }}"

改为musicid-仿照收藏逻辑

加入评论列表后报错:

{{ data.news.comments_count }}条评论

{% for comment in data.comments %}

jinja2.exceptions.UndefinedError: 'data' is undefined

原view的news = News.query.get(news_id)取出后

由于在model news中有

comments = db.relationship("Comment", lazy="dynamic")

data:{

"comments_count": self.comments.count(),

所以可以取出

此处加comments_count性价比不高,删除

但data也无法识别,是由于渲染模板的时候没传过去

报错:

jinja2.exceptions.UndefinedError: 'dict object' has no attribute 'news'

修改<a href="javascript:;" class="comment_up处的

data-newsid="{{ data.news.id }}

为mus.music_id

 

CSS

comment_form等class

将news文件夹放到static下,在网页中引入对应文件

比照不同之处,逻辑确实未登录

其中main.css中部分class如form-group的样式可能影响原有样式

导致时间滑到上一行的是原布局中的

box-sizing: border-box

解决参考:https://blog.csdn.net/qq_33644670/article/details/95071581

给不需要box-sizing:border-box的元素上加上 box-sizing:content-box;

限制浮动元素在div内,参考:

https://www.cnblogs.com/heqichang/archive/2011/08/01/2123887.html

我使用的是父div加fl

且Div宽度占满父div,参考:

https://segmentfault.com/q/1010000017319613?utm_source=tag-newest

style="width:100%"

评论按钮错位:

评论输入框样式:

.comment_form .comment_input {

    float: left;

    width: 690px;

    height: 60px;

    margin-left: 20px;

    border-radius: 4px;

    padding: 10px;

    outline: none;

    border: 1px solid #2185ed;

}

需要换行的浮动元素外包裹:

<div class="fl" style="width:750px">

JS

Detail.js使用jQuery,

添加评论后前端点击评论时url为:

http://localhost:5000/news/news_comment

修改:

$.ajax({

            url: "/news/news_comment",

url: "/home/news_comment",

http://localhost:5000/home/news_comment

依然404,参考收藏、链接等

收藏为:

{{ url_for('home.like',id=mus.music_id) }}

相似链接:

<a href="http://localhost:5000/detail?key=SHANGHAI">

评论成功,但显示用户名不对,原列表中的用户名也要加上

评论提交的Ajax中

if (comment.user.avatar_url) {

                        comment_html += '<img src="' + comment.user.avatar_url + '" alt="用户图标">'

                    } else {

                        comment_html += '<img src="../../static/news/images/person01.png" alt="用户图标">'

                    }

                    comment_html += '</div>'

                    comment_html += '<div class="user_name fl">' + comment.user.nick_name + '</div>'

改为:

comment_html += '<div class="user_name fl">' + comment.user + '</div>'

回复评论报错:

"POST /news/news_comment HTTP/1.1" 404

在class="comment_reply"调用js,其ajax请求

$.ajax({

                url: "/news/comment_like",

修改为:

url: "/comment_like",

详情页面无法搜索:

原本Home最下方处js

<script>

    $(document).ready(function () {

        $("img.lazy").lazyload({

            effect: "fadeIn"

        });

        $("#do_search").click(function () {

            var key = $("#key_music").val();

            location.href = "{{ url_for('home.search')}}?key=" + key

        });

        $("#do_search").keydown(function () {

            var key = $("#key_music").val();

            location.href = "{{ url_for('home.search')}}?key=" + key

        });

    });

 

 

</script>

通过注释文件引入,可以定位到导致问题产生的文件是news/js/jquery-1.12.4.min.js

注释之后完全没有影响所需几个功能,所以就不用了

©️2020 CSDN 皮肤主题: 撸撸猫 设计师: 设计师小姐姐 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值