四、新闻轮播图功能
1.分析
请求方法：GET
url定义：/news/banners/
请求参数：前端无需传入参数
向前端返回的数据格式为json格式，返回实例如下：
{
"errno": "0"
"errmsg": "",
"data": {
"banners": [
{
"image_url": "/media/jichujiaochen.jpeg",
"news_id": 221,
"news_title": "Python 算法 快速排序"
},
{
"image_url": "/media/python_advanced.jpg",
"news_id": 707,
"news_title": "Python 序列与映射的解包操作"
}
]
},
}
2.后端代码实现
- 导入测试数据
INSERT INTO `tb_banner` VALUES (1, '2018-12-17 15:34:11.000000', '2018-12-17 15:34:11.000000', 0, '/media/jichujiaochen.jpeg', 1, 221);
INSERT INTO `tb_banner` VALUES (2, '2018-12-17 15:34:11.000000', '2018-12-17 15:34:11.000000', 0, '/media/python_advanced.jpg', 2, 707);
INSERT INTO `tb_banner` VALUES (3, '2018-12-17 15:34:11.000000', '2018-12-17 15:34:11.000000', 0, '/media/python_function.jpg', 3, 869);
INSERT INTO `tb_banner` VALUES (4, '2018-12-17 15:34:11.000000', '2018-12-17 15:34:11.000000', 0, '/media/python_gui.jpg', 4, 884);
INSERT INTO `tb_banner` VALUES (5, '2018-12-17 15:34:11.000000', '2018-12-17 15:34:11.000000', 0, '/media/linux.jpg', 5, 918);
# 在news目录下views.py文件中创建如下类视图：
# 轮播图视图
class NewsBannerView(View):
"""
1.创建一个类视图 NewsBannerView
2.明确请求方式：
-- 请求类型 GET
-- 传参方式 无
-- url定义 /news/banner/
3.获取前端参数：
-- 无
4.业务处理：
--是否需要校验 不需要
--是否需要储存以及储存方式 不需要
--其他：
--数据库读取数据
--序列化
5.返回前端参数：
-- to_json_data(errno= ,errmsg=, data=)
"""
def get(self, request):
banners = models.Banner.objects.select_related('news').\
only('image_url','news__title','news__id').filter(is_delete=False)[0:constants.SHOW_BANNER_COUNT]
# 序列化输出
banners_info_list = []
for banner in banners:
banners_info_list.append({
'image_url':banner.image_url,
'news_id':banner.news.id,
'news_title':banner.news.title,
})
# 返回前端参数
data={
'banners':banners_info_list,
}
return to_json_data(data=data)
# 在news目录下constants.py中定义如下常量：
# 每页轮播数
SHOW_BANNER_COUNT = 5
# 在news目录下urls.py中定义如下路由：
urlpatterns = [
path('banners/', views.NewsBanner.as_view(), name='news_banner'),
]
3.前端代码实现
<!-- 在templates/news/index.html中 -->
<!-- banner start -->
<div class="banner">
<ul class="pic">
<!--淡入淡出banner-->
</ul>
<a href="javascript:void(0);" class="btn prev">
<i class="PyWhich py-arrow-left"></i></a>
<a href="javascript:void(0);" class="btn next">
<i class="PyWhich py-arrow-right"></i></a>
<ul class="tab">
<!-- 按钮数量必须和图片一致 -->
</ul>
</div>
<!-- banner end -->
// 在static/js/news/index.js文件中
// 新闻轮播图功能
fn_load_banner();
/*=== bannerStart ===*/
let $banner = $('.banner');
let $picLi = $(".banner .pic li");
let $prev = $('.banner .prev');
let $next = $('.banner .next');
let $tabLi = $('.banner .tab li');
let index = 0;
// 小原点
$tabLi.click(function () {
index = $(this).index();
$(this).addClass('active').siblings('li').removeClass('active');
$picLi.eq(index).fadeIn(1500).siblings('li').fadeOut(1500);
});
// 点击切换上一张
$prev.click(function () {
index--;
if (index < 0) {
index = $tabLi.length - 1
}
$tabLi.eq(index).addClass('active').siblings('li').removeClass('active');
$picLi.eq(index).fadeIn(1500).siblings('li').fadeOut(1500);
}).mousedown(function () {
return false
});
$next.click(function () {
auto();
}).mousedown(function () {
return false
});
// 图片向前滑动
function auto() {
index++;
index %= $tabLi.length;
$tabLi.eq(index).addClass('active').siblings('li').removeClass('active');
$picLi.eq(index).fadeIn(3000).siblings('li').fadeOut(3000);
}
// 定时器
let timer = setInterval(auto, 2000);
$banner.hover(function () {
clearInterval(timer)
}, function () {
auto();
});
function fn_load_banner() {
$.ajax({
// 请求地址
url: "/news/banners/", // url尾部需要添加/
// 请求方式
type: "GET",
async: false
})
.done(function (res) {
if (res.errno === "200") {
let content = ``;
let tab_content = ``;
res.data.banners.forEach(function (one_banner, index) {
if (index === 0){
content = `
<li style="display:block;"><a href="javascript:void(0);">
<img src="${one_banner.image_url}" alt="${one_banner.news_title}"></a></li>
`;
tab_content = `<li class="active"></li>`;
} else {
content = `
<li><a href="javascript:void(0);"><img src="${one_banner.image_url}" alt="${one_banner.news_title}"></a></li>
`;
tab_content = `<li></li>`;
}
$(".pic").append(content);
$(".tab").append(tab_content)
});
} else {
// 登录失败，打印错误信息
message.showError(res.errmsg);
}
})
.fail(function () {
message.showError('服务器超时，请重试！');
});
}
/*=== bannerEnd ===*/
五、热门新闻推荐功能
1.分析
请求方法：GET
url定义：/news/index/
请求参数：前端无需传入参数
热门新闻推荐功能直接通过模版渲染的方式来实现。
2.后端代码实现
- 导入测试数据
INSERT INTO `tb_hotnews` VALUES (836, '2018-12-20 06:50:24.535637', '2018-12-20 06:50:24.535686', 0, 3, 54);
INSERT INTO `tb_hotnews` VALUES (837, '2018-12-20 06:50:24.547275', '2018-12-20 06:50:24.547324', 0, 1, 53);
INSERT INTO `tb_hotnews` VALUES (838, '2018-12-20 06:50:24.561432', '2018-12-20 06:50:24.561481', 0, 1, 52);
INSERT INTO `tb_hotnews` VALUES (839, '2018-12-20 06:50:24.574041', '2018-12-20 06:50:24.574090', 0, 3, 51);
INSERT INTO `tb_hotnews` VALUES (840, '2018-12-20 06:50:24.584482', '2018-12-20 06:50:24.584545', 0, 3, 50);
# 新闻首页视图
class NewsIndex(View):
"""
渲染新闻首页
-- 新闻标签
"""
def get(self, request):
"""
:param request:
:return:
"""
tags = models.Tag.objects.only('name','id').filter(is_delete=False)
hot_news = models.HotNews.objects.select_related('news').\
only('news__title', 'news__image_url', 'news__id').filter(is_delete=False).\
order_by('priority', '-news__clicks')[0:constants.SHOW_HOTNEWS_COUNT]
return render(request, 'news/index.html', locals())
# 在news目录下constants.py中定义如下常量：
# 显示热门新闻条数
SHOW_HOTNEWS_COUNT = 3
3.前端代码实现
<!-- recommend-news start -->
<ul class="recommend-news">
{% for hot_new in hot_news %}
<li>
<a href="#" target="_blank">
<div class="recommend-thumbnail">
<img src="{{ hot_new.news.image_url }}" alt="title">
</div>
<p class="info">{{ hot_new.news.title }}</p>
</a>
</li>
{% endfor %}
</ul>
<!-- recommend-news end -->
网友评论