单页面应用程序--仿网易云音乐

最新推荐文章于 2021-06-04 21:41:33 发布

广东话的蛇皇

最新推荐文章于 2021-06-04 21:41:33 发布

阅读量289

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43618136/article/details/104540799

版权

前端专栏收录该内容

352 篇文章 1 订阅

订阅专栏

单页面应用程序–仿网易云音乐

在这里插入图片描述
index.js

/*
$(function () {
    /!*history.pushState*!/
    /!*history.replaceState*!/
    /!*window.onpopstate*!/
    $('.wrapper').on('click', 'a', function () {
        var $this = $(this);
        var $nowLi = $this.parent();
        if ($nowLi.hasClass('now')) return false;

        var historyUrl = $this.attr('href');
        history.pushState(null,null,historyUrl);
        render($nowLi.data('page'));
        return false;
    });
    $(window).on('popstate',function () {
        var page = 'index';
        var pathname = location.pathname;
        if(pathname.indexOf('friend') > -1){
            page = 'friend'
        }else if(pathname.indexOf('my') > -1){
            page = 'my'
        }
        render(page);
    });
});
var render = function (page) {
    $.ajax({
        type:'get',
        url:'api/data.php',
        data:{
            page:page
        },
        dataType:'json',
        success:function (data) {
            $('[data-page]').removeClass('now');
            $('[data-page='+data.page+']').addClass('now');
            $('.content').html(data.html);
        }
    });
};*/


/*1.ajax异步加载 渲染页面*/
/*2.渲染什么页面需要和后台提供的地址保持一致*/
/*3.切换历史渲染页面*/
$(function () {
    $('.wrapper').on('click','a',function () {
        //渲染页面  页面标识
        var page = $(this).parent().data('page');
        render(page);
        /*地址保持一致*/
        /*追加地址  而且这个地址后台一定要存在*/
        var historyUrl = $(this).attr('href');
        //$(this).attr(key); 获取节点属性名的值，相当于getAttribute(key)方法
        history.pushState(null,null,historyUrl);
        return false;
    });
    /*监听切换历史*/
    window.onpopstate = function () {
        /*获取地址栏信息*/
        console.log(location.pathname);
        /*根据信息判断需要加载什么页面的内容*/
        var pathname = location.pathname;
        var page = 'index';
        if(pathname.indexOf('index.php') > -1 ){
            page = 'index';
        }else if(pathname.indexOf('my.php') > -1){
            page = 'my'
        }else if(pathname.indexOf('friend.php') > -1){
            page = 'friend';
        }
        render(page);
    }
});
var render = function (page) {
    /*怎么调用ajax 请求方式  请求地址  请求参数  返回数据结构和意义 */
    /*发出请求*/
    $.ajax({
        type:'get',
        url:'../api/data.php',
        data:{
            page:page
        },
        dataType:'json',
        success:function (data) {
            /*渲染页面*/
            /*选中样式*/
            $('[data-page]').removeClass('now');
            /*data返回了当前页面的标识*/
            $('[data-page="'+data.page+'"]').addClass('now');
            /*网页内容*/
            $('.content').html(data.html);
        }
    });
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>history</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body {
            background-color: #F7F7F7;
            font-family: Arial;
        }
        header {
            background: #242424;
            border-bottom: 1px solid #000;
        }
        .wrapper{
            width: 1100px;
            height: 70px;
            margin: 0 auto;
        }
        header .wrapper h1{
            float: left;
            width: 176px;
            height: 69px;
            background: url(images/topbar.png) no-repeat 0 0;
            font-size: 0;
        }
        header .wrapper ul{
            list-style:none;
        }
        header .wrapper ul li{
            float: left;
            height: 70px;
        }
        header .wrapper ul li.now,
        header .wrapper ul li:hover{
            background: #12b7f5;
        }
        header .wrapper ul li a{
            padding: 0 20px;
            display: block;
            color: #fff;
            line-height: 70px;
            text-decoration: none;
        }

        .content{
            width: 1100px;
            margin: 0 auto;
            font-size: 100px;
            text-align: center;
        }

    </style>
</head>
<body>
<header>
    <div class="wrapper">
        <h1>网易云音乐</h1>
        <ul>
            <li data-page="index" class="<?php echo $page=='index'?'now':'' ?>" ><a href="index.php">发现音乐</a></li>
            <li data-page="my"  class="<?php echo $page=='my'?'now':'' ?>"><a href="my.php">我的音乐</a></li>
            <li data-page="friend" class="<?php echo $page=='friend'?'now':'' ?>"><a href="friend.php">朋友</a></li>
        </ul>
    </div>
</header>
<div class="content">
    <?php echo $html ?>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>

data.php

<?php

    header("Content-type:text/html;charset=utf-8");
    $page = 'index';
    $html = '发现音乐网页内容';

    if(array_key_exists('page',$_GET)){
        $page = $_GET['page'];
    }

    if($page == 'friend'){
        $html = '朋友网页内容';
    }else if($page == 'my'){
        $html = '我的音乐网页内容';
    }

    echo '{"html":"'.$html.'","page":"'.$page.'"}';
?>

friend.php

<?php
    $html = '朋友网页内容';
    $page = 'friend';
    include 'index.html'
?>

my.php

<?php
    $html = '我的音乐网页内容';
    $page = 'my';
    include 'index.html'
?>

index.php

<?php
      $html = '发现音乐网页内容';
      $page = 'index';
      include 'index.html'
  ?>

广东话的蛇皇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录