【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中显示。

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

相关推荐
mCell17 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip17 小时前
Node.js 子进程:child_process
前端·javascript
alexhilton20 小时前
面向开发者的系统设计:像建筑师一样思考
android·kotlin·android jetpack
excel21 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts