效果如下：根据点击关注作者名字能进入相对应作者得个人页面，同时显示当前作者所发布得所有新闻
1、创建视图函数
2、修改关注页面关注用户名字得调用
3、完善后台得代码
1 @user_blue.route("/other_info") 2 @user_login_data 3 def other_info(): 4 #获取当前用户 5 user = g.user 6 #接收前端传来得新闻作者id 7 user_id = request.args.get("id") 8 #判断是否接收成功 9 if not user_id: 10 abort(404) 11 other = None 12 #查找与接收到得id相同得新闻 13 try: 14 other = User.query.filter(User.id == user_id).first() 15 except Exception as e: 16 current_app.logger.error(e) 17 #判断是否有查询到数据 18 if not other: 19 abort(404) 20 try: 21 #获取接收到得id作者所发布得新闻列表 22 new_list = News.query.filter(News.user_id == user_id).all() 23 except Exception as e: 24 current_app.logger.error(e) 25 #设置关注显示变量 26 is_followed = False 27 #在有用户登录得前提下 28 if g.user: 29 #判断新闻作者得粉丝中是否有当前登录用户得id 30 #写法二用户的关注列表里是否有新闻作者 31 #if not user_releaser in user.followed 32 if other.followers.filter(User.id == user.id).count() > 0: 33 is_followed = True 34 #传递上下文 35 context = { 36 "user": user.to_dict(), 37 "other":other.to_dict(), 38 "is_followed":is_followed, 39 "new_list":new_list, 40 } 41 return render_template("news/other.html",context = context )
4、其他用户发布新闻显示：
1 @user_blue.route('/other_news_list') 2 def other_news_list(): 3 # 获取页数 4 p = request.args.get("p", 1) 5 #获取前端传来得用户id 6 user_id = request.args.get("user_id") 7 try: 8 #防止id不为字符或者数字类型 9 p = int(p) 10 except Exception as e: 11 current_app.logger.error(e) 12 return jsonify(errno=RET.PARAMERR, errmsg="参数错误") 13 #校验参数是否齐全 14 if not all([p, user_id]): 15 return jsonify(errno=RET.PARAMERR, errmsg="参数错误") 16 17 try: 18 #查询用户id 19 user = User.query.get(user_id) 20 except Exception as e: 21 current_app.logger.error(e) 22 return jsonify(errno=RET.DBERR, errmsg="数据查询错误") 23 #没有用户登录时返回一个json数据 24 if not user: 25 return jsonify(errno=RET.NODATA, errmsg="用户不存在") 26 #分页 27 try: 28 #查询作者发布得新闻 29 paginate = News.query.filter(News.user_id == user.id).paginate(page=p,per_page=1) 30 #所有数据 31 news_li = paginate.items 32 #当前页 33 current_page = paginate.page 34 #总页数 35 total_page = paginate.pages 36 except Exception as e: 37 current_app.logger.error(e) 38 return jsonify(errno=RET.DBERR, errmsg="数据查询错误") 39 40 news_dict_li = [] 41 #用TO_review_dict()函数将集合转换成列表 42 for news_item in news_li: 43 news_dict_li.append(news_item.to_review_dict()) 44 #传递上下文 45 data = {"news_list": news_dict_li, 46 "total_page": total_page, 47 "current_page": current_page 48 } 49 return jsonify(errno=RET.OK, errmsg="OK", data=data)
5、前端代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用户概况</title> 6 <link rel="stylesheet" type="text/css" href="../../static/news/css/reset.css"> 7 <link rel="stylesheet" type="text/css" href="../../static/news/css/jquery.pagination.css"> 8 <link rel="stylesheet" type="text/css" href="../../static/news/css/main.css"> 9 <script type="text/javascript" src="../../static/news/js/jquery-1.12.4.min.js"></script> 10 <script type="text/javascript" src="../../static/news/js/jquery.pagination.min.js"></script> 11 <script type="text/javascript" src="../../static/news/js/other.js"></script> 12 </head> 13 <body> 14 <div class="header_con"> 15 <div class="header"> 16 <a href="{{ url_for("index.index") }}" class="logo fl"><img src="../../static/news/images/logo.png" alt="logo"></a> 17 <div class="user_login fr" style="display: block;"> 18 <img src="{% if context.user.avatar_url %}{{ context.user.avatar_url }}{% else %}../../static/news/images/person01.png{% endif %}" class="lgin_pic"> 19 <a href="{{ url_for("user.user_info") }}" id="nick_name">{{ context.user.nick_name }}</a> 20 <a href="javascript:;" onclick="logout()">退出</a> 21 </div> 22 </div> 23 </div> 24 25 <div class="conter_con"> 26 <div class="user_menu_con fl"> 27 28 <div class="user_center_pic"> 29 <img src="{% if context.other.avatar_url %} 30 {{ context.other.avatar_url }} 31 {% else %} 32 ../../static/news/images/user_pic.png 33 {% endif %}" alt="用户图片"> 34 </div> 35 <div class="user_center_name">{{ context.other.nick_name }}</div> 36 37 <ul class="other_detail"> 38 <li>性 别：{% if context.other.gender == "MAN" %}男 39 {% else %}女 40 {% endif %}</li> 41 <li>签 名：{% if context.other.signature %} 42 {{ context.other.signature }} 43 {% else %} 44 这个人很懒，什么都没留下 45 {% endif %}</li> 46 </ul> 47 48 <div class="focus_other"> 49 <a href="javascript:;" class="focus block-center" data-userid="{{ context.other.id }}" style="display: {% if context.is_followed %}none 50 {% else %}block 51 {% endif %}">关注</a><br> 52 <a href="javascript:;" class="focused block-center" data-userid="{{ context.other.id }}" style="display: {% if context.is_followed %}block 53 {% else %}none 54 {% endif %}"><span class="out">已关注</span><span class="over">取消关注</span></a> 55 </div> 56 57 </div> 58 59 <div class="user_con fr"> 60 <div class="other_collect"> 61 <h3>他的文章</h3> 62 <ul class="article_list"> 63 {% for news in context.new_list %} 64 <li><a href="#">{{ news.title }}</a><span>{{ news.create_time }}</span></li> 65 {% endfor %} 66 </ul> 67 68 <div id="pagination" class="page"></div> 69 <script> 70 $(function(){ 71 $("#pagination").pagination({ 72 currentPage: 2, 73 totalPage: 3, 74 callback: function(current) { 75 getNewsList(current); 76 } 77 }); 78 }); 79 </script> 80 </div> 81 82 </div> 83 </div> 84 <div class="footer"> 85 <div class="footer_links"> 86 <a href="">关于我们</a> 87 <span>|</span> 88 <a href="">联系我们</a> 89 <span>|</span> 90 <a href="">招聘人才</a> 91 <span>|</span> 92 <a href="">友情链接</a> 93 </div> 94 <p class="copyright"> 95 CopyRight ? 2018 新经资讯信息技术有限公司 All Rights Reserved<br /> 96 电话：010-****888 京ICP备*******8号 97 </p> 98 </div> 99 100 <!-- 登录表单 --> 101 <form class="login_form_con"> 102 <div class="login_form"> 103 <div class="login_title"> 104 <h3>登 录</h3> 105 <a href="javascript:;" class="shutoff"></a> 106 </div> 107 <div class="form_group"> 108 <input type="text" name="username" autocomplete="off"> 109 <div class="input_tip">用户名/手机号</div> 110 </div> 111 <div class="form_group"> 112 <input type="password" name="password"> 113 <div class="input_tip">密码(不少于6位)</div> 114 </div> 115 <input type="submit" name="" value="登 录" class="input_sub"> 116 <div class="down_link">还没有账号？<a href="#" class="to_register">立即注册</a></div> 117 </div> 118 <div class="mask"></div> 119 </form> 120 121 <!-- 注册表单 --> 122 <form class="register_form_con"> 123 <div class="register_form"> 124 <div class="register_title"> 125 <h3>注 册</h3> 126 <a href="javascript:;" class="shutoff"></a> 127 </div> 128 <div class="form_group"> 129 <input type="text" name="username" autocomplete="off" class="phone_input"> 130 <div class="input_tip">手机号</div> 131 <div class="error_tip">手机号不能为空</div> 132 </div> 133 <div class="form_group"> 134 <input type="password" name="code_pwd" class="code_pwd"> 135 <div class="input_tip">手机验证码</div> 136 <a href="javascript:;" class="get_code">点击获取验证码</a> 137 <div class="error_tip">验证码不能为空</div> 138 </div> 139 <div class="form_group"> 140 <input type="password" name="password" class="pass_input"> 141 <div class="input_tip">密码(不少于6位)</div> 142 <div class="error_tip">密码不能为空</div> 143 </div> 144 <div class="form_group"> 145 <input type="password" name="code_pwd" class="code_pwd"> 146 <div class="input_tip">图形验证码</div> 147 <img src="../../static/news/images/pic_code.png" class="get_pic_code"> 148 <div class="error_tip">图形码不能为空</div> 149 </div> 150 151 <div class="form_group2 clearfix"> 152 <input type="checkbox" class="agree_input" checked> 153 <p>同意使用条款，并已阅读"跟帖评论自律管理承诺书"</p> 154 <div class="error_tip">请勾选</div> 155 </div> 156 <input type="submit" name="" value="注 册" class="input_sub"> 157 <div class="down_link">已有账号？<a href="#" class="to_login">立即登录</a></div> 158 </div> 159 <div class="mask"></div> 160 </form> 161 </body> 162 </html>
6、js代码
1 // 解析url中的查询字符串 2 function decodeQuery(){ 3 var search = decodeURI(document.location.search); 4 return search.replace(/(^?)/, '').split('&').reduce(function(result, item){ 5 values = item.split('='); 6 result[values[0]] = values[1]; 7 return result; 8 }, {}); 9 } 10 11 $(function(){ 12 // 页面加载完毕，获取新闻列表 13 getNewsList(1); 14 15 // TODO 关注当前作者 16 $(".focus").click(function () { 17 18 }) 19 20 // TODO 取消关注当前作者 21 $(".focused").click(function () { 22 23 }) 24 }) 25 26 // TODO 获取新闻列表 27 function getNewsList(page) { 28 var query = decodeQuery() 29 var params = { 30 "p": page, 31 "user_id": query["id"] 32 } 33 $.get("/user/other_news_list", params, function (resp) { 34 if (resp.errno == "0") { 35 // 先清空原有的数据 36 $(".article_list").html(""); 37 // 拼接数据 38 for (var i = 0; i<resp.data.news_list.length; i++) { 39 var news = resp.data.news_list[i]; 40 var html = '<li><a href="/news/'+ news.id +'" target="_blank">' + news.title + '</a><span>' + news.create_time + '</span></li>' 41 // 添加数据 42 $(".article_list").append(html) 43 } 44 // 设置页数和总页数 45 $("#pagination").pagination("setPage", resp.data.current_page, resp.data.total_page); 46 }else { 47 alert(resp.errmsg) 48 } 49 }) 50 51 }