devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

(Vue+SpringBoot+elementUi+WangEditer)仿论坛项目_springboot elementui 论坛项目开源

作者：繁依Fanyi0 | 2024-08-17 21:21:51

赞

踩

springboot elementui 论坛项目开源

项目使用到的技术与库

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投Rust</p>
  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">实习期间创下 Transformer</a>
  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.             <!-- Tabs 标签页  -->
  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:

  1. <script>
  2. import axios from 'axios';
  3. import Cookies from 'js-cookie';
  4.  
  5. const cityOptions = ['新闻报道', '科技动态', '生活时尚', '教育学习', '健康养生'];
  6. export default {
  7.     components: {
  8.  
  9.     },
  10.  
  11.     data() {
  12.         return {
  13.             searchKeyWord: '',
  14.             suggestions: [], // 添加这个属性
  15.             checkboxGroup1: [],
  16.             cities: cityOptions,
  17.             activeName: 'first',
  18.             currentPage1: 5,
  19.             currentPage2: 5,
  20.             currentPage3: 5,
  21.             currentPage4: 4,
  22.             posts: [
  23.             ],
  24.             
  25.         }
  26.     },
  27.     methods: {
  28.         onSubmit() {
  29.             this.$router.push({
  30.                 name: 'ArticalSearchView',
  31.                 params: {
  32.                     searchKeyWord: this.searchKeyWord
  33.                 }
  34.             })
  35.  
  36.  
  37.         },
  38.         handleClick(tab) {
  39.  
  40.             // 我的文章
  41.             if (tab.name === 'first') {
  42.                 this.posts = []
  43.                 this.getMyArticle();
  44.  
  45.             }
  46.  
  47.             // 推荐文章
  48.             if (tab.name === 'second') {
  49.                 this.posts = [];
  50.  
  51.                 axios.get('/api/forum/getAllForumPost', {
  52.                     params: {
  53.                         pageSize: 1,
  54.                         pageNumber: 10
  55.                     }
  56.                 }).then((response) => {
  57.                     console.log(response.data.data);
  58.                     
  59.                     this.posts = response.data.data;
  60.                 });
  61.  
  62.  
  63.             }
  64.             // 热门文章
  65.             if (tab.name === 'third') {
  66.                 this.posts = [];
  67.  
  68.                 axios.get('/api/forum/getHotPosts').then((response) => {
  69.                     console.log(response.data.data);
  70.                     this.posts = response.data.data;
  71.                 });
  72.  
  73.  
  74.             }
  75.  
  76.             // 优质文章
  77.             if (tab.name === 'fourth') {
  78.                 this.posts = [];
  79.  
  80.                 axios.get('/api/forum/getOutStandPosts').then((response) => {
  81.                     console.log(response.data.data);
  82.                     this.posts = response.data.data;
  83.                 });
  84.  
  85.             }
  86.  
  87.             // 我的收藏
  88.             if (tab.name === 'fifth') {
  89.                 this.posts = [];
  90.                 const id = Cookies.get("userId");
  91.  
  92.                 if (id === null) {
  93.                     this.$message({
  94.                         message: '请先登录',
  95.                         type: 'warning'
  96.                     });
  97.                     return;
  98.                 }
  99.  
  100.                 axios.get('/api/forum/getMyFavorite', {
  101.                     params: {
  102.                         id: id
  103.                     }
  104.                 }).then((response) => {
  105.                     console.log(response.data.data);
  106.                     this.posts = response.data.data;
  107.                 });
  108.  
  109.             }
  110.  
  111.  
  112.  
  113.         },
  114.  
  115.         // 处理分页功能
  116.         handleSizeChange(val) {
  117.             console.log(`每页 ${val} 条`);
  118.         },
  119.         handleCurrentChange(val) {
  120.             console.log(`当前页: ${val}`);
  121.         },
  122.  
  123.         navigateToPostEdit() {
  124.             this.$router.push({ name: 'ForumPostEditView' });
  125.         },
  126.  
  127.  
  128.         // 跳转到文章详情
  129.         getForumPostDetail(postId) {
  130.             console.log("getForumPostDetail");
  131.             console.log(postId);
  132.             this.$router.push(`/post/${postId}`);
  133.         },
  134.  
  135.         getMyArticle() {
  136.             this.posts = [];
  137.             const id = Cookies.get("userId");
  138.  
  139.             if (id === null) {
  140.                 this.$message({
  141.                     message: '请先登录',
  142.                     type: 'warning'
  143.                 });
  144.                 return;
  145.             } else {
  146.                 axios.get('/api/forum/MyArticle', {
  147.                     params: {
  148.                         id: id
  149.                     }
  150.                 }).then((response) => {
  151.                     console.log(response.data.data);
  152.                     this.posts = response.data.data;
  153.                 })
  154.  
  155.             }
  156.  
  157.         },
  158.         // 异步获取建议列表
  159.         querySearchAsync(queryString, cb) {
  160.             if (queryString.length === 0) {
  161.                 return cb([]); // 当查询字符串为空时，直接返回空数组
  162.             }
  163.             axios.get('/api/forum/getLikeSearch', { params: { keyword: queryString } })
  164.                 .then(response => {
  165.                     // 确保从后端返回的数据中提取出正确的数组
  166.                     const results = response.data.data || [];
  167.                     // 调用callback函数，传入搜索结果
  168.                     cb(results);
  169.                 })
  170.                 .catch(error => {
  171.                     console.error('Error fetching search suggestions:', error);
  172.                    
  173.                     cb([]);
  174.                 });
  175.         },
  176.         // 处理选择事件
  177.         handleSelect(item) {
  178.             this.searchKeyWord = item.value; 
  179.             this.onSubmit();
  180.         }
  181.  
  182.  
  183.     },
  184.  
  185.     mounted() {
  186.         this.getMyArticle();
  187.  
  188.     }
  189.  
  190.  
  191. }
  192.  
  193. </script>

css:

  1. <style scoped>
  2. #forumLayOut {
  3.  
  4.     background-color: white;
  5.     height: auto;
  6.     width: 100%;
  7.     line-height: normal;
  8. }
  9.  
  10. #serchBorder {
  11.  
  12.     line-height: normal;
  13. }
  14.  
  15. .el-carousel__item h3 {
  16.     color: #475669;
  17.     font-size: 14px;
  18.     opacity: 0.75;
  19.     line-height: 150px;
  20.     margin: 0;
  21. }
  22.  
  23. .el-carousel__item:nth-child(2n) {
  24.     background-color: #99a9bf;
  25. }
  26.  
  27. .el-carousel__item:nth-child(2n+1) {
  28.     background-color: #d3dce6;
  29. }
  30.  
  31. #Pagination {
  32.     align-self: center;
  33.     /* 居中对齐 */
  34.     margin-bottom: 1rem;
  35.     /* 可选，增加底部边距 */
  36.     margin-top: 10%;
  37. }
  38.  
  39.  
  40. #iWantPost {
  41.     position: fixed;
  42.     /* 设置为固定定位 */
  43.     bottom: 60px;
  44.     /* 距离底部的距离，可根据需要调整 */
  45.     right: 40px;
  46.     /* 距离右侧的距离，可根据需要调整 */
  47. }
  48.  
  49.  
  50. .el-tabs__content {
  51.     overflow: hidden;
  52.     position: relative;
  53.     height: auto;
  54. }
  55.  
  56. .custom-card {
  57.     background-color: #ffffff;
  58.     border-radius: 4px;
  59.     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  60.     margin-bottom: 16px;
  61.     transition: box-shadow 0.3s ease-in-out;
  62. }
  63.  
  64. .custom-card:hover {
  65.     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  66.     cursor: pointer;
  67.     background-color: rgb(245, 245, 245);
  68. }
  69.  
  70. .card-content {
  71.     padding: 16px;
  72. }
  73.  
  74. .card-title {
  75.     font-size: 1.2em;
  76.     margin-bottom: 8px;
  77.     color: #333;
  78. }
  79.  
  80. .card-meta {
  81.     display: flex;
  82.     align-items: center;
  83.     justify-content: space-between;
  84.     margin-bottom: 12px;
  85.     color: #666;
  86. }
  87.  
  88. .card-rating {
  89.     color: #666;
  90. }
  91.  
  92. .link-container {
  93.     line-height: normal;
  94.     float: left;
  95.     width: 100%;
  96.     text-align: left;
  97.     padding-left: 40px;
  98.     padding-top: 10px;
  99. }
  100.  
  101. .link {
  102.     text-decoration: none;
  103.     font-size: large;
  104.     color: black;
  105. }
  106.  
  107. .link:hover {
  108.     text-decoration: underline;
  109. }
  110. </style>

 

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.boot</groupId>
  3.             <artifactId>spring-boot-starter</artifactId>
  4.         </dependency>
  5.  
  6.         <dependency>
  7.             <groupId>org.springframework.boot</groupId>
  8.             <artifactId>spring-boot-starter-web</artifactId>
  9.             <scope>compile</scope>
  10.         </dependency>
  11.  
  12.         <dependency>
  13.             <groupId>com.mysql</groupId>
  14.             <artifactId>mysql-connector-j</artifactId>
  15.             <scope>runtime</scope>
  16.         </dependency>
  17.         <dependency>
  18.             <groupId>org.projectlombok</groupId>
  19.             <artifactId>lombok</artifactId>
  20.             <optional>true</optional>
  21.         </dependency>
  22.  
  23.         <dependency>
  24.             <groupId>org.springframework.boot</groupId>
  25.             <artifactId>spring-boot-starter-test</artifactId>
  26.             <scope>test</scope>
  27.         </dependency>
  28.         <dependency>
  29.             <groupId>org.mybatis.spring.boot</groupId>
  30.             <artifactId>mybatis-spring-boot-starter</artifactId>
  31.             <version>2.3.1</version>
  32.         </dependency>
  33.  
  34.         <dependency>
  35.             <groupId>cn.hutool</groupId>
  36.             <artifactId>hutool-all</artifactId>
  37.             <version>5.8.11</version>
  38.         </dependency>
  39.  
  40.         <dependency>
  41.              <groupId>com.baomidou</groupId>
  42.              <artifactId>mybatis-plus-boot-starter</artifactId>
  43.              <version>3.5.3.1</version>
  44.         </dependency>
  45.  
  46.         <!--swagger-->
  47.         <dependency>
  48.             <groupId>com.github.xiaoymin</groupId>
  49.             <artifactId>knife4j-spring-boot-starter</artifactId>
  50.             <version>3.0.2</version>
  51.         </dependency>
  52.  
  53.         <!--web-->
  54.         <dependency>
  55.             <groupId>org.springframework.boot</groupId>
  56.             <artifactId>spring-boot-starter-web</artifactId>
  57.         </dependency>
  58.  
  59.         <dependency>
  60.             <groupId>org.springframework</groupId>
  61.             <artifactId>spring-webmvc</artifactId>
  62.             <version>5.3.15</version>
  63.         </dependency>
  64.         <dependency>
  65.             <groupId>io.springfox</groupId>
  66.             <artifactId>springfox-spring-web</artifactId>
  67.             <version>3.0.0</version>
  68.         </dependency>
  69.  
  70.         <dependency>
  71.             <groupId>com.alibaba</groupId>
  72.             <artifactId>fastjson</artifactId>
  73.             <version>1.2.76</version>
  74.         </dependency>
  75.  
  76.         <!-- https://mvnrepository.com/artifact/com.alibaba/dashscope-sdk-java -->
  77.         <dependency>
  78.             <groupId>com.alibaba</groupId>
  79.             <artifactId>dashscope-sdk-java</artifactId>
  80.             <version>2.8.2</version>
  81.         </dependency>
  82.         <!--okhttp3 依赖-->
  83.         <dependency>
  84.             <groupId>com.squareup.okhttp3</groupId>
  85.             <artifactId>okhttp</artifactId>
  86.             <version>4.9.3</version>
  87.         </dependency>
  88.  
  89.         <!-- Lombok dependency -->
  90.         <dependency>
  91.             <groupId>org.projectlombok</groupId>
  92.             <artifactId>lombok</artifactId>
  93.             <optional>true</optional>
  94.         </dependency>
  95.  
  96.         <!--        验证码模块-->
  97.         <dependency>
  98.             <groupId>org.apache.commons</groupId>
  99.             <artifactId>commons-lang3</artifactId>
  100.             <version>3.12.0</version>
  101.         </dependency>

4.2工具类Result类与实体类

  1. public class Result<T> {
  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 <T> Result<T> success(T data) {
  19.         return new Result<>(SUCCESS, "Success", data);
  20.     }
  21.  
  22.  
  23.     // 错误结果的静态方法
  24.     public static <T> Result<T> error(String message) {
  25.         return new Result<>(ERROR, message, null);
  26.     }
  27.  
  28.     // 错误结果的静态方法，可以传入自定义的状态码
  29.     public static <T> Result<T> 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<String, Object> toMap() {
  65.         Map<String, Object> 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<ForumPosts> page = new Page<>(pageNumber, pageSize);
  36.         // 创建查询包装器并指定排序规则
  37.         QueryWrapper<ForumPosts> queryWrapper = new QueryWrapper<>();
  38.         // 假设你想按照创建时间降序排序
  39.         queryWrapper.orderByDesc("created_at");
  40.         Page<ForumPosts> paged = forumPostsService.page(page,queryWrapper);
  41.         List<ForumPosts> postsList = paged.getRecords();
  42.         List<ForumPageVO> 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<ArticleVO> 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<ForumPosts> forumPostsList = forumPostsService.getByAuthorId(id);
  81.         return Result.success(forumPostsList);
  82.     }
  83.  
  84. //    热门文章功能
  85.     @ApiOperation("热门文章")
  86.     @GetMapping("/getHotPosts")
  87.     public Result getHotPosts(){
  88.         QueryWrapper<ForumPosts> queryWrapper = new QueryWrapper();
  89.         queryWrapper.orderByDesc("heat_value");
  90.         List<ForumPosts> forumPosts = forumPostsService.list(queryWrapper);
  91.         return Result.success(forumPosts);
  92.     }
  93.  
  94.     //    热门文章功能
  95.     @ApiOperation("优质文章")
  96.     @GetMapping("/getOutStandPosts")
  97.     public Result getOutStandPosts(){
  98.  
  99.         QueryWrapper<ForumPosts> queryWrapper = new QueryWrapper();
  100.         queryWrapper.orderByDesc("rating");
  101.         List<ForumPosts> 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<ForumPosts> 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<ForumPosts> lambdaQueryWrapper = new LambdaQueryWrapper<>();
  126.  
  127. //        TODO:通过LamdaQueryWrapper 模糊查询
  128.         // 模糊查询title字段，%searchText%会被自动添加
  129.         lambdaQueryWrapper.like(ForumPosts::getTitle, searchText);
  130.  
  131.         // 假设这里有一个service接口用于操作ForumPosts表
  132.         List<ForumPosts> 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<LikeSearchVo> 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<List<CommentVo>> GetComment(@RequestParam("postId") int postId){
  186.         List<CommentVo> comment = forumCommentsService.getComment(postId);
  187.         return Result.success(comment);
  188.     }
  189.  
  190.  
  191. }

4.5 Service层
 

  1. public interface ForumPostsService extends IService<ForumPosts> {
  2.  
  3.     List<ForumPosts> 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<ForumPosts> getMyFavorite(int id);
  12.  
  13.     List<LikeSearchVo> findTitlesByKeyword(String keyword);
  14. }
  1. public interface ForumCommentsService extends IService<ForumComments> {
  2.  
  3.     List<CommentVo> getComment(int postId);
  4. }

4.6 Mapper层

  1. public interface ForumCommentsMapper extends BaseMapper<ForumComments> {
  2.  
  3. }
  1. @Mapper
  2. public interface ForumPostFavoritesMapper extends BaseMapper<ForumPostFavorites> {
  3. }
  1. @Mapper
  2. public interface ForumPostLikeMapper extends BaseMapper<ForumPostLike> {
  3. }
  1. @Mapper
  2. public interface ForumPostsMapper extends BaseMapper<ForumPosts> {
  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<ForumPosts> getByAuthorId(Integer id);
  7.     
  8.  
  9. }

 

五、进阶思路

1.通过ElasticSearch优化搜索引擎

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/994524
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号