显示热门帖子 Laravel - TypeScript

在web开发领域中，Laravel 和 TypeScript 是两个非常流行的技术栈。Laravel是一个优秀的PHP框架，支持MVC架构，提供了许多强大且易用的特性和工具，可以帮助我们快速构建高质量的Web应用程序。而TypeScript是微软公司开发的JavaScript的超集，它添加了类型特性和其他新功能，使得代码更加可靠且易于维护。

本文将介绍如何使用Laravel和TypeScript来显示热门帖子。我们将使用Laravel作为后端框架，TypeScript作为前端框架，结合最佳实践，创建一个完整的应用程序，可让您轻松创建、更新和查看帖子列表。

技术架构

本文使用以下技术架构：

• Laravel 8.0
• TypeScript 4.0+
• Vue.js 2.6+
• Tailwind CSS
• MySQL 5.7+

前端设计

我们将使用Vue.js和Tailwind CSS来设计前端。Vue.js是一个流行的JavaScript框架，可以使用其模板语法、组件和状态管理器来构建复杂的用户界面。Tailwind CSS 是一个有用的CSS框架，它提供了许多常用的CSS类和工具，方便您构建自己的样式。

要开始，请确保您已按照Vue.js和Tailwind CSS 的文档安装好了这些依赖项。

现在，让我们创建一个Vue.js组件用于呈现热门帖子列表：

<template>
  <div class="hot-posts">
    <div class="flex items-center justify-between">
      <h1 class="text-lg font-medium my-4">热门帖子</h1>
      <span class="text-sm font-medium text-blue-600 cursor-pointer my-4" @click="refresh">刷新</span>
    </div>
    <div v-if="posts.length === 0" class="text-center py-12">
      暂无帖子
    </div>
    <div v-else>
      <table class="table-fixed w-full">
        <thead>
          <tr>
            <th class="w-2/3 px-3 py-2 text-left font-medium">标题</th>
            <th class="w-1/3 px-3 py-2 text-left font-medium">日期</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(post, index) in posts" :key="index">
            <td class="px-3 py-2 truncate">
              <router-link :to="'/posts/' + post.id">{{ post.title }}</router-link>
            </td>
            <td class="px-3 py-2">{{ post.date }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Post } from '@/interfaces/post';
import { getHotPosts } from '@/api/posts';

export default defineComponent({
  name: 'HotPosts',
  data() {
    return {
      posts: [] as Post[],
    };
  },
  methods: {
    refresh() {
      this.fetchPosts();
    },
    async fetchPosts() {
      try {
        const posts = await getHotPosts();
        this.posts = posts;
      } catch (err) {
        console.error(err);
      }
    },
  },
  mounted() {
    this.fetchPosts();
  },
});
</script>

<style scoped>
table {
  border-collapse: collapse;
  border-spacing: 0;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}
</style>

这个组件使用了Vue.js的特性，如 v-if、v-else、v-for 和 router-link。它还定义了一个fetchPosts方法，该方法使用getHotPosts来获取热门帖子列表。

请注意，这个组件导入了Post类型和getHotPosts方法，这些类型和方法将是我们稍后实现的API调用和数据类型。

后端设计

我们将使用Laravel框架来构建后端。Laravel提供了一个易于使用和高度可扩展的基于PHP的Web应用程序框架，它使得开发Web应用程序变得快速、简单和有趣。

接下来，我们将创建一个Laravel模型和控制器，以获取热门帖子列表，并在API路由文件中公开这些功能。

首先，让我们创建一个Post模型。在我们的例子中，每个帖子都有一个标题、一个内容、创建日期和更新日期。

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    use HasFactory;

    protected $guarded = [];

    protected $dates = [
        'created_at',
        'updated_at',
    ];
}

此模型使用了 Laravel 的 正则通配符，从而在保证兼容 Eloquent 关于数据的正常访问方式的同时，允许应用遵从相应的应用规则。 此外，它还允许我们在 Post 资源的任何位置，尽可能多地使用对应的复数资源名称。

接着，我们创建一个Post控制器，并在其中实现getHotPosts函数，用于获取热门帖子：

<?php

namespace App\Http\Controllers;

use App\Models\Post;
use Illuminate\Http\Request;

class PostController extends Controller
{
    public function getHotPosts(Request $request)
    {
        $posts = Post::orderBy('views', 'desc')->limit(10)->get();
        return response()->json([
            'posts' => $posts->toArray(),
        ]);
    }
}

这里我们使用了Post模型来排序帖子列表，以确保我们正在获取最热门的帖子。我们只返回前10个帖子作为热门帖子。

接下来，我们需要在API路由文件中注册这个控制器。我们假设我们的API路由文件位于/routes/api.php。我们在GET /hotPosts路由上注册getHotPosts：

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

use App\Http\Controllers\PostController;

Route::get('hotPosts', [PostController::class, 'getHotPosts']);

现在，我们已经准备好了我们的API路由，可以使用它来在前端显示热门帖子数据。

前后端连接

有了前端和后端之后，我们现在需要在前端代码中调用我们的API，以获取热门帖子，并将其呈现在页面上。

我们将使用axios库来进行API调用。它是一个流行的JavaScript HTTP客户端，可以用来向后端发送HTTP请求。

在这个例子中，我们将封装我们的API调用代码，并将其放在一个名为posts.ts的文件中：

import axios from 'axios';
import { Post } from '@/interfaces/post';

const API_URL = 'http://localhost:8000/api/';

export async function getHotPosts(): Promise<Post[]> {
  try {
    const response = await axios.get(`${API_URL}hotPosts`);
    return response.data.posts.map((post: any) => {
      return {
        id: post.id,
        title: post.title,
        content: post.content,
        date: new Date(post.created_at),
      } as Post;
    });
  } catch (err) {
    console.error(err);
    return [];
  }
}

这个代码片段包含了一个 getHotPosts 函数，它返回一个Promise<Post[]>对象。该函数使用axios来发送GET请求，获取热门帖子列表。

我们还定义了Post类型，该类型用于描述我们的帖子对象。

现在，我们在HotPosts组件中，使用posts.ts中定义的getHotPosts方法来获取热门帖子数据：

methods: {
    async fetchPosts() {
      try {
        const posts = await getHotPosts();
        this.posts = posts;
      } catch (err) {
        console.error(err);
      }
    },
}

这个方法使用了async和await，以确保在获取热门帖子数据之前，我们等待API调用函数返回数据。一旦我们收到数据，就将其分配给我们在组件中定义的帖子数组。

结论

本文介绍了如何使用Laravel和TypeScript来显示热门帖子列表。我们使用vue.js作为前端框架，Tailwind CSS作为样式库，并且使用了axios库来调用API。

我们还创建了帖子模型和控制器来获取热门帖子，并在API路由文件中将API公开。这样我们就可以在前端中调用这些API，并将数据呈现在页面上。

我们希望本文能够帮助您了解如何使用Laravel和TypeScript来快速构建高质量的Web应用程序。如果您有任何疑问或意见，请随时在评论区留言，我们将及时回复你。