master

分支 (1)

管理

管理

master

bignews
/
list.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>大事件-列表页</title>
  <link rel="stylesheet" type="text/css" href="css/reset.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="css/jquery.pagination.css">
  <link rel="stylesheet" type="text/css" href="css/main.css">

</head>

<body>
  <div class="header">
    <a href="#" class="logo fl"><img src="images/logo.png" alt="logo"></a>
    <div class="search_form fl">
      <input type="text" class="search_txt" placeholder="黑洞照片">
      <button class="search_btn"><i class="fa fa-search"></i></button>
    </div>
    <div class="link_info fr">
      <a href="#"><i class="fa fa-angle-right"></i>&nbsp;&nbsp;网站地图</a><br>
      <a href="#"><i class="fa fa-angle-right"></i>&nbsp;&nbsp;招聘信息</a>
    </div>
  </div>

  <div class="menu_con">
    <div class="menu">
      <div class="menu_collapse fl">
        <a href="javascript:;" class="level_one"><i class="fa fa-list-ul"></i>全部分类</a>
        <ul class="level_two">
          <li class="up"></li>
          <li><a href="#">最 新</a></li>
          <li><a href="#">科 技</a></li>
          <li><a href="#">股 市</a></li>
          <li><a href="#">商 品</a></li>
          <li><a href="#">外 汇</a></li>
          <li><a href="#">公 司</a></li>
        </ul>
      </div>
      <ul class="left_menu fl">
        <!-- <li><a href="#" onclick="latestNews()">最 新</a></li> -->
        <!-- <li><a href="#">科 技</a></li>
        <li><a href="#">股 市</a></li>
        <li><a href="#">商 品</a></li>
        <li><a href="#">外 汇</a></li>
        <li><a href="#">公 司</a></li> -->
      </ul>
      <ul class="right_menu fr">
        <li><a href="#">科技专题</a></li>
        <li><a href="#">财经专题</a></li>
      </ul>
    </div>
  </div>

  <div class="main_con clearfix">
    <div class="left_con setfr">

      <div class="list_title">
        <h3>科 技</h3>
      </div>

      <div class="common_news_list">
        <a href="#" class="list_pic"><img src="images/pic09.jpg" alt=""></a>
        <h4><a href="#">亚马逊金融试水中国？背后却是和华尔街的“金融战争” </a></h4>
        <p>亚马逊抛弃了中国的买家们，却难以割舍庞大的卖家市场，有消息指出亚马逊中国将针对中国庞大的卖家群体推出一项贷款推荐计划。在连续对印度、墨西哥等新兴市场大力推广线上支付服务后，亚马逊金融试水进军中国市场的信号终于被放出。
        </p>
        <div class="new_info">
          <span>标签：财经&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<i class="fa fa-eye"></i>&nbsp;阅读( 5
            )&nbsp;&nbsp;&nbsp;<i class="fa fa-commenting"></i>&nbsp;评论( 10 )</span>
          <b>发布于 2018-08-30 12:18:58</b>
        </div>
      </div>

      <div id="pagination" class="page"></div>
      <!-- <script>
                $(function () {
                    $("#pagination").pagination({
                        currentPage: 2,
                        totalPage: 8,
                        callback: function (current) {
                            alert('ok!');
                        }
                    });
                });
            </script> -->

    </div>
    <div class="right_con setfl">
      <div class="common_wrap">
        <h3><i class="fa fa-bar-chart"></i> 一周热门排行</h3>
        <ul class="content_list hotrank_list">
          <li><span class="first">1</span><a href="#">神奇的水滴摄影，泡泡中的世界泡泡中的世界</a></li>
          <li><span class="second">2</span><a href="#">神奇的水滴摄影，泡泡中的世界</a></li>
          <li><span class="third">3</span><a href="#">神奇的水滴摄影，泡泡中的世界</a></li>
          <li><span>4</span><a href="#">神奇的水滴摄影，泡泡中的世界</a></li>
          <li><span>5</span><a href="#">神奇的水滴摄影，泡泡中的世界</a></li>
          <li><span>6</span><a href="#">神奇的水滴摄影，泡泡中的世界</a></li>
          <li><span>7</span><a href="#">神奇的水滴摄影，泡泡中的世界</a></li>
        </ul>
      </div>
      <div class="common_wrap">
        <h3><i class="fa fa-commenting-o"></i> 最新评论</h3>
        <ul class="content_list comment_list">
          <li>
            <span>山</span>
            <b><em>山治</em> 9个月前(08-14)说:</b>
            <strong>挺会玩的</strong>
          </li>
          <li>
            <span>丽</span>
            <b><em>丽丽</em> 9个月前(08-14)说:9个月前(08-14)说:9个月前(08-14)说:</b>
            <strong>挺会玩的挺会玩的挺会玩的挺会玩的</strong>
          </li>
          <li>
            <span>R</span>
            <b><em>Rechael</em> 9个月前(08-14)说:</b>
            <strong>挺会玩的</strong>
          </li>
          <li>
            <span>J</span>
            <b><em>John</em> 9个月前(08-14)说:</b>
            <strong>挺会玩的</strong>
          </li>
          <li>
            <span>段</span>
            <b><em>段正淳</em> 9个月前(08-14)说:</b>
            <strong>挺会玩的</strong>
          </li>
          <li>
            <span>乔</span>
            <b><em>乔峰</em> 9个月前(08-14)说:</b>
            <strong>挺会玩的</strong>
          </li>
        </ul>
      </div>
      <div class="common_wrap">
        <h3><i class="fa fa-bullseye"></i> 焦点关注</h3>
        <ul class="content_list guanzhu_list">
          <li><a href="#">神奇的水滴摄影，泡泡中的世界泡泡中的世界</a></li>
          <li><a href="#">神奇的水滴摄影，泡泡中的世界</a></li>
          <li><a href="#">神奇的水滴摄影，泡泡中的世界</a></li>
          <li><a href="#">神奇的水滴摄影，泡泡中的世界</a></li>
          <li><a href="#">神奇的水滴摄影，泡泡中的世界</a></li>
          <li><a href="#">神奇的水滴摄影，泡泡中的世界</a></li>
          <li><a href="#">神奇的水滴摄影，泡泡中的世界</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div class="footer clearfix">
    <div class="foot_link">
      <a href="#">关于我们</a>
      <span>|</span>
      <a href="#">联系我们</a>
      <span>|</span>
      <a href="#">招聘人才</a>
      <span>|</span>
      <a href="#">友情链接</a>
    </div>
    <p>CopyRight © 2019 深圳大事件信息技术股份有限公司 All Rights Reserved</p>
    <p>电话：0755-****888 粤ICP备*******8号</p>
  </div>

  <!-- 导包template -->
  <script src="./js/template-web.js"></script>
  <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  <!-- <script type="text/javascript" src="js/jquery.pagination.min.js"></script> -->

  <!-- 导航栏 -->
  <script id="navigation_tpl" type="text/html">
      {{each data}}
          <li><a href="./list.html?id={{$value.id}}">{{$value.name}}</a></li>
      {{/each}}
  </script>

  <!-- 一周热门排行 -->
  <script id="hotList_tpl" type="text/html">
        {{each data}}
            <li><span>{{$index +1}}</span><a href="#">{{$value.title}}</a></li>
        {{/each}}
    </script>

  <!-- 最新评论 -->
  <script id="comments_tpl" type="text/html">
        {{each data}}
        <li>
            <span>{{$value.author[0]}}</span>
            <b><em>{{$value.author}}</em>{{$value.date}}({{$value.time}})说:</b>
            <strong>{{$value.intro}}</strong>
        </li>
        {{/each}}
    </script>

  <!-- 最新资讯 -->
  <!-- <script id="News_tpl" type="text/html">
    <div class="list_title">
      <h3>最新资讯</h3>
    </div>
      {{each data}}
      <div class="common_news_list">
          <a href="#" class="list_pic"><img src="{{$value.cover}}" alt=""></a>
          <h4><a href="#">{{$value.title}}</a></h4>
          <p>{{$value.intro}}</p>
          <div class="new_info">
              <span>标签：{{$value.category}}&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<i class="fa fa-eye"></i>&nbsp;阅读( {{$value.read}}
                  )&nbsp;&nbsp;&nbsp;<i class="fa fa-commenting"></i>&nbsp;评论( {{$value.comments}} )</span>
              <b>发布于 {{$value.date}}</b>
          </div>
      </div>
      {{/each}}
  </script> -->

  <!-- 焦点关注 -->
  <script id="focus_tpl" type="text/html">
            {{each data}}
            <li><a href="#">{{$value.intro}}</a></li>
            {{/each}}
    </script>

  <!-- 文章列表 -->
  <script id="list_tpl" type="text/html">
        <div class="list_title">
          <h3>{{data[0].category}}</h3>
        </div>
        {{each data}}
          <div class="common_news_list">
            <a href="#" class="list_pic"><img src="{{$value.cover}}" alt=""></a>
            <h4><a href="./article.html?id={{$value.id}}">{{$value.title}}</a></h4>
            <p>{{$value.content}}</p>
            <div class="new_info">
              <span>标签：{{$value.category}}&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<i class="fa fa-eye"></i>&nbsp;阅读(
                {{$value.read}}
                )&nbsp;&nbsp;&nbsp;<i class="fa fa-commenting"></i>&nbsp;评论( {{$value.comment}} )</span>
              <b>发布于 {{$value.date}}</b>
            </div>
          </div>
  {{/each}}
  </script>

  <script>
    $(function () {
      $('.search_txt').focusin(function () {
        $('.search_txt').prop('placeholder', '');
      }).focusout(function () {
        $('.search_txt').prop('placeholder', '黑洞照片');
      });
      // 搜索
      $('.search_btn').click(function () {
        let key = $('.search_txt').val();
        search(key);
      });
      // 文章分类
      category();
      // 一周热门排行
      hotList();
      // 最新评论
      comments();
      // 最新资讯
      // latestNews();
      // 焦点关注
      focusList();
      // 获取同类型文章列表
      let key = sessionStorage.getItem('key');
      search(key);
    });

    // 文章分类
    function category() {
      $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/api/v1/index/category',
        data: null,
        success: function (resData) {
          let navgationHtml = template('navigation_tpl', resData);
          $('.left_menu').append(navgationHtml);
        }
      });
    }

    // 一周热门排行
    function hotList() {
      $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/api/v1/index/rank',
        data: null,
        success: function (resData) {
          let hotListHtml = template('hotList_tpl', resData);
          $('.hotrank_list').html(hotListHtml);
          $('.hotrank_list>li').eq(0).find('span').addClass('first');
          $('.hotrank_list>li').eq(1).find('span').addClass('second');
          $('.hotrank_list>li').eq(2).find('span').addClass('third');
        }
      });
    }

    // 最新评论
    function comments() {
      $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/api/v1/index/latest_comment',
        data: null,
        success: function (resData) {
          let comHtml = template('comments_tpl', resData);
          $('.comment_list').html(comHtml);
        }
      });
    }

    // 焦点关注
    function focusList() {
      $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/api/v1/index/attention',
        data: null,
        success: function (resData) {
          let focusHtml = template('focus_tpl', resData);
          $('.guanzhu_list').html(focusHtml);
        }
      });
    }

    // 最新资讯
    // function latestNews() {
    //   $.ajax({
    //     type: 'GET',
    //     url: 'http://localhost:8080/api/v1/index/latest',
    //     data: null,
    //     success: function (resData) {
    //       let newsHtml = template('News_tpl', resData);
    //       $('.left_con').html(newsHtml);
    //     }
    //   });
    // }

    // 文章搜索
    function search(s_key) {
      let paramsArr = '';
      if (!s_key) {
        s_key = '';
        let href = window.location.href;
        let hrefArr = href.split('?');
        if (hrefArr[1]) {
          paramsArr = hrefArr[1].split('=')[1];
        }
      }
      // console.log(s_key); // 输出key值
      // console.log(paramsArr); // 输出id
      let params = {
        key: s_key,
        type: paramsArr
      };
      let paramsStr = objectParamsToString(params);
      let xhr = new XMLHttpRequest();
      xhr.open('GET', 'http://localhost:8080/api/v1/index/search?' + paramsStr);
      xhr.send();
      xhr.onload = function () {
        let resData = JSON.parse(xhr.responseText);
        if (resData.data.data.length == 0) {
          alert('没有文章');
          window.location.href = './list.html?id=1';
        }
        let listHtml = template('list_tpl', resData.data);
        $('.left_con').html(listHtml);
        if (s_key) {
          $('.list_title>h3').html(`${s_key}的搜索结果`);
        }
        sessionStorage.removeItem('key');
      }
    }

    // 对象转key=value&key=value类型字符串
    function objectParamsToString(paramsObj) {
      let arr = [];
      for (let key in paramsObj) {
        arr.push(`${key}=${paramsObj[key]}`);
      }
      return arr.join('&');
    }

  </script>
</body>

</html>