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

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

相关推荐
人生游戏牛马NPC1号2 小时前
学习 Flutter (三):玩安卓项目实战 - 上
android·学习·flutter
小馬佩德罗3 小时前
Android系统的问题分析笔记 - Android上的调试方式 debuggerd
android·调试
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止5 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms5 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登5 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
清霜之辰5 小时前
安卓基于 FirebaseAuth 实现 google 登录
android·google·auth·firebase
GitLqr5 小时前
数码洞察 | Apple VS DMA、三星新品、Android 16KB Page Size
android·ios·samsung
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
alexhilton5 小时前
SnapshotFlow还是collectAsState?对于Jetpack Compose来说哪个更香?
android·kotlin·android jetpack