Springboot+Vue豆宝社区前后端分离项目手把手实战系列教程23：文章搜索功能实现

2023-11-01 06:17:34

在 Spring Boot 和 Vue 中实现文章搜索功能：一步一步的指南

简介

Spring Boot 和 Vue 是当下流行的技术组合，用于构建强大的 Web 应用程序。本文将引导您了解如何在使用 Spring Boot 和 Vue 的项目中实现一个全面的文章搜索功能。从数据库设计到后端和前端代码的实现，我们将逐步探索每个步骤。

数据库设计

首先，在数据库中创建一个文章搜索表至关重要。该表将存储文章的标题、内容、作者、发布时间等相关信息。以下是如何设计表的结构：

CREATE TABLE article (
    id INT PRIMARY KEY AUTO_INCREMENT,
    title VARCHAR(255) NOT NULL,
    content TEXT NOT NULL,
    author VARCHAR(255) NOT NULL,
    publish_time TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
);

后端代码实现

在后端，我们需要创建一个用于处理搜索请求的接口。此接口将接收搜索，并返回符合条件的文章列表。以下是 Java 代码的示例：

@PostMapping("/search")
public List<Article> search(@RequestBody ArticleSearchRequest request) {
    // 根据搜索条件查询文章
    List<Article> articles = articleService.search(request.getKeyword());

    // 返回文章列表
    return articles;
}

前端代码实现

在前端，需要一个搜索框来接收用户的搜索请求并将其发送到后端。我们还需要一个结果列表来显示搜索结果。以下是 Vue 代码的示例：

<template>
    <div class="search-box">
        <input type="text" placeholder="请输入搜索内容" v-model="keyword">
        <button @click="search">搜索</button>
    </div>
    <div class="result-list">
        <ul>
            <li v-for="article in articles" :key="article.id">
                <a :href="article.url">{{ article.title }}</a>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            keyword: '',
            articles: []
        };
    },
    methods: {
        search() {
            // 向后端发送搜索请求
            this.$axios.post('/search', { keyword: this.keyword }).then(response => {
                // 获取搜索结果
                this.articles = response.data;
            });
        }
    }
};
</script>