×

一个基于 ThinkPHP 8 + Vue 2 + ElementUI 的全栈小说网站系统

独孤求败 独孤求败 发表于2026-07-02 11:13:30 浏览30 评论0

抢沙发发表评论

墨韵书阁 - 小说网站系统

基于 ThinkPHP 8 + Vue 2 + ElementUI 的全栈小说网站系统，采用前后端分离架构，包含后台管理、PC端阅读、移动端阅读三大模块。

项目地址：https://github.com/ddashu/thinkphp8_novel

技术栈

层级
技术
版本
说明
后端框架
ThinkPHP
8.0
PHP 全栈框架
后台前端
Vue
2.7
后台管理 SPA
前台前端
Vue
2.7
小说阅读 SPA
UI 组件库
ElementUI
2.15
后台管理组件库
图表库
ECharts
5.4
数据可视化看板
富文本编辑器
Quill
1.x
章节内容编辑
数据库
MySQL
8.0+
关系型数据库
认证方式
JWT
7.x
firebase/php-jwt 双令牌
状态管理
Vuex
3.x
集中式状态管理
HTTP 客户端
Axios
0.27
请求拦截与响应处理

系统架构

┌─────────────────────────────────────────────────┐
│                   Nginx/Apache                    │
│              (public/ 入口目录)                    │
├──────────────┬──────────────┬────────────────────┤
│  后台管理     │  前台阅读     │   后端 API          │
│  :8080       │  :8082       │   :8000             │
│  Vue2+Element│  Vue2+响应式  │   ThinkPHP8         │
│  /api/admin  │  /api/novel  │   JWT+RBAC          │
└──────────────┴──────────────┴────────────────────┘
                       │
                   MySQL 8.0
               (thinkphp8_novel)

功能模块

后台管理系统（frontend）

小说管理

  • 小说列表 - 搜索筛选(书名/作者/分类/状态)、封面上传预览、推荐/热门快捷切换、批量上架/下架/删除
  • 小说分类 - 分类增删改查、小说数量统计、状态切换
  • 章节管理 - 章节增删改查、Quill富文本编辑器、上移/下移排序、批量TXT导入

用户管理

  • 前台用户 - 读者列表、搜索(用户名/邮箱/手机号)、状态切换、书架查看
  • 收藏统计 - 收藏排行榜、收藏趋势图(ECharts)、按小说分组统计

数据看板

  • 8个统计卡片（小说总数/总字数/今日更新/用户数/章节数/今日新用户/总收藏/平均字数）
  • 近7天更新趋势折线图
  • 分类分布饼图
  • 热门小说TOP10柱状图

系统管理

  • 管理员用户 - 增删改查、状态切换、密码重置
  • 角色管理 - RBAC权限分配、树形菜单勾选
  • 菜单管理 - 动态菜单配置，支持目录/菜单/按钮三级
  • 系统配置 - 分组式系统参数管理

其他功能

  • AI管理 - API密钥管理、AI模型管理
  • 内容管理 - 文章管理(富文本)、支付配置、短信配置
  • 操作日志 - 用户操作记录查询
  • 文件管理 - 文件上传与管理
  • 个人中心 - 修改信息、头像上传、密码修改

前台阅读系统（frontend-novel）

首页

  • 轮播推荐、热门小说、最新更新、分类导航、排行榜入口

小说浏览

  • 分类页 - 分类列表、分类下小说分页
  • 搜索 - 关键词搜索小说
  • 排行榜 - 阅读量/收藏数/字数/最新更新排行

小说详情

  • 封面、书名、作者、字数、章节、简介
  • 章节目录、加入书架、开始阅读

阅读器

  • 沉浸式阅读、4种主题（默认/护眼/羊皮纸/夜间）
  • 字号调节、字体切换（宋体/黑体/楷体）
  • 自动阅读（速度可调）
  • 章节目录抽屉、上下章翻页
  • 移动端底部固定导航栏（上一章/目录/详情/首页/下一章）
  • 阅读进度自动保存

用户系统

  • 登录/注册
  • 个人书架管理
  • 阅读历史记录

响应式设计

  • PC端：宽屏布局、侧边分类导航
  • 移动端：底部TabBar导航、适配小屏阅读

项目结构

thinkphp8_novel/
├── app/                              # 后端应用目录
│   ├── controller/
│   │   ├── admin/                    # 后台控制器（22个）
│   │   │   ├── Auth.php              #   后台登录认证
│   │   │   ├── Dashboard.php         #   数据看板（小说系统统计）
│   │   │   ├── Novel.php             #   小说CRUD + 状态/推荐/热门切换
│   │   │   ├── NovelCategory.php     #   小说分类管理
│   │   │   ├── NovelChapter.php      #   章节管理 + 排序 + 导入
│   │   │   ├── UserManage.php        #   前台用户管理 + 书架查看
│   │   │   ├── BookshelfStats.php    #   收藏统计 + 趋势
│   │   │   ├── User.php              #   管理员用户管理
│   │   │   ├── Role.php              #   角色管理
│   │   │   ├── Menu.php              #   菜单管理
│   │   │   └── ...                   #   其他（文章/支付/短信/AI等）
│   │   └── novel/                    # 前台控制器（7个）
│   │       ├── Index.php             #   首页/推荐/最新/排行
│   │       ├── Book.php              #   小说详情 + 章节列表
│   │       ├── Chapter.php           #   章节内容
│   │       ├── Category.php          #   分类列表 + 分类下小说
│   │       ├── Search.php            #   搜索
│   │       ├── Auth.php              #   前台用户注册/登录
│   │       └── Bookshelf.php         #   书架增删查
│   ├── model/                        # 数据模型（21个）
│   │   ├── Novel.php                 #   小说模型（关联category/chapters）
│   │   ├── NovelCategory.php         #   分类模型
│   │   ├── NovelChapter.php          #   章节模型
│   │   ├── NovelBookshelf.php        #   书架模型（关联novel）
│   │   ├── NovelReadingRecord.php    #   阅读记录模型
│   │   ├── User.php                  #   前台用户模型
│   │   └── ...                       #   后台管理相关模型
│   ├── middleware/                   # 中间件
│   │   ├── Auth.php                  #   JWT认证
│   │   ├── Cors.php                  #   跨域处理
│   │   ├── Permission.php            #   RBAC权限检查
│   │   └── OperationLog.php          #   操作日志记录
│   ├── service/                      # 服务层
│   │   ├── TokenService.php          #   JWT令牌生成/验证
│   │   ├── AuthService.php           #   认证服务
│   │   ├── MenuService.php           #   菜单/权限服务
│   │   ├── RoleService.php           #   角色服务
│   │   └── UserService.php           #   用户服务
│   └── command/                      # 命令行工具
│       ├── SeedNovels.php            #   小说数据填充
│       └── DownloadCovers.php        #   封面图片下载
├── config/                           # 配置文件
│   ├── database.php                  #   数据库连接
│   ├── jwt.php                       #   JWT密钥配置
│   └── cors.php                      #   跨域配置
├── route/
│   └── app.php                       # API路由定义
├── database/
│   └── thinkphp8_novel.sql           #   数据库SQL（含种子数据）
├── frontend/                         # 后台管理前端
│   ├── src/
│   │   ├── api/                      #   API接口（15个模块）
│   │   │   ├── novel.js              #     小说/章节/分类API
│   │   │   ├── user.js               #     管理员+前台用户API
│   │   │   ├── dashboard.js          #     数据看板API
│   │   │   └── ...
│   │   ├── views/                    #   页面组件
│   │   │   ├── novel/                #     小说管理（列表/分类/章节）
│   │   │   ├── user/                 #     用户管理（列表/收藏统计）
│   │   │   ├── dashboard/            #     数据看板
│   │   │   ├── system/               #     系统管理
│   │   │   └── ...
│   │   ├── layout/                   #   布局组件
│   │   ├── router/                   #   路由配置
│   │   ├── store/                    #   Vuex状态管理
│   │   ├── styles/                   #   SCSS样式
│   │   └── utils/                    #   工具函数
│   ├── .env.development              #   开发环境配置
│   ├── vue.config.js                 #   Webpack配置
│   └── package.json
├── frontend-novel/                   # 前台阅读前端
│   ├── src/
│   │   ├── api/                      #   API接口
│   │   │   ├── novel.js              #     小说/章节/分类/搜索
│   │   │   └── auth.js               #     用户认证
│   │   ├── views/                    #   页面组件
│   │   │   ├── home/                 #     首页
│   │   │   ├── detail/               #     小说详情
│   │   │   ├── reader/               #     阅读器
│   │   │   ├── category/             #     分类
│   │   │   ├── ranking/              #     排行榜
│   │   │   ├── search/               #     搜索
│   │   │   ├── bookshelf/            #     书架
│   │   │   └── auth/                 #     登录/注册
│   │   ├── components/               #   公共组件
│   │   │   ├── ChapterDrawer.vue     #     章节目录抽屉
│   │   │   ├── ReadingSettings.vue   #     阅读设置面板
│   │   │   ├── MobileTabBar.vue      #     移动端底部导航
│   │   │   ├── NavBar.vue            #     顶部导航栏
│   │   │   ├── NovelCard.vue         #     小说卡片
│   │   │   └── NovelList.vue         #     小说列表
│   │   ├── store/                    #   Vuex（reading/user/bookshelf）
│   │   ├── utils/                    #   工具（storage/image/request）
│   │   └── assets/styles/            #   SCSS样式
│   ├── vue.config.js                 #   Webpack配置
│   └── package.json
├── public/                           # 入口目录
│   ├── index.php                     #   后端入口
│   ├── dist/                         #   后台管理构建产物
│   ├── novel/                        #   前台阅读构建产物
│   └── uploads/                      #   上传文件（封面等）
├── .env                              # 环境变量
├── composer.json                     # PHP依赖
└── README.md

快速开始

环境要求

  • PHP >= 8.0
  • MySQL >= 8.0
  • Node.js >= 14.0
  • Composer
  • npm

1. 克隆项目

git clone https://github.com/ddashu/thinkphp8_admin.git
cd thinkphp8_admin

2. 后端配置

# 安装 PHP 依赖
composer install

编辑 .env，配置数据库连接信息：

APP_DEBUG = true

DB_TYPE = mysql
DB_HOST = 127.0.0.1
DB_NAME = thinkphp8_novel
DB_USER = root
DB_PASS = root
DB_PORT = 3306
DB_CHARSET = utf8mb4

JWT_SECRET = your_jwt_secret_key_here
JWT_ACCESS_TTL = 7200
JWT_REFRESH_TTL = 604800

3. 导入数据库

mysql -u root -p thinkphp8_novel < database/thinkphp8_novel.sql

或使用 Navicat / phpMyAdmin 等工具导入 database/thinkphp8_novel.sql。

4. 前端安装

# 后台管理前端
cd frontend
npm install

# 前台阅读前端
cd ../frontend-novel
npm install

5. 启动开发服务

# 后端（小皮面板配置站点指向 public/ 目录，或使用内置服务器）
php think run -p 8000

# 后台管理前端（端口 8080）
cd frontend
npm run dev

# 前台阅读前端（端口 8082）
cd frontend-novel
npm run dev

6. 生产构建

# 后台管理 → 输出到 public/dist/
cd frontend
npm run build

# 前台阅读 → 输出到 public/novel/
cd frontend-novel
npm run build

访问地址

模块
开发地址
说明
后台管理
http://localhost:8080
管理员后台，Hash路由
前台阅读
http://localhost:8082
读者端，History路由
后端API
http://localhost:8000
RESTful API

默认账号

角色
用户名
密码
说明
后台管理员
admin
admin123
超级管理员，拥有所有权限
前台读者
自行注册
-
登录后可使用书架等功能

API 接口

后台管理接口（前缀 /api/admin，需JWT认证）

模块
方法
路径
说明
认证
POST
/auth/login
登录获取Token
认证
GET
/auth/info
获取当前用户信息
看板
GET
/dashboard/stats
小说系统统计概览
看板
GET
/dashboard/trend
近7天更新趋势
看板
GET
/dashboard/api-stats
热门小说TOP10
看板
GET
/dashboard/model-distribution
分类分布
小说
GET
/novel
小说列表（分页/搜索/筛选）
小说
POST
/novel
新增小说
小说
GET
/novel/:id
小说详情
小说
PUT
/novel/:id
编辑小说
小说
DELETE
/novel/:id
删除小说
小说
PUT
/novel/toggle-status/:id
上架/下架切换
小说
PUT
/novel/toggle-recommend/:id
推荐切换
小说
PUT
/novel/toggle-hot/:id
热门切换
章节
GET
/novel/:novelId/chapter
章节列表
章节
POST
/novel/:novelId/chapter
新增章节
章节
POST
/novel/:novelId/chapter/import
批量导入章节
章节
GET
/novel/chapter/:id
章节详情
章节
PUT
/novel/chapter/:id
编辑章节
章节
PUT
/novel/chapter/:id/sort
章节排序
章节
DELETE
/novel/chapter/:id
删除章节
分类
GET
/novel-category
分类列表（含小说数量）
分类
GET
/novel-category/all
全部分类（下拉选择）
分类
POST
/novel-category
新增分类
分类
PUT
/novel-category/:id
编辑分类
分类
DELETE
/novel-category/:id
删除分类
用户
GET
/user-manage
前台用户列表
用户
GET
/user-manage/:id
用户详情
用户
PUT
/user-manage/:id
编辑用户
用户
DELETE
/user-manage/:id
删除用户
书架
GET
/user-bookshelf/:id
用户书架
统计
GET
/bookshelf-stats
收藏排行榜
统计
GET
/bookshelf-stats/trend
收藏趋势

前台阅读接口（前缀 /api/novel，公开接口无需认证）

模块
方法
路径
说明
首页
GET
/index
首页数据
首页
GET
/recommend
推荐小说
首页
GET
/latest
最新更新
排行
GET
/ranking
排行榜
分类
GET
/category
分类列表
分类
GET
/category/:id
分类下小说
详情
GET
/book/:id
小说详情
章节
GET
/book/:id/chapters
章节目录
内容
GET
/chapter/:id
章节内容
搜索
GET
/search
搜索小说
注册
POST
/auth/register
用户注册
登录
POST
/auth/login
用户登录
书架
GET
/bookshelf
我的书架（需认证）
书架
POST
/bookshelf/add
加入书架（需认证）
书架
POST
/bookshelf/remove
移出书架（需认证）

数据库表结构

表名
说明
novel
小说主表
novel_category
小说分类
novel_chapter
小说章节
novel_bookshelf
用户书架（收藏）
novel_reading_record
阅读记录
user
前台用户
admin_user
后台管理员
admin_role
角色
admin_menu
菜单/权限
admin_role_menu
角色-菜单关联
admin_user_role
用户-角色关联
admin_log
操作日志
admin_config
系统配置
admin_file
文件管理
admin_api_key
API密钥
admin_model
AI模型
admin_article
文章
admin_article_category
文章分类
admin_payment_config
支付配置
admin_alipay_config
支付宝配置
admin_sms_config
短信配置

核心特性

  • RBAC 权限系统：用户 → 角色 → 菜单（按钮）三级权限模型
  • JWT 双 Token：Access Token（2h）+ Refresh Token（7d）无感刷新
  • 统一响应格式：{ code, message, data }
  • 操作日志中间件：自动记录所有写操作
  • CORS 跨域处理：前后端分离架构完整支持
  • 富文本编辑器：Quill集成，支持章节内容编辑
  • 响应式阅读器：PC端/移动端自适应，4种阅读主题
  • 阅读进度保存：localStorage持久化，下次打开自动定位
  • 封面本地化：小说封面下载到本地 /uploads/novel/cover/
  • 数据看板：ECharts图表展示小说系统运营数据
  • 深色侧边栏 + 浅色内容区 UI设计风格


群贤毕至

访客