跟之前flask做的ihome租房网站类似，配置信息几乎完全一样，这里只记录下重点内容

git忽略log日志可在logs文件夹下加 .gitkeep文件

项目预览

文章列表页

文章详情页

个人中心

Day1

08_表结构分析

数据库迁移

显示网站logo文件

from flask import render_template, current_appfrom . import index_bp
from info import redis_store@index_bp.route('/')
def show_index():# 渲染首页return render_template('news/index.html')# 处理网站logo
@index_bp.route('/favicon.ico')
def get_web_logo():return current_app.send_static_file('news/favicon.ico')

Day2

实现的功能目录

使用请求钩子

# 使用请求钩子拦截所有请求, 在返回的响应cookie设置csrf_token@app.after_requestdef after_request(resp):# 调用系统方法，获取csrf_tokencsrf_token = generate_csrf()# 将csrf_token 设置到cookie中resp.set_cookie('csrf_token', csrf_token)# 返回响应return resp

前端ajax需要从cookie中获取csrf_token的值

$.ajax({url:'/passport/register',type:'post',data:JSON.stringify(params),contentType:'application/json',headers:{'X-CSRFToken':getCookie('csrf_token')},success: function (resp) {//判断是否注册成功if(resp.errno == '0'){//重新加载当前页面window.location.reload()}else{alert(resp.errmsg);}}})

自定义过滤器（热门文章排名颜色显示）

# 将函数添加到系统默认的过滤器中from info.utils.commons import hot_news_filter# 参数1：函数的名字 参数2：过滤器的名字app.add_template_filter(hot_news_filter, 'my_filter')

# 自定义过滤器实现热门新闻的颜色过滤
def hot_news_filter(index):if index == 1:return 'first'elif index == 2:return 'second'elif index == 3:return 'third'else:return ""

将函数添加到系统默认的过滤器中

获取文章列表

# 首页新闻列表
# 请求路径: /newslist
# 请求方式: GET
# 请求参数: cid,page,per_page
# 返回值: data数据
@index_bp.route('/newslist')
def newslist():# 1.获取参数cid = request.args.get('cid', '1')  # 默认为最新分类page = request.args.get('page', '1')  # 默认第一页per_page = request.args.get('per_page', '10')# 2.参数类型转换try:page = int(page)per_page = int(per_page)except Exception as e:page = 1per_page = 10# 3.分页查询try:filters = []if cid != '1':filters.append(News.category_id == cid)paginate = News.query.filter(*filters).order_by(News.create_time.desc()).paginate(page, per_page, False)except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.DBERR, errmsg='获取新闻失败')# 4.获取分页对象中的属性，总页数，当前页，当前页的对象列表totalPage = paginate.pagescurrentPage = paginate.pageitems = paginate.items# 5.将对象列表转换成字典列表news_list = []for news in items:news_list.append(news.to_dict())# 6.携带数据，返回响应return jsonify(errno=RET.OK,errmsg='获取新闻成功',totalPage=totalPage,currentPage=currentPage,newsList=news_list)

用户登录注册

# 登陆用户
# 请求路径: /passport/login
# 请求方式: POST
# 请求参数: mobile,password
# 返回值: errno, errmsg
@passport_bp.route('/login', methods=['POST'])
def login():# 1.获取参数mobile = request.json.get('mobile')password = request.json.get('password')# 2.校验参数, 为空校验if not all([mobile, password]):return jsonify(errno=RET.PARAMERR, errmsg='参数不全')# 3.通过手机号码，到数据库查询用户对象try:user = User.query.filter(User.mobile == mobile).first()except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.DBERR, errmsg='获取用户失败')# 4.判断用户是否存在if not user:return jsonify(errno=RET.NODATA, errmsg='该用户不存在')# 5.校验密码是否正确if not user.check_password(password):return jsonify(errno=RET.DATAERR, errmsg='密码错误')# 6.讲用户的登录信息保存到session中session['user_id'] = user.id# 6.1 记录用户最后一次的登录时间# 记录登录时间，是为了方便后期进行用户的活跃统计user.last_login = datetime.now()try:db.session.add(user)db.session.commit()except Exception as e:current_app.logger.error(e)db.session.rollback()return jsonify(errno=RET.DBERR, errmsg='修改用户登录时间错误')# 7.返回响应return jsonify(errno=RET.OK, errmsg='登录成功')# 注册用户
# 请求路径: /passport/register
# 请求方式: POST
# 请求参数: mobile, sms_code,password
# 返回值: errno, errmsg
@passport_bp.route('/register', methods=['POST'])
def register():# 1.获取参数dict_data = request.jsonmobile = dict_data.get('mobile')sms_code = dict_data.get('sms_code')password = dict_data.get('password')# 2.校验参数if not all([mobile, sms_code, password]):return jsonify(errno=RET.PARAMERR, errmsg='参数不全')# 3.手机号作为key取出redis中的短信验证码try:redis_sms_code = redis_store.get('sms_code:%s'%mobile)except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.DBERR, errmsg='短信验证码取出失败')# 4.判断短信验证码是否过期if not redis_sms_code:return jsonify(errno=RET.NODATA, errmsg='短信验证码已经过期')# 5.判断验证码是否正确if sms_code != redis_sms_code:return jsonify(errno=RET.DATAERR, errmsg='短信验证码填写错误')# 6.删除短信验证码try:redis_store.delete('sms_code:%s'%mobile)except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.DBERR, errmsg='短信验证码删除失败')# 7. 创建用户对象user = User()# 8. 设置用户对象属性user.nick_name = mobileuser.password = passworduser.mobile = mobileuser.signature = '改用户很懒，什么都没写'# 9. 保存用户到数据库try:db.session.add(user)db.session.commit()except Exception as e:current_app.logger.error(e)db.session.rollback()return jsonify(errno=RET.DBERR, errmsg='用户注册失败')# 10. 返回响应return jsonify(errno=RET.OK, errmsg='注册成功')

定义登录装饰器，封装用户的登录数据

# 定义登录装饰器，封装用户的登录数据
def user_login_data(view_func):def wrapper(*args, **kwargs):# 1.通过session获取用户的登录信息user_id = session.get('user_id')# 2.通过user_id取出用户对象user = Noneif user_id:try:user = User.query.get(user_id)except Exception as e:current_app.logger.error(e)else:return redirect(url_for("index.show_index", next=request.url))# 3.将user数据封装到g对象g.user = userreturn view_func(*args, **kwargs)return wrapper

使用try except小技巧

try:except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.DBERR, errmsg='')

热门新闻

template模板试用过滤器
base.html

 <ul class="rank_list">{# 遍历热门新闻 #}{% for news in data.news_list %}<li><span class="{{ loop.index | my_filter }}">{{ loop.index }}</span><a href="{{ "/news/%s" %(news.id) }}">{{ news.title }}</a></li>{% endfor %}</ul>

Day3

发布评论接口

# 新闻评论后端
# 请求路径: /news/news_comment
# 请求方式: POST
# 请求参数:news_id,comment,parent_id
# 返回值: errno,errmsg,评论字典
@news_bp.route('/news_comment', methods=['POST'])
@user_login_data
def news_comment():# 1.判断用户是否登录了if not g.user:return jsonify(errno=RET.NODATA, errmsg='用户未登录')# 2.获取参数news_id = request.json.get('news_id')content = request.json.get('comment')parent_id = request.json.get('parent_id')# 3.为空校验if not all([news_id, content]):return jsonify(errno=RET.PARAMERR, errmsg='参数不全')# 4.根据新闻的编号取出新闻对象try:news = News.query.get(news_id)except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.DBERR, errmsg='获取新闻失败')# 5.创建评论对象，设置属性comment = Comment()comment.user_id = g.user.idcomment.news_id = news_idcomment.content = contentif parent_id:comment.parent_id = parent_id# 6.保存评论对象到数据库中try:db.session.add(comment)db.session.commit()except Exception as e:current_app.logger.error(e)db.session.rollback()return jsonify(errno=RET.DBERR, errmsg='评论失败')# 7.返回响应，携带平路数据return jsonify(errno=RET.OK, errmsg='评论成功', data=comment.to_dict())

评论js

在这里插入代码片        // 评论回复if(sHandler.indexOf('reply_sub')>=0){var $this = $(this)var news_id = $this.parent().attr('data-newsid')var parent_id = $this.parent().attr('data-commentid')var comment = $this.prev().val()if (!comment) {alert('请输入评论内容')return}var params = {"news_id": news_id,"comment": comment,"parent_id": parent_id}$.ajax({url: "/news/news_comment",type: "post",contentType: "application/json",headers: {"X-CSRFToken": getCookie("csrf_token")},data: JSON.stringify(params),success: function (resp) {if (resp.errno == "0") {var comment = resp.data// 拼接内容var comment_html = ""comment_html += '<div class="comment_list">'comment_html += '<div class="person_pic fl">'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="comment_text fl">'comment_html += comment.contentcomment_html += '</div>'comment_html += '<div class="reply_text_con fl">'comment_html += '<div class="user_name2">' + comment.parent.user.nick_name + '</div>'comment_html += '<div class="reply_text">'comment_html += comment.parent.contentcomment_html += '</div>'comment_html += '</div>'comment_html += '<div class="comment_time fl">' + comment.create_time + '</div>'comment_html += '<a href="javascript:;" class="comment_up fr" data-commentid="' + comment.id + '" data-newsid="' + comment.news_id + '">赞</a>'comment_html += '<a href="javascript:;" class="comment_reply fr">回复</a>'comment_html += '<form class="reply_form fl" data-commentid="' + comment.id + '" data-newsid="' + news_id + '">'comment_html += '<textarea class="reply_input"></textarea>'comment_html += '<input type="button" value="回复" class="reply_sub fr">'comment_html += '<input type="reset" name="" value="取消" class="reply_cancel fr">'comment_html += '</form>'comment_html += '</div>'$(".comment_list_con").prepend(comment_html)// 请空输入框$this.prev().val('')// 关闭$this.parent().hide()//更新评论数量updateCommentCount();}else {alert(resp.errmsg)}}})}})

详情页-获取用户对评论的赞

@news_bp.route('/<int:news_id>')
@user_login_data
def news_detail(news_id):# 1.根据新闻编号，查询新闻对象try:news = News.query.get(news_id)except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.DBERR, errmsg='获取新闻失败')# 2.如果新闻对象不存在，直接抛出状态码异常if not news:abort(404)# 3.获取前6条热门新闻try:click_news = News.query.order_by(News.clicks.desc()).limit(6).all()except Exception as e:current_app.logger.error(e)# 4.将热门新闻对象列表，转成字典列表click_news_list = []for item_news in click_news:click_news_list.append(item_news.to_dict())# 5.判断用户是否收藏过该新闻is_collected = False# 用户需要登录， 并且该新闻在用户收藏过的新闻列表中if g.user:if news in g.user.collection_news:is_collected = True# 6.查询数据库中，该新闻的所有评论内容try:comments = Comment.query.filter(Comment.news_id == news_id).order_by(Comment.create_time.desc()).all()except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.DBERR, errmsg='获取评论失败')# 6.1用户点赞过的评论编号try:# 6.1.1用户点过的所有赞commentlikes = []if g.user:commentlikes =CommentLike.query.filter(CommentLike.user_id == g.user.id).all()# 6.1.2获取用户所有点赞过的评论编号mylike_comment_ids = []for commentLike in commentlikes:mylike_comment_ids.append(commentLike.comment_id)except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.DBERR, errmsg='获取点赞失败')# 7.将评论的对象列表，转成字典列表comments_list = []for comment in comments:# 将评论转成字典comm_dict = comment.to_dict()comments_list.append(comm_dict)# 添加is_like记录点赞comm_dict['is_like'] = False# 判断用户是否对评论点过赞if g.user and comment.id in mylike_comment_ids:comm_dict['is_like'] = Truedata = {"news_info": news.to_dict(),"user_info": g.user.to_dict() if g.user else "","news_list": click_news_list,"is_collected": is_collected,"comments": comments_list}return render_template('news/detail.html', data=data)

详情页-获取的点赞评论前端渲染

   <div class="comment_list_con">{# 遍历所有的评论 #}{% for comment in data.comments %}<div class="comment_list"><div class="person_pic fl">{# 判断是否有用户头像 #}{% if comment.user.avatar_url %}<img src="{{ comment.user.avatar_url }}" alt="用户图标">{% else %}<img src="../../static/news/images/worm.jpg" alt="用户图标">{% endif %}</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 }}">{# 判断评论的数量 #}{% if comment.like_count > 0 %}{{ comment.like_count }}{% else %}赞{% endif %}</a><a href="javascript:;" class="comment_reply fr">回复</a>{# 回复评论的表单 #}<from class="reply_form fl" data-newsid="{{ comment.news_id }}" data-commentid="{{ comment.id }}"><textarea  class="reply_input"></textarea><input type="submit" name="" value="回复" class="reply_sub fr"><input type="reset" name="" value="取消" class="reply_cancel fr"></from></div>{% endfor %}</div>

详情页-点赞接口与js

# 评论点赞
# 请求路径: /news/comment_like
# 请求方式: POST
# 请求参数:news_id,comment_id,action,g.user
# 返回值: errno,errmsg
@news_bp.route('/comment_like', methods=['POST'])
@user_login_data
def comment_like():# 1.判断用户是否登录了if not g.user:return jsonify(errno=RET.NODATA, errmsg='用户未登录')# 2.获取参数comment_id = request.json.get('comment_id')action = request.json.get('action')# 3.为空校验if not all([comment_id, action]):return jsonify(errno=RET.PARAMERR, errmsg='参数不全')# 4.操作类型进行校验if not action in ['add', 'remove']:return jsonify(errno=RET.DATAERR, errmsg='操作类型有误')# 5.通过评论编号查询评论对象，并判断是否存在try:comment = Comment.query.get(comment_id)except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.DBERR, errmsg='获取评论失败')# 建议换行if not comment: return jsonify(errno=RET.NODATA, errmsg='评论不存在')# 6.根据操作类型点赞或者取消点赞try:if action == 'add':# 6.1 判断用户是否有对该评论点过赞comment_like = CommentLike.query.filter(CommentLike.user_id == g.user.id,CommentLike.comment_id == comment_id).first()if not comment_like:# 创建点赞对象comment_like = CommentLike()comment_like.user_id = g.user.idcomment_like.comment_id = comment_id# 添加到数据库中db.session.add(comment_like)# 将该评论的点赞数量 +1db.session.commit()else:# 6.2 判断用户是否有对该评论点过赞comment_like = CommentLike.query.filter(CommentLike.user_id == g.user.id,CommentLike.comment_id == comment_id).first()if comment_like:# 删除点赞对象db.session.delete(comment_like)# 将该评论的点赞数量-1if comment.like_count > 0:comment.like_count -= 1db.session.commit()except Exception as e:current_app.logger.error(e)db.session.rollback()return jsonify(errno=RET.DBERR, errmsg='操作失败')# 7.返回响应return jsonify(errno=RET.OK, errmsg='操作成功')

// 点赞处理if(sHandler.indexOf('comment_up')>=0){var $this = $(this);var action = "add"if(sHandler.indexOf('has_comment_up')>=0){// 如果当前该评论已经是点赞状态，再次点击会进行到此代码块内，代表要取消点赞action = "remove"}//获取到当前点击的标签上面的, 评论编号, 新闻编号var comment_id = $(this).attr("data-commentid")// var news_id = $(this).attr("data-newsid")var params = {"comment_id": comment_id,"action": action,// "news_id": news_id}$.ajax({url: "/news/comment_like",type: "post",contentType: "application/json",headers: {"X-CSRFToken": getCookie("csrf_token")},data: JSON.stringify(params),success: function (resp) {if (resp.errno == "0") {//获取到当前标签中的点赞数量var like_count = $this.attr('data-likecount')//增加安全性校验,如果获取不到data-likecount的值,那么默认设置成0if(like_count == undefined){like_count = 0;}// 更新点赞按钮图标,并加1, 减1操作if (action == "add") {like_count = parseInt(like_count) + 1// 代表是点赞$this.addClass('has_comment_up')}else {like_count = parseInt(like_count) - 1$this.removeClass('has_comment_up')}// 更新点赞数据,重新赋值回去$this.attr('data-likecount', like_count)if (like_count == 0) {$this.html("赞")}else {$this.html(like_count)}}else if (resp.errno == "4101"){$('.login_form_con').show();}else {alert(resp.errmsg)}}})}

Day4

用户中心与资料修改

from flask import render_template
from flask import redirect, g, request, jsonifyfrom . import profile_bp
from info.utils.commons import user_login_data
from info.utils.response_code import RET
from info.models import db# 请求路径: /user/base_info
# 请求方式:GET,POST
# 请求参数:POST请求有参数,nick_name,signature,gender
# 返回值:errno,errmsg
@profile_bp.route('/base_info', methods=['GET', 'POST'])
@user_login_data
def base_info():# 1.判断请求方式，如果是get请求if request.method == 'GET':# 2.携带用户数据，渲染页面if not g.user:# 如果没有登录，重定向到首页redirect('/')return render_template('news/user_base_info.html', user_info=g.user.to_dict())else:# 3.post请求# 4.获取参数nick_name = request.json.get('nick_name')signature = request.json.get('signature')gender = request.json.get('gender')# 5.校验参数，为空校验if not all([nick_name, signature, gender]):return jsonify(errno=RET.PARAMERR, errmsg='参数不全')if not gender in ['MAN', 'WOMAN']:return jsonify(errno=RET.DATAERR, errmsg='性别异常')# 6.修改用户数据g.user.signature = signatureg.user.nick_name = nick_nameg.user.gender = genderdb.session.add(g.user)db.session.commit()# 7.返回响应return jsonify(errno=RET.OK, errmsg='修改成功')@profile_bp.route('/info')
@user_login_data
def user_info():# 1.判断用户是否登录if not g.user:return redirect('/')# 2.携带数据渲染页面data = {'user_info': g.user.to_dict()}return render_template('news/user.html', data=data)

用户头像-上传七牛

七牛配置

# -*- coding: utf-8 -*-
# flake8: noqaimport qiniu.config
from qiniu import Auth, etag, put_data, put_fileaccess_key = ''
secret_key = ''def image_storage(file_data):"""存储图片到七牛服务器:param file_data: 文件二进制码:return:"""q = Auth(access_key, secret_key)bucket_name = 'ihome-python-why2'# # 上传文件到七牛后， 七牛将文件名和文件大小回调给业务服务器。# policy = {#     'callbackUrl': 'http://your.domain.com/callback.php',#     'callbackBody': 'filename=$(fname)&filesize=$(fsize)'# }token = q.upload_token(bucket_name, None, 3600)# localfile = '../static/images/home01.jpg'# ret, info = put_file(token, None, localfile)ret, info = put_data(token, None, file_data)if info.status_code == 200:return ret.get('key')else:raise Exception('上传图片失败')if __name__ == "__main__":with open('../static/images/home01.jpg', 'rb') as f:file_data = f.read()image_storage(file_data)

头像上传逻辑

# 取/设置,用户头像上传
# 请求路径: /user/pic_info
# 请求方式:GET,POST
# 请求参数:无, POST有参数,avatar
# 返回值:GET请求: user_pci_info.html页面,data字典数据, POST请求: errno, errmsg,avatar_url
@profile_bp.route('/pic_info', methods=['GET', 'POST'])
@user_login_data
def pic_info():# 1.判断请求方式，如果是get请求if request.method == 'GET':# 2.携带用户数据，渲染页面return render_template('news/user_pic_info.html', user_info=g.user.to_dict())# 3.如果是post请求# 4.获取参数avatar = request.files.get('avatar')# 5.为空校验if not avatar:return jsonify(errno=RET.PARAMERR, errmsg='图片不能为空')# 6.上传图像，判断图片是否上传成功try:image_name = image_storage(avatar.read())except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.THIRDERR, errmsg='七牛云异常')if not image_name:return jsonify(errno=RET.NODATA, errmsg='图片上传失败')# 7.将图片设置到用户对象g.user.avatar_url = image_name# 8.返回响应data = {'avatar_url': constants.QINIU_DOMIN_PREFIX + image_name}return jsonify(errno=RET.OK, errmsg='上传成功', data=data)

前端提交图片ajax

$(function () {$(".pic_info").submit(function (e) {e.preventDefault()//TODO 上传头像// 上传头像,表单提交和其他提交方式不一样// /*$(this).ajaxSubmit({url: "/user/pic_info",type: "POST",headers: {"X-CSRFToken": getCookie('csrf_token')},success: function (resp) {if (resp.errno == "0") {$(".now_user_pic").attr("src", resp.data.avatar_url)$(".user_center_pic>img", parent.document).attr("src", resp.data.avatar_url)$(".user_login>img", parent.document).attr("src", resp.data.avatar_url)}else {alert(resp.errmsg)}}})// */})
})

提交新闻

function getCookie(name) {var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");return r ? r[1] : undefined;
}$(function () {$(".release_form").submit(function (e) {e.preventDefault()// 发布新闻, ajaxSubmit属于表单提交// /*$(this).ajaxSubmit({//是为了处理富文本(可以有颜色,大小)beforeSubmit: function (request) {// 在提交之前，对参数进行处理for(var i=0; i<request.length; i++) {var item = request[i]if (item["name"] == "content") {item["value"] = tinyMCE.activeEditor.getContent()}}},url: "/user/news_release",type: "POST",headers: {"X-CSRFToken": getCookie('csrf_token')},success: function (resp) {if (resp.errno == "0") {// 选中索引为6的左边单菜单window.parent.fnChangeMenu(6)// 滚动到顶部window.parent.scrollTo(0, 0)}else {alert(resp.errmsg)}}})// */})
})

用户新闻列表

# 用户新闻列表
# 请求路径: /user/news_list
# 请求方式:GET
# 请求参数:p
# 返回值:GET渲染user_news_list.html页面
@profile_bp.route('/news_list', methods=['GET', 'POST'])
@user_login_data
def news_list():# 1.获取参数, ppage = request.args.get('p')# 2.参数类型转换try:page = int(page)except Exception as e:page = 1# 3.分页查询用户发布的新闻try:paginate = News.query.filter(News.user_id == g.user.id).order_by(News.create_time.desc()).paginate(page, 10, False)except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.DBERR, errmsg='获取新闻失败')# 4.获取分页对象中的属性，总页数，当前页，当前页对象列表totalPage = paginate.pagescurrentPage = paginate.pageitems = paginate.items# 5.将对象列表，转换成字典列表news_list = []for news in items:news_list.append(news.to_dict())# 6.拼接数据，渲染页面data = {'totalPage': totalPage,'currentPage': currentPage,'news_list': news_list}# 7.携带数据，返回响应return render_template('news/user_news_list.html', data=data)

前端

 <ul class="article_list">{# 遍历用户发布的新闻 #}{% for news in data.news_list %}{% if news.status == 0 %}<li><a href="user_news_release.html">{{ news.title }}</a><em class="pass">已通过</em><span>{{ news.create_time }}</span></li>{% elif news.status == 1 %}<li><a href="#">{{ news.title }}</a><em class="review">审核中</em><span>{{ news.create_time }}</span></li>{% else %}<li><a href="#">{{ news.title }}</a><em class="nopass">未通过</em><span>{{ news.create_time }}</span><b>未通过原因：{{ news.reason }}</b></li>{% endif %}{% endfor %}</ul>

关注与取消关注

# 关注与取消关注
# 请求路径: /news/followed_user
# 请求方式: POST
# 请求参数:user_id,action
# 返回值: errno, errmsg
@news_bp.route('/followed_user', methods=['POST'])
@user_login_data
def followed_user():# 1.判断用户是否登录if not g.user:return jsonify(errno=RET.NODATA, errmsg='用户未登录')# 2.获取参数author_id = request.json.get('user_id')action = request.json.get('action')# 3.校验参数，为空校验if not all([author_id, action]):return jsonify(errno=RET.PARAMERR, errmsg='参数不全')# 4.检验操作类型if not action in ['follow', 'unfollow']:return jsonify(errno=RET.DATAERR, errmsg='操作类型有误')# 5.根据作者编号取出作者对象，判断作者对象是否存在try:author = User.query.get(author_id)except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.DBERR, errmsg='获取作者失败')if not author:return jsonify(errno=RET.NODATA, errmsg='该作者不存在')# 6.根据操作类型，进行关注或者取消if action == 'follow':# 关注# 6.1判断当前用户是否关注了该作者if not g.user in author.followers:author.followers.append(g.user)else:# 取消关注# 6.2 判断当前用户是否关注了该作者if g.user in author.followers:author.followers.remove(g.user)# 7.返回响应return jsonify(errno=RET.OK, errmsg='操作成功')

随后需要添加 文章详情中的后端，当前作者是否被用户所关注

  # 8.判断登录的用户是否关注了新闻作者is_followed = Falseif g.user and news.user:if g.user in news.user.followers:is_followed = Truedata = {"news_info": news.to_dict(),"user_info": g.user.to_dict() if g.user else "","news_list": click_news_list,"is_collected": is_collected,"comments": comments_list,"is_followed": is_followed}return render_template('news/detail.html', data=data)

前端修改关注的显示

 {% if data.news_info.author %}<div class="author_card">{# 判断是否有作者头像 #}{% if data.news_info.author.avatar_url %}<a href="#" class="author_pic"><img src="{{ data.news_info.author.avatar_url }}" alt="author_pic"></a>{% else %}<a href="#" class="author_pic"><img src="../../static/news/images/user_pic.png" alt="author_pic"></a>{% endif %}<a href="#" class="author_name">{{ data.news_info.author.nick_name }}</a><div class="author_resume">{{ data.news_info.author.signature }}</div><div class="writings"><span>总篇数</span><b>{{ data.news_info.author.news_count }}</b></div><div class="follows"><span>粉丝</span><b>{{ data.news_info.author.followers_count }}</b></div><a href="javascript:;" class="focus fr" data-userid="{{ data.news_info.author.id }}" style="display: {% if data.is_followed %} none {% else %} block {% endif %}">关注</a><a href="javascript:;" class="focused fr" data-userid="{{ data.news_info.author.id }}" style="display: {% if data.is_followed %} block {% else %} none {% endif %}"><span class="out">已关注</span><span class="over">取消关注</span></a></div>{% endif %}