vue3+SSM帖子类网页搜索功能的实现

前端

一、前端逻辑处理

首先在前端的页面设计中，首先得明白，关于帖子类的功能，我们应该有一个展示帖子的页面，一个帖子的组件，一个帖子详情的页面，这里我设计的组件名称分别为SearchPage用于展示，PostCard是封装展示帖子的组件，PostDetails是帖子详情组件。就应该是SearchPage组件中利用PostCard子组件将相关Post展示出来，并且对于每一个PostCard点击能够跳转到对应的PostDetails组件，在这里对于许多的组件我们不能够设计多个页面组件，所以PostDetails组件应该满足动态路由设计，在这里如果对动态路由感兴趣的同学可以看看我之前发的关于动态路由设计的文章。

二、组件设计

首先关于SearchPage组件，应该有一个posts变量来接收后端返回的数据，然后对于PostCard的调用我们则可以使用v-for来实现遍历避免多次编码，具体的代码示意如下：

const posts = ref([]);
// 初始化数据的方法
const GetSearch = async () => {
  const res = await SearchService(searchparam.value);
  posts.value = res.data.data;
};

这里SearchService是向后端发起请求得到对应数据，searchparam是绑定的搜索框，然后我们就可以在PostCard子组件中遍历。

 <PostCard v-for="post in posts" :key="post.id" :post="post" />

然后接下来是子组件中的处理，PostCard组件必须能够链接跳转到帖子详情页，这里我提供PostCard子组件代码供大家参考：

<template>
  <router-link :to="`/post/${post.id}`" class="post-card-link">
    <div class="post-card">
      <div class="post-content">
        <h2 class="post-title">{{ post.title }}</h2>
        <img :src="post.imagePath" alt="Post Image" class="post-image" />
      </div>
    </div>
  </router-link>
</template>

<script setup>
import { defineProps } from 'vue';
const props = defineProps({
  post: {
    type: Object,
    required: true
  }
});

</script>

<style scoped>
.post-card-link {
  text-decoration: none; /* 去除链接的默认下划线 */
  color: inherit; /* 继承父元素的颜色 */
}

.post-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  width: 100%; /* 确保卡片宽度占据整行 */
  max-width: none; /* 取消卡片的最大宽度限制 */
  transition: box-shadow 0.3s; /* 添加点击效果 */
}

.post-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 鼠标悬停时增加阴影 */
}

.post-content {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 标题和图片分布在两边 */
}

.post-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-right: 16px; /* 为标题和图片之间添加间距 */
  flex: 1; /* 使标题占据剩余空间 */
}

.post-image {
  width: 150px; /* 设置图片的固定宽度 */
  height: auto;
  border-radius: 8px;
}
</style>

这里link to设置了点击子组件后的跳转，最后根据路由设计就可以跳转到PostDetails组件中展示对应的详情，这里的路由代码和PostDetails组件接收动态参数的代码示意如下：

 {
            path: '/post/:id',
            name: 'PostDetails',
            component: () => import('@/views/post/PostDetails.vue'),
            props: true  // 将路由参数作为 props 传递给组件
          },

// 获取帖子的 ID
const postId = ref(route.params.id);

后端

对于后端我在SSM框架基础上使用的是Mybatis-plus，这里的逻辑处理也比较简单，就不具体解释了，直接展示代码：

@PostMapping("/search/{name}")
    public R<List<Post>> SearchPost(@PathVariable("name") String param) {
        LambdaQueryWrapper<Post> queryWrapper1 = new LambdaQueryWrapper<>();
        queryWrapper1.like(Post::getTitle, param);
        List<Post> result1 = postService.list(queryWrapper1);
        LambdaQueryWrapper<Post> queryWrapper2 = new LambdaQueryWrapper<>();
        queryWrapper2.like(Post::getContent, param);
        List<Post> result2 = postService.list(queryWrapper2);
        List<Post> res = new ArrayList<>();
        res.addAll(result1);
        for (Post post : result2) {
            if (!res.contains(post)){
                res.add(post);
            }
        }
        return R.success(res);
    }

这里的结果是标题或者帖子内容含有相关信息的都返回给前端。
最后希望这篇文章对大家有帮助。