一个网站,主要是由【前端】和【后台】两部分组成。
前端
主要是包括HTML
index.html
{% extends 'base/front_base.html' %}
{% load news_filters %}
{% block title %}
小饭桌
{% endblock %}
{% block head %}
<link rel="stylesheet" href="{% static 'css/news/index.min.css' %}">
<script src="{% static 'arttemplate/template-web.js' %}"></script>
<script src="{% static 'js/index.min.js' %}"></script>
<script id="news-item" type="text/html">
{% verbatim %}
{{ each newses news index }}
<li>
<div class="thumbnail-group">
<a href="/news/{{ news.id }}/">
<img src="{{ news.thumbnail }}" alt="">
</a>
</div>
<div class="news-group">
<p class="title">
<a href="/news/{{ news.id }}/">{{ news.title }}</a>
</p>
<p class="desc">
{{ news.desc }}
</p>
<p class="more">
<span class="category">{{ news.category.name }}</span>
<span class="pub-time">{{ news.pub_time|timeSince }}</span>
<span class="author">{{ news.author.username }}</span>
</p>
</div>
</li>
{{ /each }}
{% endverbatim %}
</script>
{% endblock %}
{% block main %}
<div class="main">
<div class="wrapper">
<div class="main-content-wrapper">
<div class="banner-group" id="banner-group">
<ul class="banner-ul" id="banner-ul">
{% for banner in banners %}
<li>
<a href="{{ banner.link_to }}">
<img src="{{ banner.image_url }}" alt="">
</a>
</li>
{% endfor %}
</ul>
<span class="arrow left-arrow">‹</span>
<span class="arrow right-arrow">›</span>
<div class="page-control-group">
<ul class="page-control">
</ul>
</div>
</div>
<div class="list-outer-group">
<ul class="list-tab">
<li data-category="0" class="active"><a href="javascript:void(0);">最新资讯</a></li>
{% for category in categories %}
<li data-category="{{ category.pk }}"><a href="javascript:void(0);">{{ category.name }}</a></li>
{% endfor %}
</ul>
<ul class="list-inner-group">
{% for news in newses %}
<li>
<div class="thumbnail-group">
<a href="{% url 'news:news_detail' news_id=news.pk %}">
<img src="{{ news.thumbnail }}" alt="">
</a>
</div>
<div class="news-group">
<p class="title">
<a href="{% url 'news:news_detail' news_id=news.pk %}">{{ news.title }}</a>
</p>
<p class="desc">
{{ news.desc }}
</p>
<p class="more">
<span class="category">{{ news.category.name }}</span>
<span class="pub-time">{{ news.pub_time|time_since }}</span>
<span class="author">{{ news.author.username }}</span>
</p>
</div>
</li>
{% endfor %}
</ul>
<div class="load-more-group">
<button class="load-more" id="load-more-btn">查看更多</button>
</div>
</div>
</div>
{% include 'common/sidebar.html' %}
</div>
</div>
{% endblock %}
HTML的特点就是用一个又一个的盒子包装好不同的网页框架,然后在框架里面导入文件,内容,或者图片和视频。
JS
index.js
// var banner = new Banner();
// console.log(banner.person);
// banner.greet('zhiliao');
function Banner() {
this.bannerWidth = 798;
this.bannerGroup = $("#banner-group");
this.index = 1;
this.leftArrow = $(".left-arrow");
this.rightArrow = $(".right-arrow");
this.bannerUl = $("#banner-ul");
this.liList = this.bannerUl.children("li");
this.bannerCount = this.liList.length;
this.pageControl = $(".page-control");
}
Banner.prototype.initBanner = function () {
var self = this;
var firstBanner = self.liList.eq(0).clone();
var lastBanner = self.liList.eq(self.bannerCount-1).clone();
self.bannerUl.append(firstBanner);
self.bannerUl.prepend(lastBanner);
self.bannerUl.css({"width":self.bannerWidth*(self.bannerCount+2),'left':-self.bannerWidth});
};
Banner.prototype.initPageControl = function () {
var self = this;
for(var i=0; i<self.bannerCount; i++){
var circle = $("<li></li>");
self.pageControl.append(circle);
if(i === 0){
circle.addClass("active");
}
}
self.pageControl.css({"width":self.bannerCount*12+8*2+16*(self.bannerCount-1)});
};
Banner.prototype.toggleArrow = function (isShow) {
var self = this;
if(isShow){
self.leftArrow.show();
self.rightArrow.show();
}else{
self.leftArrow.hide();
self.rightArrow.hide();
}
};
Banner.prototype.animate = function () {
var self = this;
self.bannerUl.stop().animate({"left":-798*self.index},500);
var index = self.index;
if(index === 0){
index = self.bannerCount-1;
}else if(index === self.bannerCount+1){
index = 0;
}else{
index = self.index - 1;
}
self.pageControl.children('li').eq(index).addClass("active").siblings().removeClass('active');
};
Banner.prototype.loop = function () {
var self = this;
this.timer = setInterval(function () {
if(self.index >= self.bannerCount+1){
self.bannerUl.css({"left":-self.bannerWidth});
self.index = 2;
}else{
self.index++;
}
self.animate();
},2000);
};
Banner.prototype.listenArrowClick = function () {
var self = this;
self.leftArrow.click(function () {
if(self.index === 0){
// ==:1 == '1':true
// ==== 1 != '1'
self.bannerUl.css({"left":-self.bannerCount*self.bannerWidth});
self.index = self.bannerCount - 1;
}else{
self.index--;
}
self.animate();
});
self.rightArrow.click(function () {
if(self.index === self.bannerCount + 1){
self.bannerUl.css({"left":-self.bannerWidth});
self.index = 2;
}else{
self.index++;
}
self.animate();
});
};
Banner.prototype.listenBannerHover = function () {
var self = this;
this.bannerGroup.hover(function () {
// 第一个函数是,把鼠标移动到banner上会执行的函数
clearInterval(self.timer);
self.toggleArrow(true);
},function () {
// 第二个函数是,把鼠标从banner上移走会执行的函数
self.loop();
self.toggleArrow(false);
});
};
Banner.prototype.listenPageControl = function () {
var self = this;
self.pageControl.children("li").each(function (index,obj) {
$(obj).click(function () {
self.index = index;
self.animate();
});
});
};
Banner.prototype.run = function () {
console.log("sss");
this.initBanner();
this.initPageControl();
this.loop();
this.listenBannerHover();
this.listenArrowClick();
this.listenPageControl();
};
function Index() {
var self = this;
self.page = 2;
self.category_id = 0;
self.loadBtn = $("#load-more-btn");
}
Index.prototype.listenLoadMoreEvent = function () {
var self = this;
var loadBtn = $("#load-more-btn");
loadBtn.click(function () {
xfzajax.get({
'url': '/news/list/',
'data':{
'p': self.page,
'category_id': self.category_id
},
'success': function (result) {
if(result['code'] === 200){
var newses = result['data'];
if(newses.length > 0){
var tpl = template("news-item",{"newses":newses});
var ul = $(".list-inner-group");
ul.append(tpl);
self.page += 1;
}else{
loadBtn.hide();
}
}
}
});
});
};
Index.prototype.listenCategorySwitchEvent = function () {
var self = this;
var tabGroup = $(".list-tab");
tabGroup.children().click(function () {
// this:代表当前选中的这个li标签
var li = $(this);
var category_id = li.attr("data-category");
var page = 1;
xfzajax.get({
'url': '/news/list/',
'data': {
'category_id': category_id,
'p': page
},
'success': function (result) {
if(result['code'] === 200){
var newses = result['data'];
var tpl = template("news-item",{"newses":newses});
// empty:可以将这个标签下的所有子元素都删掉
var newsListGroup = $(".list-inner-group");
newsListGroup.empty();
newsListGroup.append(tpl);
self.page = 2;
self.category_id = category_id;
li.addClass('active').siblings().removeClass('active');
self.loadBtn.show();
}
}
});
});
};
Index.prototype.run = function () {
var self = this;
self.listenLoadMoreEvent();
self.listenCategorySwitchEvent();
};
$(function () {
var banner = new Banner();
banner.run();
var index = new Index();
index.run();
}
JS就是JavaScript(跟JAVA没有一毛钱关系),JS的作用就是让你的点击或者后端传过来的数据能操作HTML,如果没有JS,那么你的页面就是一堆死的内容,没有任何功能。
.main{
.wrapper{
.main-content-wrapper{
.banner-group{
width: 100%;
height: $bannerHeight;
background: #0e275e;
position: relative;
overflow: hidden;
z-index: 0;
.banner-ul{
overflow: hidden;
width: $bannerWidth*4;
position: absolute;
left: 0;
li{
float: left;
width: $bannerWidth;
height: $bannerHeight;
img{
width: $bannerWidth;
height: $bannerHeight;
}
}
}
.arrow{
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 70px;
color: #fff;
position: absolute;
top: 50%;
margin-top: -45px;
cursor: pointer;
display: none;
}
.left-arrow{
left: 20px;
}
.right-arrow{
right: 20px;
}
.page-control-group{
position: absolute;
left: 0;
right: 0;
bottom: 20px;
.page-control{
margin: 0 auto;
overflow: hidden;
li{
width: 12px;
height: 12px;
border: 1px solid #fff;
border-radius: 50%;
float: left;
margin: 0 8px;
box-sizing: border-box;
cursor: pointer;
&.active{
background: #fff;
}
}
}
}
}
}
}
}
.main{
.wrapper{
.main-content-wrapper{
.list-outer-group{
background: #fff;
margin-top: 14px;
.list-tab{
width: 100%;
height: 66px;
overflow: hidden;
border: 1px solid #eeeeee;
border-left: none;
border-right: none;
li{
float: left;
padding: 0 10px;
margin-top: 20px;
a{
color: #878787;
}
&:first-of-type{
border-left: 5px solid $themeColor;
}
&.active{
a{
color: #212121;
}
}
}
}
.list-inner-group{
@include news_list;
}
.load-more-group{
padding: 20px 0;
text-align: center;
.load-more{
width: 402px;
height: 40px;
background: #d2dcea;
color: #6d85ac;
border: none;
outline: none;
cursor: pointer;
}
}
}
}
}
}
CSS是限定了html的样式,包括颜色,框体大小,是否浮动,有没有内框,外框之类的。跟前端类似也是一种框架套框架,是根据HTML来进行配置的。
总结
把网站当做你的家。那么前端就是你的家的基本框架:
1.HTML就是房子的结构,比如你要一栋楼–楼高2层–每层10个房间–每个房间有厕所走廊,大厅,客房,主人房–走廊联通3个房间–主人房有阳台—客房在大厅的旁边。
2.CSS就是你房子的装修和尺寸。你的房子100平米,有多高,里面有什么装饰。
3.JS就是你的房子可操作的地方了,绝大部分是家私,和各种电器设备,还有暖气热水器之类的。
待续…【后端明天再讲。】