为申请校级实验室开放基金所做的项目 ——— 点击访问，若访问失败为正常现象，因为域名还没有进行ICP备案，可以使用梯子访问。暂不开放ip访问功能。
对比专业爬虫项目还是略有粗糙，目前该项目将持续维护，当做完报告将暂停维护，并于 github 开源代码。

🏗️ NYLG 系统架构说明

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

🌐 系统整体架构

┌─────────────────┐    HTTP/API   ┌─────────────────┐
│                 │ ◄──────────── │                 │
│    前端 Vue3    │                │  后端 (Flask)   │
│                 │ ────────────► │                 │
└─────────────────┘               └─────────────────┘
         │                                 │
         │                                 │
         ▼                                 ▼
┌────────────────┐              ┌─────────────────┐
│   用户界面      │              │   爬虫引擎       │
│   - 操作交互    │              │   - 数据采集     │
│   - 结果展示    │              │   - 内容解析     │
│   - 数据导出    │              │   - 错误处理     │
└────────────────┘              └─────────────────┘

🔗 前后端连接机制

1. 通信协议

HTTP RESTful API

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

CORS跨域处理

# app.py
from flask_cors import CORS
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. 请求响应格式

标准请求格式

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

标准响应格式

{
  "success": true,
  "message": "操作成功",
  "data": [...],
  "task_id": 123,
  "timestamp": "2024-01-01 12:00:00"
}

🎯 前端架构详解

1. Vue3 组件架构

App.vue (根组件)
├── router-view (路由出口)
│   ├── Home.vue (首页)
│   ├── Crawler.vue (爬虫页面)
│   ├── About.vue (关于页面)
│   └── Docs.vue (文档页面)
└── 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应用架构

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

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. 具体实现示例

前端发起请求

// Crawler.vue
async executeCrawl() {
  this.isLoading = true
  try {
    const response = await axios.post('/api/crawl', {
      spider_type: this.selectedSpider,
      ...this.getParams()
    })
    
    if (response.data.success) {
      this.results = response.data.results
      ElMessage.success('爬取成功')
    }
  } catch (error) {
    ElMessage.error('爬取失败')
  } finally {
    this.isLoading = false
  }
}

后端处理请求

# app.py
@app.route('/api/crawl', methods=['POST'])
def crawl():
    try:
        data = request.get_json()
        spider_type = data.get('spider_type')
        
        # 执行爬虫任务
        results, error = crawler_service.execute_search(
            spider_type, 
            data.get('keyword'), 
            data.get('max_results')
        )
        
        if error:
            return jsonify({'success': False, 'message': error})
        
        return jsonify({
            'success': True, 
            'results': results,
            'message': '爬取成功'
        })
        
    except Exception as e:
        return jsonify({'success': False, 'message': str(e)})

🗂️ 文件组织结构

前端文件结构

frontend/vue/
├── src/
│   ├── views/          # 页面组件
│   │   ├── Home.vue
│   │   ├── Crawler.vue
│   │   ├── About.vue
│   └── └── Docs.vue
│   ├── assets/         # 静态资源
│   │   └── global.css
│   ├── router/         # 路由配置
│   │   └── index.js
│   ├── App.vue         # 根组件
│   └── main.js         # 入口文件
├── public/             # 公共文件
└── package.json        # 依赖配置

后端文件结构

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

🔧 配置和部署

1. 开发环境配置

前端开发服务器

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

后端开发服务器

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

2. 生产环境部署

前端构建

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

后端部署

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

3. 环境变量配置

# 开发环境
FLASK_ENV=development
FLASK_DEBUG=True

# 生产环境
FLASK_ENV=production
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

/* 修改主色调 */
:root {
  --primary-color: #your-color;     /* 主色调 */
  --secondary-color: #your-color;   /* 辅助色 */
  --accent-color: #your-color;      /* 强调色 */
}

/* 修改背景渐变 */
body {
  background: linear-gradient(135deg, #your-color1, #your-color2);
}

Vue组件样式

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

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

2. 修改布局结构

导航栏自定义

文件位置：frontend/vue/src/App.vue

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

页面布局修改

在各个Vue组件中修改HTML结构：

<template>
  <div class="your-custom-class">
    <!-- 您的自定义内容 -->
  </div>
</template>

3. 添加新的UI组件

安装新组件库

cd frontend/vue
npm install your-component-library

在组件中使用

<script>
import { YourComponent } from 'your-component-library'

export default {
  components: {
    YourComponent
  }
}
</script>

添加新的内容展示组件

<!-- 在 Crawler.vue 中添加新组件 -->
<template>
  <!-- URL爬取专用展示组件示例 -->
  <div v-if="selectedSpider === 'url'" class="url-content-display">
    <div v-for="(result, index) in results" :key="index" class="url-result-item">
      <div class="url-result-header">
        <h3 class="url-title">
          <a :href="result.url" target="_blank">{{ result.title }}</a>
        </h3>
        <div class="url-meta">
          <span>📏 内容长度: {{ result.length }} 字符</span>
          <span>⏰ 爬取时间: {{ result.crawl_time }}</span>
        </div>
      </div>
      <div class="content-preview" :class="{ 'expanded': result.expanded }">
        <div class="content-text" v-html="formatContent(result.content)"></div>
      </div>
      <!-- 折叠/展开按钮 -->
      <el-button @click="toggleContent(result)">展开/收起</el-button>
    </div>
  </div>
</template>

UI设计规范

圆角设计标准

/* 小元素圆角 */
.small-element {
  border-radius: 12px;
}

/* 中等元素圆角 */
.medium-element {
  border-radius: 16px;
}

/* 大元素圆角 */
.large-element {
  border-radius: 20px;
}

/* 特大元素圆角 */
.extra-large-element {
  border-radius: 24px;
}

/* 按钮圆角 */
.button-element {
  border-radius: 28px;
}

简化的内容展示

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

🔧 后台功能修改

1. 添加新的爬虫类型

步骤1：创建爬虫类

文件位置：测试/your_spider.py

class YourSpider:
    def __init__(self):
        self.name = "您的爬虫"
    
    def search(self, keyword, max_results=10):
        """搜索方法"""
        try:
            # 您的爬虫逻辑
            results = []
            return results, None
        except Exception as e:
            return None, str(e)

步骤2：注册爬虫

文件位置：app.py

# 导入您的爬虫
from your_spider import YourSpider

# 在CrawlerService类中添加
class CrawlerService:
    def __init__(self):
        self.spiders = {
            # 现有爬虫...
            'your_spider': {'name': '您的爬虫', 'class': YourSpider, 'type': 'search'}
        }

步骤3：前端配置

文件位置：frontend/vue/src/views/Crawler.vue

spiders: [
  // 现有爬虫...
  {
    type: 'your_spider',
    name: '您的爬虫',
    description: '爬虫描述',
    icon: 'YourIcon'
  }
]

2. 修改API接口

添加新的API端点

文件位置：app.py

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

修改现有接口

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

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

3. 数据库集成

添加数据库支持

pip install sqlalchemy flask-sqlalchemy

配置数据库

文件位置：app.py

from flask_sqlalchemy import SQLAlchemy

app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///crawler.db'
db = SQLAlchemy(app)

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

📦 功能扩展

1. 添加数据处理功能

数据清洗

文件位置：utils/data_processor.py（新建）

class DataProcessor:
    @staticmethod
    def clean_text(text):
        """文本清洗"""
        # 您的清洗逻辑
        return cleaned_text
    
    @staticmethod
    def format_data(data):
        """数据格式化"""
        # 您的格式化逻辑
        return formatted_data

2. 添加定时任务

安装调度器

pip install apscheduler

配置定时任务

文件位置：app.py

from apscheduler.schedulers.background import BackgroundScheduler

scheduler = BackgroundScheduler()
scheduler.add_job(
    func=your_scheduled_function,
    trigger="interval",
    seconds=3600  # 每小时执行一次
)
scheduler.start()

3. 添加用户认证

安装认证库

pip install flask-login flask-jwt-extended

配置认证

from flask_login import LoginManager, login_required

login_manager = LoginManager()
login_manager.init_app(app)

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

🚀 部署配置

1. 生产环境配置

环境变量配置

文件位置：.env（新建）

FLASK_ENV=production
SECRET_KEY=your-secret-key
DATABASE_URL=your-database-url

生产环境启动

# 安装生产服务器
pip install gunicorn

# 启动应用
gunicorn -w 4 -b 0.0.0.0:5000 app:app

2. Docker部署

Dockerfile

FROM python:3.9
WORKDIR /app
COPY requirements.txt .
RUN pip install -r requirements.txt
COPY . .
EXPOSE 5000
CMD ["python", "app.py"]

docker-compose.yml

version: '3.8'
services:
  web:
    build: .
    ports:
      - "5000:5000"
    environment:
      - FLASK_ENV=production

🔍 调试技巧

1. 前端调试

# 开发模式启动
cd frontend/vue
npm run dev

# 查看控制台日志
# 在浏览器开发者工具中查看Network和Console

2. 后端调试

# 启用调试模式
app.run(debug=True)

# 添加日志
import logging
logging.basicConfig(level=logging.DEBUG)
app.logger.debug('调试信息')

3. 常见问题解决

CORS错误

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

编码问题

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

📚 推荐资源

学习资料

开发工具

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前端版本，可以删除以下文件：

# 删除旧版HTML前端  
rm -rf frontend/static/  
rm -rf frontend/templates/  
  
# 删除开发缓存  
rm -rf __pycache__/  
rm -rf .idea/  
  
# 删除虚拟环境（可重新创建）  
rm -rf .venv/  
rm -rf .venv1/

📋 最小化部署文件列表

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

1. 后端必需文件

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

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

frontend/vue/  
├── src/  
├── package.json  
├── vite.config.js  
└── index.html

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

README.md  
文件介绍.md

💡 建议

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

🔄 文件依赖关系

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

2024-8

🏗️ NYLG 系统架构说明

🌐 系统整体架构

🔗 前后端连接机制

1. 通信协议

HTTP RESTful API

CORS跨域处理

2. API接口设计

核心接口列表

数据流向图

3. 请求响应格式

标准请求格式

标准响应格式

🎯 前端架构详解

1. Vue3 组件架构

2. 前端技术栈

核心框架

UI组件库

样式技术

3. 前端职责

用户交互层

数据处理层

业务逻辑层

⚙️ 后端架构详解

1. Flask应用架构

2. 后端技术栈

核心框架

数据处理

文件处理

3. 后端职责

API服务层

爬虫引擎层

数据服务层

🔄 数据流程详解

1. 爬取任务流程

2. 具体实现示例

前端发起请求

后端处理请求

🗂️ 文件组织结构

前端文件结构

后端文件结构

🔧 配置和部署

1. 开发环境配置

前端开发服务器

后端开发服务器

2. 生产环境部署

前端构建

后端部署

3. 环境变量配置

🛡️ 安全考虑

1. 前端安全

2. 后端安全

3. 爬虫安全

📊 性能优化

1. 前端优化

2. 后端优化

3. 爬虫优化

🔍 监控和调试

1. 前端调试

2. 后端调试

3. 系统监控

🛠️ NYLG 自定义开发指南

🎨 界面自定义

1. 修改整体配色方案

全局样式文件

Vue组件样式

2. 修改布局结构

导航栏自定义

页面布局修改

3. 添加新的UI组件

安装新组件库

在组件中使用

添加新的内容展示组件

UI设计规范

圆角设计标准

简化的内容展示

🔧 后台功能修改

1. 添加新的爬虫类型

步骤1：创建爬虫类

步骤2：注册爬虫

发送评论编辑评论