使用nuxt3+vue3+springboot的论坛

论坛设计

功能

  • 登录(jwt配合key来实现)
  • 注册
  • 接口权限,/user部分接口会验证用户是否登录
  • 帖子上传
  • 帖子查看
  • 帖子删除
  • 帖子数据处理(帖子访问量,用户访问量,作者被访问量)
  • 浏览处理(点赞,收藏)
  • 发送评论(没有设置删除了)

使用的库

wangEdior、element-plus、undraw-ui、springboot、mybatils-plus,系统大概的并发量在1000个左右,人数过多会直接嘎掉。

页面展示

搜索功能目前谷歌收录没有还没有弄好,后面再使用elasicsearch制作。

本论坛由女朋友开发的一个毕业设计,我负责协作部署写文章等,这里解释一下数据库的设计。

数据库解释

数据库的表总共是

  • user
  • article
  • comment
  • user_article

其中user里面携带一个key,这个是随机生成的一个函数,每一次跟用户相关的都会调用这个key,判断是否跟数据库的内容是否匹配,密码采用数据库保存的是md5加密。

comment之中包括一个comment_id和article_id,通过这个来实现回复这些的功能

user_article是浏览记录这些的,其中user_id和article_id构成一个共同的索引,然后每一次访问的时候都会来查询这个,没有这个记录就会生成一个,根据这个记录来增加like和save的,浏览记录这些也都是查询的这个表格,使用关联查询

遇到的困难与解决问题

富文本编辑器

使用的使用wangeditor实现的,这个非常的不错,还可以定制一些组件

背景

当时不知道使用什么背景,参考的是codepen一个作者的代码,具体的链接不记得了

部署

使用宝塔linux进行部署,安装的是jdk21,还有node 20.10.0版本,这些版本比较新,但是现在springboot已经不支持jdk17以下的了,凑合一下,由于经常性部署的时候报错,然后使用frp来做内网穿透一边调试一边看效果了。

文件管理

原本像使用阿里云oss的,但是后面还是算了,使用springboot的时候还出现了好些问题,它的classpath是不会实时更新文件的,最后还是改成了file,这里也给出一段代码

package com.xiaoluo.luntangend.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    // 图片处理
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        String currentDirectory = System.getProperty("user.dir");
        System.out.println("当前程序路径: " + currentDirectory);
        registry.addResourceHandler("/static/**")
                .addResourceLocations("file:./static/");
    }
}

中间还有一个问题就是使用spring seriucy的时候,因为它更新了6.1的版本好多东西都被废弃了,导致用起来比较麻烦,最后没办法还是使用filter了,还是选择了多写了一些代码,虽然它也是基于filter的,但是使用它可以解决很多配置问题。

跨域

因为nuxt.config.js里面没有配置代理的位置,前端也是没有代理,具体的代理女友也不知道怎么弄,有知道的朋友可以告诉一声,没办法在springboot里面配置了跨域

最后会女朋友继续增加以下功能

  • spring cloud 防火墙实现熔断
  • update部分采用mq分流
  • 数据库部分采用主从复制,使用proxysql来进行数据库代理提高数据库性能
  • 论坛内容部分放进去elastic search
  • 数据库分表,把评论表格给分散
  • elastic search 搜索
  • 用户信息编辑
  • 评论删除
  • 管理员模块
  • 分类查询
  • 以及前端多语言(中文,英文)
  • 把原本的filter替换为spring securiy
  • 优化seo更多的标签
  • 手机端适配,宽度适配
  • 关注,聊天功能

目前大概只制作了两天,还有很多的一个优化空间,大家有兴趣可以访问。后续会把整个代码进行开源,有兴趣的朋友可以私信我qq:2697279763

目前这个论坛还未上传好github

娟姐论坛

请注意,这个只是一个毕业设计,不要发送任何不正当言论!!!

如果可以,请我喝杯咖啡

【资源说明】 1、基于SpringBoot+Nuxt的服务端渲染博客系统源码+数据库+项目说明.zip 2、该资源包括项目的全部源码,下载可以直接使用! 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能,需要能看懂代码,并且热爱钻研,自行调试。 基于SpringBoot+Nuxt的服务端渲染博客系统源码+数据库+项目说明.zip ### 简介 基于 SpringBootNuxt 的前后端分离博客 ### SQL文件 blog.sql 初始账号密码:Linter ### Nginx配置 ``` location / { proxy_pass http://127.0.0.1:3000; } location ~ .*\.(gif|jpg|jpeg|png)$ { proxy_pass http://127.0.0.1:3000; } location ~ .*\.(js|css|woff|ttf|ico)?$ { proxy_pass http://127.0.0.1:3000; } ``` ### 截图 #### 首页 ![首页](screenshot/blog-index.png) #### 登录 ![登录](screenshot/blog-login.png) #### 分类 ![分类](screenshot/blog-catalog.png) #### 文章 ![文章](screenshot/blog-article.png) #### 评论 ![评论](screenshot/blog-comment-new.png) #### 搜索 ![搜索](screenshot/blog-search.png) #### 后台首页 ![后台首页](screenshot/blog-admin-index.png) #### 发布文章 ![发布文章](screenshot/blog-article-new.png) #### 文章管理 ![文章管理](screenshot/blog-article-list.png) #### 新增分类 ![新增分类](screenshot/blog-category-new.png) #### 编辑分类 ![编辑分类](screenshot/blog-category-edit.png) #### 分类管理 ![分类管理](screenshot/blog-category-list.png) #### 评论管理 ![评论管理](screenshot/blog-comment-list.png) #### 新增用户 ![新增用户](screenshot/blog-user-new.png) #### 用户管理 ![用户管理](screenshot/blog-user-list.png)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值