• (Vue+SpringBoot+elementUi+WangEditer)仿论坛项目

    项目使用到的技术与库

    1.前端 Vue2 elementUi Cookie WangEditer

    2.后端 SpringBoot Mybatis-Plus

    3.数据库 MySql

    一、效果展示

    1.1主页效果：

    1.2 文章编辑页面：

    1.3 成功发布文章

    1.4 文章关键字搜索提示

     1.5 文章查询结果展示

    1.6 文章内容及交互展示

    二、表单设计的sql

    用户：

    1. create table paitool.user
    2. (
    3.     id                int auto_increment
    4.         primary key,
    5.     account           varchar(255)                                          not null,
    6.     password          varchar(255)                                          not null,
    7.     phone             varchar(20)                                           null,
    8.     address           varchar(255)                                          null,
    9.     isVip             tinyint(1)                  default 0                 null,
    10.     email             varchar(255)                                          null,
    11.     registration_date datetime                    default CURRENT_TIMESTAMP null,
    12.     last_login        datetime                                              null,
    13.     status            enum ('active', 'inactive') default 'active'          null,
    14.     constraint account_UNIQUE
    15.         unique (account),
    16.     constraint email_UNIQUE
    17.         unique (email),
    18.     constraint phone_UNIQUE
    19.         unique (phone)
    20. );

    文章：

    1. create table paitool.forum_posts
    2. (
    3.     id         int auto_increment
    4.         primary key,
    5.     title      varchar(255)                            not null,
    6.     content    text                                    not null,
    7.     author_id  int                                     not null,
    8.     created_at timestamp     default CURRENT_TIMESTAMP null,
    9.     updated_at timestamp     default CURRENT_TIMESTAMP null on update CURRENT_TIMESTAMP,
    10.     heat_value int           default 0                 null,
    11.     rating     decimal(3, 2) default 0.00              null,
    12.     tag        varchar(10)   default '其它'              null,
    13.     constraint forum_posts_ibfk_1
    14.         foreign key (author_id) references paitool.user (id)
    15. );

    文章交互表-点赞：

    1. create table paitool.forum_post_likes
    2. (
    3.     user_id int not null,
    4.     post_id int not null,
    5.     primary key (user_id, post_id),
    6.     constraint forum_post_likes_ibfk_1
    7.         foreign key (user_id) references paitool.user (id),
    8.     constraint forum_post_likes_ibfk_2
    9.         foreign key (post_id) references paitool.forum_posts (id)
    10. );

    文章交互表-收藏：

    1. create table paitool.forum_post_favorites
    2. (
    3.     user_id int not null,
    4.     post_id int not null,
    5.     primary key (user_id, post_id),
    6.     constraint forum_post_favorites_ibfk_1
    7.         foreign key (user_id) references paitool.user (id),
    8.     constraint forum_post_favorites_ibfk_2
    9.         foreign key (post_id) references paitool.forum_posts (id)
    10. );

    文章交互表-评论

    1. create table paitool.forum_comments
    2. (
    3.     id           int auto_increment
    4.         primary key,
    5.     post_id      int                                 not null,
    6.     user_id      int                                 not null,
    7.     comment_text text                                not null,
    8.     created_at   timestamp default CURRENT_TIMESTAMP null,
    9.     constraint forum_comments_ibfk_1
    10.         foreign key (user_id) references paitool.user (id),
    11.     constraint forum_comments_ibfk_2
    12.         foreign key (post_id) references paitool.forum_posts (id)
    13. );

    三、前端代码

    3.1 论坛主页

    Html:

    1. <template>
    2.     <div id="forumLayOut">
    3.  
    4.         <div id="Top" style="background-color: rgb(250, 250, 250); padding-top: 20px">
    5.  
    6.             <div id="serchBorder" style="padding-bottom: 13px;">
    7.                 
    8.                 <el-autocomplete v-model="searchKeyWord" :fetch-suggestions="querySearchAsync" :trigger-on-focus="false"
    9.                     placeholder="请输入关键字" style="width: 300px;" @select="handleSelect">
    10.                 el-autocomplete>
    11.                 <el-button type="primary" @click="onSubmit">查询el-button>
    12.             div>
    13.  
    14.             
    15.             <div>
    16.  
    17.                 <div style="margin-bottom: 15px;">
    18.                     <el-checkbox-group v-model="checkboxGroup1" :max="1">
    19.                         <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city
    20.                             }}el-checkbox-button>
    21.                     el-checkbox-group>
    22.                 div>
    23.  
    24.             div>
    25.  
    26.  
    27.             <div style="height: 380px; width: 100%;">
    28.                 
    29.                 <div class="block" style="width: 30%; float: left; margin-left: 5%; height: 400px;">
    30.                     <el-carousel height="350px" style="width: 100%;  ">
    31.                         <el-carousel-item v-for="item in 4" :key="item">
    32.                             <img src="https://img95.699pic.com/photo/50035/3211.jpg_wh860.jpg" alt="风景测试">
    33.                             <h3 class="small">{{ item }}h3>
    34.                         el-carousel-item>
    35.                     el-carousel>
    36.                 div>
    37.  
    38.  
    39.                 <div style=" height: 350px; background-color: rgb(250, 250, 250); width: 25%; float: left;
    40.                 border: 1px solid rgb(240, 240, 242);  margin-left: 3%;">
    41.  
    42.  
    43.                     <div style="height: 50px; width: 100%; background-color: rgb(245, 245, 245); ">
    44.                         <i class="el-icon-share">i>
    45.                         <div><b>热门b>div>
    46.                         <hr>
    47.                     div>
    48.  
    49.                     <div class="link-container">
    50.                         <a href="#" class="link" id="TurnLink">杀死谷歌，成为AI时代的搜索皇帝！a>
    51.                         <p style="color: gray;">Perplexity CEO 最新四万字访谈p>
    52.                     div>
    53.  
    54.                     <div class="link-container">
    55.                         <a href="#" class="link" id="TurnLink">重写系统后痛批：这门语言烂透了！a>
    56.                         <p style="color: gray;">耗时18个月，开发者弃TypeScript投Rustp>
    57.                     div>
    58.                     <div class="link-container">
    59.                         <a href="#" class="link" id="TurnLink">Shire 编码智能体语言a>
    60.                         <p style="color: gray;">打造你的专属 AI 编程助手p>
    61.                     div>
    62.  
    63.  
    64.                 div>
    65.  
    66.  
    67.                 <div style="float: left;  margin-left: 3%; height: 350px; background-color: rgb(250, 250, 250); width: 25%; float: left;
    68.                      border: 1px solid rgb(240, 240, 242); ">
    69.  
    70.  
    71.                     <div style="height: 50px; width: 100%; background-color: rgb(245, 245, 245); ">
    72.                         <i class="el-icon-message-solid">i>
    73.                         <div><b>头条b>div>
    74.                         <hr>
    75.                     div>
    76.  
    77.                     <div class="link-container">
    78.                         <a href="#" class="link" id="TurnLink">史上开发最久的游戏！a>
    79.                         <p style="color: gray;">耗时 22 年，5 名打工人凑了几百欧就开工，只剩 1 人坚守到发布...p>
    80.                     div>
    81.  
    82.                     <div class="link-container">
    83.                         <a href="#" class="link" id="TurnLink">实习期间创下 Transformera>
    84.                         <p style="color: gray;">他说：当年整个 AI 圈都无法预见我们今天的高度p>
    85.                     div>
    86.  
    87.                     <div class="link-container">
    88.                         <a href="#" class="link" id="TurnLink">杀死谷歌，成为AI时代的搜索皇帝！a>
    89.                         <p style="color: gray;">Perplexity CEO 最新四万字访谈p>
    90.                     div>
    91.  
    92.                 div>
    93.             div>
    94.  
    95.  
    96.         div>
    97.  
    98.         <el-divider>el-divider>
    99.         <div id="bottom">
    100.  
    101.             
    102.             <el-tabs v-model="activeName" @tab-click="handleClick" style="padding-left: 2em; ">
    103.  
    104.                 <el-tab-pane label="我的文章" name="first">
    105.                     <div class="parent-div" style="min-height: 500px">
    106.  
    107.                         <div v-if="posts.length === 0">
    108.                             <el-empty :image-size="200">el-empty>
    109.                         div>
    110.  
    111.                         <div class="custom-card" v-for="(post, index) in posts" :key="index"
    112.                             @click="getForumPostDetail(post.id)">
    113.                             <div class="card-content">
    114.                                 <h1 class="card-title">标题: {{ post.title }}h1>
    115.                                 <div class="card-meta">
    116.                                     <span>作者: {{ post.account }}span>
    117.                                     <span>标签: {{ post.tag }}span>
    118.                                     <span><i class="el-icon-view">{{ post.heatValue }}i>span>
    119.                                 div>
    120.                                 <div class="card-rating">
    121.                                     <span>文章评分:span>
    122.                                     <el-rate v-model="post.rating" disabled show-score text-color="#ff9900"
    123.                                         score-template="{value}" style="display: inline-block;">el-rate>
    124.                                 div>
    125.                             div>
    126.                         div>
    127.                     div>
    128.  
    129.  
    130.                 el-tab-pane>
    131.  
    132.  
    133.                 <el-tab-pane label="推荐文章" name="second">
    134.  
    135.                     <div v-if="posts.length === 0">
    136.                         <el-empty :image-size="200">el-empty>
    137.                     div>
    138.  
    139.                     <div class="custom-card" v-for="(post, index) in posts" :key="index"
    140.                         @click="getForumPostDetail(post.postId)">
    141.                         <div class="card-content">
    142.                             <h1 class="card-title">标题: {{ post.title }}h1>
    143.                             <div class="card-meta">
    144.                                 <span>作者: {{ post.account }}span>
    145.                                 <span>标签: {{ post.tag }}span>
    146.                                 <span><i class="el-icon-view">{{ post.heat_value }}i>span>
    147.                             div>
    148.                             <div class="card-rating">
    149.                                 <span>文章评分:span>
    150.                                 <el-rate v-model="post.rating" disabled show-score text-color="#ff9900"
    151.                                     score-template="{value}" style="display: inline-block;">el-rate>
    152.                             div>
    153.                         div>
    154.                     div>
    155.  
    156.                 el-tab-pane>
    157.                 <el-tab-pane label="热门文章" name="third">
    158.  
    159.  
    160.  
    161.                     <div class="parent-div" style="min-height: 500px">
    162.                         <div v-if="posts.length === 0">
    163.                             <el-empty :image-size="200">el-empty>
    164.                         div>
    165.                         <div class="custom-card" v-for="(post, index) in posts" :key="index"
    166.                             @click="getForumPostDetail(post.id)">
    167.                             <div class="card-content">
    168.                                 <h1 class="card-title">标题: {{ post.title }}h1>
    169.                                 <div class="card-meta">
    170.                                     <span>作者: {{ post.account }}span>
    171.                                     <span>标签: {{ post.tag }}span>
    172.                                     <span><i class="el-icon-view">{{ post.heatValue }}i>span>
    173.                                 div>
    174.                                 <div class="card-rating">
    175.                                     <span>文章评分:span>
    176.                                     <el-rate v-model="post.rating" disabled show-score text-color="#ff9900"
    177.                                         score-template="{value}" style="display: inline-block;">el-rate>
    178.                                 div>
    179.                             div>
    180.                         div>
    181.                     div>
    182.  
    183.  
    184.  
    185.  
    186.                 el-tab-pane>
    187.  
    188.                 <el-tab-pane label="优质文章" name="fourth">
    189.  
    190.  
    191.                     <div class="parent-div" style="min-height: 500px">
    192.                         <div v-if="posts.length === 0">
    193.                             <el-empty :image-size="200">el-empty>
    194.                         div>
    195.                         <div class="custom-card" v-for="(post, index) in posts" :key="index"
    196.                             @click="getForumPostDetail(post.id)">
    197.                             <div class="card-content">
    198.                                 <h1 class="card-title">标题: {{ post.title }}h1>
    199.                                 <div class="card-meta">
    200.                                     <span>作者: {{ post.account }}span>
    201.                                     <span>标签: {{ post.tag }}span>
    202.                                     <span><i class="el-icon-view">{{ post.heatValue }}i>span>
    203.                                 div>
    204.                                 <div class="card-rating">
    205.                                     <span>文章评分:span>
    206.                                     <el-rate v-model="post.rating" disabled show-score text-color="#ff9900"
    207.                                         score-template="{value}" style="display: inline-block;">el-rate>
    208.                                 div>
    209.                             div>
    210.                         div>
    211.                     div>
    212.  
    213.  
    214.  
    215.                 el-tab-pane>
    216.  
    217.                 <el-tab-pane label="我的收藏" name="fifth">
    218.                     <div v-if="posts.length === 0">
    219.                         <el-empty :image-size="200">el-empty>
    220.                     div>
    221.  
    222.  
    223.  
    224.                     <div class="parent-div" style="min-height: 500px">
    225.                         <div v-if="posts.length === 0">
    226.                             <el-empty :image-size="200">el-empty>
    227.                         div>
    228.                         <div class="custom-card" v-for="(post, index) in posts" :key="index"
    229.                             @click="getForumPostDetail(post.id)">
    230.                             <div class="card-content">
    231.                                 <h1 class="card-title">标题: {{ post.title }}h1>
    232.                                 <div class="card-meta">
    233.                                     <span>作者: {{ post.account }}span>
    234.                                     <span>标签: {{ post.tag }}span>
    235.                                     <span><i class="el-icon-view">{{ post.heatValue }}i>span>
    236.                                 div>
    237.                                 <div class="card-rating">
    238.                                     <span>文章评分:span>
    239.                                     <el-rate v-model="post.rating" disabled show-score text-color="#ff9900"
    240.                                         score-template="{value}" style="display: inline-block;">el-rate>
    241.                                 div>
    242.                             div>
    243.                         div>
    244.                     div>
    245.  
    246.  
    247.                 el-tab-pane>
    248.             el-tabs>
    249.  
    250.             <el-button type="warning" round id="iWantPost" @click="navigateToPostEdit">我要发布文章el-button>
    251.  
    252.         div>
    253.  
    254.  
    255.  
    256.  
    257.     div>
    258. template>

    js:

    css:

     

    3.2 发布文章页面

    1. <template>
    2.  
    3.     <div style="border: 1px solid #ccc; line-height: normal; height: 100%;">
    4.         <div>
    5.  
    6.             <el-form :inline="true" :model="formInline" class="demo-form-inline">
    7.                 <el-form-item label="文章标题">
    8.                     <el-input v-model="formInline.title" placeholder="请输入文章标题" maxlength="20">el-input>
    9.                 el-form-item>
    10.  
    11.  
    12.                 <el-form-item label="类别">
    13.                     <el-select v-model="formInline.category" placeholder="请选择文章类别">
    14.                         <el-option label="新闻报道" value="news">el-option>
    15.                         <el-option label="科技动态" value="technology">el-option>
    16.                         <el-option label="生活时尚" value="lifestyle">el-option>
    17.                         <el-option label="教育学习" value="education">el-option>
    18.                         <el-option label="健康养生" value="health">el-option>
    19.                     el-select>
    20.                 el-form-item>
    21.  
    22.  
    23.                 <el-form-item>
    24.                     <el-button type="primary" @click="onSubmit"
    25.                         v-loading.fullscreen.lock="fullscreenLoading">提交el-button>
    26.                 el-form-item>
    27.             el-form>
    28.  
    29.         div>
    30.         <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
    31.         <Editor style="height: 500px; overflow-y: hidden; height: 100%;" v-model="html" :defaultConfig="editorConfig"
    32.             :mode="mode" @onCreated="onCreated" />
    33.     div>
    34.  
    35. template>
    36.  
    37.  
    38. <script>
    39. import Vue from 'vue'
    40. import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
    41. import axios from 'axios'
    42. import Cookies from 'js-cookie'
    43.  
    44.  
    45. export default Vue.extend({
    46.     components: { Editor, Toolbar },
    47.     data() {
    48.         return {
    49.             editor: null,
    50.             html: ' ',
    51.             toolbarConfig: {},
    52.             editorConfig: { placeholder: '请输入内容...' },
    53.             mode: 'default', // or 'simple'
    54.             formInline: {
    55.                 title: '',
    56.                 category: ''
    57.             },
    58.             fullscreenLoading: false
    59.         }
    60.     },
    61.     methods: {
    62.         onCreated(editor) {
    63.             this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    64.  
    65.         },
    66.         onSubmit() {
    67.  
    68.             this.fullscreenLoading = true;
    69.  
    70.             const userId = Cookies.get('userId'); // 获取并转换userId
    71.  
    72.             axios.post('/api/forum/add', {
    73.  
    74.                 "title": this.formInline.title,
    75.  
    76.                 "content": this.editor.getHtml(), 
    77.  
    78.                 "authorId": userId,
    79.  
    80.                 "tag": this.formInline.category,
    81.  
    82.             }).then((response) => {
    83.  
    84.                 console.log(response.data);
    85.  
    86.                 this.fullscreenLoading = false;
    87.  
    88.                 this.$router.push({ name: 'ForumSucessPostView' });
    89.  
    90.             }).catch(error => {
    91.  
    92.                 console.error(error);
    93.  
    94.                 this.fullscreenLoading = false;
    95.  
    96.             });
    97.  
    98.         },
    99.  
    100.     },
    101.     mounted() {
    102.  
    103.     },
    104.     beforeDestroy() {
    105.         const editor = this.editor
    106.         if (editor == null) return
    107.         editor.destroy() // 组件销毁时，及时销毁编辑器
    108.  
    109.  
    110.     },
    111.  
    112. })
    113. script>
    114.  
    115.  
    116. <style src="@wangeditor/editor/dist/css/style.css">style>

    3.3 文章发布成功页面

    3.4 查看文章页面

    html:

    1. <template>
    2.     <div style="line-height: normal; background-color: rgb(246, 247, 249); height: auto; min-height: 80%;">
    3.  
    4.         
    5.         <div style="padding-top: 10px; width: auto; min-width: 40%;">
    6.             
    7.             <div id="Infor" style="background-color: white;">
    8.                 <h1 style="font-size: 28px; text-align: center">文章标题:{{title}}h1>
    9.                 <span>创作者:{{author}}span>
    10.                 <span style="margin-left: 20px;">创作日期:{{createAt}}span>
    11.                 <span style="margin-left: 20px;"><i class="el-icon-view">{{heatValue}}i>span>
    12.             div>
    13.  
    14.             <el-divider><i class="el-icon-mobile-phone">i>el-divider>
    15.  
    16.  
    17.             
    18.             <div id="contentDisplay">
    19.                 <div v-html="content"
    20.                     style="padding-left: 2em; padding-top: 15px; padding-right: 2em; padding-bottom: 30px;">div>
    21.             div>
    22.         div>
    23.  
    24.         <el-divider><i class="el-icon-edit">i>el-divider>
    25.  
    26.         
    27.         <div id="buttom">
    28.             <el-button type="warning" round @click="getBackToForum">返回到论坛el-button>
    29.             <el-button type="warning" icon="el-icon-star-off" circle @click="PostFavorite">el-button>
    30.             <el-button type="danger" icon="el-icon-thumb" circle @click="PostLike">el-button>
    31.  
    32.         div>
    33.  
    34.         
    35.         <div id="commentListShow">
    36.             <el-card class="box-card">
    37.                 <div slot="header" class="clearfix">
    38.                     <span>评论详情span>
    39.                 div>
    40.                 <div id="commentInputArea">
    41.  
    42.                     <el-input type="textarea" placeholder="请您输入友善的评论吧" v-model="textarea" maxlength="300"
    43.                         show-word-limit id="inputFrame" :clearable="clearAble" resize="none">
    44.                     el-input>
    45.                     <div style="margin-top: 10px; padding-bottom: 50px;">
    46.                         <el-button type="primary" @click="SubmitComment">发表评论el-button>
    47.                         <el-button type="primary" @click="CancelComment">取消评论el-button>
    48.                     div>
    49.                 div>
    50.  
    51.                 <div id="commentList">
    52.                     <div class="comment-card" v-for="comment in comments" :key="comment.id">
    53.                         <div class="comment-head">
    54.                             <h1 class="username">{{ comment.account }}h1>
    55.                             <p class="created-at">发表于:{{ comment.createdAt }}p>
    56.                         div>
    57.                         <el-divider>el-divider>
    58.                         <p class="comment-text">{{ comment.commentText }}p>
    59.                     div>
    60.                 div>
    61.  
    62.             el-card>
    63.         div>
    64.  
    65.  
    66.     div>
    67. template>

    script:

    1. <script>
    2. import axios from 'axios';
    3. import Cookies from 'js-cookie';
    4.  
    5.  
    6. export default{
    7.     data() {
    8.         return {
    9.             postId: '',
    10.             title: '',
    11.             content: '',
    12.             value1: null,
    13.             textarea: '',
    14.             userId:'',
    15.             clearAble: true,
    16.             comments:{},
    17.             author:'',
    18.             createAt:'',
    19.             heatValue:'',
    20.         }
    21.     },
    22.     created() {
    23.  
    24.         this.postId = this.$route.params.postId;
    25.         this.fetchPostDetail(this.$route.params.postId);
    26.         this.userId = Cookies.get('userId');
    27.     },
    28.     mounted() {
    29.         this.readComment();
    30.         
    31.     },
    32.     methods: {
    33.         // 前端实现路径传参
    34.         async fetchPostDetail(postId) {
    35.             try {
    36.                 this.fullscreenLoading = true;
    37.                 const url = `/api/forum/post/${postId}`;
    38.                 // 发起GET请求
    39.                 const response = await axios.get(url);
    40.  
    41.                 if (response.status === 200) {
    42.                     // 请求成功，处理响应数据
    43.                     const postData = response.data;
    44.                     console.log('文章详情:', postData);
    45.                     // 更新组件状态或执行其他操作
    46.                     this.title = response.data.data.title;
    47.                     this.content = response.data.data.content;
    48.                     this.author = response.data.data.account;
    49.                     this.createAt = response.data.data.createdAt;
    50.                     this.heatValue = response.data.data.heatValue;
    51.                     this.fullscreenLoading = false;
    52.                 } else {
    53.                     console.error('请求失败，状态码:', response.status);
    54.                 }
    55.             } catch (error) {
    56.                 console.error('请求错误:', error);
    57.             }
    58.         },
    59.  
    60.         getBackToForum() {
    61.             this.$router.push({ name: 'forum' });
    62.         },
    63.  
    64.  
    65.         // 取消评论
    66.         CancelComment(){
    67.             this.textarea = '';
    68.  
    69.         },
    70.  
    71.         // 执行点赞按钮
    72.         PostLike(){
    73.             this.isLogin();
    74.             axios.get('/api/forum/like',{
    75.                 params:{
    76.                     postId : this.postId,
    77.                     userId : this.userId
    78.                 }
    79.             }).then((response)=>{
    80.                this.MessageNotify(response);
    81.             })
    82.         },
    83.  
    84.         // 执行收藏按钮
    85.         PostFavorite(){
    86.             this.isLogin();
    87.             axios.get('/api/forum/favorite',{
    88.                 params:{
    89.                     postId : this.postId,
    90.                     userId : this.userId
    91.                 }
    92.             }).then((response)=>{
    93.                this.MessageNotify(response);
    94.             })
    95.  
    96.  
    97.         },
    98.         SubmitComment(){
    99.  
    100.             this.isLogin();
    101.  
    102.             axios.post('/api/forum/writeComment',{
    103.                 postId : this.postId,
    104.                 userId : this.userId,
    105.                 commentText : this.textarea
    106.             }).then((response)=>{
    107.                 this.MessageNotify(response);
    108.                 this.textarea = '';
    109.                 this.readComment();
    110.             })
    111.  
    112.             console.log("submit");
    113.         },
    114.  
    115.         isLogin(){
    116.             if(Cookies.get('userId') == null){
    117.                 this.$message.error('请先登录');
    118.                 return;
    119.             }
    120.         },
    121.  
    122.         // 消息提醒
    123.         MessageNotify(response){
    124.             if(response.data.code == 200){
    125.                 this.$message.success(response.data.data);
    126.             }else{
    127.                 console.log(response.data);
    128.                 this.$message.error(response.data.message);
    129.             }
    130.         },
    131.  
    132.         readComment(){
    133.             axios.get('/api/forum/getComment',{
    134.                 params:{
    135.                     postId : this.postId
    136.                 }
    137.             }).then((response)=>{
    138.                 this.comments = response.data.data;
    139.             })
    140.         },
    141.  
    142.  
    143.     }
    144.  
    145. }
    146.  
    147.  
    148. script>

    css:

    3.5 文章搜索页面

    html:

    1. <template>
    2.     <div id="layout">
    3.  
    4.         <div id="searchFrame">
    5.             <div id="InputFrame">
    6.                 <el-input type="textarea" placeholder="请输入内容" v-model="textarea" rows="1" resize="none"
    7.                     style="font-size: larger; width: 80%;">
    8.                 el-input>
    9.                 <el-button type="warning" @click="SearchSubmit"  icon="el-icon-search">查询el-button>
    10.             div>
    11.         div>
    12.  
    13.         <div id="excess">
    14.  
    15.             <div id="Interate">
    16.                 <i class="el-icon-search"> 搜索结果i>
    17.             div>
    18.  
    19.         div>
    20.  
    21.         
    22.         <div id="SearchContent">
    23.  
    24.             <div v-if="posts.length === 0">
    25.                 <el-empty :image-size="200">el-empty>
    26.             div>
    27.  
    28.  
    29.  
    30.             <div class="custom-card" v-for="(post, index) in posts" :key="index" @click="getForumPostDetail(post.id)">
    31.                 <div class="card-content">
    32.                     <h1 class="card-title">标题: {{ post.title }}h1>
    33.                     <div class="card-meta">
    34.                         <span>作者: {{ post.account }}span>
    35.                         <span>标签: {{ post.tag }}span>
    36.                         <span><i class="el-icon-view">{{ post.heatValue }}i>span>
    37.                     div>
    38.                     <div class="card-rating">
    39.                         <span>文章评分:span>
    40.                         <el-rate v-model="post.rating" disabled show-score text-color="#ff9900" score-template="{value}"
    41.                             style="display: inline-block;">el-rate>
    42.                     div>
    43.                 div>
    44.             div>
    45.         div>
    46.  
    47.  
    48.     div>
    49. template>

    script:

    1. <script>
    2. import axios from 'axios';
    3.  
    4.  
    5. export default {
    6.     data() {
    7.         return {
    8.             textarea: '',
    9.             searchKeyWord: '',
    10.             posts: [],
    11.         }
    12.     },
    13.  
    14.     methods: {
    15.         SearchSubmit() {
    16.             console.log(this.textarea);
    17.             axios.get('/api/forum/search', {
    18.                 params: {
    19.                     searchKeyWord: this.textarea
    20.                 }
    21.             }).then((response) => {
    22.  
    23.                 if (response.data.code !== 200) {
    24.                     this.$notify({
    25.                         title: '警告',
    26.                         message: '搜索失败',
    27.                         type: 'warning'
    28.                     });
    29.                 }
    30.  
    31.                 console.log(response.data.data);
    32.                 this.posts = response.data.data;
    33.             });
    34.         },
    35.  
    36.  
    37.         Search() {
    38.  
    39.             axios.get('/api/forum/search', {
    40.                 params: {
    41.                     searchKeyWord: this.searchKeyWord
    42.                 }
    43.             }).then((response) => {
    44.  
    45.                 if (response.data.code !== 200) {
    46.                     this.$notify({
    47.                         title: '警告',
    48.                         message: '搜索失败',
    49.                         type: 'warning'
    50.                     });
    51.                 }
    52.  
    53.                 console.log(response.data.data);
    54.                 this.posts = response.data.data;
    55.             });
    56.         },
    57.  
    58.          // 跳转到文章详情
    59.          getForumPostDetail(postId) {
    60.             console.log("getForumPostDetail");
    61.             console.log(postId);
    62.             this.$router.push(`/post/${postId}`);
    63.         },
    64.  
    65.  
    66.  
    67.     },
    68.  
    69.     mounted() {
    70.         this.searchKeyWord = this.$route.params.searchKeyWord;
    71.         this.textarea = this.searchKeyWord;
    72.         this.Search();
    73.     }
    74.  
    75. }
    76. script>

    css:

    1. <style scoped>
    2. #layout {
    3.     width: 100%;
    4.     min-height: 90%;
    5.     background-color: rgb(245, 246, 247);
    6.     line-height: normal;
    7. }
    8.  
    9. #SearchContent{
    10.     min-height: 800px;
    11.     
    12.  
    13. }
    14.  
    15. #searchFrame {
    16.     height: 70px;
    17.     width: 100%;
    18.     background-color: white;
    19.     box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    20.     position: -webkit-sticky;
    21.     /* Safari */
    22.     position: sticky;
    23.     top: 0;
    24.     z-index: 1000;
    25.     line-height: normal;
    26. }
    27.  
    28. #InputFrame {
    29.     width: 40%;
    30.     margin: 0 auto;
    31.     height: 60%;
    32.     padding-top: 15px;
    33. }
    34.  
    35. #Interate {
    36.  
    37.     float: left;
    38.     margin-top: 20px;
    39.     margin-left: 20px;
    40. }
    41.  
    42. #excess {
    43.  
    44.     height: 61px;
    45.     width: 80%;
    46.     background-color: white;
    47.     margin: 0 auto;
    48.     margin-top: 25px;
    49.     border: 1px solid rgb(245, 245, 245);
    50.     border-radius: 4px;
    51. }
    52.  
    53.  
    54.  
    55. .custom-card {
    56.     background-color: #ffffff;
    57.     border-radius: 4px;
    58.     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    59.     margin-bottom: 16px;
    60.     transition: box-shadow 0.3s ease-in-out;
    61.     width: 80%;
    62.     margin: 0 auto;
    63.  
    64.     border: 1px solid rgb(245, 245, 245);
    65. }
    66.  
    67. .custom-card:hover {
    68.     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    69.     cursor: pointer;
    70.     background-color: rgb(245, 245, 245);
    71. }
    72.  
    73. .card-content {
    74.     padding: 16px;
    75. }
    76.  
    77. .card-title {
    78.     font-size: 1.2em;
    79.     margin-bottom: 8px;
    80.     color: #333;
    81. }
    82.  
    83. .card-meta {
    84.     display: flex;
    85.     align-items: center;
    86.     justify-content: space-between;
    87.     margin-bottom: 12px;
    88.     color: #666;
    89. }
    90.  
    91. .card-rating {
    92.     color: #666;
    93. }
    94.  
    95. .card-rating {
    96.     color: #666;
    97. }
    98. style>

     

     

    四、后端代码

    4.1项目后端依赖库

    1.         <dependency>
    2.             <groupId>org.springframework.bootgroupId>
    3.             <artifactId>spring-boot-starterartifactId>
    4.         dependency>
    5.  
    6.         <dependency>
    7.             <groupId>org.springframework.bootgroupId>
    8.             <artifactId>spring-boot-starter-webartifactId>
    9.             <scope>compilescope>
    10.         dependency>
    11.  
    12.         <dependency>
    13.             <groupId>com.mysqlgroupId>
    14.             <artifactId>mysql-connector-jartifactId>
    15.             <scope>runtimescope>
    16.         dependency>
    17.         <dependency>
    18.             <groupId>org.projectlombokgroupId>
    19.             <artifactId>lombokartifactId>
    20.             <optional>trueoptional>
    21.         dependency>
    22.  
    23.         <dependency>
    24.             <groupId>org.springframework.bootgroupId>
    25.             <artifactId>spring-boot-starter-testartifactId>
    26.             <scope>testscope>
    27.         dependency>
    28.         <dependency>
    29.             <groupId>org.mybatis.spring.bootgroupId>
    30.             <artifactId>mybatis-spring-boot-starterartifactId>
    31.             <version>2.3.1version>
    32.         dependency>
    33.  
    34.         <dependency>
    35.             <groupId>cn.hutoolgroupId>
    36.             <artifactId>hutool-allartifactId>
    37.             <version>5.8.11version>
    38.         dependency>
    39.  
    40.         <dependency>
    41.              <groupId>com.baomidougroupId>
    42.              <artifactId>mybatis-plus-boot-starterartifactId>
    43.              <version>3.5.3.1version>
    44.         dependency>
    45.  
    46.         
    47.         <dependency>
    48.             <groupId>com.github.xiaoymingroupId>
    49.             <artifactId>knife4j-spring-boot-starterartifactId>
    50.             <version>3.0.2version>
    51.         dependency>
    52.  
    53.         
    54.         <dependency>
    55.             <groupId>org.springframework.bootgroupId>
    56.             <artifactId>spring-boot-starter-webartifactId>
    57.         dependency>
    58.  
    59.         <dependency>
    60.             <groupId>org.springframeworkgroupId>
    61.             <artifactId>spring-webmvcartifactId>
    62.             <version>5.3.15version>
    63.         dependency>
    64.         <dependency>
    65.             <groupId>io.springfoxgroupId>
    66.             <artifactId>springfox-spring-webartifactId>
    67.             <version>3.0.0version>
    68.         dependency>
    69.  
    70.         <dependency>
    71.             <groupId>com.alibabagroupId>
    72.             <artifactId>fastjsonartifactId>
    73.             <version>1.2.76version>
    74.         dependency>
    75.  
    76.         
    77.         <dependency>
    78.             <groupId>com.alibabagroupId>
    79.             <artifactId>dashscope-sdk-javaartifactId>
    80.             <version>2.8.2version>
    81.         dependency>
    82.         
    83.         <dependency>
    84.             <groupId>com.squareup.okhttp3groupId>
    85.             <artifactId>okhttpartifactId>
    86.             <version>4.9.3version>
    87.         dependency>
    88.  
    89.         
    90.         <dependency>
    91.             <groupId>org.projectlombokgroupId>
    92.             <artifactId>lombokartifactId>
    93.             <optional>trueoptional>
    94.         dependency>
    95.  
    96.         
    97.         <dependency>
    98.             <groupId>org.apache.commonsgroupId>
    99.             <artifactId>commons-lang3artifactId>
    100.             <version>3.12.0version>
    101.         dependency>

    4.2工具类Result类与实体类

    1. public class Result {
    2.     // 状态码常量
    3.     public static final int SUCCESS = 200;
    4.     public static final int ERROR = 500;
    5.     
    6.     private int code; // 状态码
    7.     private String message; // 消息
    8.     private T data; // 数据
    9.  
    10.     // 构造函数，用于创建成功的结果对象
    11.     private Result(int code, String message, T data) {
    12.         this.code = code;
    13.         this.message = message;
    14.         this.data = data;
    15.     }
    16.  
    17.     // 成功结果的静态方法
    18.     public static  Result success(T data) {
    19.         return new Result<>(SUCCESS, "Success", data);
    20.     }
    21.  
    22.  
    23.     // 错误结果的静态方法
    24.     public static  Result error(String message) {
    25.         return new Result<>(ERROR, message, null);
    26.     }
    27.  
    28.     // 错误结果的静态方法，可以传入自定义的状态码
    29.     public static  Result error(int code, String message) {
    30.         return new Result<>(code, message, null);
    31.     }
    32.  
    33.     // 获取状态码
    34.     public int getCode() {
    35.         return code;
    36.     }
    37.  
    38.     // 设置状态码
    39.     public void setCode(int code) {
    40.         this.code = code;
    41.     }
    42.  
    43.     // 获取消息
    44.     public String getMessage() {
    45.         return message;
    46.     }
    47.  
    48.     // 设置消息
    49.     public void setMessage(String message) {
    50.         this.message = message;
    51.     }
    52.  
    53.     // 获取数据
    54.     public T getData() {
    55.         return data;
    56.     }
    57.  
    58.     // 设置数据
    59.     public void setData(T data) {
    60.         this.data = data;
    61.     }
    62.  
    63.     // 用于转换为Map类型的方法，方便序列化为JSON
    64.     public Map toMap() {
    65.         Map map = new HashMap<>();
    66.         map.put("code", code);
    67.         map.put("message", message);
    68.         map.put("data", data);
    69.         return map;
    70.     }
    71. }

    Entity:

    Forumpost:

    1. @TableName(value ="forum_posts")
    2. @Data
    3. public class ForumPosts implements Serializable {
    4.     /**
    5.      * 
    6.      */
    7.     @TableId(value = "id", type = IdType.AUTO)
    8.     private Integer id;
    9.     /**
    10.      * 
    11.      */
    12.     @TableField(value = "title")
    13.     private String title;
    14.     /**
    15.      * 
    16.      */
    17.     @TableField(value = "content")
    18.     private String content;
    19.     /**
    20.      * 
    21.      */
    22.     @TableField(value = "author_id")
    23.     private Integer authorId;
    24.     /**
    25.      * 
    26.      */
    27.     @TableField(value = "created_at")
    28.     private LocalDateTime createdAt;
    29.     /**
    30.      * 
    31.      */
    32.     @TableField(value = "updated_at")
    33.     private LocalDateTime updatedAt;
    34.     /**
    35.      * 
    36.      */
    37.     @TableField(value = "heat_value")
    38.     private Integer heatValue;
    39.     /**
    40.      * 
    41.      */
    42.     @TableField(value = "rating")
    43.     private BigDecimal rating;
    44.     /**
    45.      * 
    46.      */
    47.     @TableField(value = "tag")
    48.     private String tag;
    49.  
    50.     @TableField(exist = false)
    51.     private static final long serialVersionUID = 1L;
    52.  
    53.     @Override
    54.     public boolean equals(Object that) {
    55.         if (this == that) {
    56.             return true;
    57.         }
    58.         if (that == null) {
    59.             return false;
    60.         }
    61.         if (getClass() != that.getClass()) {
    62.             return false;
    63.         }
    64.         ForumPosts other = (ForumPosts) that;
    65.         return (this.getId() == null ? other.getId() == null : this.getId().equals(other.getId()))
    66.             && (this.getTitle() == null ? other.getTitle() == null : this.getTitle().equals(other.getTitle()))
    67.             && (this.getContent() == null ? other.getContent() == null : this.getContent().equals(other.getContent()))
    68.             && (this.getAuthorId() == null ? other.getAuthorId() == null : this.getAuthorId().equals(other.getAuthorId()))
    69.             && (this.getCreatedAt() == null ? other.getCreatedAt() == null : this.getCreatedAt().equals(other.getCreatedAt()))
    70.             && (this.getUpdatedAt() == null ? other.getUpdatedAt() == null : this.getUpdatedAt().equals(other.getUpdatedAt()))
    71.             && (this.getHeatValue() == null ? other.getHeatValue() == null : this.getHeatValue().equals(other.getHeatValue()))
    72.             && (this.getRating() == null ? other.getRating() == null : this.getRating().equals(other.getRating()))
    73.             && (this.getTag() == null ? other.getTag() == null : this.getTag().equals(other.getTag()));
    74.     }
    75.  
    76.     @Override
    77.     public int hashCode() {
    78.         final int prime = 31;
    79.         int result = 1;
    80.         result = prime * result + ((getId() == null) ? 0 : getId().hashCode());
    81.         result = prime * result + ((getTitle() == null) ? 0 : getTitle().hashCode());
    82.         result = prime * result + ((getContent() == null) ? 0 : getContent().hashCode());
    83.         result = prime * result + ((getAuthorId() == null) ? 0 : getAuthorId().hashCode());
    84.         result = prime * result + ((getCreatedAt() == null) ? 0 : getCreatedAt().hashCode());
    85.         result = prime * result + ((getUpdatedAt() == null) ? 0 : getUpdatedAt().hashCode());
    86.         result = prime * result + ((getHeatValue() == null) ? 0 : getHeatValue().hashCode());
    87.         result = prime * result + ((getRating() == null) ? 0 : getRating().hashCode());
    88.         result = prime * result + ((getTag() == null) ? 0 : getTag().hashCode());
    89.         return result;
    90.     }
    91.  
    92.     @Override
    93.     public String toString() {
    94.         StringBuilder sb = new StringBuilder();
    95.         sb.append(getClass().getSimpleName());
    96.         sb.append(" [");
    97.         sb.append("Hash = ").append(hashCode());
    98.         sb.append(", id=").append(id);
    99.         sb.append(", title=").append(title);
    100.         sb.append(", content=").append(content);
    101.         sb.append(", authorId=").append(authorId);
    102.         sb.append(", createdAt=").append(createdAt);
    103.         sb.append(", updatedAt=").append(updatedAt);
    104.         sb.append(", heatValue=").append(heatValue);
    105.         sb.append(", rating=").append(rating);
    106.         sb.append(", tag=").append(tag);
    107.         sb.append(", serialVersionUID=").append(serialVersionUID);
    108.         sb.append("]");
    109.         return sb.toString();
    110.     }
    111. }
    ForumPostLike:
    1. @Data
    2.  
    3. @TableName(value ="forum_post_likes")
    4.  
    5. public class ForumPostLike {
    6.  
    7.     private int userId;
    8.  
    9.     private int postId;
    10.  
    11.  
    12. }
    ForumPostFavorites:
    1. @Data
    2. @TableName(value ="forum_post_favorites")
    3. public class ForumPostFavorites {
    4.  
    5.     private int userId;
    6.  
    7.     private int postId;
    8.  
    9. }
    ForumComments
    1. @TableName(value ="forum_comments")
    2. @Data
    3. public class ForumComments implements Serializable {
    4.     /**
    5.      * 
    6.      */
    7.     @TableId(value = "id", type = IdType.AUTO)
    8.     private Integer id;
    9.  
    10.     /**
    11.      * 
    12.      */
    13.     @TableField(value = "post_id")
    14.     private Integer postId;
    15.  
    16.     /**
    17.      * 
    18.      */
    19.     @TableField(value = "user_id")
    20.     private Integer userId;
    21.  
    22.     /**
    23.      * 
    24.      */
    25.     @TableField(value = "comment_text")
    26.     private String commentText;
    27.  
    28.     /**
    29.      * 
    30.      */
    31.     @TableField(value = "created_at")
    32.     private LocalDateTime createdAt;
    33.  
    34.     @TableField(exist = false)
    35.     private static final long serialVersionUID = 1L;
    36.  
    37.     @Override
    38.     public boolean equals(Object that) {
    39.         if (this == that) {
    40.             return true;
    41.         }
    42.         if (that == null) {
    43.             return false;
    44.         }
    45.         if (getClass() != that.getClass()) {
    46.             return false;
    47.         }
    48.         ForumComments other = (ForumComments) that;
    49.         return (this.getId() == null ? other.getId() == null : this.getId().equals(other.getId()))
    50.             && (this.getPostId() == null ? other.getPostId() == null : this.getPostId().equals(other.getPostId()))
    51.             && (this.getUserId() == null ? other.getUserId() == null : this.getUserId().equals(other.getUserId()))
    52.             && (this.getCommentText() == null ? other.getCommentText() == null : this.getCommentText().equals(other.getCommentText()))
    53.             && (this.getCreatedAt() == null ? other.getCreatedAt() == null : this.getCreatedAt().equals(other.getCreatedAt()));
    54.     }
    55.  
    56.     @Override
    57.     public int hashCode() {
    58.         final int prime = 31;
    59.         int result = 1;
    60.         result = prime * result + ((getId() == null) ? 0 : getId().hashCode());
    61.         result = prime * result + ((getPostId() == null) ? 0 : getPostId().hashCode());
    62.         result = prime * result + ((getUserId() == null) ? 0 : getUserId().hashCode());
    63.         result = prime * result + ((getCommentText() == null) ? 0 : getCommentText().hashCode());
    64.         result = prime * result + ((getCreatedAt() == null) ? 0 : getCreatedAt().hashCode());
    65.         return result;
    66.     }
    67.  
    68.     @Override
    69.     public String toString() {
    70.         StringBuilder sb = new StringBuilder();
    71.         sb.append(getClass().getSimpleName());
    72.         sb.append(" [");
    73.         sb.append("Hash = ").append(hashCode());
    74.         sb.append(", id=").append(id);
    75.         sb.append(", postId=").append(postId);
    76.         sb.append(", userId=").append(userId);
    77.         sb.append(", commentText=").append(commentText);
    78.         sb.append(", createdAt=").append(createdAt);
    79.         sb.append(", serialVersionUID=").append(serialVersionUID);
    80.         sb.append("]");
    81.         return sb.toString();
    82.     }
    83. }

     DTO:

    1. @Data
    2. public class CommentDTO {
    3.  
    4.  
    5.     private int  userId;
    6.  
    7.     private int postId;
    8.  
    9.     private String commentText;
    10.  
    11.  
    12. }
    1. @Data
    2. public class ForumAddPostDTO {
    3.  
    4.     @JsonProperty("title")
    5.     private String title;
    6.  
    7.     @JsonProperty("content")
    8.     private String content;
    9.  
    10.     @JsonProperty("authorId")
    11.     private Integer authorId;
    12.  
    13.     @JsonProperty("tag")
    14.     private String tag;
    15. }

     VO:

    1. @Data
    2. public class ArticleVO {
    3.  
    4.     private String title;
    5.  
    6.     private String content;
    7.  
    8.     private String account;
    9.  
    10.     private Integer heatValue;
    11.  
    12.     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    13.     private LocalDateTime createdAt;
    14.  
    15. }
    1. @Data
    2. public class CommentVo {
    3.  
    4.     private int id;
    5.  
    6.     private String commentText;
    7.  
    8.     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    9.     private LocalDateTime createdAt;
    10.  
    11.     private String account;
    12. }
    1. @Data
    2. public class LikeSearchVo {
    3.     private String value;
    4. }

     

    4.3 自定义异常与全局异常

    1. public class BaseException extends RuntimeException{
    2.  
    3.     public BaseException(){
    4.     }
    5.     public BaseException(String msg){
    6.         super(msg);
    7.     }
    8.     
    9. }
    1. public class NotFoundArticleException extends BaseException{
    2.     public NotFoundArticleException(String msg){
    3.         super(msg);
    4.     }
    5.  
    6. }
    1. public class AlreadyLikeException extends BaseException{
    2.  
    3.     public AlreadyLikeException(String msg){
    4.         super(msg);
    5.     }
    6.  
    7.  
    8. }

    全局异常处理类：

    1. @RestControllerAdvice
    2. @Slf4j
    3. public class GlobalExceptionHandler {
    4.  
    5.     @ExceptionHandler
    6.     public Result exceptionHandler(BaseException ex){
    7.         log.error("异常信息：{}", ex.getMessage());
    8.         return Result.error(ex.getMessage());
    9.     }
    10.  
    11. }

    4.4Controller层

    1.ForumPostController

    1. @RequestMapping("/forum")
    2. @RestController
    3. @Api(tags = "文章管理")
    4. @Slf4j
    5. public class ForumPostController {
    6.  
    7.     @Autowired
    8.     ForumPostsService forumPostsService;
    9.  
    10.     @Autowired
    11.     UserService userService;
    12.  
    13.     @Autowired
    14.     ForumCommentsService forumCommentsService;
    15.  
    16.  
    17.  
    18.  
    19.     @ApiOperation("新增文章")
    20.     @PostMapping("/add")
    21.     public Result addForumPost(@RequestBody ForumAddPostDTO forumAddPostDTO) throws ParseException {
    22.         ForumPosts forumPosts = new ForumPosts();
    23.         BeanUtils.copyProperties(forumAddPostDTO, forumPosts);
    24.         forumPostsService.save(forumPosts);
    25.         return Result.success("新增成功");
    26.     }
    27.  
    28.  
    29.     @GetMapping("/getAllForumPost")
    30.     @ApiOperation("推荐文章查询")
    31.     public Result getAllForumPost(@RequestParam(value="pageSize", defaultValue = "10") int pageSize,
    32.                                   @RequestParam(value="pageNumber", defaultValue = "1") int pageNumber){
    33.  
    34.  
    35.         Page page = new Page<>(pageNumber, pageSize);
    36.         // 创建查询包装器并指定排序规则
    37.         QueryWrapper queryWrapper = new QueryWrapper<>();
    38.         // 假设你想按照创建时间降序排序
    39.         queryWrapper.orderByDesc("created_at");
    40.         Page paged = forumPostsService.page(page,queryWrapper);
    41.         List postsList = paged.getRecords();
    42.         List posts = new ArrayList<>();
    43.  
    44.  
    45.         for (ForumPosts post : postsList) {
    46.             ForumPageVO vo = new ForumPageVO();
    47.             // 获取账户信息
    48.             User user = userService.getById(post.getAuthorId());
    49.             vo.setAccount(user.getAccount());
    50.  
    51.             // 直接从ForumPosts对象复制其他字段
    52.             vo.setTag(post.getTag());
    53.             vo.setRating(post.getRating()); // 如果需要字符串形式
    54.             vo.setTitle(post.getTitle());
    55.             vo.setPostId(post.getId());
    56.             vo.setHeat_value(post.getHeatValue());
    57.             // 添加到列表
    58.             posts.add(vo);
    59.         }
    60.  
    61.  
    62.         return Result.success(posts);
    63.  
    64.     }
    65.  
    66.  
    67. //    文章阅读
    68.     @ApiOperation("读取文章")
    69.     @GetMapping("post/{id}")
    70.     public Result readArtical(@PathVariable int id){
    71.         ArticleVO articleVO =  forumPostsService.readArticle(id);
    72.         return Result.success(articleVO);
    73.     }
    74.  
    75.  
    76. //   我的文章功能
    77.     @ApiOperation("我的文章")
    78.     @GetMapping("/MyArticle")
    79.     public Result getMyArticle(@Param("id") int id){
    80.         List forumPostsList = forumPostsService.getByAuthorId(id);
    81.         return Result.success(forumPostsList);
    82.     }
    83.  
    84. //    热门文章功能
    85.     @ApiOperation("热门文章")
    86.     @GetMapping("/getHotPosts")
    87.     public Result getHotPosts(){
    88.         QueryWrapper queryWrapper = new QueryWrapper();
    89.         queryWrapper.orderByDesc("heat_value");
    90.         List forumPosts = forumPostsService.list(queryWrapper);
    91.         return Result.success(forumPosts);
    92.     }
    93.  
    94.     //    热门文章功能
    95.     @ApiOperation("优质文章")
    96.     @GetMapping("/getOutStandPosts")
    97.     public Result getOutStandPosts(){
    98.  
    99.         QueryWrapper queryWrapper = new QueryWrapper();
    100.         queryWrapper.orderByDesc("rating");
    101.         List forumPosts = forumPostsService.list(queryWrapper);
    102.         return Result.success(forumPosts);
    103.     }
    104.  
    105.  
    106.     //  我的收藏
    107.     @ApiOperation("我的收藏")
    108.     @GetMapping("/getMyFavorite")
    109.     public Result getMyFavorite(@Param("id") int id){
    110.  
    111.        List forumPostsList =  forumPostsService.getMyFavorite(id);
    112.  
    113.         return Result.success(forumPostsList);
    114.     }
    115.  
    116.  
    117. //    文章查询
    118.     @ApiOperation("文章查询")
    119.     @GetMapping("/search")
    120.     public Result postSearch(@RequestParam("searchKeyWord") String searchText){
    121.  
    122.         if (searchText == null){
    123.             return Result.error("不能输入为空噢");
    124.         }
    125.         LambdaQueryWrapper lambdaQueryWrapper = new LambdaQueryWrapper<>();
    126.  
    127. //        TODO:通过LamdaQueryWrapper 模糊查询
    128.         // 模糊查询title字段，%searchText%会被自动添加
    129.         lambdaQueryWrapper.like(ForumPosts::getTitle, searchText);
    130.  
    131.         // 假设这里有一个service接口用于操作ForumPosts表
    132.         List postsList = forumPostsService.list(lambdaQueryWrapper);
    133.  
    134.         // 根据你的Result类的具体实现，返回查询结果
    135.         return Result.success(postsList);
    136.     }
    137.  
    138.     /**
    139.      * 标题模糊查询
    140.      * @param keyword 关键词
    141.      * @return 匹配的标题列表
    142.      */
    143.     @GetMapping("/getLikeSearch")
    144.     @ApiOperation("标题模糊查询")
    145.     public Result getLikeSearch(@RequestParam String keyword){
    146.         List titles = forumPostsService.findTitlesByKeyword(keyword);
    147.         return Result.success(titles);
    148.     }
    149.  
    150.  
    151. //    用户交互
    152.     //    点赞
    153.     @ApiOperation("点赞")
    154.     @GetMapping("/like")
    155.     public Result PostLike(@RequestParam("postId") int postId,@RequestParam("userId") int userId){
    156.         String result =  forumPostsService.PostLike(postId,userId);
    157.         return Result.success(result);
    158.     }
    159.  
    160. //    收藏
    161.     @ApiOperation("收藏")
    162.     @GetMapping("/favorite")
    163.     public Result PostFavorite(@RequestParam("postId") int postId,@RequestParam("userId") int userId){
    164.  
    165.         String result = forumPostsService.PostFavorite(postId,userId);
    166.  
    167.         return Result.success(result);
    168.     }
    169.  
    170. //    写评论
    171.   @ApiOperation("写评论")
    172.   @PostMapping("/writeComment")
    173.    public Result WriteComment(@RequestBody CommentDTO commentdto){
    174.  
    175.       ForumComments forumComments = new ForumComments();
    176.       BeanUtils.copyProperties(commentdto,forumComments);
    177.       forumCommentsService.save(forumComments);
    178.       return Result.success("评论成功");
    179.   }
    180.  
    181.  
    182. //    读评论
    183.     @ApiOperation("读取评论")
    184.     @GetMapping("/getComment")
    185.     public Result> GetComment(@RequestParam("postId") int postId){
    186.         List comment = forumCommentsService.getComment(postId);
    187.         return Result.success(comment);
    188.     }
    189.  
    190.  
    191. }

    4.5 Service层
     

    1. public interface ForumPostsService extends IService {
    2.  
    3.     List getByAuthorId(Integer id);
    4.  
    5.     String PostLike(int postId, int userId);
    6.  
    7.     String PostFavorite(int postId, int userId);
    8.  
    9.     ArticleVO readArticle(int id);
    10.  
    11.     List getMyFavorite(int id);
    12.  
    13.     List findTitlesByKeyword(String keyword);
    14. }
    1. public interface ForumCommentsService extends IService {
    2.  
    3.     List getComment(int postId);
    4. }

    4.6 Mapper层

    1. public interface ForumCommentsMapper extends BaseMapper {
    2.  
    3. }
    1. @Mapper
    2. public interface ForumPostFavoritesMapper extends BaseMapper {
    3. }
    1. @Mapper
    2. public interface ForumPostLikeMapper extends BaseMapper {
    3. }
    1. @Mapper
    2. public interface ForumPostsMapper extends BaseMapper {
    3.  
    4.  
    5.     @Select("select  * from paitool.user as a,paitool.forum_posts as b where  a.id=b.author_id and a.id = #{id}")
    6.     List getByAuthorId(Integer id);
    7.     
    8.  
    9. }

     

    五、进阶思路

    1.通过ElasticSearch优化搜索引擎

    2.使用Redis存储热门文章，以减少数据库压力

    3.通过若依框架+AI 完善管理系统

  • 相关阅读:
    [翻译] NVIDIA HugeCTR，GPU 版本参数服务器 --(10)--- 推理架构
    CVBS、VGA、HDMI、MIPI等8种视频接口详解
    MySQL查询成本
    公司新来了个00后卷王，一副毛头小子的样儿，哪想到...
    Gbase8s数据库ALTER INDEX 语句
    消息推送平台的实时数仓？！flink消费kafka消息入到hive
    工程项目管理系统的Java实现：高效协同与信息共享
    前端修罗场，祝您中秋快乐
    2023-11-17 服务器开发-性能分析-intel-vtune-安装
    518抽奖软件，支持中途临时追加名单
  • 原文地址：https://blog.csdn.net/dogxixi/article/details/140369263