Flask实现个人博客系统（附源码）

冷不防 2022-12-24 12:56 631阅读 0赞

前面写了一些Flask相关的文章，这里使用Flask写了一个个人博客系统总结一下前面所学。项目全部代码也上传GitHub，地址：https://github.com/machaoyin/flask_blog/tree/master，如果对你有帮助，不妨动动你的小手指，帮忙star一下。

文章目录

    • 项目描述
    • 项目目录
    • 数据库设计
    • 功能实现
      • 页面基本模板实现
      • 登录与注册功能
      • 修改密码
      • 写博客
      • 查看博客列表
      • 博客详情页面
      • 评论
      • 我的博客
      • 修改博客
      • 删除博客
      • 我的评论
      • 删除评论
      • 关于页面
      • 注销
      • 定义错误页面
    • 源码下载

项目描述

开发环境：PyCharm、python3.7、MySQL5.5

使用技术：服务端是使用Flask开发的，前端是使用的Layui和Markdown编辑器所实现的。

项目包含功能如下：

  • 注册：注册账号

  • 登录：通过账号密码进行登录

    • 写博客：写博客采用的Markdown编辑器完成的。可以发布自己的博客
    • 我的博客：查看自己发布的博客并对其管理
    • 我的评论：查看自己的所有评论并对其管理
    • 修改密码
  • 查看博客列表：查看所有已发布的博客
  • 博客详情页：查看博客内容及评论信息，可以对当前博客进行评论
  • 关于

项目目录

在这里插入图片描述

数据库设计

数据库一共设计了三张表：用户表、博客表、评论表。
表之间的映射关系如下：
在这里插入图片描述
用户表和博客表一对多关系；用户和评论表一对多关系；博客表和评论表一对多关系。

其表的模型类代码如下：

  1. class User(db.Model):
  2.     # 设置表名
  3.     __tablename__ = 'tb_user';
  4.     # id，主键并自动递增
  5.     id = db.Column(db.Integer, primary_key=True, autoincrement=True)
  6.     username = db.Column(db.String(64), unique=True)
  7.     password = db.Column(db.String(256), nullable=True)
  8.     name = db.Column(db.String(64))
  10.     # 设置只可写入，对密码进行加密
  11.     def password_hash(self, password):
  12.         self.password = generate_password_hash(password);
  14. class Blog(db.Model):
  15.     __tablename__ = 'blog'
  16.     id = db.Column(db.Integer, primary_key=True, autoincrement=True)
  17.     title = db.Column(db.String(128))
  18.     text = db.Column(db.TEXT)
  19.     create_time = db.Column(db.String(64))
  20.     #关联用户id
  21.     user_id = db.Column(db.Integer, db.ForeignKey('tb_user.id'))
  22.     user = db.relationship('User', backref='user')
  24. class Comment(db.Model):
  25.     __tablename__ = 'comment'
  26.     id = db.Column(db.Integer, primary_key=True, autoincrement=True)
  27.     text = db.Column(db.String(256))    # 评论内容
  28.     create_time = db.Column(db.String(64))
  29.     # 关联博客id
  30.     blog_id = db.Column(db.Integer, db.ForeignKey("blog.id"))
  31.     # 关联用户id
  32.     user_id = db.Column(db.Integer, db.ForeignKey("tb_user.id"))
  33.     blog = db.relationship("Blog", backref="blog")
  34.     user = db.relationship("User", backref="use")

功能实现

页面基本模板实现

页面使用的是Jinja2模板，Jinja2支持页面继承，所以导航栏重复性的页面代码，我们都可以写在一个文件中。这里我们先创建一个base.html文件，编写页面大致的框架。其他模块直接继承使用即可。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>
  6.         {% block title %}
  7.             {# 其他页面可以重写标题 #}
  8.         {% endblock %}
  9.     </title>
  10.     <link rel="stylesheet" href="/static/layui/css/layui.css">
  11.     <link rel="stylesheet" href="/static/css/base.css">
  12.     <script src="/static/js/jquery.js"></script>
  13.     <script src="/static/layui/layui.js"></script>
  14.     {% block css %}
  15.     {% endblock %}
  16. </head>
  17. <body>
  18. <div id="bg"></div>
  19. <ul class="layui-nav" lay-filter="">
  20.     <li class="layui-nav-item"><a href="/">在线博客平台</a></li>
  21.     {% if username %}
  22.         <li class="layui-nav-item{% block updatepwd_class %}{% endblock %}"><a href="/updatePwd">修改密码</a></li>
  23.     {% endif %}
  24.     <li class="layui-nav-item{% block blog_class %}{% endblock %}"><a href="/blog/blogAll">博客</a></li>
  25.     <li class="layui-nav-item{% block about_class %}{% endblock %}"><a href="/about">关于</a></li>
  26.     {% if username %}
  27.         <li class="layui-nav-item" style="float: right; margin-right: 30px;">
  28.             <a href="javascript:;">{
  29.    { name }}</a>
  30.             <dl class="layui-nav-child">
  31.                 <dd><a href="/blog/myBlog">我的博客</a></dd>
  32.                 <dd><a href="/blog/myComment">我的评论</a></dd>
  33.                 <dd><a href="/logout">注销</a></dd>
  34.             </dl>
  35.         </li>
  36.         <li class="layui-nav-item{% block write_class %}{% endblock %}" style="float: right"><a href="/blog/writeBlog">写博客</a></li>
  37.     {% else %}
  38.         <li class="layui-nav-item{% block register_class %}{% endblock %}" style="float: right"><a href="/register">注册</a></li>
  39.         <li class="layui-nav-item{% block login_class %}{% endblock %}" style="float: right"><a href="/login">登录</a></li>
  40.     {% endif %}
  41. </ul>
  43. <div class="content">
  44.     {% block content %}
  45.         {# 其他页面内容 #}
  46.     {% endblock %}
  47. </div>
  49. <script>
  50. layui.use('element', function(){
  51.     var element = layui.element;
  52. });
  53. </script>
  54. </body>
  55. </html>

这里页面使用了Layui定义了一个导航栏，展示了对应的功能模块。其中{% if username %}，username为后台存放在session中的一个键值对，用于判断用户是否登录了，有些功能登录后才显示。

base.html模板文件完成后，我们在定义一个index.html来做项目的首页，直接继承base.html。这样首页index.html就节省了很多代码。如下：

  1. {% extends 'base.html' %}
  3. {% block title %}
  4.     在线博客平台
  5. {% endblock %}
  7. {% block content %}
  8.     <h1 style="margin: 35vh;">在线博客平台</h1>
  9. {% endblock %}

首页效果如下：
watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 2

登录与注册功能

登录

先定义一个登录的视图函数，可以接收GET、POST请求，GET请求为跳转到登录页面，POST请求为处理登录提交的请求，验证是否登录成功，登录成功后把当前登录对象的用户名存入session会话中。

  1. # 登录请求
  2. @index.route('/login', methods=['POST', 'GET'])
  3. def login():
  4.     if request.method == 'GET':
  5.         return render_template('login.html')
  6.     if request.method == 'POST':
  7.         username = request.form.get('username')
  8.         password = request.form.get('password')
  9.         user = User.query.filter(User.username == username).first();
  10.         # check_password_hash比较两个密码是否相同
  11.         if (user is not None) and (check_password_hash(user.password, password)):
  12.             session['username'] = user.username
  13.             session.permanent = True
  14.             return redirect(url_for('index.hello'))
  15.         else:
  16.             flash("账号或密码错误")
  17.             return render_template('login.html');

登录页面是用Layui写的一组form表单，也是基础的base.html，代码如下：

  1. {% extends 'base.html' %}
  3. {% block title %}
  4.     在线博客平台.登录
  5. {% endblock %}
  7. {% block css %}
  8. <link rel="stylesheet" href="/static/css/register.css">
  9. {% endblock %}
  11. {% block content %}
  12.     <div class="register">
  13.         <h1>登录</h1>
  14.         <p class="tip">
  15.             {% for item in get_flashed_messages() %}
  16.             {
  17.    { item }}
  18.             {% endfor %}
  19.         </p>
  20.         <form class="layui-form" action="login" method="post">
  21.             <div class="layui-form-item">
  22.                 <label class="layui-form-label">用户名</label>
  23.                 <div class="layui-input-block">
  24.                     <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" class="layui-input">
  25.                 </div>
  26.             </div>
  27.             <div class="layui-form-item">
  28.                 <label class="layui-form-label">密  码</label>
  29.                 <div class="layui-input-block">
  30.                     <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" class="layui-input">
  31.                 </div>
  32.             </div>
  33.             <div class="layui-form-item">
  34.                 <div class="layui-input-block">
  35.                     <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
  36.                     <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  37.                 </div>
  38.             </div>
  39.         </form>
  40.     </div>
  41.     <script>
  42.         layui.use('form', function(){
  43.             var form = layui.form;
  44.             form.on('submit(formDemo)', function(data){
  45.             });
  46.         });
  47.     </script>
  48. {% endblock %}
  50. {% block login_class %}
  51.     layui-this
  52. {% endblock %}

效果如下(账号和密码错误后，会有相应的提示信息)：在这里插入图片描述
注册和登录差不多，页面都是使用的同一个css样式文件，所以这里就贴代码出来了，需要的可以自行下载完整项目代码：GitHub地址。

修改密码

修改密码模块，因为数据库存放明文密码很不安全，所以这里使用了Werkzeug对密码进行了加密存储。对于WerkZeug密码加密想进一步了解的，可以访问Flask 使用Werkzeug实现密码加密。

因为数据库中存储的是加密后的密码，所以这里判断原密码是否正确需要使用check_password_hash函数进行判断。

定义一个修改密码的视图函数。

  1. # 修改密码
  2. @index.route("/updatePwd", methods=['POST', 'GET'])
  3. @login_limit
  4. def update():
  5.     if request.method == "GET":
  6.         return render_template("updatePwd.html")
  7.     if request.method == 'POST':
  8.         lodPwd = request.form.get("lodPwd")
  9.         newPwd1 = request.form.get("newPwd1")
  10.         newPwd2 = request.form.get("newPwd2")
  11.         username = session.get("username");
  12.         user = User.query.filter(User.username == username).first();
  13.         if check_password_hash(user.password, lodPwd):
  14.             if newPwd1 != newPwd2:
  15.                 flash("两次新密码不一致！")
  16.                 return render_template("updatePwd.html")
  17.             else:
  18.                 user.password_hash(newPwd2)
  19.                 db.session.commit();
  20.                 flash("修改成功！")
  21.                 return render_template("updatePwd.html")
  22.         else:
  23.             flash("原密码错误！")
  24.             return render_template("updatePwd.html")

页面样式文件和登录注册引入的样式文件一致(原密码不正确或两次新密码不同，会给出相应的提示信息)，代码如下：

  1. {% extends 'base.html' %}
  3. {% block title %}
  4.     在线博客平台.修改密码
  5. {% endblock %}
  7. {% block css %}
  8. <link rel="stylesheet" href="/static/css/register.css">
  9. {% endblock %}
  11. {% block content %}
  12.     <div class="register">
  13.         <h1>修改密码</h1>
  14.         <p class="tip">
  15.             {% for item in get_flashed_messages() %}
  16.             {
  17.    { item }}
  18.             {% endfor %}
  19.         </p>
  20.         <form class="layui-form" action="updatePwd" method="post">
  21.             <div class="layui-form-item">
  22.                 <label class="layui-form-label">原密码</label>
  23.                 <div class="layui-input-block">
  24.                     <input type="password" name="lodPwd" required  lay-verify="required" placeholder="请输入原密码" class="layui-input">
  25.                 </div>
  26.             </div>
  27.             <div class="layui-form-item">
  28.                 <label class="layui-form-label">新密码</label>
  29.                 <div class="layui-input-block">
  30.                     <input type="password" name="newPwd1" required lay-verify="required" placeholder="请输入新密码" class="layui-input">
  31.                 </div>
  32.             </div>
  33.             <div class="layui-form-item">
  34.                 <label class="layui-form-label">确认新密码</label>
  35.                 <div class="layui-input-block">
  36.                     <input type="password" name="newPwd2" required lay-verify="required" placeholder="请再次输入新密码" class="layui-input">
  37.                 </div>
  38.             </div>
  39.             <div class="layui-form-item">
  40.                 <div class="layui-input-block">
  41.                     <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
  42.                 </div>
  43.             </div>
  44.         </form>
  45.     </div>
  46.     <script>
  47.         layui.use('form', function(){
  48.             var form = layui.form;
  49.             form.on('submit(formDemo)', function(data){
  50.             });
  51.         });
  52.     </script>
  53. {% endblock %}
  55. {% block updatepwd_class %}
  56.     layui-this
  57. {% endblock %}

效果如下：
在这里插入图片描述

写博客

写博客，博客表中会保存标题、博客内容、当前时间等字段。如下是写博客的视图函数。

  1. # 写博客页面
  2. @blog.route('/writeBlog', methods=['POST', 'GET'])
  3. @login_limit
  4. def writeblog():
  5.     if request.method == 'GET':
  6.         return render_template('writeBlog.html')
  7.     if request.method == 'POST':
  8.         title = request.form.get("title")
  9.         text = request.form.get("text")
  10.         username = session.get('username')
  11.         # 获取当前系统时间
  12.         create_time = time.strftime("%Y-%m-%d %H:%M:%S")
  13.         user = User.query.filter(User.username == username).first()
  14.         blog = Blog(title=title, text=text, create_time=create_time, user_id=user.id)
  15.         db.session.add(blog)
  16.         db.session.commit();
  17.         blog = Blog.query.filter(Blog.create_time == create_time).first();
  18.         return render_template('blogSuccess.html', title=title, id=blog.id)

保存博客时会获取到当前系统时间，当做博客的发布时间。博客保存成功后，会返回保存成功页面，下面会有讲解。

写博客对应的html文件，代码如下。

  1. {% extends 'base.html' %}
  3. {% block title %}
  4.     在线博客平台.写博客
  5. {% endblock %}
  7. {% block css %}
  8. <link rel="stylesheet" type="text/css" href="/static/editor/css/editormd.css"/>
  9. <script src="/static/editor/editormd.js" type="text/javascript"></script>
  10. {% endblock %}
  12. {% block content %}
  13.     <div class="main">
  14.         <form action="/blog/writeBlog" class="layui-form" method="post">
  15.             <div class="layui-form-item">
  16.                 <label class="layui-form-label">标   题</label>
  17.                 <div class="layui-input-block">
  18.                     <input type="text" name="title"  lay-verify="required" placeholder="请输入标题" class="layui-input">
  19.                 </div>
  20.             </div>
  21.             <div id="editormd">
  22.                 <textarea name = "text" lay-verify="required" style="display:none;" ></textarea>
  23.             </div>
  24.             <div class="layui-form-item">
  25.                 <div class="layui-input-block">
  26.                     <button class="layui-btn" style="width: 150px" lay-submit lay-filter="formDemo">保存</button>
  27.                 </div>
  28.             </div>
  29.         </form>
  30.     </div>
  32.     <script type="text/javascript">
  33.         layui.use('form', function(){
  34.             var form = layui.form;
  35.             form.on('submit(formDemo)', function(data){
  36.             });
  37.         });
  39.         $(function() {
  40.             editormd("editormd", {
  41.                 width: "100%",
  42.                 height: 600,
  43.                 syncScrolling: "single",
  44.                 path: "/static/editor/lib/", //依赖lib文件夹路径
  45.                 emoji: true,
  46.                 taskList: true,
  47.                 tocm: true,
  48.                 imageUpload: true,    //开启本地图片上传
  49.                 imageFormats: ["jpg", "jpeg", "gif", "png"],    //设置上传图片的格式
  50.                 imageUploadURL: "/blog/imgUpload"        //上传图片请求路径
  51.             });
  52.         });
  53.     </script>
  54. {% endblock %}
  56. {% block write_class %}
  57.     layui-this
  58. {% endblock %}

写博客这里采用的是Markdown编辑器，对于Markdown编辑器之前写过一篇Markdown的使用方法，只不过后端用的是Java语言，感兴趣的小伙伴可以看看，Markdown的基本使用。Flask与之不同的是，后端接收Markdown上传图片时的语句不同，Flask接收Markdown上传图片的语句：

  1. file = request.files.get('editormd-image-file');

其他的基本相同，毕竟Markdown是属于前端的知识，后端只要求根据规定个格式返回数据即可。

因为Markdown支持图片上传，那就必须的有文件上传的方法了。如下定义一个文件上传的视图函数(这里需要注意的是Markdown上传图片是使用的POST方法)。

  1. # 上传图片
  2. @blog.route('/imgUpload', methods=['POST'])
  3. @login_limit
  4. def imgUpload():
  5.     try:
  6.         file = request.files.get('editormd-image-file');
  7.         fname = secure_filename(file.filename);
  8.         ext = fname.rsplit('.')[-1];
  9.         # 生成一个uuid作为文件名
  10.         fileName = str(uuid.uuid4()) + "." + ext;
  11.         filePath = os.path.join("static/uploadImg/", fileName);
  12.         file.save(filePath)
  13.         return {
  14.             'success': 1,
  15.             'message': '上传成功!',
  16.             'url': "/" + filePath
  17.         }
  18.     except Exception:
  19.         return {
  20.             'success': 0,
  21.             'message': '上传失败'
  22.         }

如果对上述的文件上传代码比较陌生，可以访问Flask 文件上传与下载，对Flask文件上传与下载进一步了解。

效果如下：
在这里插入图片描述
保存成功后，会返回保存成功页面，可以在写一篇，或者查看当前发布的文章。
在这里插入图片描述

查看博客列表

查看博客列表就是遍历所有已发布的博客。先定义一个视图函数，查询所有已发布的博客，传递到前端进行遍历显示。视图函数代码如下：

  1. # 展示全部博客
  2. @blog.route("/blogAll")
  3. def blogAll():
  4.     # order_by按照时间倒序
  5.     blogList = Blog.query.order_by(Blog.create_time.desc()).all();
  6.     return render_template('blogAll.html', blogList=blogList)

因为最新发布的博客在数据库的最后一条，所以这里根据发布时间倒序查询。

页面代码如下：

  1. {% extends 'base.html' %}
  3. {% block title %}
  4.     在线博客平台.博客
  5. {% endblock %}
  7. {% block css %}
  8. <link rel="stylesheet" href="/static/css/blogAll.css">
  9. {% endblock %}
  11. {% block content %}
  12.     <div class="main">
  13.         <ul>
  14.             {% for blog in blogList %}
  15.                 <li>
  16.                     <a class="title" href="/blog/showBlog/{
  17.    { blog.id }}">{
  18.    { blog.title }}</a>
  19.                     <p>
  20.                         发布人：{
  21.    { blog.user.name }}     发布时间：{
  22.    { blog.create_time }}
  23.                     </p>
  24.                 </li>
  25.             {% endfor %}
  26.         </ul>
  27.     </div>
  28. {% endblock %}
  30. {% block blog_class %}
  31.     layui-this
  32. {% endblock %}

效果如下：
在这里插入图片描述

博客详情页面

在博客列表中点击博客的标题可以进入博客的详情页面，详情页面展示了博客的详细内容以及评论内容。

因为数据库中保存博客内容的是Markdown格式的，所以在这里需要解析成HTML格式，解析代码如下。

  1. <script src="/static/editor/lib/marked.min.js"></script>
  2. <script src="/static/editor/lib/prettify.min.js"></script>
  3. <script src="/static/editor/lib/raphael.min.js"></script>
  4. <script src="/static/editor/lib/underscore.min.js"></script>
  5. <script src="/static/editor/lib/sequence-diagram.min.js"></script>
  6. <script src="/static/editor/lib/flowchart.min.js"></script>
  7. <script src="/static/editor/lib/jquery.flowchart.min.js"></script>
  8. <script src="/static/editor/editormd.js"></script>
  9. editormd.markdownToHTML("test", {
  10.     htmlDecode: "style,script,iframe",
  11.     emoji: true,
  12.     taskList: true,
  13.     tex: true,  // 默认不解析
  14.     flowChart: true,  // 默认不解析
  15.     sequenceDiagram: true  // 默认不解析
  16. });

评论

在博客详情页面可以进行评论，评论使用的是Layui的编辑器，比较简约也可以达到想要的效果。效果如图。
在这里插入图片描述
看上去是不是还可以，和页面也很搭。评论需要先登录才可以评论，如果没有登录则会提示登录。
在这里插入图片描述
如果登录评论后，会发送保存评论请求，携带当前博客的id和评论内容进行保存。
保存评论的视图函数

  1. # 评论
  2. @blog.route("/comment", methods=['POST'])
  3. @login_limit
  4. def comment():
  5.     text = request.values.get('text')
  6.     blogId = request.values.get('blogId')
  7.     username = session.get('username')
  8.     # 获取当前系统时间
  9.     create_time = time.strftime("%Y-%m-%d %H:%M:%S")
  10.     user = User.query.filter(User.username == username).first()
  11.     comment = Comment(text=text, create_time=create_time, blog_id=blogId, user_id=user.id)
  12.     db.session.add(comment)
  13.     db.session.commit();
  14.     return {
  15.         'success': True,
  16.         'message': '评论成功！',
  17.     }

上述的博客内容解析与评论都在一个页面中，完整代码如下。

  1. {% extends 'base.html' %}
  3. {% block title %}
  4.     在线博客平台.博客
  5. {% endblock %}
  7. {% block css %}
  8. <link rel="stylesheet" type="text/css" href="/static/editor/css/editormd.css"/>
  9. <link rel="stylesheet" href="/static/css/showBlog.css">
  10. <script src="/static/editor/lib/marked.min.js"></script>
  11. <script src="/static/editor/lib/prettify.min.js"></script>
  12. <script src="/static/editor/lib/raphael.min.js"></script>
  13. <script src="/static/editor/lib/underscore.min.js"></script>
  14. <script src="/static/editor/lib/sequence-diagram.min.js"></script>
  15. <script src="/static/editor/lib/flowchart.min.js"></script>
  16. <script src="/static/editor/lib/jquery.flowchart.min.js"></script>
  17. <script src="/static/editor/editormd.js"></script>
  18. {% endblock %}
  20. {% block content %}
  21.     <div class="main">
  22.         <h1>{
  23.    { blog.title }}</h1>
  24.         <p>发布人：{
  25.    { blog.user.name }}     发布时间：{
  26.    { blog.create_time }}</p>
  27.         <hr>
  28.         <div id="test">
  29.             <textarea>{
  30.    { blog.text }}</textarea>
  31.         </div>
  32.         <fieldset class="layui-elem-field layui-field-title">
  33.             <legend>发表评论</legend>
  34.             <input type="hidden" id="blog_id" name="blogId" value="{
  35.    { blog.id }}">
  36.             <textarea id="lay_edit" lay-verify="content" name="text"></textarea>
  37.             <button type="button" class="layui-btn comSub">提交评论</button>
  38.         </fieldset>
  39.         <hr style="margin-top: 30px; margin-bottom: 20px;">
  40.         <ul class="comment">
  41.             {% for com in comment %}
  42.                 <li>
  43.                     <p class="myText">{
  44.    { com.text }}</p>
  45.                     <p>评论人：{
  46.    { com.user.name }}     发布时间：{
  47.    { com.create_time }}</p>
  48.                 </li>
  49.             {% endfor %}
  50.         </ul>
  51.     </div>
  53.     <script type="text/javascript">
  54.         $(function (){
  55.             $(".myText").each(function () {
  56.                 $(this).html($(this).text());
  57.             });
  58.         })
  60.         editormd.markdownToHTML("test", {
  61.             htmlDecode: "style,script,iframe",
  62.             emoji: true,
  63.             taskList: true,
  64.             tex: true,  // 默认不解析
  65.             flowChart: true,  // 默认不解析
  66.             sequenceDiagram: true  // 默认不解析
  67.         });
  69.         layui.use(['layedit', 'form'], function () {
  70.             var form = layui.form;
  71.             var layedit = layui.layedit;
  72.             //创建一个编辑器
  73.             var index = layedit.build('lay_edit', {
  74.                 height: 150,
  75.                 tool: [
  76.                     'face', //表情
  77.                     '|', //分割线
  78.                     'link' //超链接
  79.                 ]
  80.             });
  81.             $(".comSub").click(function (){
  82.                 layui.use('layer', function(){
  83.                     var layer = layui.layer;
  84.                     {% if username %}
  85.                         //获取评论内容
  86.                         var text = layedit.getContent(index);
  87.                         var blogId = $("#blog_id").val();
  88.                         if(text == "" || text == undefined){
  89.                             layer.msg("评论不能为空哦！", {icon: 0});
  90.                         }else {
  91.                             $.post("/blog/comment", {text: text, blogId: blogId}, function (result) {
  92.                                 if (result.success) {
  93.                                     window.location.href = '/blog/showBlog/' + blogId;
  94.                                 }
  95.                             })
  96.                         }
  97.                     {% else %}
  98.                         layer.confirm('登录后在评论哦！', {
  99.                             btn: ['取消','登录']
  100.                         }, function(index){
  101.                             layer.close(index);
  102.                         }, function(){
  103.                             window.location.href = '/login';
  104.                         });
  105.                     {% endif %}
  106.                 });
  107.             })
  108.         });
  109.     </script>
  110. {% endblock %}

我的博客

登录之后在右上角导航栏可以查看我的博客，查看个人已经发布过的博客并进行管理。
在这里插入图片描述
定义一个视图函数，查询当前登录的用户发布的所有博客。

  1. # 查看个人博客
  2. @blog.route("/myBlog")
  3. @login_limit
  4. def myBlog():
  5.     username = session.get('username')
  6.     user = User.query.filter(User.username == username).first()
  7.     # order_by按照时间倒序
  8.     blogList = Blog.query.filter(Blog.user_id == user.id).order_by(Blog.create_time.desc()).all()
  9.     return render_template("myBlog.html", blogList=blogList)

页面与博客列表基本相似，但可以对其博客进行修改与删除。
在这里插入图片描述

修改博客

在我的博客中，有修改博客的链接，把当前的博客id当做参数传递到后台，查询当前这条博客的数据，进行修改。

  1. # 博客修改
  2. @blog.route("/update/<id>", methods=['POST', 'GET'])
  3. @login_limit
  4. def update(id):
  5.     if request.method == 'GET':
  6.         blog = Blog.query.filter(Blog.id == id).first();
  7.         return render_template('updateBlog.html', blog=blog)
  8.     if request.method == 'POST':
  9.         id = request.form.get("id")
  10.         title = request.form.get("title")
  11.         text = request.form.get("text")
  12.         blog = Blog.query.filter(Blog.id == id).first();
  13.         blog.title = title;
  14.         blog.text = text;
  15.         db.session.commit();
  16.         return render_template('blogSuccess.html', title=title, id=id)

修改页面和写博客的页面基本一样，在textarea标签中设置markdown编辑器的默认值。

  1. <textarea name = "text" lay-verify="required" style="display:none;" >{
  2.    { blog.text }}</textarea>

删除博客

删除博客和修改一样，把博客的id传到后端，根据id删除数据库中对应的数据。

  1. # 删除博客
  2. @blog.route("/delete/<id>")
  3. @login_limit
  4. def delete(id):
  5.     blog = Blog.query.filter(Blog.id == id).first();
  6.     db.session.delete(blog);
  7.     db.session.commit();
  8.     return {
  9.         'state': True,
  10.         'msg': "删除成功！"
  11.     }

删除成功后，使用JS删除页面上对应的DOM元素。

  1. function del(url, that){
  2.        layui.use('layer', function(){
  3.         var layer = layui.layer;
  4.         layer.confirm('您确定要删除吗？', {
  5.             btn: ['取消','确定']
  6.         }, function(index){
  7.             layer.close(index);
  8.         }, function(){
  9.             $.get(url, function (data){
  10.                 if(data.state){
  11.                     $(that).parent().parent().parent().remove();
  12.                     layer.msg(data.msg, {icon: 1});
  13.                 }
  14.             })
  15.         });
  16.     });
  17. }

我的评论

在页面的右上角不仅可以查看个人已发布的博客，也可以看到自己的所有评论信息。
在这里插入图片描述
根据评论列表，可以点击评论或博客，可以进入评论的博客详情页中；也可以对评论的内容进行删除操作。
定义一个视图函数，查询所有的评论内容，返回给前台遍历展示(同样根据时间倒序查询)。

  1. # 用户所有的评论
  2. @blog.route('/myComment')
  3. @login_limit
  4. def myComment():
  5.     username = session.get('username')
  6.     user = User.query.filter(User.username == username).first()
  7.     # order_by按照时间倒序
  8.     commentList = Comment.query.filter(Comment.user_id == user.id).order_by(Comment.create_time.desc()).all();
  9.     return render_template("myComment.html", commentList=commentList)

前端页面展示代码。

  1. {% extends 'base.html' %}
  3. {% block title %}
  4.     在线博客平台.我的评论
  5. {% endblock %}
  7. {% block css %}
  8. <link rel="stylesheet" href="/static/css/blogAll.css">
  9. {% endblock %}
  11. {% block content %}
  12.     <div class="main">
  13.         <ul>
  14.             {% for comment in commentList %}
  15.                 <li>
  16.                     <a class="title" href="/blog/showBlog/{
  17.    { comment.blog_id }}">{
  18.    { comment.text }}</a>
  19.                     <p>
  20.                         博客：<a href="/blog/showBlog/{
  21.    { comment.blog_id }}">{
  22.    { comment.blog.title }}</a>     评论时间：{
  23.    { comment.create_time }}
  24.                         <span class="operation">
  25.                             <a href="javascript:;" onclick="del('/blog/deleteCom/{
  26.    { comment.id }}', this)">删除</a>
  27.                         </span>
  28.                     </p>
  29.                 </li>
  30.             {% endfor %}
  31.         </ul>
  32.     </div>
  34.     <script type="text/javascript">
  35.          $(function (){
  36.             $(".title").each(function () {
  37.                 $(this).html($(this).text());
  38.             });
  39.         })
  41.         function del(url, that){
  42.             layui.use('layer', function(){
  43.                 var layer = layui.layer;
  44.                 layer.confirm('您确定要删除吗？', {
  45.                     btn: ['取消','确定']
  46.                 }, function(index){
  47.                     layer.close(index);
  48.                 }, function(){
  49.                     $.get(url, function (data){
  50.                         if(data.state){
  51.                             $(that).parent().parent().parent().remove();
  52.                             layer.msg(data.msg, {icon: 1});
  53.                         }
  54.                     })
  55.                 });
  56.             });
  57.         }
  58.     </script>
  59. {% endblock %}

页面样式和博客列表样式一致。

删除评论

在评论列表中有删除评论的链接，根据评论的id删除当前条评论，删除后，对应博客中的评论也随之删除。

  1. # 删除评论
  2. @blog.route('/deleteCom/<id>')
  3. def deleteCom(id):
  4.     com = Comment.query.filter(Comment.id == id).first()
  5.     db.session.delete(com);
  6.     db.session.commit();
  7.     return {
  8.         'state': True,
  9.         'msg': "删除成功！"
  10.     }

关于页面

关于页面可以简单的描述一下网站的设计及作用等，这里就没有写过多的内容了，可以自行设计。
在这里插入图片描述

注销

注销只需要清除session中的数据，返回首页即可。

  1. # 退出
  2. @index.route('/logout')
  3. def logout():
  4.     session.clear()
  5.     return redirect(url_for('index.hello'))

定义错误页面

系统在平时使用中难免会遇到一些错误，但又不能直接让用户看到这些错误，所以我们可以定义一个错误页面，使其报错后都跳转到此页面。Flask中有两个视图函数处理404和500错误的，这里直接使用即可，这里两个视图函数都是跳转到了同一个页面(也可以跳转不同的页面)。

  1. # 404页面
  2. @app.errorhandler(404)
  3. def page_not_found(e):
  4.     return render_template('404.html'), 404;
  6. # 500页面
  7. @app.errorhandler(500)
  8. def internal_server_error(e):
  9.     return render_template('404.html'), 500;

错误页面这里就简单的插入了一张图片，添加了一个返回首页的链接。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>网站走丢了。。。</title>
  6. </head>
  7. <style type="text/css">
  8. body{
  9.     position: fixed;
  10.     width: 100%;
  11.     height: 100vh;
  12.     background: url('/static/img/404.gif') no-repeat;
  13.     background-size: cover;
  14.     z-index: -1;
  15. }
  16. a{
  17.     width: 65px;
  18.     display: inherit;
  19.     margin: 0 auto;
  20.     margin-top: 87vh;
  21.     padding: 5px 20px;
  22.     border: 1px solid;
  23.     border-radius: 8px;
  24. }
  25. </style>
  26. <body>
  27. <a href="/">返回首页</a>
  28. </body>
  29. </html>

效果如下
在这里插入图片描述

源码下载

到这里整个博客系统就完成了，最后在附上下载链接：https://github.com/machaoyin/flask_blog/tree/master。如果对你有帮助，不妨动动你的小手指，帮忙star一下。

创作不易，如果感觉对你有帮助，可以点赞、关注支持一下博主！

发表评论

表情：
评论列表 （有 0 条评论，631人围观）

还没有评论，来说两句吧...

相关阅读

    相关 个人博客系统

    个人博客系统 摘 要 个人博客系统采用B/S结构、java开发语言、以及Mysql数据库等技术。系统主要分为管理员和博客两部分，管理员主要功能包括：个人中心、文章分类管理、

    女爷i女爷i/ 0 赞/ 154 阅读