新闻类型栏

也就是：

实现这块内容采用类似于django中的方法。
1.后端代码：
在index/views.py/index()中

    '''选则栏'''
    category = Category.query.all()        #查询所有的选项
获取后加到data中
返回到前端页面

2.前端显示

<ul class="menu fl">
         {% for cate in data.category %}
               <li class="{% if loop.index == 1 %}active{% endif %}" data-cid="{{ cate.id }}"><a href="javascript:;">{{ cate['name'] }}</a></li>
         {% endfor %}
</ul>

分析：在后端获取所有的选项数据，返回到前端，在前端for循环出来。
并且还用添加

data_cid属性值：category.id
默认的class值：active(使用loop.index判断是否等于1，就显示)

在之前的django中使用的是前端点击时，后端根据点击的信息查询后，将数据和选项再次返回到前端。进行判断class值。

这里使用js处理class值的变换，在加载index页面的时候，会加载两个js文件：main.js和index.js

index.js:

也就是说当进入index页面时，这个函数就会调用。默认显示第一页
获取当前的新闻类型的id值，如果不一样的话更新该值，重新调用更新新闻的函数。

新闻列表的显示

在之前的django中显示内容就是在后端查询好后发送到前端，如果有选项的点击就在该选项上加上链接，以get方式请求后端，后端返回相应的信息，页面也会刷新。
而这个采用ajax的方式，不再刷新页面，有了更好的用户体验。

具体的流程：

在上一步中每当用户点击了一个不同的li选项，就调用获取新闻的函数updateNewsData()，那么在index.js中编写该函数：用于根据用户点击的新闻类型发送ajax请求到后端获取数据。

function updateNewsData() {
    // TODO 更新新闻数据
    var params = {
        'page':1,
        'per_page':10,
        'cid':currentCid
    }
    $.get('/newslist',params,function (resp) {

        if (resp){
            //清空原来数据
            $(".list_con").html("")
            //显示数据
            for(var i=0;i < resp.news_list.length;i++){
                //获取单个新闻信息
                var news = resp.news_list[i]
                //拼接新闻内容
                var content = '<li>'
                content+='<a href="#" class="news_pic fl"><img src="' + news.index_image_url + '?imageView2/1/w/170/h/170"></a>'
                content+='<a href="#" class="news_title fl">'+news.title+'</a>'
                content+='<a href="#" class="news_detail fl">'+news.digest+'</a>\n'
                content+='<div class="author_info fl">\n' +
                    '                    <div class="author fl">\n' +
                    // '                        <img src="../../static/news/images/person.png" alt="author">\n' +
                    '                        <a href="#">来源：'+news.source+'</a>\n' +
                    '                    </div>\n' +
                    '                    <div class="time fl">'+news.create_time+'</div>\n' +
                    '                </div>'
                content+='</li>'
                $('.list_con').append(content)
            }
        }
    })
}

在index/views.py下，创建新的路由和函数与上边的请求地址一致

#新闻列表
@index_blue.route('/newslist')
def get_news_list():
    # 1.获取参数
    arg_list = request.args
    page = arg_list.get('page',1)       #page参数：第几页，默认为1
    per_page = arg_list.get('per_page',constants.HOME_PAGE_MAX_NEWS)  #一页多少数据

    # cid:新闻类别的编号
    category_id = arg_list.get('cid',1)


    # 2.校验参数
    try:
        page = int(page)
        per_page = int(per_page)
    except Exception as e:
        current_app.logger.error(e)
        return jsonify(errno = RET.PARAMERR,errmsg = '参数错误')

    # 3.查询数据
    filters = []
    if category_id != "1":              #id为1时，显示的时所有数据，即filter=[]
        filters.append(News.category_id == category_id)

    try:
        # 查询所有的数据并分页，返回一个paginate对象
        paginate = News.query.filter(*filters).order_by(News.create_time.desc()).paginate(page,per_page,False)
        # 通过paginate对象获取查询的数据
        items = paginate.items
        # 获取总页数
        total_page = paginate.pages
        # 当前页
        current_page = paginate.page
    except Exception as e:

        current_app.logger.error(e)
        return jsonify(errno=RET.PARAMERR, errmsg='数据查询失败')
    news_list = []
    for news in items:
        news_list.append(news.to_basic_dict())

    return jsonify(errno=RET.OK, errmsg='OK',
                   #数据
                   total_page=total_page,      #总页数
                   current_page=current_page,    #当前页
                   news_list=news_list,         #新闻列表
                   cid = category_id        #新闻类型id
                   )

在index.html中删除静态的新闻数据：
分析：

当用户第一次访问index时，触发index.js，直接调用updateNewsData(),这时默认显示第一页的数据，并且新闻类型也为默认为id为1的“最新”。
以get方式发起ajax请求给后端。
参数：page：显示第几页的内容，per_page:每页数据的个数，cid：当前的新闻类型
在后端获取这些个参数，默认为1
判断传过来的新闻类型的id是否为1，如果不为1，将这个id值加到一个filters列表中
在数据库中根据上一步获取的列表filters进行获取数据，并根据创建时间排序，转化为paginate对象(将page和per_page传进去)。
通过paginate对象获取要显示数据，获取总页数，获取当前页
将上一步获取到的数据遍历转换为字典类型，加到新的列表中。
以jsonify的形式返回
- errno
- errmsg
- 数据
在回调函数的参数resp就是后端返回的数据
首先清空显示新闻列表ul的数据，遍历这个resp.news_list中的数据，在循环中获取单个news对象，使用js拼接html代码，加上传过来的数据库中的数据，最后将整个变量content加到index.html中的显示新闻信息的ul中