用户发布文章

需求分析

用户可以在个人中心发布文章
发布完毕文章需要通过审核才能显示
用户发布完毕文章跳转到用户文章列表
后台管理员对文章进行审核
如果某条文章是用户发布的，那么在文章详情页展示该用户的个人资料
需要更新文章查询条件，添加 status == 0(已审核通过)

前端逻辑实现

在 forum/api/account.py 中添加视图函数，返回静态页面

python

@app.get('/account/article_release.html')
def article_release_view():
    return render_template(f'account/article_release.html')

新增 static/account/article_release.html 文件

html

{% extends 'account/index.html' %}

{% block right_container %}
    <h3>文章发布</h3>
    <form class="layui-form release_form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">文章标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="required" placeholder="" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">文章分类</label>
            <div class="layui-input-block">
                <select name="category">
                    <option value="">请选择文章分类</option>
                    <option value="0">写作</option>
                    <option value="1">阅读</option>
                    <option value="2">游戏</option>
                    <option value="3">音乐</option>
                    <option value="4">旅行</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文章摘要</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入文章摘要" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文章首页图</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn  demo-class-accept" lay-options="{accept: 'file'}">
                    <i class="layui-icon layui-icon-upload"></i>
                    上传文件
                </button>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文章内容</label>
            <div class="layui-input-block">
                <input class="layui-input" id="rich_content" name="content" value="哈哈">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

{% endblock %}

{% block footer_script %}
    <script src="/static/tinymce/js/tinymce/tinymce.min.js"></script>
    <script>
        layui.use(function () {
            var upload = layui.upload;
            var layer = layui.layer;
            // 渲染
            upload.render({
                elem: '.demo-class-accept', // 绑定多个元素
                url: '', // 此处配置你自己的上传接口即可
                accept: 'file', // 普通文件
                done: function (res) {
                    layer.msg('上传成功');
                    console.log(res);
                }
            });

            tinymce.init({
                selector: '#rich_content',
                language: 'zh_CN', //调用放在langs文件夹内的语言包
                {#plugins: ['quickbars', 'link', 'table', 'image'], //选择需加载的插件#}
                plugins: [
                    'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
                    'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
                    'save table contextmenu directionality template paste textcolor',
                    'codesample imageupload',
                ], //选择需加载的插件
                toolbar: 'insertfile undo redo | styleselect | bold italic | \
                alignleft aligncenter alignright alignjustify | \
                bullist numlist outdent indent | \
                link image | \
                print preview media fullpage | \
                forecolor backcolor emoticons |\
                codesample fontsizeselect fullscreen |\
                imageupload',
                //字体大小
                fontsize_formats: '10pt 12pt 14pt 18pt 24pt 36pt',
                //按tab不换行
                nonbreaking_force_tab: true,
                images_upload_url: '/user/submit-image'
            });
        });

    </script>
{% endblock %}

富文本编辑器

http://tinymce.ax-z.cn/

上传图片

javascript

tinymce.init({
  selector: "#tinydemo",
  language: "zh_CN",
  plugins: "image",
  toolbar: "image",
  images_upload_url: "/demo/upimg.php",
  images_upload_base_path: "/demo",
});

返回结果

json

{ "location": "images/1.jpg" }

旧内容

python

@profile_bp.route('/news_release')
def news_release():
    categories_list = []
    try:
        # 获取所有的分类数据
        categories_list = Category.query.all()
    except Exception as e:
        current_app.logger.error(e)

    # 定义列表保存分类数据

    categories_list = [marshal(cate, category_fields) for cate in categories_list]
    # 移除`最新`分类
    categories_list.pop(0)
    # 返回内容
    return render_template('blog/user/news_release.html',
                           user=marshal(current_user, user_info_fields),
                           data={"categories": categories_list})

在 user_news_release.html 中修改相关模板语言

html

{% extends 'blog/user.html' %} {% block script_block %}
<script
  type="text/javascript"
  src="../../../static/blog/js/jquery.form.min.js"
></script>

<script src="../../../static/blog/tinymce/js/tinymce/tinymce.min.js"></script>
<script src="../../../static/blog/js/tinymce_setup.js"></script>
<script type="text/javascript" src="../../../static/blog/js/user.js"></script>

{% endblock %} {% block right_block %}
<!--中间部分-->
<div class="user_con fr">
  <form class="release_form">
    <h3>新闻发布</h3>
    <div class="form-group">
      <label>新闻标题：</label
      ><input type="text" class="input_txt2" name="title" />
    </div>
    <div class="form-group">
      <label>新闻分类：</label>
      <select class="sel_opt" name="category_id">
        {% for category in data.categories %}
        <option value="{{ category.id }}">{{ category.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="form-group">
      <label>摘要：</label
      ><textarea class="input_multxt" name="digest"></textarea>
    </div>
    <div class="form-group">
      <label>上传图片：</label
      ><input type="file" class="input_file" name="index_image" />
    </div>
    <div class="form-group">
      <label>内容：</label>
      <div class="fl">
        <input
          class="input_area"
          id="rich_content"
          name="content"
          value="哈哈"
        />
      </div>
    </div>
    <div class="form-group">
      <input type="submit" value="发 布" class="input_sub input_sub2" />
    </div>
    <div class="error_tip2">错误提示</div>
  </form>
  <script>
    function fnSetIframeHeight(num) {
      var $frame = $(".release_form");
      $frame.css({ height: num });
    }

    $(function () {
      fnSetIframeHeight(900);
    });
  </script>
</div>

{% endblock %}

后端接口实现

接口实现

见接口文档

代码实现

在 views/profile.py 文件中将 news_release 添加请求方式 POST 为发布文章添加逻辑

python

@user_bp.route('/user/article_release', methods=['GET', 'POST'])
@login_required
def article_release_view():
    if request.method == 'POST':
        title = request.form.get('title')
        article_type = request.form.get('article_type')
        describe = request.form.get('describe')
        content = request.form.get('content')

        index_image = request.files.get('index_image')
        img_url = 'static/images/not_found.png'
        if index_image:
            # FileStorage: 文件 -> pdf excel word mp4 ....
            filename = index_image.filename
            # print('文件的名字:\t', filename)
            content = index_image.read()
            # print('文件的内容:\t', content)
            # save_pic(filename, content)
            # 保存到腾讯云的 cos(静态资源存储的服务) 服务
            flag, img_url = TenCos().save_user_pic(filename, content)
        print(title, article_type, describe, content, index_image)

        article = ArticleModel()
        article.source = '个人作者'
        article.title = title
        article.content = content
        article.category_id = int(article_type)
        article.digest = describe
        article.index_image_url = img_url
        article.status = 1
        article.user_id = current_user.id
        db.session.add(article)
        db.session.commit()
        return redirect('/')
    category_list = CategoryModel.query.all()
    return render_template('user/article_release.html',
                           category_list=category_list)

修改首页文章列表数据查询逻辑，在 views/index.py 文件中，修改 index 函数逻辑，添加已审核通过的条件

python

@index_bp.route('/')
def index():
    ...
    # 3.2 构建查询条件
    filters = [ArticleModel.status == 0]
    if cid == 1:
        pass
    else:
        filters.append(ArticleModel.category_id == cid)
    ...

用户发布文章 ​

前端逻辑实现 ​

富文本编辑器 ​

上传图片 ​

旧内容 ​

后端接口实现 ​

代码实现 ​

用户发布文章

前端逻辑实现

富文本编辑器

上传图片

旧内容

后端接口实现

代码实现