axios get请求——新闻列表

可可格子衫

已于 2023-01-16 20:19:34 修改

阅读量255

点赞数

文章标签： 5G

于 2023-01-16 10:39:53 首次发布

本文链接：https://blog.csdn.net/weixin_51745081/article/details/128701406

版权

1、用foreach循环遍历

<body>
  <!-- 新闻列表 -->
  <div id="news-list">
    <!-- 新闻的 item 项 -->
    <div class="news-item">
      <img class="thumb" src="http://www.xxxx/images/5.webp" alt="" />
      <div class="right-box">
        <!-- 新闻标题 -->
        <h1 class="title">5G商用在即，三大运营商营收持续下降</h1>
        <div class="footer">
          <div>
            <!-- 新闻来源 -->
            <span>胡润百富</span>&nbsp;&nbsp;
            <!-- 发布日期 -->
            <span>2019-10-28 10:14:38</span>
          </div>
          <!-- 评论数量 -->
          <span>评论数：66</span>
        </div>
      </div>
    </div>
  </div>
  <!-- 导入axios -->
  <script src="./lib/axios.js"></script>

  <script>
    const list = document.querySelector('#news-list')

    // 步骤:
    // 1. 获取数据 ==> 通过 axios 发送GET请求
    //           请求地址: http://www.liulongbin.top:3009/api/news
    // 2. 渲染页面

    axios({
      url: 'http://www.xxxx/api/news',
      method: 'get'
    }).then(({ data: res }) => {
      // {data: res} 解构出来data，并且重命名为res（这对应的就是服务器响应回来的数据）
      // console.log(res)
      // console.log(res.code)
      // console.log(res.msg)
      // console.log(res.data)

      if (res.code === 200) {
        // 获取成功了 ==> 遍历res.data 数组，将其展示到页面中

        // 准备htmlStr来拼接html字符串
        let htmlStr = ``  // num += 1    

        // 解析说明
        // let str = '哈哈'
        // str += '嘻嘻' // str = '哈哈' + '嘻嘻'  ==>  str 结果是 '哈哈嘻嘻'

        res.data.forEach(item => {
          htmlStr += `
              <div class="news-item">
              <img class="thumb" src="http://www.xxxx${item.img}" alt="" />
              <div class="right-box">
                <!-- 新闻标题 -->
                <h1 class="title">${item.title}</h1>
                <div class="footer">
                  <div>
                    <!-- 新闻来源 -->
                    <span>${item.source}</span>&nbsp;&nbsp;
                    <!-- 发布日期 -->
                    <span>${item.time}</span>
                  </div>
                  <!-- 评论数量 -->
                  <span>评论数：${item.cmtcount}</span>
                </div>
              </div>
            </div>
          `
        })
        // console.log(htmlStr)

        // 把拼接好的htmlStr 赋值作为list的内容
        list.innerHTML = htmlStr
      } else {
        // 获取失败了
        // alert('获取失败了')
        alert(res.msg)
      }
    })
  </script>
</body>

2、使用map方式映射

<body>
  <!-- 新闻列表 -->
  <div id="news-list">
    <!-- 新闻的 item 项 -->
    <div class="news-item">
      <img class="thumb" src="http://www.xxxx/images/5.webp" alt="" />
      <div class="right-box">
        <!-- 新闻标题 -->
        <h1 class="title">5G商用在即，三大运营商营收持续下降</h1>
        <div class="footer">
          <div>
            <!-- 新闻来源 -->
            <span>胡润百富</span>&nbsp;&nbsp;
            <!-- 发布日期 -->
            <span>2019-10-28 10:14:38</span>
          </div>
          <!-- 评论数量 -->
          <span>评论数：66</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 导入axios -->
  <script src="./lib/axios.js"></script>

  <script>
    const list = document.querySelector('#news-list')

    // 步骤:
    // 1. 获取数据 ==> 通过 axios 发送GET请求
    //           请求地址: http://www.xxxx/api/news
    // 2. 渲染页面

    axios({
      url: 'http://www.xxxx/api/news',
      method: 'get'
    }).then(({ data: res }) => {
      // {data: res} 解构出来data，并且重命名为res（这对应的就是服务器响应回来的数据）
      // console.log(res)
      // console.log(res.code)
      // console.log(res.msg)
      // console.log(res.data)

      if (res.code === 200) {
        // 获取成功了 ==> 遍历res.data 数组，将其展示到页面中
        list.innerHTML = res.data.map(item => `
          <div class="news-item">
            <img class="thumb" src="http://www.xxxx${item.img}" alt="" />
            <div class="right-box">
              <!-- 新闻标题 -->
              <h1 class="title">${item.title}</h1>
              <div class="footer">
                <div>
                  <!-- 新闻来源 -->
                  <span>${item.source}</span>&nbsp;&nbsp;
                  <!-- 发布日期 -->
                  <span>${item.time}</span>
                </div>
                <!-- 评论数量 -->
                <span>评论数：${item.cmtcount}</span>
              </div>
            </div>
          </div>
        `).join('') //join()把数组的每一项拼接成字符串
      } else {
        // 获取失败了
        // alert('获取失败了')
        alert(res.msg)
      }
    })
  </script>
</body>