一、简介

在本篇文章中，我们将带你轻松上手，使用免费API快速打造一个功能丰富的网站首页。通过韩小韩 WebAPI 接口，我们可以实现多个实用功能，包括实时日历、天气信息、每日热点新闻以及照片瀑布流展示。无需复杂的开发过程，借助这些免费API，你可以在短时间内构建一个动态且实用的首页，适合新手开发者和想要提升网站功能的小型项目。

二、常用API接口整合摸鱼日历 API

访问地址 : /api/moyu

功能介绍：摸鱼日历API提供了一个实时更新的日历信息，包含当天的日期、节日和其他相关内容。我们可以通过调用此API，在页面中展示每日的日历数据，帮助用户了解当天的日期和节假日情况。

天气信息 API

访问地址 : /api/weather

功能介绍：天气API提供了当天的天气数据，包括温度范围、风力、天气状况以及空气质量指数（AQI）。这对想要提供本地化天气信息的页面来说非常实用，能够提升用户的体验。

1. 查看接口返回值

{
  "success": true,
  "city": "地址",
  "date": "yyyy-hh-dd",
  "week": "星期",
  "weather": {
    "day": {
      "type": "阴",
      "low": "22°C",
      "high": "33°C",
      "wind": {
        "direction": "微风",
        "level": "1-3级"
      }
    },
    "night": {
      "type": "晴",
      "wind": {
        "direction": "微风",
        "level": "1-3级"
      }
    }
  },
  "air_quality": {
    "aqi": 40,
    "level": 1,
    "description": "优",
    "pm2.5": 23
  },
  "tip": "现在的温度比较舒适~"
}

2. 编排数据后一文本进行展示

onMounted(() => {
  // 获取天气信息
  HomeAPI.WEATHER.request().then((response) => {
    const {city, data, air, tip} = response.data
    const {date, week, type, low, high, fengxiang, fengli, night} = data;
    weather.value = `
    欢迎来到${city}！
    今天是 ${date} (${week})，天气 ${type}，
    气温范围为 ${low} 到 ${high}。白天${fengxiang} ${fengli}，
    晚上天气 ${night.type}，${night.fengxiang} ${night.fengli}。
    当前空气质量：${air.aqi_name} (AQI: ${air.aqi})。
    温馨提示：${tip}`
  })
 
})

3. 具体效果演示

我们在项目中定义好对应的ts结构类型，请求对应接口将一些关键信息解析出来就构建出了我的天气系统 :

每日热点 API

访问地址 : /api/hotlist…

功能介绍： 每日热点API能够返回当天的新闻热点或热门话题，非常适合信息类网站或需要提供新闻资讯的页面使用，当然也可以作为普通项目中的一个小功能。

1. 粗略查看接口返回值

{
    success: true,
    data:[{
        name: "平台名",
        subtitle: "平台榜单",
        update_time: "更新时间",
        data:[{
            type: "类型",
            title: "标题",
            hot: "热度",
            url: "PC链接",
            mobil_url: "移动端链接",
            index: 1
        },{
            // ...
        }]
    },{
        // ...
    }]

2. 编写卡片展示所有热点

注意通过el-row、el-col 控制不同屏幕的展示效果

<script lang="ts" setup>
// 省略
script>
<style lang="scss" scoped>
/* 样式省略 */
style>

效果展示

每日图片推荐

访问地址 :

/** 图片接口 */
IMAGES_API: [
    "https://api.vvhan.com/api/bing?rand=sj", // bing 随机图
    "https://api.vvhan.com/api/wallpaper/views", // 风景图
    "https://api.vvhan.com/api/wallpaper/acg", // 二次元图
    "https://api.vvhan.com/api/wallpaper/pcGirl", // cosplay/福利姬图
    "https://api.vvhan.com/api/wallpaper/mobileGirl", // cosplay/福利姬图
    "https://api.vvhan.com/api/avatar/recommend", // 精选头像
    "https://api.vvhan.com/api/avatar/dm", // 动漫头像
    "https://api.vvhan.com/api/avatar/boy", // 男生头像
    "https://api.vvhan.com/api/avatar/girl", // 女生头像
    "https://api.vvhan.com/api/avatar/niche", // 小众头像
],

功能介绍 : 返回随机一张高清照片，每一个链接对应一种类型的图片

三、瀑布流展示图片

在这个部分，我们将利用瀑布流布局展示照片，同时使用懒加载技术优化页面性能。瀑布流布局让图片自然排列，提供美观的视觉效果，并通过懒加载减少页面加载时间。

1. 瀑布流布局实现

我们使用 CSS 的column-count属性来定义图片的列数，结合break-inside属性防止图片被切割，实现简单的瀑布流效果。

.masonry {
  column-count: 2; /* 定义列数 */
  column-gap: 10px; /* 列间距 */
}
.masonry-item {
  break-inside: avoid; /* 防止元素被打断 */
  margin-bottom: 10px;
}

2. 懒加载图片

懒加载可以大幅度提高页面性能，图片只在用户滚动到相应位置时才会加载。使用el-image组件内置的lazy属性实现懒加载。

<el-image
  :src="image"
  class="masonry-image"
  fit="cover"
  lazy
>
  <template #placeholder>
    <div class="image-placeholder">
      <i class="el-icon-loading">i>
    div>
  template>
  <template #error>
    <div class="image-error">
      <i class="el-icon-picture-outline">i>
    div>
  template>
el-image>

3. 最终代码展示

结合API图片数据与瀑布流展示，完整代码如下：

<template>
  <div class="masonry">
    <div v-for="(image, index) in HomeAPI.IMAGES_API.endpoint" :key="index" class="masonry-item">
      <el-image
          :alt="'Image ' + (index + 1)"
          :src="image"
          class="masonry-image"
          fit="cover"
          lazy
      >
        <template #placeholder>
          <div class="image-placeholder">
            <i class="el-icon-loading">i>
          div>
        template>
        <template #error>
          <div class="image-error">
            <i class="el-icon-picture-outline">i>
          div>
        template>
      el-image>
    div>
  div>
template>
<script lang="ts" setup>
defineOptions({
  name: "TodayAvatar",
  inheritAttrs: false,
});
import {HomeAPI} from "@/api/home"; // 导入API
script>
<style lang="scss" scoped>
.masonry {
  column-count: 2;
  column-gap: 10px;
}
.masonry-item {
  break-inside: avoid;
  margin-bottom: 10px;
}
.masonry-image {
  width: 100%;
}
.image-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}
.image-error {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #ffeded;
  color: #ff4949;
}
style>

效果演示

每次按 ctrl + F5 会换一组图片 ( 切记不要太频繁 )

三、最终效果

在线访问 (注: 一人一号，演示用户可能会被挤下)

源码地址 : (注 : yf-vue-admin 为vue版前端)