- 新闻类型栏
新闻类型栏
也就是：
实现这块内容采用类似于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中
第一次访问：
点击股市：
网友评论