1.3用户列表 and 新闻列表

1、实现效果:(新闻列表和这个基本一样,就不单独开博客了

2、老三步:

  1.1将统计页面放入templates/admin中

  

  1.2、修改页面的调用路径

  

   1.3后台视图函数

 1 @admin_blue.route('/user_list')
 2 def user_list():
 3     #接收前端传来得p
 4     page = request.args.get("p")
 5     try:
 6         # 将接收来的参数强转为int类型
 7         page = int(page)
 8     except Exception as e:
 9         current_app.logger.error(e)
10         # 二次保障设置默认值为1
11         page = 1
12     try:
13         # 获取用户收藏的新闻列表并使用分页器接收
14         paginate = User.query.filter(User.is_admin == False).paginate(page=page, per_page=constants.ADMIN_USER_PAGE_MAX_COUNT)
15         #获取总数据
16         userList = paginate.items
17         #页面总数
18         total_page = paginate.pages
19         #当前页面数
20         current_page = page
21     except Exception as e:
22         current_app.logger.error(e)
23         return jsonify(errno=RET.DATAERR, errmsg="查询失败")
24     #传递上下文
25     context = {
26         "userList":userList,
27         "current_page":current_page,
28         "total_page":total_page
29     }
30     return render_template("admin/user_list.html",context=context)

 3、前端代码

 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/admin/css/reset.css">
 7     <link rel="stylesheet" type="text/css" href="../../static/admin/css/main.css">
 8     <link rel="stylesheet" href="../../static/admin/css/jquery.pagination.css">
 9     <script type="text/javascript" src="../../static/admin/js/jquery-1.12.4.min.js"></script>
10     <script type="text/javascript" src="../../static/admin/js/jquery.pagination.min.js"></script>
11 </head>
12 <body>
13     <div class="breadcrub">
14             当前位置:用户管理>用户列表
15         </div>
16         <div class="pannel">
17             <table class="common_table">
18                 <tr>
19                     <th>用户名</th>
20                     <th>电话</th>
21                     <th>注册时间</th>
22                     <th>上次登录时间</th>
23                 </tr>
24 
25                 {% for user in context.userList %}
26                     <tr>
27                         <td>{{ user.nick_name }}</td>
28                         <td>{{ user.mobile }}</td>
29                         <td>{{ user.create_time }}</td>
30                         <td>{{ user.last_login }}</td>
31                     </tr>
32                 {% endfor %}
33 
34             </table>
35         </div>
36 
37         <div class="box">
38             <div id="pagination" class="page"></div>
39         </div>
40 
41         <script>
42             $(function() {
43                 $("#pagination").pagination({
44                     currentPage: {{ context.current_page }},
45                     totalPage: {{ context.total_page }},
46                     callback: function(current) {
47                         window.location.href = '/admin/user_list?p=' + current;
48                     }
49                 });
50             });
51         </script>
52 </body>
53 </html>

4、新闻列表

  新闻列表得显示和上面用户列表得显示是差不多得,只不过新闻列表有一个搜索得功能,如下图

  

   搜索功能需要用到双分支:也就是

              分支一:在用到搜索功能(也就是当有值传给后台时)需要显示得内容

              分支二:正常得显示

                  我们只需要稍微改一下数据库查询就可以了,上代码

 1     try:
 2         #当keyword有值传入时
 3         if keyword:
 4             paginate = News.query.filter(News.title.contains(keyword),News.status != 0).paginate(page=page, per_page=constants.ADMIN_USER_PAGE_MAX_COUNT)
 5         else:
 6             # 获取用户收藏的新闻列表并使用分页器接收
 7             paginate = News.query.filter(News.status != 0).paginate(page=page, per_page=constants.ADMIN_USER_PAGE_MAX_COUNT)
 8 
 9         news_list = paginate.items
10         total_page = paginate.pages
11         current_page = page
原文地址:https://www.cnblogs.com/Hdwmsyqdm/p/13962886.html