html xinwen轮播,新闻首页实现 -- 4. 轮播图以及热门文章功能实现

四、新闻轮播图功能

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.前端代码实现

// 在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 = `

`;

tab_content = `

`;

} else {

content = `

`;

tab_content = `

`;

}

$(".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.前端代码实现

{% for hot_new in hot_news %}

{{ hot_new.news.title }}

{% endfor %}