基于Vue与Spring Boot的诗词交流与评分平台 - 源码深度解析

JavaJavaScriptMavenHTMLCSSSSM框架MySQLSpringboot框架使用Vue
2026-02-116 浏览

文章摘要

本项目构建了一个基于Vue前端与Spring Boot后端的诗词文化交流与评分平台，旨在为诗词爱好者提供一个专业的线上互动空间。平台的核心业务价值在于解决了传统诗词论坛互动性弱、评价体系缺失的痛点。用户不仅能自由发布原创或转载的诗词作品，还能对他人作品进行结构化评分与深度评论，从而形成良性的创作反馈...

诗词鉴赏与交流平台技术解析

项目背景与意义

在数字化时代背景下，传统文化传承面临新的挑战与机遇。诗词作为中华文化的瑰宝，需要一个现代化的交流平台来促进创作者与爱好者之间的互动。传统诗词论坛普遍存在互动性弱、评价体系不完善等问题，无法满足现代用户对专业交流和深度互动的需求。

诗词鉴赏与交流平台应运而生，通过技术手段构建了一个集创作、分享、评价、交流于一体的专业社区。平台不仅解决了传统论坛的痛点，更为诗词爱好者提供了结构化的评分体系和深度交流空间，形成了良性的创作反馈循环。

系统架构与技术栈

前端技术架构

前端采用Vue.js框架构建单页面应用，配合Vue Router进行路由管理，Vuex实现状态集中管理。组件化开发模式确保了代码的可维护性和复用性。

// Vuex状态管理示例
const store = new Vuex.Store({
  state: {
    userInfo: null,
    poetryList: [],
    currentPoem: null
  },
  mutations: {
    SET_USER_INFO(state, userInfo) {
      state.userInfo = userInfo
    },
    SET_POETRY_LIST(state, list) {
      state.poetryList = list
    }
  },
  actions: {
    async fetchPoetryList({ commit }, params) {
      const response = await axios.get('/api/poetry/list', { params })
      commit('SET_POETRY_LIST', response.data)
    }
  }
})

后端技术架构

后端基于Spring Boot框架构建RESTful API服务，采用经典的三层架构模式：

// Spring Boot主启动类
@SpringBootApplication
@MapperScan("com.edu.mapper")
public class PoetryApplication {
    public static void main(String[] args) {
        SpringApplication.run(PoetryApplication.class, args);
    }
}

配置文件采用YAML格式，集成了MySQL、Redis等核心组件：

# application.yml
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/vue_shicisite
    username: vue_shicisite
    password: vue_shicisite
    driver-class-name: com.mysql.cj.jdbc.Driver
  redis:
    host: java.envdown.site
    port: 6379
    password: 1234
  servlet:
    multipart:
      max-file-size: 1000MB
      max-request-size: 1000MB

数据库设计亮点

核心表结构深度分析

诗词交流论坛表(t_bbs)设计

CREATE TABLE `t_bbs` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID主键',
  `title` varchar(255) DEFAULT NULL COMMENT '标题',
  `content` text DEFAULT NULL COMMENT '内容',
  `bz` varchar(255) DEFAULT NULL COMMENT '备注',
  `user_id` int(11) DEFAULT NULL COMMENT '发布人',
  `btype_id` int(11) DEFAULT NULL COMMENT '帖子类型',
  `add_time` datetime DEFAULT NULL COMMENT '插入数据库时间',
  PRIMARY KEY (`id`),
  KEY `FK6768185218199869467` (`user_id`),
  KEY `FK1538350978205602803` (`btype_id`),
  CONSTRAINT `FK1538350978205602803` FOREIGN KEY (`btype_id`) REFERENCES `t_btype` (`id`),
  CONSTRAINT `FK6768185218199869467` FOREIGN KEY (`user_id`) REFERENCES `t_user` (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='交流论坛'

设计亮点分析：

  1. 外键约束优化：通过外键约束确保数据完整性，user_id关联用户表，btype_id关联帖子类型表
  2. 索引策略：为user_id和btype_id建立索引，提升查询性能
  3. 字符集选择：采用utf8mb4字符集，完美支持生僻字和特殊符号
  4. 文本字段设计：content字段使用TEXT类型，满足长篇诗词内容存储需求

评论管理系统表(t_comment)设计

CREATE TABLE `t_comment` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID主键',
  `target` varchar(255) DEFAULT NULL COMMENT '评论资源',
  `tid` varchar(255) DEFAULT NULL COMMENT '评论资源id',
  `content` text DEFAULT NULL COMMENT '评论内容',
  `score` varchar(255) DEFAULT NULL COMMENT '星级',
  `bz` varchar(255) DEFAULT NULL COMMENT '备注',
  `user_id` int(11) DEFAULT NULL COMMENT '评论用户',
  `add_time` datetime DEFAULT NULL COMMENT '插入数据库时间',
  PRIMARY KEY (`id`),
  KEY `FK6440605437177378349` (`user_id`),
  CONSTRAINT `FK6440605437177378349` FOREIGN KEY (`user_id`) REFERENCES `t_user` (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='评论管理'

设计特色：

  1. 通用评论设计：通过target和tid字段实现多资源类型评论，支持诗词、帖子等不同资源的评论功能
  2. 评分体系集成：score字段存储星级评分，与评论内容结合形成完整的评价体系
  3. 时间戳管理：add_time字段自动记录评论时间，支持按时间排序和筛选

评论管理界面

核心功能实现

1. 诗词交流论坛系统

论坛功能采用模块化设计，支持帖子发布、分类管理、互动评论等完整流程：

@Controller
@RequestMapping("/bbs")
public class BbsController {
    @Resource
    private BbsService bbsService;
    @Resource
    private CommentService commentService;
    @Resource
    private BtypeService btypeService;
    @Resource
    private UserService userService;

    @RequestMapping("/list")
    @ResponseBody
    @RequireLoginWithToken
    public Result list(Bbs bbs, @RequestHeader("X-Token") String token,
                     @RequestParam(value = "pageNo", defaultValue = "1") Integer pageNo,
                     @RequestParam(value = "pageSize", defaultValue = "10") Integer pageSize) {
        User temp = userService.getUser(token);
        bbs.setUserId(temp.getId());
        bbs.setUser(temp);
        
        Page<Bbs> pdatas = bbsService.findPage(bbs, pageNo, pageSize);
        return Result.success(pdatas);
    }

    @PostMapping("/add")
    @ResponseBody
    @RequireLoginWithToken
    public Result add(@RequestBody Bbs bbs, @RequestHeader("X-Token") String token) {
        User user = userService.getUser(token);
        bbs.setUserId(user.getId());
        bbs.setAddTime(new Timestamp(System.currentTimeMillis()));
        
        // 敏感词过滤
        String filteredContent = minganService.filterContent(bbs.getContent());
        bbs.setContent(filteredContent);
        
        bbsService.add(bbs);
        return Result.success("发布成功");
    }
}

论坛管理界面

2. 结构化评分与评论系统

评分评论系统采用前后端分离架构，实现实时评分更新和深度评论功能：

@Service
public class CommentServiceImpl implements CommentService {
    @Autowired
    private CommentMapper commentMapper;
    
    @Override
    public Result addComment(Comment comment) {
        // 验证评分范围
        if (Integer.parseInt(comment.getScore()) < 1 || 
            Integer.parseInt(comment.getScore()) > 5) {
            return Result.error("评分必须在1-5分之间");
        }
        
        comment.setAddTime(new Timestamp(System.currentTimeMillis()));
        commentMapper.insert(comment);
        
        // 更新诗词平均评分
        updatePoetryAvgScore(comment.getTid());
        
        return Result.success("评论成功");
    }
    
    private void updatePoetryAvgScore(String poetryId) {
        Double avgScore = commentMapper.selectAvgScoreByTarget("poetry", poetryId);
        // 更新诗词表的平均评分字段
        poetryMapper.updateAvgScore(poetryId, avgScore);
    }
}

前端评分组件实现：

<template>
  <div class="rating-system">
    <div class="star-rating">
      <span v-for="star in 5" :key="star" 
            @click="setRating(star)"
            :class="['star', { active: star <= currentRating }]">
        ★
      </span>
    </div>
    <textarea v-model="commentContent" placeholder="请输入您的评论..."></textarea>
    <button @click="submitComment" :disabled="!currentRating">提交评价</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentRating: 0,
      commentContent: ''
    }
  },
  methods: {
    setRating(rating) {
      this.currentRating = rating
    },
    async submitComment() {
      try {
        const response = await this.$axios.post('/api/comment/add', {
          target: 'poetry',
          tid: this.poetryId,
          score: this.currentRating,
          content: this.commentContent
        })
        
        this.$emit('comment-added', response.data)
        this.resetForm()
      } catch (error) {
        this.$message.error('评论提交失败')
      }
    }
  }
}
</script>

诗词详情与评论界面

3. 用户权限管理系统

基于RBAC模型的权限控制系统，支持多角色精细化管理：

@Entity
@Table(name = "t_user_role")
public class UserRole {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;
    
    @Column(name = "user_id")
    private Integer userId;
    
    @Column(name = "role_id")
    private Integer roleId;
    
    // 关联关系
    @ManyToOne
    @JoinColumn(name = "user_id", insertable = false, updatable = false)
    private User user;
    
    @ManyToOne
    @JoinColumn(name = "role_id", insertable = false, updatable = false)
    private Role role;
}

@Service
public class PermissionService {
    @Autowired
    private UserRoleMapper userRoleMapper;
    
    public boolean hasPermission(Integer userId, String permission) {
        List<Role> roles = userRoleMapper.selectRolesByUserId(userId);
        return roles.stream()
                   .flatMap(role -> role.getPermissions().stream())
                   .anyMatch(p -> p.getPermissionCode().equals(permission));
    }
}

权限拦截器实现：

@Component
public class PermissionInterceptor implements HandlerInterceptor {
    @Autowired
    private PermissionService permissionService;
    
    @Override
    public boolean preHandle(HttpServletRequest request, 
                           HttpServletResponse response, Object handler) throws Exception {
        String token = request.getHeader("X-Token");
        User user = userService.getUser(token);
        
        String requestURI = request.getRequestURI();
        String permission = mapUriToPermission(requestURI);
        
        if (!permissionService.hasPermission(user.getId(), permission)) {
            response.setStatus(HttpStatus.FORBIDDEN.value());
            return false;
        }
        
        return true;
    }
}

用户管理界面

4. 敏感词过滤系统

集成敏感词过滤机制，保障社区内容质量：

@Service
public class MinganService {
    @Autowired
    private MinganMapper minganMapper;
    
    private Set<String> sensitiveWords;
    
    @PostConstruct
    public void init() {
        // 加载敏感词库
        List<Mingan> words = minganMapper.selectList(null);
        sensitiveWords = words.stream()
                            .map(Mingan::getWord)
                            .collect(Collectors.toSet());
    }
    
    public String filterContent(String content) {
        if (StringUtils.isBlank(content)) {
            return content;
        }
        
        for (String word : sensitiveWords) {
            content = content.replaceAll(word, "***");
        }
        
        return content;
    }
}

实体模型设计

系统采用JPA实现ORM映射，实体关系设计严谨：

@Entity
@Table(name = "t_bbs")
@Data
public class Bbs {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;
    
    private String title;
    
    @Lob
    private String content;
    
    private String bz;
    
    @Column(name = "user_id")
    private Integer userId;
    
    @Column(name = "btype_id")
    private Integer btypeId;
    
    @Column(name = "add_time")
    private Timestamp addTime;
    
    // 关联关系
    @ManyToOne
    @JoinColumn(name = "user_id", insertable = false, updatable = false)
    private User user;
    
    @ManyToOne
    @JoinColumn(name = "btype_id", insertable = false, updatable = false)
    private Btype btype;
    
    @OneToMany(mappedBy = "bbsId")
    private List<Comment> comments;
}

数据库E-R关系图

功能展望与优化

1. 引入Redis缓存优化

现状分析：当前系统频繁查询诗词列表、用户信息等热点数据，数据库压力较大。

优化方案：

@Service
public class PoetryCacheService {
    @Autowired
    private RedisTemplate<String, Object> redisTemplate;
    
    private static final String POETRY_CACHE_KEY = "poetry:list:";
    private static final long CACHE_EXPIRE = 3600; // 1小时
    
    public List<Poetry> getCachedPoetryList(String dynasty, int page) {
        String key = POETRY_CACHE_KEY + dynasty + ":" + page;
        List<Poetry> cached = (List<Poetry>) redisTemplate.opsForValue().get(key);
        
        if (cached != null) {
            return cached;
        }
        
        // 缓存未命中，查询数据库
        List<Poetry> poetryList = poetryMapper.selectByDynasty(dynasty, page);
        redisTemplate.opsForValue().set(key, poetryList, CACHE_EXPIRE, TimeUnit.SECONDS);
        
        return poetryList;
    }
}

2. 消息队列异步处理

应用场景：评论通知、数据统计等非实时性操作可以异步化处理。

技术选型：RabbitMQ或Apache Kafka

@Component
public class CommentEventProducer {
    @Autowired
    private AmqpTemplate rabbitTemplate;
    
    public void sendCommentEvent(CommentEvent event) {
        rabbitTemplate.convertAndSend("comment.exchange", "comment.routingkey", event);
    }
}

@Component
public class CommentEventListener {
    @RabbitListener(queues = "comment.queue")
    public void handleCommentEvent(CommentEvent event) {
        // 异步处理评论相关逻辑
        notificationService.sendCommentNotification(event);
        statisticsService.updateCommentStats(event);
    }
}

3. 微服务架构改造

架构目标：将单体应用拆分为用户服务、内容服务、评论服务等独立微服务。

服务拆分方案：

  • 用户服务：负责认证、授权、用户信息管理
  • 内容服务：诗词、帖子等内容的CRUD操作
  • 评论服务：评分、评论功能独立部署
  • 网关服务：统一入口，处理路由、限流、鉴权

4. 智能推荐算法集成

功能规划：基于用户行为数据实现个性化内容推荐。

技术实现：

# 推荐算法示例（Python伪代码）
class PoetryRecommender:
    def __init__(self):
        self.collaborative_filter = CollaborativeFilter()
        self.content_based_filter = ContentBasedFilter()
    
    def recommend(self, user_id, top_n=10):
        # 协同过滤推荐
        cf_recommendations = self.collaborative_filter.recommend(user_id, top_n)
        
        # 基于内容推荐
        cb_recommendations = self.content_based_filter.recommend(user_id, top_n)
        
        # 混合推荐策略
        final_recommendations = self.hybrid_strategy(cf_recommendations, cb_recommendations)
        
        return final_recommendations

5. 移动端适配与PWA支持

技术方案：采用响应式设计 + PWA技术，提升移动端用户体验。

<template>
  <div class="poetry-app" :class="{ 'mobile-layout': isMobile }">
    <nav-bar :collapsed="isMobile" />
    <main :class="['content', { 'mobile-content': isMobile }]">
      <router-view />
    </main>
  </div>
</template>

<script>
export default {
  computed: {
    isMobile() {
      return this.$store.state.device.isMobile
    }
  },
  mounted() {
    // PWA服务注册
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js')
    }
  }
}
</script>

总结

诗词鉴赏与交流平台通过现代化的技术架构，成功构建了一个专业级的诗词文化交流社区。系统在数据库设计、功能实现、用户体验等方面都体现了较高的技术水平。

平台采用Spring Boot + Vue.js的前后端分离架构，结合RBAC权限模型、敏感词过滤、结构化评分等特色功能，为诗词爱好者提供了完善的创作和交流环境。数据库设计注重性能优化和数据完整性，实体关系模型严谨合理。

未来通过引入缓存机制、消息队列、微服务架构等优化方案，可以进一步提升系统的 scalability 和性能。智能推荐算法的集成将增强平台的个性化服务能力，而移动端适配和PWA支持将扩大用户覆盖范围。

该平台不仅

本文关键词
VueSpring Boot诗词交流平台源码解析技术架构

上下篇

上一篇
没有更多文章
下一篇
没有更多文章