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

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

相关推荐
翻滚吧键盘5 分钟前
{{ }}和v-on:click
前端·vue.js
草字7 分钟前
cocos 打包安卓
android
上单带刀不带妹11 分钟前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军32 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW1 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
DeBuggggggg1 小时前
centos 7.6安装mysql8
android
说码解字1 小时前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员2 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘2 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出2 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架