校园社交平台(SpringBoot+React前后端分离项目)

 项目已开源,欢迎star!!!

项目gitee地址:校园社交平台: ⭐基于React+Spring Boot的前后端分离项目。校园社交平台,旨在为大学校园提供一个社交平台,通过发布动态为校园学生提供分享校园生活,交友,求助,二手交易等需求。

项目介绍

校园社交平台,旨在为大学校园提供一个社交平台,通过发布动态为校园学生提供分享校园生活,交友,求助,二手交易等需求。同时管理员可对动态、用户管理,包括进行包括增、删、改、查等操作。

本项目技术栈包括React、Spring Boot等,是一个前后端分离项目。

⭐主要功能:

  • 用户登录、注册、退出登录
  • 发布动态、游览动态、点赞动态
  • 修改个人信息
  • 用户管理(管理员)
    • 查询所有用户
    • 修改用户信息
    • 添加用户
    • 删除用户
  • 帖子管理(管理员)
    • 查询所有帖子
    • 添加帖子
    • 删除帖子
    • 帖子审核(通过、拒绝)

适合人群

本项目实质上是一个管理系统+帖子系统,通过学习本项目,你将掌握基本的管理系统的实现和动态展示及发布,适合人群包括:

  • 刚学习完或想学习Spring Boot,适合作为Spring Boot入门学习项目
  • 想学习实现管理系统的同学(包括且不限于用户管理、学生管理、图书管理等)
  • 想学习实现发布动态(帖子)系统
  • 想学习如何实现前后端分离项目
  • 想要打造校园社交、交流、交易平台,进行二次开发并投入使用
  • 想要做软件项目课程的作业
  • 想要做软件毕业设计

项目特色

  • 手把手教学如何启动前、后端项目
  • 手把手教学快速了解和上手项目、代码
  • 手把手教学如何修改前端样式,将页面文字改成自己的需求
  • 配套详细的E-R图,用例图,用例描述
  • 详细的业务逻辑流程介绍

项目展示

技术选型

前端:

  • HTML + CSS + JavaScript三件套
  • React开发框架(前端开发框架)
  • Umi开发框架(对React的进一步封装)
  • Ant Design组件库(便于前端开发的组件)

后端:

  • Java
  • Spring(依赖注入框架,帮助你管理 Java 对象,集成一些其他的内容)
  • Spring MVC(web 框架,提供接口访问、restful接口等能力)
  • Mybatis(Java 操作数据库的框架,持久层框架,对 jdbc 的封装)
  • MyBatis-Plus(对 mybatis 的增强,不用写 sql 也能实现增删改查)
  • Spring Boot(快速启动 / 快速集成项目。不用自己管理 spring 配置,不用自己整合各种框架)
  • jUnit 单元测试库(便于对代码进行测试)
  • MySQL 数据库

项目启动

前端

(需要下载node.js,npm或yarn,文档末尾《知识补充》有相关介绍和下载安装教程)

环境要求:Node.js 版本推荐16-17

1.使用开发工具(VsCode或WebStorm等)打开前端项目文件

2.终端输入执行以下命令:

安装依赖:

npm install

启动:

npm start

部署(需要将项目部署到服务器中执行):

npm build

执行命令后会得到 dist 目录,可以放到自己的 web 服务器指定的路径;也可以使用 Docker 容器部署,将 dist、Dockerfile、docker 目录(文件)一起打包即可。

后端

使用IDEA开发工具打开项目文件并启动。

快速上手

想要快速上手了解项目,推荐先阅读文档中的代码目录结构。对整个项目有个全局的了解,再然后是具体代码。

⭐最快了解和上手项目具体代码(前端或后端)的方法,就是询问chatGPT!!!

具体方法是将某个文件的代码复制到chatGPT中,chatGPT会给出该段代码的解释,能够帮助快速了解代码。对代码全局了解之后,如果仍有不清楚的部分或语法都可以继续向GPT发起提问。

(如果你仍不清楚如何访问chatGTP,请阅读文末《知识补充》)

举个例子

比如我们对前端项目某个部分的代码不了解,我们直接复制代码询问chatGPT

chatGPT给出解释

系统设计图

❤数据库设计E-R图

❤系统用例图

代码讲解

目录结构(后端)

业务逻辑(后端)

用户注册

1、用户在前端输入用户账号、密码、二次密码

2、后端根据用户账号、密码、二次密码进行校验

- 非空

- 用户账号长度不小于4位

- 密码长度不小于8位

- 校验特殊字符

- 校验用户账号是否已存在

- 密码和二次密码是否相同

3、对密码进行加密

4、将数据保存到数据库中

帖子发布

1、用户在前端输入帖子内容后点击发布

2、后端根据请求参数进行校验

- 请求参数非空

- 帖子ID大于0

- 是否登录

- 帖子内容非空

- 帖子长度不大于8192

- 帖子内容是否包含非法词汇

3、将帖子数据更新到数据库

帖子审核

1、用户在前端输入帖子内容后点击发布

2、后端根据请求参数帖子ID,帖子状态进行校验

- 请求参数非空

- 帖子ID大于0

- 是否为管理员

3、将帖子状态数据更新到数据库

帖子点赞

1、用户在前端对某一个帖子点击点赞按钮

2、后端根据请求参数帖子ID进行校验

- 请求参数非空

- 帖子ID大于0

- 是否登录

- 帖子是否存在

- 用户是否已点赞

3、将帖子点赞数据更新到数据库,同时使用事务处理

知识补充

1.Node.js

Node.js具体介绍

在 Node.js 之前,JavaScript 只能运行在浏览器中,作为网页脚本使用,为网页添加一些特效,或者和服务器进行通信。有了 Node.js 以后,JavaScript 就可以脱离浏览器,像其它编程语言一样直接在计算机上使用,想干什么就干什么,再也不受浏览器的限制了。

Node.js 不是一门新的编程语言,也不是一个 JavaScript 框架,它是一套 JavaScript 运行环境,用来支持 JavaScript 代码的执行。用编程术语来讲,Node.js 是一个 JavaScript 运行时(Runtime)。

2.npm

npm 是 Node.js 的包管理工具,用来安装各种 Node.js 的扩展。

npm 是 JavaScript 的包管理工具,也是世界上最大的软件注册表。有超过 60 万个 JavaScript 代码包可供下载,每周下载约 30 亿次。npm 让 JavaScript 开发人员可以轻松地使用其他开发人员共享的代码。

下载安装

直接百度到官网下载安装。node下载16-17,不要下载18

检查是否安装成功

node -v
npm -v

安装淘宝镜像

npm config set registry https://registry.npm.taobao.org

3.yarn

Yarn是 Facebook 公司贡献的 Javascript 包管理器

使用命令下载安装:

npm install -g yarn如果上条命令安装失败,则尝试
sudo npm install -g yarn

项目已开源,欢迎star!!!

项目gitee地址:校园社交平台: ⭐基于React+Spring Boot的前后端分离项目。校园社交平台,旨在为大学校园提供一个社交平台,通过发布动态为校园学生提供分享校园生活,交友,求助,二手交易等需求。

如果本文章和项目对你有帮助的话,不妨点个star吧~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/65369.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

chatgpt赋能python:Python建立文本文件:一步步学习

Python建立文本文件:一步步学习 什么是文本文件? 在计算机领域,文本文件(Text file)是一种使用纯文本格式编码的文件,其中存储的是基本的ASCII字符或Unicode字符编码。文本文件是计算机中最常见的文件类型…

零基础如何开始学习 Python?看完这篇小白变大牛!

Python是一门面向对象的编程语言,该语言语法简单清晰、具有丰富和强大的库,简单易读、容易维护,受到了大家的喜欢和追捧,同时用途也非常广泛,无论是0基础还是初学者,学Python都是非常不错的选择。那么Pytho…

密码学和加密数字货币的简介

所有货币都需要一些方法来控制供应,并强制执行各种安全属性以防止作弊。在法定货币方面,像中央银行这样的组织控制货币供应量,并对实体货币增加防伪功能。这些安全功能提高了对攻击者的防范能力,但是他们不可能不赚钱地进行伪造。…

数字货币钱包 - 助记词 及 HD 钱包密钥原理

转载:https://zhuanlan.zhihu.com/p/34184347 分类 区块链相关的话题持续发酵之时,应该不少人知道加密货币钱包,钱包是普通用户与加密货币系统交互的入口,各种形态的钱百花齐放,手机钱包、桌面钱包、硬件钱包、网页钱…

中国对数字货币的态度及政策

一、关于数字货币官方最早发表的一份通告是2013年: 北京时间2013年12月5日央行网站消息,为保护社会公众的财产权益,保障人民币的法定货币地位,防范洗钱风险,维护金融稳定,中国人民银行、工业和信息化部、中…

UiBot 浏览器输入

拖拉组件”启动新的浏览器”,该组件有多种参数输入方式,如图: 执行流程,结果如图,IE浏览器已经打开rpazj网站 拖拉组件”启动新的浏览器”,该组件有多种参数输入方式,如图:执行流程&…

完美解决浏览器主页被hao123劫持,打开浏览器时自动进入hao123主页怎么办

完美解决浏览器主页被hao123劫持 首先使用排除法: 第一步,先查看浏览器快捷方式,右键—>属性,看看文件位置最后面有没有被篡改成别的路径,如果有,删掉后面的路径就行 如果位置路径是正常的,那…

浏览器主页被hao123劫持的解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

破除谷歌浏览器Google Chrome启动时打开hao123,2345等流氓网页

相信都遇到过这样的情况:自己的谷歌浏览器明明已经设置了启动时打开自己设定的特定网页,但是启动时还是打开了hao123,2345等流氓网页,有一个很简单的小技巧可以解决这个烦人的问题! 先设置谷歌浏览器启动打开某个特定网…

成功解决“谷歌浏览器打开是毒霸网址大全”问题,亲测有效(同样适用被hao123,或者2345浏览器篡改)

最开始一定要把电脑安装的360和电脑管家之类的退出。 第一步:发现问题的存在 在谷歌网址中输入:chrome://version,再按enter键 如果返回如图: 那说明你的谷歌被hao123浏览器篡改了。(如果你返回的蓝色部分是www.dub…

十分好用的跨浏览器测试工具,建议收藏!!!

跨浏览器测试是确保web应用程序的功能在不同浏览器、浏览器版本和操作系统直接保持功能和质量一致的过程,可以为用户提供更好的用户体验,帮助企业通过更易访问的网站获得满意客户,可以使web应用程序在不同平台上兼容。在跨浏览器测试过程中&a…

10个免费的顶级跨浏览器测试工具

1.Browsera Browsera 可以测试和报告在您的网站上的跨浏览器布局的差异和脚本错误。 Browsera不同于其他跨浏览器测试服务。其他服务,如Litmus,Browsershots,BrowserLab,以及 SuperPreview,它们仅仅截取每一个特定的页…

超级浏览器:创建多套UA实现防关联

前面的文章,我们为大家详细介绍了Cookies的功能以及它在防关联过程中的作用需要复习的小伙看这里: 超级浏览器的Cookies实现跨境电商防关联 咱们在前面说过,Cookies相当于用户的网络身份证,里面记录了用户的身份、上网喜好和登录…

10款最佳跨浏览器测试工具,建议收藏

1、前言 跨浏览器测试工具对于检查您的网络应用程序在桌面端、移动端、平板电脑和其他设备类别中是否正常工作至关重要。这些工具检查 UI 不一致、验证代码、跨 Chrome、Firefox、IE、Edge、Safari 和其他浏览器的响应能力。它们有助于跨设备和平台提供一致的用户体验。 什么…

打开谷歌浏览器弹出hao123(俗称被绑架)(SB-hao123)

1.打开google浏览器在地址栏输入:chrome://version 2. 右键谷歌浏览器的快捷方式,打开谷歌浏览器的属性窗口,找到目标里面hao123的网址,直接改为你想启动时打开的网址(不加也行),我的就没加&…

Chrome/Firefox浏览器主页被篡改为hao123的终极原因

小弟今天早上起来发现自己电脑的浏览器主页被篡改为hao123了!想来我最近也没有下过什么不明软件啊!于是开始了一系列搜索,各种查杀、扫描、查看注册表、查看快捷方式属性等等,还按照热门知乎帖子(https://www.zhihu.co…

推荐17款最好用的跨浏览器测试工具

市面上有很多不同的浏览器,每种浏览器都有数百万用户。因此,在构建一个网站或 Web 应用程序时,就需要测试它与不同浏览器的兼容性。最好、最方便的方法是使用跨浏览器检查工具。 如果你正在寻找解决方案,可以看看下面这些可靠且全…

跨境群店安全运营神器—超级浏览器

有点跨境电商经验的跨境人都知道,物理隔离是比较安全稳妥的防关联办法。但是多台电脑多条网络的办公方式,不仅设备成本高,人员的费用也高得吓人。 后来大家开始使用VPS来防关联。VPS是一种虚拟专用服务器,它是一种将一台服务器分割…

谷歌以及所有浏览器被篡改hao123

谷歌以及所有浏览器被篡改hao123 问题解决方案 问题 百度了所有的方法都没有效果,那你看看这篇文章,打开C:\Users\自己的名字\AppData\Local,里面有一些文件CSChrm,打开它,看他的签名, 上海都点网络&#…

实用工具推荐,浏览器必备宝藏插件:Wetab新标签页

打开浏览器,你的起始页是否充满了广告和各种乱七八糟的信息呢?或者过于单调,而失去了某些你想要的功能? 这里给大家推荐一个在Chrome浏览器和edge浏览器上都能愉快使用的浏览器插件——Wetab新标签页。没有广告、页面干净美观且具…