【ajax实战06】文章列表展示

目标:获取文章列表并展示

准备查询参数对象

获取文章列表数据

展示到指定的标签结构中

javascript 复制代码
const searchUrl = {
  status: '',
  channel_id: '',
  page: 1,
  per_page: 3
}
async function getArtileList() {
  const res = await axios({
    url: '/v1_0/mp/articles',
    params: searchUrl
  })
  console.log(res);
  const str = res.data.results.map((ele) => {
    return `<tr>
                <td>
                  <img src="${ele.cover.type === 1 ? ele.cover.images[0] : "https://img2.baidu.com/it/u=2640406343,1419332367&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=708&amp;h=500"}" alt="">
                </td>
                <td>${ele.title}</td>
                <td>
                  ${ele.status === 2 ? ` <span class="badge text-bg-success">审核通过</span>` : `<span class="badge text-bg-primary">待审核</span>`}
                </td>
                <td>
                  <span>${ele.pubdate}</span>
                </td>
                <td>
                  <span>${ele.read_count}</span>
                </td>
                <td>
                  <span>${ele.comment_count}</span>
                </td>
                <td>
                  <span>${ele.like_count}</span>
                </td>
                <td>
                  <i class="bi bi-pencil-square edit"></i>
                  <i class="bi bi-trash3 del"></i>
                </td>
              </tr>`
  }).join('')
  console.log(str);
  document.querySelector('.art-list').innerHTML = str
}
getArtileList()

因为内容管理和发布文章是两个不同的页面,所以其引入的js文件也就不同。对应的渲染也不同,文章列表显示应在内容管理.index中显示。

其他部分功能实现相对较为常见,因此不做过多介绍

相关推荐
前端熊猫7 分钟前
jQuery AJAX、Axios与Fetch
ajax·okhttp·jquery
天天扭码14 分钟前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸34 分钟前
4、中医基础入门和养生
前端·后端
kooboo china.37 分钟前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom43 分钟前
Fluid:云原生数据加速与管理的简单入门与实战
前端
鬼面瓷1 小时前
CAPL编程_03
前端·数据库·笔记
小贾要学习1 小时前
【C++】继承----下篇
android·java·c++
帅云毅1 小时前
Web漏洞--XSS之订单系统和Shell箱子
前端·笔记·web安全·php·xss
北上ing1 小时前
同一页面下动态加载内容的两种方式:AJAX与iframe
前端·javascript·ajax
小墨宝2 小时前
js 生成pdf 并上传文件
前端·javascript·pdf