热门角色不仅是灵感来源,更是你的效率助手。通过精挑细选的角色提示词,你可以快速生成高质量内容、提升创作灵感,并找到最契合你需求的解决方案。让创作更轻松,让价值更直接!
我们根据不同用户需求,持续更新角色库,让你总能找到合适的灵感入口。
快速生成项目样板代码,涵盖结构与必要元素
以下是一个使用 Python FastAPI 构建的 REST 接口样板代码,同时满足“用户注册功能开发”需求,并包含基础目录结构、必要的库导入以及初始化配置。
project/
│
├── app/
│ ├── __init__.py
│ ├── main.py # FastAPI 应用主文件
│ ├── models/ # 数据模型目录
│ │ ├── __init__.py
│ │ ├── user.py # 用户相关模型
│ ├── schemas/ # 数据验证和序列化模式
│ │ ├── __init__.py
│ │ ├── user.py # 用户相关数据模式
│ ├── routers/ # 路由模块
│ │ ├── __init__.py
│ │ ├── user.py # 用户相关路由
│ ├── services/ # 核心业务逻辑层
│ │ ├── __init__.py
│ │ ├── user.py # 用户服务
│ └── config.py # 全局应用配置
│
├── requirements.txt # 项目依赖
├── .env # 环境配置(可选,如数据库连接字符串)
└── README.md # 项目介绍文档
requirements.txt需要的依赖可以放置在 requirements.txt 文件中:
fastapi
uvicorn
pydantic
sqlalchemy # 可选,如果需要数据库
python-decouple # 用于读取环境变量
app/config.py全局配置文件,用于处理配置的动态加载:
from decouple import config
# 应用全局配置
class Settings:
PROJECT_NAME: str = "FastAPI User Registration"
VERSION: str = "1.0.0"
DEBUG: bool = config("DEBUG", cast=bool, default=True)
DATABASE_URL: str = config("DATABASE_URL", default="sqlite:///./test.db")
settings = Settings()
app/schemas/user.py定义用户注册时的数据模型(输入/输出):
from pydantic import BaseModel, EmailStr, Field
# 用户注册请求体
class UserCreate(BaseModel):
username: str = Field(..., min_length=3, max_length=30)
email: EmailStr
password: str = Field(..., min_length=6)
# 用户响应体(不包含敏感密码)
class UserResponse(BaseModel):
id: int
username: str
email: EmailStr
class Config:
orm_mode = True # 支持直接从 ORM 对象转换为 Pydantic 对象
app/models/user.py定义数据库模型(如果你使用 SQLAlchemy):
from sqlalchemy import Column, Integer, String
from sqlalchemy.ext.declarative import declarative_base
Base = declarative_base()
class User(Base):
__tablename__ = "users"
id = Column(Integer, primary_key=True, index=True)
username = Column(String, unique=True, index=True, nullable=False)
email = Column(String, unique=True, index=True, nullable=False)
hashed_password = Column(String, nullable=False)
app/services/user.py业务逻辑层,处理注册业务:
from passlib.context import CryptContext
from sqlalchemy.orm import Session
from app.models.user import User
from app.schemas.user import UserCreate
# 密码加密工具
pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
def get_password_hash(password: str) -> str:
"""将明文密码哈希加密"""
return pwd_context.hash(password)
def create_user(db: Session, user_create: UserCreate):
"""在数据库中创建新用户"""
hashed_password = get_password_hash(user_create.password)
db_user = User(username=user_create.username, email=user_create.email, hashed_password=hashed_password)
db.add(db_user)
db.commit()
db.refresh(db_user)
return db_user
app/routers/user.py定义用户相关路由和注册逻辑:
from fastapi import APIRouter, Depends, HTTPException
from sqlalchemy.orm import Session
from app.schemas.user import UserCreate, UserResponse
from app.services.user import create_user
from app.config import settings
from app.database import get_db # 数据库连接,这里需要额外实现
router = APIRouter(
prefix="/users",
tags=["Users"]
)
@router.post("/", response_model=UserResponse)
def register_user(user_create: UserCreate, db: Session = Depends(get_db)):
"""
用户注册路由
"""
# 检查是否已经存在同名用户/邮箱
existing_user = db.query(User).filter((User.username == user_create.username) | (User.email == user_create.email)).first()
if existing_user:
raise HTTPException(status_code=400, detail="Username or Email already exists")
created_user = create_user(db, user_create)
return created_user
app/main.py主文件用于启动 FastAPI 应用:
from fastapi import FastAPI
from app.config import settings
from app.routers import user
app = FastAPI(
title=settings.PROJECT_NAME,
version=settings.VERSION,
debug=settings.DEBUG
)
# 包含用户注册的路由
app.include_router(user.router)
@app.get("/")
def read_root():
return {"message": "Welcome to FastAPI User Registration"}
安装依赖:
pip install -r requirements.txt
启动应用:
uvicorn app.main:app --reload
测试接口:
http://127.0.0.1:8000/docs 查看自动生成的 Swagger 文档。POST /users。app/database.py 文件。以上代码提供了一个完整的用户注册功能接口的基本脚手架,可以直接作为开发基础进行扩展或优化。
以下是一个基于 React 实现的“博客文章展示”组件样板代码,包括组件化风格和 CSS 模块化管理的要求:
组件化和 CSS 模块化管理的前提是良好的文件结构。以下结构应该适用于我们的需求:
/src
/components
/BlogPost
BlogPost.js // React组件
BlogPost.module.css // CSS模块化文件
/BlogList
BlogList.js // React组件,用于渲染博客文章的列表
BlogList.module.css // CSS模块化文件
App.js // 根组件
index.js // 入口文件
BlogPost.jsimport React from 'react';
import styles from './BlogPost.module.css';
const BlogPost = ({ title, author, content, date }) => {
return (
<div className={styles.blogPost}>
<h2 className={styles.title}>{title}</h2>
<div className={styles.metadata}>
<span>By {author}</span> | <span>{new Date(date).toLocaleDateString()}</span>
</div>
<p className={styles.content}>{content}</p>
</div>
);
};
export default BlogPost;
BlogPost.module.css.blogPost {
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
margin-bottom: 24px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.title {
font-size: 1.5rem;
color: #333;
margin-bottom: 8px;
}
.metadata {
font-size: 0.875rem;
color: #666;
margin-bottom: 16px;
}
.content {
font-size: 1rem;
color: #444;
line-height: 1.6;
}
BlogList.jsimport React from 'react';
import BlogPost from '../BlogPost/BlogPost';
import styles from './BlogList.module.css';
const BlogList = ({ posts }) => {
return (
<div className={styles.blogList}>
{posts.map((post) => (
<BlogPost
key={post.id}
title={post.title}
author={post.author}
content={post.content}
date={post.date}
/>
))}
</div>
);
};
export default BlogList;
BlogList.module.css.blogList {
display: flex;
flex-direction: column;
gap: 16px;
}
App.jsimport React from 'react';
import BlogList from './components/BlogList/BlogList';
const App = () => {
const fakePosts = [
{
id: 1,
title: 'Understanding React Components',
author: 'John Doe',
content: 'React components are the building blocks of any React application...',
date: '2023-10-01',
},
{
id: 2,
title: 'Why Modular CSS Matters',
author: 'Jane Smith',
content: 'Modular CSS is an essential practice for scaling front-end applications...',
date: '2023-10-02',
},
];
return (
<div>
<h1>Blog</h1>
<BlogList posts={fakePosts} />
</div>
);
};
export default App;
index.jsimport React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css'; // 如果有全局样式
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
组件化:
BlogPost, BlogList),提高可复用性和可读性。BlogList 负责渲染由多个 BlogPost 组成的列表。CSS模块化:
.module.css 文件,并通过 import styles from './xxx.module.css' 实现 CSS 模块化。BlogList 添加分页或“加载更多”的功能。以下是一个用于动态数据显示的基础HTML页面的样板代码,使用了HTML和JavaScript,并附带了基础的样式设计。这个模板展示了一个动态数据表格,数据内容可以通过JavaScript动态渲染。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Data Display</title>
<style>
/* 基础样式设计 */
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f9f9f9;
color: #333;
}
h1 {
text-align: center;
color: #555;
}
#data-container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background: #fff;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
}
table th, table td {
border: 1px solid #ddd;
text-align: left;
padding: 10px;
}
table th {
background-color: #f4f4f4;
}
.btn-refresh {
padding: 10px 20px;
color: white;
background-color: #007BFF;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn-refresh:hover {
background-color: #0056b3;
}
.loading {
text-align: center;
margin: 20px 0;
color: #999;
}
</style>
</head>
<body>
<h1>Dynamic Data Display Page</h1>
<div id="data-container">
<button class="btn-refresh" onclick="fetchAndDisplayData()">Refresh Data</button>
<div id="loading" class="loading" style="display: none;">Loading...</div>
<table id="data-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<!-- 数据行将由JavaScript生成 -->
</tbody>
</table>
</div>
<script>
// 页面加载完成后,自动加载动态数据
document.addEventListener('DOMContentLoaded', function() {
fetchAndDisplayData();
});
// 模拟API,返回动态数据
function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve([
{ id: 1, name: 'Alice', age: 25, city: 'New York' },
{ id: 2, name: 'Bob', age: 30, city: 'London' },
{ id: 3, name: 'Charlie', age: 28, city: 'Berlin' },
{ id: 4, name: 'Diana', age: 22, city: 'Tokyo' },
]);
}, 1000);
});
}
// 从“API”获取动态数据并渲染到页面
function fetchAndDisplayData() {
const loader = document.getElementById('loading');
const tableBody = document.querySelector('#data-table tbody');
tableBody.innerHTML = ''; // 清空旧数据
loader.style.display = 'block'; // 显示加载状态
fetchData().then(data => {
loader.style.display = 'none'; // 隐藏加载状态
data.forEach(item => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.age}</td>
<td>${item.city}</td>
`;
tableBody.appendChild(row);
});
}).catch(err => {
loader.style.display = 'none'; // 隐藏加载状态
const errorRow = document.createElement('tr');
errorRow.innerHTML = `<td colspan="4" style="text-align:center; color:red;">Failed to load data</td>`;
tableBody.appendChild(errorRow);
console.error('Error fetching data:', err);
});
}
</script>
</body>
</html>
HTML基础结构:
JavaScript动态数据渲染:
fetchData函数模拟从API获取数据(返回一个异步Promise)。基础样式设计:
这段代码可以作为任何展示动态数据的基础架构,适用于需要动态数据刷新或实时更新的场景。你可以根据需求进一步定制样式或扩展功能。
为开发者提供高效的脚手架代码生成工具,快速搭建项目基础架构,简化开发流程,提升工程效率。
需要快速启动产品开发,使用提示词一键生成标准化项目结构和基础代码,为产品验证赢得更多时间。
通过提示词提供的统一模板生成代码,规范团队工作流程,保障团队开发输出的高一致性与高质量。
在承接多样化项目时,通过提示词高效生成各类语言与框架的样板代码,从而提高接单效率并专注于业务逻辑设计。
将模板生成的提示词复制粘贴到您常用的 Chat 应用(如 ChatGPT、Claude 等),即可直接对话使用,无需额外开发。适合个人快速体验和轻量使用场景。
把提示词模板转化为 API,您的程序可任意修改模板参数,通过接口直接调用,轻松实现自动化与批量处理。适合开发者集成与业务系统嵌入。
在 MCP client 中配置对应的 server 地址,让您的 AI 应用自动调用提示词模板。适合高级用户和团队协作,让提示词在不同 AI 工具间无缝衔接。
免费获取高级提示词-优惠即将到期