为申请校级实验室开放基金所做的项目 ——— 点击访问，若访问失败为正常现象，因为域名还没有进行ICP备案，可以使用梯子访问。暂不开放ip访问功能。

对比专业爬虫项目还是略有粗糙，目前该项目将持续维护，当做完报告将暂停维护，并于 github 开源代码。

🏗️ NYLG 系统架构说明#

本文档详细说明NYLG网络爬虫系统的前后端连接方式、各组件作用以及整体架构设计。

🌐 系统整体架构#

1
┌─────────────────┐    HTTP/API   ┌─────────────────┐
2
│                 │ ◄──────────── │                 │
3
│    前端 Vue3    │                │  后端 (Flask)   │
4
│                 │ ────────────► │                 │
5
└─────────────────┘               └─────────────────┘
6
         │                                 │
7
         │                                 │
8
         ▼                                 ▼
9
┌────────────────┐              ┌─────────────────┐
10
│   用户界面      │              │   爬虫引擎       │
11
│   - 操作交互    │              │   - 数据采集     │
12
│   - 结果展示    │              │   - 内容解析     │
13
│   - 数据导出    │              │   - 错误处理     │
14
└────────────────┘              └─────────────────┘

🔗 前后端连接机制#

1. 通信协议#

HTTP RESTful API

协议：HTTP/HTTPS
数据格式：JSON
请求方式：GET、POST
端口配置：
- 后端Flask：5000端口
- 前端Vue开发服务器：5173端口

CORS跨域处理

1
from flask_cors import CORS
2
CORS(app)  # 允许所有域名跨域访问

2. API接口设计#

核心接口列表

接口路径	方法	功能	前端调用位置
/api/crawl	POST	执行爬取任务	Crawler.vue
/api/spiders	GET	获取爬虫列表	Crawler.vue
/api/results	GET	获取结果列表	Crawler.vue
/api/export/{id}/{format}	GET	导出数据	Crawler.vue
/api/task/{id}	GET	查询任务状态	Crawler.vue
/api/stats	GET	获取统计信息	Home.vue

数据流向图

前端发起请求 → 后端接收处理 → 调用爬虫引擎 → 返回结果 → 前端展示 │ │ │ │ │ ▼ ▼ ▼ ▼ ▼ 用户操作路由分发数据采集 JSON响应界面更新

3. 请求响应格式#

标准请求格式

1
// 前端发送请求
2
const response = await axios.post('/api/crawl', {
3
  spider_type: 'baidu',
4
  keyword: '搜索关键词',
5
  max_results: 10
6
})

标准响应格式

1
{
2
  "success": true,
3
  "message": "操作成功",
4
  "data": [...],
5
  "task_id": 123,
6
  "timestamp": "2024-01-01 12:00:00"
7
}

🎯 前端架构详解#

1. Vue3 组件架构#

1
App.vue (根组件)
2
├── router-view (路由出口)
3
│   ├── Home.vue (首页)
4
│   ├── Crawler.vue (爬虫页面)
5
│   ├── About.vue (关于页面)
6
│   └── Docs.vue (文档页面)
7
└── Navigation (导航组件)

2. 前端技术栈#

核心框架

Vue 3：响应式前端框架
Vue Router：单页面应用路由
Axios：HTTP客户端库

UI组件库

Element Plus：企业级UI组件
Element Icons：图标库

样式技术

CSS3：现代样式特性
Flexbox/Grid：布局技术
CSS Variables：动态样式变量

3. 前端职责#

用户交互层

🎨 界面渲染：组件化界面展示
🖱️ 用户操作：表单输入、按钮点击、页面导航
📱 响应式适配：多设备兼容

数据处理层

📡 API调用：与后端通信
🔄 状态管理：组件数据状态
📊 智能展示：根据爬取类型选择最适合的展示方式
- 搜索结果：表格格式展示
- URL内容：卡片式内容展示
🎨 内容格式化：智能识别和美化显示图片、链接等元素
🔗 交互功能：链接跳转、内容直接展示
🎨 UI设计：全面圆角化设计，统一视觉风格
⚡ 代码优化：简化组件结构，提升性能

业务逻辑层

✅ 表单验证：输入参数校验
🔄 异步处理：加载状态管理
📤 数据导出：结果文件下载

⚙️ 后端架构详解#

1. Flask应用架构#

1
app.py (主应用)
2
├── 路由层 (Routes)
3
│   ├── 页面路由 (/, /crawler, /docs, /about)
4
│   └── API路由 (/api/*)
5
├── 服务层 (Services)
6
│   ├── CrawlerService (爬虫服务)
7
│   └── DataProcessor (数据处理)
8
└── 数据层 (Data)
9
    ├── 内存存储 (tasks, results)
10
    └── 文件系统 (导出文件)

2. 后端技术栈#

核心框架

Flask：轻量级Web框架
Flask-CORS：跨域资源共享

数据处理

Pandas：数据分析库
BeautifulSoup：HTML解析
Requests/urllib：HTTP请求

文件处理

CSV：表格数据导出
JSON：结构化数据处理
Markdownify：HTML转Markdown

3. 后端职责#

API服务层

🌐 HTTP服务：处理前端请求
🔀 路由分发：请求路径映射
📝 数据验证：请求参数校验
🔒 错误处理：异常捕获和响应

爬虫引擎层

🕷️ 多爬虫支持：百度、B站、CSDN、URL
🔍 智能内容提取：
- 文本内容智能识别和提取
- 图片信息自动收集和处理
- 编码格式自动检测和转换
🔄 任务管理：异步任务处理
📊 结果格式化：统一数据结构
🎯 结构化输出：将原始数据转换为前端友好的JSON格式

数据服务层

💾 数据存储：内存缓存机制
📤 文件导出：多格式数据导出
📈 统计分析：使用情况统计

🔄 数据流程详解#

1. 爬取任务流程#

用户操作 → 前端验证 → API请求 → 后端处理 → 爬虫执行 → 数据返回 → 界面更新 │ │ │ │ │ │ │ ▼ ▼ ▼ ▼ ▼ ▼ ▼ 选择爬虫参数校验 POST请求路由分发内容抓取 JSON响应表格展示输入参数表单验证 /api/crawl 调用服务数据解析结果数据状态更新

2. 具体实现示例#

前端发起请求

1
async executeCrawl() {
2
  this.isLoading = true
3
  try {
4
    const response = await axios.post('/api/crawl', {
5
      spider_type: this.selectedSpider,
6
      ...this.getParams()
7
    })
8

9
    if (response.data.success) {
10
      this.results = response.data.results
11
      ElMessage.success('爬取成功')
12
    }
13
  } catch (error) {
14
    ElMessage.error('爬取失败')
15
  } finally {
16
    this.isLoading = false
17
  }
18
}

后端处理请求

1
@app.route('/api/crawl', methods=['POST'])
2
def crawl():
3
    try:
4
        data = request.get_json()
5
        spider_type = data.get('spider_type')
6

7
        # 执行爬虫任务
8
        results, error = crawler_service.execute_search(
9
            spider_type,
10
            data.get('keyword'),
11
            data.get('max_results')
12
        )
13

14
        if error:
15
            return jsonify({'success': False, 'message': error})
16

17
        return jsonify({
18
            'success': True,
19
            'results': results,
20
            'message': '爬取成功'
21
        })
22

23
    except Exception as e:
24
        return jsonify({'success': False, 'message': str(e)})

🗂️ 文件组织结构#

前端文件结构

1
frontend/vue/
2
├── src/
3
│   ├── views/          # 页面组件
4
│   │   ├── Home.vue
5
│   │   ├── Crawler.vue
6
│   │   ├── About.vue
7
│   │   └── Docs.vue
8
│   ├── assets/         # 静态资源
9
│   │   └── global.css
10
│   ├── router/         # 路由配置
11
│   │   └── index.js
12
│   ├── App.vue         # 根组件
13
│   └── main.js         # 入口文件
14
├── public/             # 公共文件
15
└── package.json        # 依赖配置

后端文件结构

1
后端根目录/
2
├── app.py              # Flask主应用
3
├── 测试/               # 爬虫模块
4
│   ├── baidu.py
5
│   ├── bilibili.py
6
│   ├── csdn.py
7
│   └── url.py
8
├── frontend/           # 前端文件
9
│   ├── templates/      # HTML模板
10
│   └── static/         # 静态资源
11
└── requirements.txt    # Python依赖

🔧 配置和部署#

1. 开发环境配置#

前端开发服务器

1
cd frontend/vue
2
npm install
3
npm run dev  # 启动开发服务器 (端口5173)

后端开发服务器

1
pip install -r requirements.txt
2
python app.py  # 启动Flask服务器 (端口5000)

2. 生产环境部署#

前端构建

1
cd frontend/vue
2
npm run build  # 构建生产版本

后端部署

1
# 使用Gunicorn部署
2
pip install gunicorn
3
gunicorn -w 4 -b 0.0.0.0:5000 app:app

3. 环境变量配置#

1
# 开发环境
2
FLASK_ENV=development
3
FLASK_DEBUG=True
4
# 生产环境
5
FLASK_ENV=production
6
FLASK_DEBUG=False

🛡️ 安全考虑#

1. 前端安全#

输入验证：防止XSS攻击
HTTPS：加密数据传输
CSP：内容安全策略

2. 后端安全#

参数验证：防止SQL注入
CORS配置：限制跨域访问
错误处理：避免信息泄露

3. 爬虫安全#

请求限制：防止被反爬
User-Agent：模拟正常浏览器
超时设置：避免长时间阻塞

📊 性能优化#

1. 前端优化#

组件懒加载：按需加载页面
图片优化：使用SVG矢量图
缓存策略：合理使用浏览器缓存

2. 后端优化#

异步处理：非阻塞任务执行
内存管理：及时清理无用数据
连接池：复用HTTP连接

3. 爬虫优化#

并发控制：合理设置并发数
重试机制：失败自动重试
缓存机制：避免重复请求

🔍 监控和调试#

1. 前端调试#

Vue DevTools：组件状态调试
浏览器控制台：网络请求监控
Source Map：源码调试

2. 后端调试#

Flask调试模式：详细错误信息
日志记录：关键操作记录
性能分析：请求响应时间

3. 系统监控#

健康检查：服务可用性监控
错误统计：异常情况统计
使用分析：用户行为分析

💡 总结#

NYLG系统采用前后端分离架构，通过RESTful API实现数据交互，前端负责用户界面和交互，后端负责数据处理和爬虫执行，整体设计简洁高效，易于维护和扩展。

🛠️ NYLG 自定义开发指南#

本文档将指导您如何自定义界面、修改后台功能，以及扩展系统功能。

🎨 界面自定义#

1. 修改整体配色方案#

全局样式文件文件位置：frontend/vue/src/assets/global.css

1
/* 修改主色调 */
2
:root {
3
  --primary-color: #your-color;     /* 主色调 */
4
  --secondary-color: #your-color;   /* 辅助色 */
5
  --accent-color: #your-color;      /* 强调色 */
6
}
7
/* 修改背景渐变 */
8
body {
9
  background: linear-gradient(135deg, #your-color1, #your-color2);
10
}

Vue组件样式每个Vue组件都有独立的样式区域，可以单独修改：

src/views/Home.vue - 主页样式
src/views/Crawler.vue - 爬虫页面样式
src/views/About.vue - 关于页面样式
src/views/Docs.vue - 文档页面样式

2. 修改布局结构#

导航栏自定义文件位置：frontend/vue/src/App.vue

1
<!-- 添加新的导航项 -->
2
<router-link to="/your-page" class="nav-link">
3
  <el-icon><YourIcon /></el-icon>
4
  您的页面
5
</router-link>

页面布局修改在各个Vue组件中修改HTML结构：

1
<template>
2
  <div class="your-custom-class">
3
    <!-- 您的自定义内容 -->
4
  </div>
5
</template>

3. 添加新的UI组件#

安装新组件库

1
cd frontend/vue
2
npm install your-component-library

在组件中使用

1
<script>
2
import { YourComponent } from 'your-component-library'
3
export default {
4
  components: {
5
    YourComponent
6
  }
7
}
8
</script>

添加新的内容展示组件

1
<!-- 在 Crawler.vue 中添加新组件 -->
2
<template>
3
  <!-- URL爬取专用展示组件示例 -->
4
  <div v-if="selectedSpider === 'url'" class="url-content-display">
5
    <div v-for="(result, index) in results" :key="index" class="url-result-item">
6
      <div class="url-result-header">
7
        <h3 class="url-title">
8
          <a :href="result.url" target="_blank">{{ result.title }}</a>
9
        </h3>
10
        <div class="url-meta">
11
          <span>📏 内容长度: {{ result.length }} 字符</span>
12
          <span>⏰ 爬取时间: {{ result.crawl_time }}</span>
13
        </div>
14
      </div>
15
      <div class="content-preview" :class="{ 'expanded': result.expanded }">
16
        <div class="content-text" v-html="formatContent(result.content)"></div>
17
      </div>
18
      <!-- 折叠/展开按钮 -->
19
      <el-button @click="toggleContent(result)">展开/收起</el-button>
20
    </div>
21
  </div>
22
</template>

UI设计规范

1
/* 小元素圆角 */
2
.small-element {
3
  border-radius: 12px;
4
}
5
/* 中等元素圆角 */
6
.medium-element {
7
  border-radius: 16px;
8
}
9
/* 大元素圆角 */
10
.large-element {
11
  border-radius: 20px;
12
}
13
/* 特大元素圆角 */
14
.extra-large-element {
15
  border-radius: 24px;
16
}
17
/* 按钮圆角 */
18
.button-element {
19
  border-radius: 28px;
20
}

简化的内容展示

1
<!-- 直接展示内容，无需折叠功能 -->
2
<div class="url-content-wrapper">
3
  <div class="content-text" v-html="formatContent(content)"></div>
4
</div>

🔧 后台功能修改#

1. 添加新的爬虫类型#

步骤1：创建爬虫类文件位置：测试/your_spider.py

1
class YourSpider:
2
    def __init__(self):
3
        self.name = "您的爬虫"
4

5
    def search(self, keyword, max_results=10):
6
        """搜索方法"""
7
        try:
8
            # 您的爬虫逻辑
9
            results = []
10
            return results, None
11
        except Exception as e:
12
            return None, str(e)

步骤2：注册爬虫文件位置：app.py

1
# 导入您的爬虫
2
from your_spider import YourSpider
3
# 在CrawlerService类中添加
4
class CrawlerService:
5
    def __init__(self):
6
        self.spiders = {
7
            # 现有爬虫...
8
            'your_spider': {'name': '您的爬虫', 'class': YourSpider, 'type': 'search'}
9
        }

步骤3：前端配置文件位置：frontend/vue/src/views/Crawler.vue

1
spiders: [
2
  // 现有爬虫...
3
  {
4
    type: 'your_spider',
5
    name: '您的爬虫',
6
    description: '爬虫描述',
7
    icon: 'YourIcon'
8
  }
9
]

2. 修改API接口#

添加新的API端点

1
@app.route('/api/your-endpoint', methods=['POST'])
2
def your_endpoint():
3
    try:
4
        data = request.get_json()
5
        # 您的处理逻辑
6
        return jsonify({'success': True, 'data': result})
7
    except Exception as e:
8
        return jsonify({'success': False, 'message': str(e)}), 500

修改现有接口找到对应的路由函数，修改处理逻辑：

/api/crawl - 爬取接口
/api/results - 结果查询接口
/api/export - 导出接口

3. 数据库集成#

添加数据库支持

1
pip install sqlalchemy flask-sqlalchemy

配置数据库

1
from flask_sqlalchemy import SQLAlchemy
2
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///crawler.db'
3
db = SQLAlchemy(app)
4

5
class CrawlResult(db.Model):
6
    id = db.Column(db.Integer, primary_key=True)
7
    spider_type = db.Column(db.String(50))
8
    data = db.Column(db.Text)
9
    created_at = db.Column(db.DateTime)

📦 功能扩展#

1. 添加数据处理功能#

数据清洗文件位置：utils/data_processor.py（新建）

1
class DataProcessor:
2
    @staticmethod
3
    def clean_text(text):
4
        """文本清洗"""
5
        # 您的清洗逻辑
6
        return cleaned_text
7

8
    @staticmethod
9
    def format_data(data):
10
        """数据格式化"""
11
        # 您的格式化逻辑
12
        return formatted_data

2. 添加定时任务#

安装调度器

1
pip install apscheduler

配置定时任务

1
from apscheduler.schedulers.background import BackgroundScheduler
2
scheduler = BackgroundScheduler()
3
scheduler.add_job(
4
    func=your_scheduled_function,
5
    trigger="interval",
6
    seconds=3600  # 每小时执行一次
7
)
8
scheduler.start()

3. 添加用户认证#

安装认证库

1
pip install flask-login flask-jwt-extended

配置认证

1
from flask_login import LoginManager, login_required
2
login_manager = LoginManager()
3
login_manager.init_app(app)
4

5
@app.route('/api/protected')
6
@login_required
7
def protected_route():
8
    return jsonify({'message': '需要登录访问'})

🚀 部署配置#

1. 生产环境配置#

环境变量配置文件位置：.env（新建）

1
FLASK_ENV=production
2
SECRET_KEY=your-secret-key
3
DATABASE_URL=your-database-url

生产环境启动

1
# 安装生产服务器
2
pip install gunicorn
3
# 启动应用
4
gunicorn -w 4 -b 0.0.0.0:5000 app:app

2. Docker部署#

Dockerfile

1
FROM python:3.9
2
WORKDIR /app
3
COPY requirements.txt .
4
RUN pip install -r requirements.txt
5
COPY . .
6
EXPOSE 5000
7
CMD ["python", "app.py"]

docker-compose.yml

1
version: '3.8'
2
services:
3
  web:
4
    build: .
5
    ports:
6
      - "5000:5000"
7
    environment:
8
      - FLASK_ENV=production

🔍 调试技巧#

1. 前端调试#

1
# 开发模式启动
2
cd frontend/vue
3
npm run dev
4
# 查看控制台日志
5
# 在浏览器开发者工具中查看Network和Console

2. 后端调试#

1
# 启用调试模式
2
app.run(debug=True)
3
# 添加日志
4
import logging
5
logging.basicConfig(level=logging.DEBUG)
6
app.logger.debug('调试信息')

3. 常见问题解决#

CORS错误

1
from flask_cors import CORS
2
CORS(app, origins=['[http://localhost:3000](http://localhost:3000)'])

编码问题

1
# 确保文件编码为UTF-8
2
# -*- coding: utf-8 -*-

📚 推荐资源#

学习资料

Vue.js官方文档
Element Plus组件库
Flask官方文档
BeautifulSoup文档

开发工具

VS Code：推荐的代码编辑器
Vue DevTools：Vue调试工具
Postman：API测试工具
Git：版本控制工具

💡 提示：修改代码前请备份原文件，建议使用Git进行版本控制。如有问题，可以参考项目中的现有代码实现。

🗂️项目文件介绍#

本文档详细介绍NYLG爬虫工具项目中所有文件的作用，以及哪些文件是必要的，哪些可以删除。

📁 核心文件（必要文件）#

1. 后端核心文件#

app.py - Flask主应用文件，包含所有API接口和路由
- 作用：Web服务器入口，处理HTTP请求，特别优化URL爬取数据结构化处理
- 必要性：⭐⭐⭐⭐⭐ 核心文件，不可删除
crawler_main.py - 爬虫核心逻辑
- 作用：实现各种爬虫的具体逻辑
- 必要性：⭐⭐⭐⭐⭐ 核心文件，不可删除
requirements.txt - Python依赖包列表
- 作用：定义项目所需的Python包，包含Flask、requests、beautifulsoup4等
- 必要性：⭐⭐⭐⭐⭐ 部署必需，不可删除
- 内容：核心Web框架、HTTP请求库、数据处理库等

前端文件（Vue版本 - 推荐使用）

1. Vue项目根目录#

frontend/vue/package.json - Node.js依赖配置
- 作用：定义前端项目依赖和脚本
- 必要性：⭐⭐⭐⭐⭐ Vue项目必需
frontend/vue/vite.config.js - Vite构建配置
- 作用：配置前端构建工具
- 必要性：⭐⭐⭐⭐⭐ Vue项目必需
frontend/vue/index.html - HTML入口文件
- 作用：Vue应用的HTML模板
- 必要性：⭐⭐⭐⭐⭐ Vue项目必需

2. Vue源代码#

frontend/vue/src/main.js - Vue应用入口
- 作用：初始化Vue应用
- 必要性：⭐⭐⭐⭐⭐ Vue项目必需
frontend/vue/src/App.vue - 根组件
- 作用：应用的主要布局和导航
- 必要性：⭐⭐⭐⭐⭐ Vue项目必需
frontend/vue/src/router/index.js - 路由配置
- 作用：定义页面路由
- 必要性：⭐⭐⭐⭐⭐ Vue项目必需
frontend/vue/src/style/global.css - 全局样式
- 作用：定义全局CSS样式
- 必要性：⭐⭐⭐⭐ 样式必需

3. Vue页面组件#

frontend/vue/src/views/Home.vue - 首页组件
- 作用：项目介绍和功能展示
- 必要性：⭐⭐⭐⭐ 主要页面
frontend/vue/src/views/Crawler.vue - 爬虫工具页
- 作用：爬虫功能的主要界面
- 必要性：⭐⭐⭐⭐⭐ 核心功能页面
frontend/vue/src/views/Docs.vue - 文档页
- 作用：使用说明和API文档
- 必要性：⭐⭐⭐ 用户帮助
frontend/vue/src/views/About.vue - 关于页
- 作用：项目信息和联系方式
- 必要性：⭐⭐ 可选页面

📁 旧版文件（可选删除）#

1. 静态HTML版本（已被Vue版本替代）#

frontend/static/ - 静态资源目录
- 作用：旧版HTML的CSS、JS、图片文件
- 必要性：⭐ 可以删除（如果只使用Vue版本）
frontend/templates/ - HTML模板目录
- 作用：旧版的HTML页面文件
- 必要性：⭐ 可以删除（如果只使用Vue版本）

📁 前端文件详细说明#

1. Vue 组件文件#

App.vue: 主应用组件，包含温馨风格的导航栏和路由视图
Home.vue: 首页组件，采用渐变背景和毛玻璃效果展示项目特色
Crawler.vue: 爬虫操作页面，重新设计的布局包含智能卡片选择、参数配置、结果展示
About.vue: 关于页面，温馨色调展示项目信息和技术栈
Docs.vue: 文档页面，柔和设计提供API文档和使用说明

2. 样式文件#

global.css: 全局样式文件，定义温馨暖色调主题、毛玻璃效果、渐变背景
main.js: Vue应用入口文件，配置路由和组件库

📁 界面设计特色#

1. 温馨暖色调设计#

🎨 配色方案: 粉色系暖色调（#fff5f0 到 #e6a8d0）营造舒适环境
💎 毛玻璃效果: backdrop-filter 创造现代化视觉层次
🌈 渐变背景: 多层次渐变色彩，柔和过渡
🔘 圆角设计: 24-28px圆角，柔和友好的视觉感受

2. 用户体验优化#

✨ 流畅动画: cubic-bezier缓动函数，自然的过渡效果
🎯 智能反馈: 悬停效果、状态指示、选中标识
📊 数据可视化: 中文字段显示、序号排序、点击链接
🚀 交互优化: 卡片选择动画、加载状态、结果统计

3. 响应式设计#

📱 多设备适配: 桌面、平板、手机完美显示
🔄 自适应布局: 弹性网格系统，智能调整
📏 字体缩放: 相对单位确保可读性

📁 技术实现亮点#

1. 网页爬取功能优化#

智能内容提取: 使用BeautifulSoup智能识别网页主要内容区域
图片信息提取: 自动识别和提取网页中的所有图片，包含描述和链接
编码自动检测: 支持多种编码格式的自动检测和转换
结构化数据: 将爬取结果转换为前端友好的JSON格式
完整内容保留: 保持网页原有格式，支持完整内容展示
错误处理: 完善的异常处理机制，提供详细的错误信息
UI设计优化: 全面圆角化设计，提升视觉美感，统一的圆角半径规范（12px-28px），简化的内容展示，移除复杂的折叠机制，优化的卡片布局和间距设计

2.数据显示优化#

字段映射: 将英文字段名映射为中文显示名称
专用内容展示: URL爬取采用卡片式布局，替代表格格式
内容格式化: 智能识别和美化显示图片、链接等元素
折叠展开功能: 长内容支持折叠/展开，提升阅读体验
智能过滤: 自动隐藏不必要的技术字段
导出美化: 重新设计导出按钮样式，提升用户体验
响应式设计: 在不同设备上都有良好的显示效果

3. 前端技术栈#

Vue 3: 组合式API，响应式数据管理
Element Plus: 丰富的UI组件，表格、表单、按钮等
Vue Router: 单页面应用路由，平滑页面切换
Axios: Promise-based HTTP客户端，API请求管理
Vite: 快速构建工具，热模块替换(HMR)
CSS3: 现代化样式特性，渐变、动画、毛玻璃效果

4. 设计系统#

色彩体系: 统一的暖色调色板，和谐搭配
组件复用: 全局样式类，一致的视觉语言
动画库: 自定义关键帧动画，提升交互体验
响应式: 移动优先的设计理念

具体文件：

frontend/templates/index.html - 旧版首页
frontend/templates/crawler.html - 旧版爬虫页
frontend/templates/docs.html - 旧版文档页
frontend/templates/about.html - 旧版关于页
frontend/static/css/style.css - 旧版样式
frontend/static/js/main.js - 旧版JavaScript

📁 项目配置文件#

README.md - 项目说明文档
- 作用：项目介绍、安装和使用说明
- 必要性：⭐⭐⭐⭐ 重要文档
宝塔部署清单.md - 部署文件清单
- 作用：列出宝塔部署所需的文件和步骤概览
- 必要性：⭐⭐⭐⭐⭐ 部署必需，生产环境必备
宝塔部署详细指南.md - 详细部署指南
- 作用：完整的宝塔面板部署步骤和配置说明
- 必要性：⭐⭐⭐⭐⭐ 部署必需，生产环境必备
文件介绍.md - 本文件
- 作用：说明各文件的作用
- 必要性：⭐⭐ 参考文档

📁 运行时文件#

crawler_results/ - 爬取结果存储目录
- 作用：存储爬虫获取的数据
- 必要性：⭐⭐⭐⭐ 功能必需（目录可为空）
__pycache__/ - Python缓存目录
- 作用：Python字节码缓存
- 必要性：❌ 可以删除（运行时自动生成）
frontend/vue/node_modules/ - Node.js依赖目录
- 作用：存储前端依赖包
- 必要性：⭐⭐⭐⭐ Vue项目必需（可通过npm install重新生成）

📁 开发环境文件#

.venv/ 或 .venv1/ - Python虚拟环境
- 作用：隔离Python依赖
- 必要性：⭐⭐⭐ 开发推荐（可重新创建）
.idea/ - PyCharm IDE配置
- 作用：IDE项目配置
- 必要性：❌ 可以删除（IDE特定）
.gitignore - Git忽略文件配置
- 作用：指定Git不跟踪的文件
- 必要性：⭐⭐⭐ 版本控制推荐

🗑️ 可以安全删除的文件#

如果你只使用Vue前端版本，可以删除以下文件：

1
# 删除旧版HTML前端
2
rm -rf frontend/static/
3
rm -rf frontend/templates/
4

5
# 删除开发缓存
6
rm -rf __pycache__/
7
rm -rf .idea/
8

9
# 删除虚拟环境（可重新创建）
10
rm -rf .venv/
11
rm -rf .venv1/

📋 最小化部署文件列表#

如果要进行最小化部署，只需要以下文件：

1. 后端必需文件#

app.py
crawler_main.py
scrapy_spiders.py
requirements.txt
crawler_results/

2. 前端必需文件（Vue版本）#

1
frontend/vue/
2
├── src/
3
├── package.json
4
├── vite.config.js
5
└── index.html

3. 文档文件（推荐保留）#

README.md
文件介绍.md

💡 建议#

开发阶段：保留所有文件，便于调试和对比
生产部署：可以删除旧版HTML文件，只保留Vue版本
版本控制：使用.gitignore忽略缓存和依赖目录
备份重要：删除前请确保已备份重要数据

🔄 文件依赖关系#

1
app.py (后端入口)
2
├── crawler_main.py (爬虫逻辑)
3
├── scrapy_spiders.py (Scrapy定义)
4
└── frontend/vue/ (前端界面)
5
    ├── src/views/Crawler.vue (调用后端API)
6
    └── 其他Vue组件

记住：删除文件前请确保理解其作用，并做好备份！

音乐

音乐

爬虫项目-校级实验室基金项目

🏗️ NYLG 系统架构说明#

🌐 系统整体架构#

🔗 前后端连接机制#

1. 通信协议#

2. API接口设计#

3. 请求响应格式#

🎯 前端架构详解#

1. Vue3 组件架构#

2. 前端技术栈#

3. 前端职责#

⚙️ 后端架构详解#

1. Flask应用架构#

2. 后端技术栈#

3. 后端职责#

🔄 数据流程详解#

1. 爬取任务流程#

2. 具体实现示例#

🗂️ 文件组织结构#

🔧 配置和部署#

1. 开发环境配置#

2. 生产环境部署#

3. 环境变量配置#

🛡️ 安全考虑#

1. 前端安全#

2. 后端安全#

3. 爬虫安全#

📊 性能优化#

1. 前端优化#

2. 后端优化#

3. 爬虫优化#

🔍 监控和调试#

1. 前端调试#

2. 后端调试#

3. 系统监控#

💡 总结#

🛠️ NYLG 自定义开发指南#

🎨 界面自定义#

1. 修改整体配色方案#

2. 修改布局结构#

3. 添加新的UI组件#

🔧 后台功能修改#

1. 添加新的爬虫类型#

2. 修改API接口#

3. 数据库集成#

📦 功能扩展#

1. 添加数据处理功能#

2. 添加定时任务#

3. 添加用户认证#

🚀 部署配置#

1. 生产环境配置#

2. Docker部署#

🔍 调试技巧#

1. 前端调试#

2. 后端调试#

3. 常见问题解决#

📚 推荐资源#

🗂️项目文件介绍#

📁 核心文件（必要文件）#

1. 后端核心文件#

1. Vue项目根目录#

2. Vue源代码#

3. Vue页面组件#

📁 旧版文件（可选删除）#

1. 静态HTML版本（已被Vue版本替代）#

📁 前端文件详细说明#

1. Vue 组件文件#

2. 样式文件#

📁 界面设计特色#

1. 温馨暖色调设计#

2. 用户体验优化#

3. 响应式设计#

📁 技术实现亮点#

1. 网页爬取功能优化#

2.数据显示优化#

3. 前端技术栈#

4. 设计系统#

📁 项目配置文件#