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

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

相关推荐
an__ya__几秒前
Vue数据响应式reactive
前端·javascript·vue.js
苦逼的搬砖工3 分钟前
Flutter UI Components:闲来无事,设计整理了这几年来使用的UI组件库
前端·flutter
想买Rolex和Supra的凯美瑞车主5 分钟前
Taro + Vite 开发中 fs.allow 配置问题分析与解决
前端
ruanCat6 分钟前
使用 vite 的 base 命令行参数来解决项目部署在 github page 的路径问题
前端·github
Codebee12 分钟前
使用Qoder 改造前端UI/UE升级改造实践:从传统界面到现代化体验的华丽蜕变
前端·人工智能
叫我詹躲躲16 分钟前
开发提速?Vue3模板隐藏技巧来了
前端·vue.js·ai编程
华仔啊16 分钟前
面试都被问懵了?CSS 的 flex:1 和 flex:auto 真不是一回事!90%的人都搞错了
前端·javascript
前端康师傅18 分钟前
JavaScript 函数详解
前端·javascript
金金金__20 分钟前
antd v5 support React is 16 ~ 18. see https://u.ant.design/v5-for-19 for...
前端
会豪21 分钟前
工业仿真(simulation)--前端(二)-资源管理器
前端