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

# 项目介绍

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

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

⭐主要功能：

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

# 适合人群

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

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

# 项目特色

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

# 项目展示

![image-20230529212611913](./images/image-20230529212611913.png)

![image-20230529212628131](./images/image-20230529212628131.png)

![image-20230529212635876](./images/image-20230529212635876.png)

![image-20230529212930317](./images/image-20230529212930317.png)

![image-20230529212804366](./images/image-20230529212804366.png)

![image-20230529212817609](./images/image-20230529212817609.png)

![image-20230529212828973](./images/image-20230529212828973.png)

# 技术选型

前端：

- 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

![image-20230529223813457](./images/image-20230529223813457.png)

chatGPT给出解释

![image-20230529223931271](./images/image-20230529223931271.png)

# 系统设计图

❤数据库设计E-R图

![image-20230529213109369](./images/image-20230529213109369.png)

❤系统用例图

![image-20230529213140496](./images/image-20230529213140496.png)

# 代码讲解

## 目录结构（后端）

![image-20230529213140496](./images/image-20230529233008517.png)

## 业务逻辑（后端）

### 用户注册

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具体介绍](http://c.biancheng.net/view/9338.html)

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

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

## 2.npm

npm 是 [Node.js](http://www.oschina.net/p/nodejs) 的包管理工具，用来安装各种 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
```

## 4.chatGPT注册和访问

如果你仍不清楚如何注册和访问chatGPT，推荐阅读[chatGPT到底要怎样注册！！](https://mp.weixin.qq.com/s?__biz=MzkxNjQ2MTM0MA==&mid=2247483685&idx=1&sn=eb52dd61dbd1693c77bb5e413a348668&chksm=c14ec356f6394a40e0451f7b372d5568adfe5a608ff19ec443648e5e07afe44f8eae76f242c6&token=584515009&lang=zh_CN#rd)

kingsWei/校园社交平台

简介

发行版

贡献者

近期动态

kingsWei/校园社交平台 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

kingsWei/校园社交平台