# Bpvank博客

**Repository Path**: bpvank/bpvank-blog

## Basic Information

- **Project Name**: Bpvank博客
- **Description**: Bpvank博客(BpvankBlog)，一个多用户、多界面的博客系统。此博客项目分为前台、后台两个大模块，前台主要由登录注册、忘记密码、首页、精品文章、文章详情页、推荐网站、关于、留言等各小模块组成；后台主要由首页、发布文章、文章管理、分类管理、评论管理、用户管理等各小模块组成。Web端使用Vue3.0+ElementPlus，后端使用JavaOOP+Jdk17+Tomcat+Servlet。
- **Primary Language**: Java
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 1
- **Created**: 2023-04-25
- **Last Updated**: 2025-06-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Java, Vue, element-plus, 博客

## README

# Bpvank博客(BpvankBlog)

### 1.介绍
Bpvank博客(BpvankBlog)，一个多用户、多界面的博客系统。此博客项目分为前台、后台两个大模块，前台主要由登录注册、忘记密码、首页、精品文章、文章详情页、推荐网站、关于、留言等各小模块组成；后台主要由首页、发布文章、文章管理、分类管理、评论管理、用户管理等各小模块组成。Web端使用Vue3.0+ElementPlus，后端使用JavaOOP+Jdk17+Tomcat+Servlet。

### 2.效果演示
> 效果演示可观看视频： [【本人历时一个月开发的个人博客，包含前后端技术、UI设计，太赞了！！！】](https://www.bilibili.com/video/BV1bK411U7ef?vd_source=03e41bb5470af0c5f2885cf339c52f64)

![移动端前台](https://foruda.gitee.com/images/1682409371080452945/32195409_10643444.png "移动端前台.png")
![移动端后台](https://foruda.gitee.com/images/1682409389550666096/88d6474c_10643444.png "移动端后台.png")
![PC端1](https://foruda.gitee.com/images/1682409406438250666/e45a35a1_10643444.png "PC端1.png")
![PC端2](https://foruda.gitee.com/images/1682409417497250008/5fdd1761_10643444.png "PC端2.png")
![PC端3](https://foruda.gitee.com/images/1682409426768928449/29dc1089_10643444.png "PC端3.png")

### 3.数据库设计
![数据库设计](https://foruda.gitee.com/images/1682409472045469115/7be2d824_10643444.png "数据库设计.png")

### 4.项目运行步骤
> 项目运行可观看视频：[【「免费开源」一款超好看的个人博客项目】](https://www.bilibili.com/video/BV1AW4y177Af?vd_source=03e41bb5470af0c5f2885cf339c52f64)

#### 项目运行所需：
1、安装jdk17、tomcat8、mysql8、nodejs

2、安装IDEA、Sqlyog、VS Code

#### 一、运行Mysql数据库脚本：bpvank.sql

1、使用sqlyog连接上数据库，将脚本拖进去，直接运行即可~

#### 二、运行后端java程序：bpvank-back-end

1、使用IDEA打开项目。

2、打开项目结构（文件->项目结构），根据视频教程中去配置。

3、找到druid.properties，路径为：/bpvank-back-end/src/druid.properties。根据实际的进行修改数据库用户名、密码。

```properties
driverClassName=com.mysql.cj.jdbc.Driver

url=jdbc:mysql://localhost/bpvank?useUnicode=true&characterEncoding=UTF-8 

# 数据库用户名、密码   注：根据实际的进行修改
username=root
password=123

# 初始化连接数量
initialSize=5
# 最大连接数
maxActive=10
# 最大超时时间
maxWait=3000
```

4、点击IDEA右上角添加配置->再点击右上角+号->选择Tomcat服务器(本地)

​	部署：

​		点击+号选择工件

​		修改应用程序上下文（/bpvank_back_end_war_exploded）为：/

​	服务器：

​		URL：http://localhost:80/

​		JRE选择：17

​		HTTP：端口80

再点击应用（确认）。

5、点击右上角的三角形运行项目

6、运行成功后，访问：http://localhost/showAllUserInfo，如输出如下内容：

```json
[{"userId":1,"userType":0,"userName":"admin","userPass":"123456","userEmail":"123456@qq.com","userRegdate":"2022-07-31 10:10:56","userSignature":"相信有一天, 理想主义终将所向披靡.","userIcon":""}]
```

就证明你已经成功运行java程序了~


#### 三、运行前端vue项目：bpvank-front-end

1、先安装node.js ，https://nodejs.org/en/download/ 自行安装 

2、查看node.js版本：**node --version**，显示v xx.xx.x，证明你安装成功。

3、全局安装脚手架：**npm install -g @vue/cli** 

4、查看vue版本：**vue -V**

5、安装yarn：**npm install yarn -g**

##### 以上内容不详细介绍，不会的自行百度~

1、使用VS Code打开项目。

2、点击上方终端->新建终端。

3、打开开发环境文件：.env.development，确定后端运行时的端口是否为80，不是则自行修改，是80则忽略此步骤。

4、安装项目依赖，执行命令：yarn install。

5、依赖安装完毕后，执行启动命令：yarn serve

6、登录后台：用户名（admin）密码（123456）