当前位置：首页 > ops >正文

利用Claude code，只用文字版系统设计大纲，就能轻松实现系统~

ops 2025/7/12 6:52:01

书接上文，今天刚刚在Windows下基于docker desktop 安装好了Claude code，就迫不及待的来试试手，用Claude code 具体做个项目。于是就想到了之前用Cursor实现的一个文档知识库小助手（RAG），直接把上次Cursor总结的md文件丢给它！

在这里插入图片描述
在上一篇文章中，已经把Windows下的磁盘目录映射到docker里了，所以不影响在docker中直接修改Windows下的项目文件，具体命令如下：

docker run -it --rm --name claude-code --env-file "D:\claude\.env" -v "D:\claude\workspace:/app" node:18 /bin/bash

考虑到这个项目里要安装很多依赖，所以还是使用了Python的虚拟环境，优点之前介绍过。
在这里插入图片描述

  1. 在命令行中进入chatBoot目录2. 激活虚拟环境：.\.venv\Scripts\activate3. 安装后端依赖：pip install -r backend/requirements.txt4. 安装前端依赖：cd frontend && npm install项目结构已经完整创建，现在只需要安装依赖就可以运行了。

在这里插入图片描述
期初Claude理解错了，把后台功能也放在前台页面上了，告诉它，立刻调整！

在这里插入图片描述

前后台界面启动后，发现端口8000被clodop占了，告诉它一声，自己就改好了。

在这里插入图片描述

最终界面如下（第一版）：

在这里插入图片描述

后台登录界面UI：

在这里插入图片描述

完成！现在后端改为使用端口 8001。🔄 更新后的启动命令：1. 后端启动（端口 8001）cd backenduvicorn main:app --reload --host 0.0.0.0 --port 80012. 用户端启动（端口 3000）cd frontend-usernpm installnpm start3. 管理端启动（端口 3001）cd frontend-adminnpm installnpm start🌐 更新后的访问地址：- 用户聊天界面: http://localhost:3000- 管理后台: http://localhost:3001- API文档: http://localhost:8001/docs现在端口不会冲突了，您可以正常启动所有服务！

很贴心的告诉我花了$5

后台上传一篇文档

在这里插入图片描述

真细节，还自动生成了接口文档！
在这里插入图片描述

前端聊天功能展示

在这里插入图片描述

虽然前台的回答结果还有点问题，但是这不重要，毕竟还没调试过，实现效果和Cursor不分伯仲，关键一点Claude code用起来更省心！闷头干大事！

做这么个项目，大约花费$5，注册送了$100，还是够用一阵的，Claude code作为Cursor的平替感觉一点问题没有！而且比较好的一点是，它不会像Cursor那样改点东西，瞎分析个半天，然后反复让你确认，着实很烦人！

原以为Claude code 基于命令行会很难用，结果超出我的预期！点赞！

注册账号 Any Router
Claude Code中文文档

结束语：附上自动生成的 CLAUDE.md文件

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

This is a Q&A Knowledge Base System with separate frontend interfaces: a public chat interface for users and an admin interface for knowledge base management. Built with FastAPI (backend) and React (frontend), utilizing ChromaDB for vector storage and Qwen LLM for intelligent question answering.

Common Development Commands

Backend Commands

cd backend
pip install -r requirements.txt
# Create .env file with DASHSCOPE_API_KEY=your_api_key_here
uvicorn main:app --reload --host 0.0.0.0 --port 8001

Frontend Commands

User Interface (Port 3000):

cd frontend-user
npm install
npm start

Admin Interface (Port 3001):

cd frontend-admin
npm install
npm start

Testing

Backend: Use FastAPI’s automatic docs at http://localhost:8001/docs
User Frontend: Access the chat interface at http://localhost:3000
Admin Frontend: Access the admin panel at http://localhost:3001

Architecture Overview

Two-Tier Frontend Architecture

User Frontend (frontend-user/)

Simple, ChatGPT-like chat interface
Public access, no authentication required
Clean and minimalist design with gradient backgrounds
Real-time streaming chat responses
Mobile-responsive design

Admin Frontend (frontend-admin/)

Login-protected admin panel with sidebar navigation
Document upload and management
Knowledge base administration
System statistics and monitoring
React Router for navigation between features

Backend Architecture (FastAPI)

Core Modules:

main.py: FastAPI application with separated public/admin APIs
auth.py: JWT-based authentication system using passlib and python-jose
chroma_utils.py: ChromaDB operations for vector storage and retrieval
file_utils.py: File processing (PDF, Word, TXT, CSV, Excel) and text chunking
llm_utils.py: Qwen LLM integration via DashScope API
schemas.py: Pydantic models for request/response validation
config.py: Centralized configuration management with .env support

API Structure:

Public APIs: /chat, /chat/stream (no auth required)
Admin APIs: /admin/* (JWT token required)

Configuration System

Uses python-dotenv to load .env file automatically
All configuration centralized in config.py with environment variable support
Supports customization of model parameters, server settings, and paths

Authentication System

JWT-based authentication for admin panel
Default admin credentials: admin / admin123
Token expires after 24 hours
Protected admin endpoints with dependency injection

Core Flow

User Chat Flow:

User opens chat interface (frontend-user)
User asks question via /chat or /chat/stream API
Backend searches ChromaDB for relevant documents
Context + question sent to Qwen LLM
Response returned to user interface (with streaming support)

Admin Management Flow:

Admin logs in via /admin/login
JWT token stored in localStorage
Admin uploads files via /admin/upload
Files processed asynchronously and stored in ChromaDB
Admin can view/delete documents via /admin/documents

Key Dependencies

Backend

FastAPI + uvicorn for web server
ChromaDB for vector database
DashScope for Qwen LLM API
PyPDF2, python-docx, pandas for file processing
python-jose for JWT authentication
passlib for password hashing
python-dotenv for environment configuration

Frontend

React for UI framework
Ant Design for components
Axios for API calls
React Router for admin navigation
cross-env for environment variables in npm scripts

Environment Setup

Required Configuration

Create a .env file in the backend/ directory with:

DASHSCOPE_API_KEY=your_dashscope_api_key_here

Optional Configuration

MODEL_NAME=qwen-turbo
MAX_TOKENS=1500
TEMPERATURE=0.7
TOP_P=0.8
HOST=0.0.0.0
PORT=8001
SECRET_KEY=your-jwt-secret-key
CHROMA_PERSIST_DIR=./chroma_db
CHUNK_SIZE=1000
CHUNK_OVERLAP=200