SpringBoot+Vue豆宝社区前后端分离项目手把手实战系列教程18---随便看看功能实现

豆宝社区项目实战教程简介

本项目实战教程配有免费视频教程，配套代码完全开源。手把手从零开始搭建一个目前应用最广泛的Springboot+Vue前后端分离多用户社区项目。本项目难度适中，为便于大家学习，每一集视频教程对应在Github上的每一次提交。

项目首页截图

代码开源地址

前端 后端

视频教程地址

视频教程

前端技术栈

Vue Vuex Vue Router Axios Bulma Buefy Element Vditor DarkReader

后端技术栈

Spring Boot Mysql Mybatis MyBatis-Plus Spring Security JWT Lombok

随便看看前端

API

src\api\修改post.js

// 随便看看(推荐)
export function getRecommendTopics(id) {
  return request({
    url: '/post/recommend',
    method: 'get',
    params: {
      topicId: id
    }
  })
}

Recommend.vue

src\views\post\新增Recommend.vue

<template>
  <el-card class="" shadow="never">
    <div slot="header">
      <span class="has-text-weight-bold">🧐 随便看看</span>
    </div>
    <div>
      <p v-for="(item,index) in recommend" :key="index" :title="item.title" class="block ellipsis is-ellipsis-1">
        <router-link :to="{name:'post-detail',params: { id: item.id }}">
          <span v-if="index<9" class="tag">
            0{{ parseInt(index) + 1 }}
          </span>
          <span v-else class="tag">
            {{ parseInt(index) + 1 }}
          </span>
          {{ item.title }}
        </router-link>
      </p>
    </div>
  </el-card>
</template>

<script>
import { getRecommendTopics } from '@/api/post'
export default {
  name: 'Recommend',
  props: {
    topicId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      recommend: []
    }
  },
  created() {
    this.fetchRecommendTopics()
  },
  methods: {
    fetchRecommendTopics() {
      getRecommendTopics(this.topicId).then(value => {
        const { data } = value
        this.recommend = data
      })
    }
  }
}
</script>

<style scoped>
</style>

修改Detail.vue

src\views\post\Detail.vue

随便看看后端

BmsPostController

/**
 * 随便看看(推荐)
 *
 * @param id
 * @return
 */
@GetMapping("/recommend")
public ApiResult getRecommend(@RequestParam("topicId") String id) {
    List<BmsPost> topics = postService.getRecommend(id);
    return ApiResult.success(topics);
}

<select id="getRecommend" resultType="com.notepad.blog.domain.BmsPost">
    SELECT
        t.id,t.title
    FROM
        bms_post t
    WHERE
        t.id != #{id}
    ORDER BY
        RAND(),
        t.`view`
    LIMIT 6
</select>