黑马头条教程

接口地址

1. 文章列表数据

请求方式

• GET

请求根路径

• https://www.escook.cn

请求URL 地址

• /articles

查询参数

参数名	数据类型	说明
_page	Number	页码值。从 1 开始
_limit	Number	每页展示的数据条数。

响应的数据结构

[
    {
        "art_id": "8163",
        "title": "iOS原生混合RN开发最佳实践",
        "aut_id": "1111",
        "comm_count": "254",
        "pubdate": "2019-03-11 09:00:00",
        "aut_name": "黑马先锋",
        "is_top": 0,
        "cover": {
            "type": 3,
            "images": [
                "http://www.liulongbin.top:8000/resources/images/32.jpg",
                "http://www.liulongbin.top:8000/resources/images/80.jpg",
                "http://www.liulongbin.top:8000/resources/images/32.jpg"
            ]
        }
    },
    {
        "art_id": "8089",
        "title": "Typescript玩转设计模式 之 创建型模式",
        "aut_id": "1111",
        "comm_count": "24",
        "pubdate": "2019-03-11 09:00:00",
        "aut_name": "黑马先锋",
        "is_top": 0,
        "cover": {
            "type": 1,
            "images": [
                "http://www.liulongbin.top:8000/resources/images/11.jpg"
            ]
        }
    },
    {
        "art_id": "8145",
        "title": "JAVA消息确认机制之ACK模式",
        "aut_id": "1111",
        "comm_count": "99",
        "pubdate": "2019-03-11 09:00:00",
        "aut_name": "黑马先锋",
        "is_top": 0,
        "cover": {
            "type": 0
        }
    }
]

返回参数说明

参数名	类型	说明
art_id	string	文章 id
title	string	文章标题
aut_id	string	作者的 id
comm_count	string	评论数
pubdate	string	发布日期
aut_name	string	作者名字
|- cover	object	文章封面
|---- type	number	封面的数量，可选值：0、1、3
|---- images	array	文章封面图片的 URL 数组

布局结构

1. 个人中心

1. 在 User.vue 组件中，声明如下的模板结构：

   <template>
     <div class="user-container">
       <!-- 用户基本信息面板 -->
       <div class="user-card">
         <!-- 用户头像、姓名 -->
         <van-cell>
           <!-- 使用 title 插槽来自定义标题 -->
           <template #icon>
             <img src="../../assets/logo.png" alt="" class="avatar" />
           </template>
           <template #title>
             <span class="username">用户名</span>
           </template>
           <template #label>
             <van-tag color="#fff" text-color="#007bff">申请认证</van-tag>
           </template>
         </van-cell>
         <!-- 动态、关注、粉丝 -->
         <div class="user-data">
           <div class="user-data-item">
             <span>0</span>
             <span>动态</span>
           </div>
           <div class="user-data-item">
             <span>0</span>
             <span>关注</span>
           </div>
           <div class="user-data-item">
             <span>0</span>
             <span>粉丝</span>
           </div>
         </div>
       </div>
   
       <!-- 操作面板 -->
       <van-cell-group class="action-card">
         <van-cell icon="edit" title="编辑资料" is-link />
         <van-cell icon="chat-o" title="小思同学" is-link />
         <van-cell icon="warning-o" title="退出登录" is-link />
       </van-cell-group>
     </div>
   </template>
   
   <script>
   export default {
     name: 'User'
   }
   </script>
   
   <style lang="less" scoped>
   .user-container {
     .user-card {
       background-color: #007bff;
       color: white;
       padding-top: 20px;
       .van-cell {
         background: #007bff;
         color: white;
         &::after {
           display: none;
         }
         .avatar {
           width: 60px;
           height: 60px;
           background-color: #fff;
           border-radius: 50%;
           margin-right: 10px;
         }
         .username {
           font-size: 14px;
           font-weight: bold;
         }
       }
     }
     .user-data {
       display: flex;
       justify-content: space-evenly;
       align-items: center;
       font-size: 14px;
       padding: 30px 0;
       .user-data-item {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         width: 33.33%;
       }
     }
   }
   </style>
   
   

2. 文章 Item 项

1. 在 ArtItem.vue 组件中，声明如下的模板结构：

   <template>
     <div>
       <van-cell>
         <!-- 标题区域的插槽 -->
         <template #title>
           <div class="title-box">
             <!-- 标题 -->
             <span>文章的标题噢</span>
             <!-- 单张图片 -->
             <img src="https://www.escook.cn/vuebase/pics/1.png" alt="" class="thumb">
           </div>
           <!-- 三张图片 -->
           <div class="thumb-box">
             <img src="https://www.escook.cn/vuebase/pics/2.png" alt="" class="thumb">
             <img src="https://www.escook.cn/vuebase/pics/2.png" alt="" class="thumb">
             <img src="https://www.escook.cn/vuebase/pics/2.png" alt="" class="thumb">
           </div>
         </template>
         <!-- label 区域的插槽 -->
         <template #label>
           <div class="label-box">
             <span>作者 &nbsp;&nbsp; 0评论 &nbsp;&nbsp; 发布日期</span>
             <!-- 关闭按钮 -->
             <van-icon name="cross" />
           </div>
         </template>
       </van-cell>
     </div>
   </template>
   

2. 在 ArtItem.vue 组件中，通过如下的 class 类名美化布局：

   .label-box {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
   .thumb {
     // 矩形黄金比例：0.618
     width: 113px;
     height: 70px;
     background-color: #f8f8f8;
     object-fit: cover;
   }
   
   .title-box {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
   }
   
   .thumb-box {
     display: flex;
     justify-content: space-between;
   }