2018.12.24日CLASS277 【前端】的个人理解

版权声明：转载记得署名:Dr.Yao https://blog.csdn.net/weixin_42879237/article/details/85228053

一个网站，主要是由【前端】和【后台】两部分组成。

前端

主要是包括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就是你的房子可操作的地方了，绝大部分是家私，和各种电器设备，还有暖气热水器之类的。
待续…【后端明天再讲。】