当前位置：首页 > news >正文

vue3:十八、内容管理-实现内容的数据展示，开关switch设行，tag标签展示

news 2025/7/23 8:07:58

一、实现效果

实现内容管理页面的基础信息搭建，完成apifox的搭建，以及表格中tag标签的实现(循环标签，不同状态的标签展示)，switch的实现

二、初始创建

1、apifox的接口建立

(1)内容列表查询

新建接口

加入分页的参数：当前页码page，每页显示数量limit

新建期望

实现分页的功能，这里建立两种页面信息

①非第2页

展示一些示例

{"code": 1,"msg": "成功","total":25,"data": [{"id": 1,"title": "从零开始理解区块链技术","subtitle": "揭秘去中心化世界的基石","coverimage": "@image('600x300','#4A90E2')","categroy": "区块链","tag": ["智能合约", "比特币", "加密算法"],"author": "李晨","clicknum": 4321,"desc": "本篇文章带你了解区块链的核心原理与应用场景。","content": "### 区块链不仅仅是数字货币\n它正在重塑金融、供应链和数字身份验证等多个领域。\n我们将从最基础的哈希函数讲起……","status": 1,"audit": 1,"createtime": "@datetime('yyyy-mm-dd HH:mm:ss')"},{"id": 2,"title": "区块链与未来金融生态","subtitle": "去中心化金融的新纪元","coverimage": "@image('600x300','#4A90E2')","categroy": "金融","tag": ["区块链", "DeFi", "加密货币"],"author": "李四","clicknum": 3421,"desc": "探讨区块链如何重塑金融体系。","content": "### 区块链不只是比特币\n它正在改变银行、保险和支付方式……","status": 0,"audit": 1,"createtime":"@datetime('yyyy-mm-dd HH:mm:ss')"},{"id": 3,"title": "量子计算的崛起","subtitle": "超越经典计算机的极限","coverimage": "@image('600x300','#3ED598')","categroy": "科技","tag": ["量子力学", "高性能计算", "密码学"],"author": "王五","clicknum": 2890,"desc": "量子计算将带来前所未有的算力突破。","content": "#### 从理论到现实：量子比特如何颠覆传统计算。","status": 1,"audit": 2,"createtime":"@datetime('yyyy-mm-dd HH:mm:ss')"},{"id": 4,"title": "元宇宙：虚拟世界的未来","subtitle": "重新定义互联网体验","coverimage": "@image('600x300','#FF3B30')","categroy": "科技","tag": ["元宇宙", "VR", "AR"],"author": "赵六","clicknum": 4567,"desc": "探索元宇宙对社交、娱乐和商业的影响。","content": "##### 虚拟现实将成为日常生活的一部分。","status": 1,"audit": 0,"createtime":"@datetime('yyyy-mm-dd HH:mm:ss')"},{"id": 5,"title": "碳中和与绿色能源发展","subtitle": "可持续发展的新路径","coverimage": "@image('600x300','#3CB371')","categroy": "环保","tag": ["新能源", "碳排放", "太阳能"],"author": "孙七","clicknum": 2345,"desc": "分析全球碳中和目标下的能源转型趋势。","content": "风能、太阳能等可再生能源正逐步替代化石燃料。","status": 0,"audit": 0,"createtime":"@datetime('yyyy-mm-dd HH:mm:ss')"}]
}

② 第2页

展示一些示例

{"code": 1,"msg": "成功","total":17"data": [{"id": 1,"title": "AI绘画与艺术创作的未来","subtitle": "当算法遇上画笔","coverimage": "@image('600x300','#FF66CC')","categroy": "人工智能","tag": ["AI绘画", "创意设计", "深度学习"],"author": "王思远","clicknum": 4523,"desc": "AI正在改变艺术创作的方式，艺术家如何与AI协作？","content": "## AI绘图工具如Midjourney和Stable Diffusion\n已经能生成高质量的艺术作品。\n本篇文章探讨AI对传统艺术行业的冲击与融合。","status": 1,"audit": 1,"createtime": "@datetime('yyyy-mm-dd HH:mm:ss')"},{"id": 2,"title": "新能源汽车发展现状分析","subtitle": "绿色出行的时代已来","coverimage": "@image('600x300','#3CB371')","categroy": "汽车","tag": ["电动汽车", "锂电池", "智能驾驶"],"author": "李浩然","clicknum": 3987,"desc": "全球新能源汽车市场正以惊人的速度增长。","content": "从政策支持到产业链完善，中国已成为全球最大电动车市场。","status": 0,"audit": 1,"createtime": "@datetime('yyyy-mm-dd HH:mm:ss')"},]
}