Cursor 开发技巧完全指南
目录
- Cursor 基础功能
- Cursor 高效使用指南
- Agent Ask 与 Manual 模式详解
- Cursor 编辑器配置技巧
- 快捷键大全
- Cursor 问答模型特点
- Vue.js 开发技巧
- React 开发技巧
- Flutter 开发技巧
- 小程序开发技巧
- UniApp 开发技巧
- Android 开发技巧
- iOS 开发技巧
- Spring Boot 后端开发技巧
- 数据库设计技巧
- 架构设计技巧
- 高效开发工作流
- 最佳实践
Cursor 基础功能
核心特性
- AI 代码补全:实时智能代码建议
- Chat 功能:与 AI 助手对话编程
- 代码重构:智能代码优化建议
- 错误检测:实时语法和逻辑错误提示
- 多文件理解:跨文件的代码理解能力
安装与配置
- 下载 Cursor 编辑器
- 安装相关语言扩展
- 配置 Git 集成
- 设置代码格式化规则
- 配置 AI 模型偏好
- 设置代码片段和模板
Cursor 高效使用指南
1. 智能代码补全
- 实时补全:AI 根据上下文提供智能建议
- 函数签名:自动显示参数类型和说明
- 导入建议:自动导入所需的模块和组件
- 代码片段:快速插入常用代码模板
2. 多文件理解
- 跨文件引用:AI 理解整个项目的代码结构
- 依赖分析:自动识别模块间的依赖关系
- 重构建议:基于全局代码分析提供重构建议
3. 错误检测与修复
- 实时错误检测:语法错误、逻辑错误实时提示
- 自动修复建议:AI 提供具体的修复方案
- 代码质量检查:检查代码风格和最佳实践
4. 智能重构
- 变量重命名:智能重命名所有相关引用
- 方法提取:将重复代码提取为独立方法
- 类重构:优化类的结构和职责分配
5. 测试生成
- 单元测试:基于代码自动生成测试用例
- 集成测试:生成 API 和组件集成测试
- 测试数据:自动生成测试数据和 Mock 对象
6. 文档生成
- 注释生成:为代码自动生成注释
- API 文档:生成接口文档和示例
- README 更新:自动更新项目文档
Agent Ask 与 Manual 模式详解
Agent Ask 模式
特点
- 主动分析:AI 主动分析代码并提供建议
- 上下文理解:基于整个项目上下文进行推理
- 智能推荐:自动推荐最佳实践和优化方案
使用场景
// 示例:Agent Ask 自动分析代码并提供优化建议
function calculateTotal(items) {
let total = 0;
for (let i = 0; i < items.length; i++) {
total += items[i].price;
}
return total;
}
// Agent Ask 会自动建议使用 reduce 方法优化
const calculateTotal = (items) => items.reduce((sum, item) => sum + item.price, 0);
配置技巧
- 启用自动分析:在设置中开启 Agent Ask 功能
- 调整敏感度:根据项目需求调整建议频率
- 过滤规则:设置不需要分析的文件类型
Manual 模式
特点
- 按需触发:手动触发 AI 分析
- 精确控制:可以指定具体的分析范围
- 深度分析:对特定代码进行深度分析
使用场景
// 手动选择代码块进行分析
const complexAlgorithm = (data) => {
// 选择这段代码,右键选择 "Analyze with AI"
const result = data
.filter(item => item.active)
.map(item => ({
id: item.id,
name: item.name.toUpperCase(),
value: item.value * 2
}))
.sort((a, b) => b.value - a.value);
return result.slice(0, 10);
};
操作技巧
- 选择代码:选中要分析的代码块
- 右键菜单:使用右键菜单触发分析
- 快捷键:使用快捷键快速触发分析
- 批量分析:选择多个文件进行批量分析
模式选择建议
使用 Agent Ask 的情况
- 新项目开发阶段
- 学习新技术时
- 代码审查阶段
- 重构优化阶段
使用 Manual 模式的情况
- 复杂算法实现
- 性能优化分析
- 安全漏洞检查
- 特定问题调试
Cursor 编辑器配置技巧
1. 基础配置
设置文件位置
-
Windows:
%APPDATA%\Cursor\User\settings.json -
Mac:
~/Library/Application Support/Cursor/User/settings.json -
Linux:
~/.config/Cursor/User/settings.json
推荐配置
{
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.tabSize": 2,
"editor.insertSpaces": true,
"editor.rulers": [80, 120],
"editor.wordWrap": "on",
"editor.minimap.enabled": false,
"editor.suggestSelection": "first",
"editor.acceptSuggestionOnCommitCharacter": false,
"editor.acceptSuggestionOnEnter": "on",
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true
}
}
2. AI 配置
模型选择
{
"cursor.ai.model": "claude-3.5-sonnet",
"cursor.ai.autoComplete.enabled": true,
"cursor.ai.chat.enabled": true,
"cursor.ai.experimentalAgent.enabled": true
}
代码补全设置
{
"cursor.ai.autoComplete.triggerMode": "automatic",
"cursor.ai.autoComplete.suggestionCount": 3,
"cursor.ai.autoComplete.delay": 100
}
3. 主题和外观
推荐主题
- Dark+ (default dark): 经典深色主题
- GitHub Dark: GitHub 风格深色主题
- One Dark Pro: 现代化深色主题
- Material Theme: Material Design 风格
字体配置
{
"editor.fontFamily": "'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace",
"editor.fontSize": 14,
"editor.fontLigatures": true,
"editor.lineHeight": 1.5
}
4. 扩展配置
必备扩展
- ESLint: JavaScript 代码检查
- Prettier: 代码格式化
- GitLens: Git 集成增强
- Auto Rename Tag: HTML/JSX 标签自动重命名
- Bracket Pair Colorizer: 括号配对高亮
- Path Intellisense: 路径自动补全
扩展配置
{
"eslint.enable": true,
"eslint.validate": ["javascript", "typescript", "vue"],
"prettier.singleQuote": true,
"prettier.trailingComma": "es5",
"prettier.printWidth": 80
}
5. 工作区配置
项目特定设置
{
"typescript.preferences.importModuleSpecifier": "relative",
"javascript.preferences.importModuleSpecifier": "relative",
"files.exclude": {
"**/node_modules": true,
"**/dist": true,
"**/.git": true
},
"search.exclude": {
"**/node_modules": true,
"**/dist": true
}
}
6. 快捷键自定义
常用快捷键配置
{
"keybindings": [
{
"key": "ctrl+shift+a",
"command": "cursor.chat.focus"
},
{
"key": "ctrl+shift+c",
"command": "cursor.explainCode"
},
{
"key": "ctrl+shift+t",
"command": "cursor.generateTests"
}
]
}
快捷键大全
通用快捷键
| 功能 | Windows/Linux | Mac |
|---|---|---|
| 打开命令面板 | Ctrl+Shift+P |
Cmd+Shift+P |
| 快速打开文件 | Ctrl+P |
Cmd+P |
| 转到定义 | F12 |
F12 |
| 查找引用 | Shift+F12 |
Shift+F12 |
| 重命名符号 | F2 |
F2 |
| 格式化代码 | Shift+Alt+F |
Shift+Option+F |
| 切换注释 | Ctrl+/ |
Cmd+/ |
| 多光标选择 | Ctrl+Click |
Cmd+Click |
Cursor 特有快捷键
| 功能 | 快捷键 |
|---|---|
| 打开 AI Chat | Ctrl+L |
| 生成代码 | Ctrl+K |
| 解释代码 | Ctrl+Shift+L |
| 修复错误 | Ctrl+Shift+M |
| 生成测试 | Ctrl+Shift+T |
高效编辑技巧
-
多光标编辑:
Alt+Click添加多个光标 -
列选择:
Shift+Alt+ 拖拽 -
快速复制行:
Shift+Alt+↓ -
移动行:
Alt+↑/↓ -
折叠代码块:
Ctrl+Shift+[/Ctrl+Shift+]
Cursor 问答模型特点
Claude 3.5 Sonnet
特点:
- 代码理解能力强
- 上下文记忆优秀
- 支持复杂推理
- 代码生成质量高
适用场景:
- 复杂算法实现
- 架构设计讨论
- 代码重构优化
- 问题调试分析
Claude 3.5 Haiku
特点:
- 响应速度快
- 适合简单任务
- 资源占用少
- 基础代码补全
适用场景:
- 简单代码生成
- 快速语法检查
- 基础问题解答
- 日常编程辅助
选择建议
- 复杂项目:优先使用 Sonnet
- 简单任务:使用 Haiku 提高效率
- 混合使用:根据任务复杂度切换
Vue.js 开发技巧
项目结构优化
src/
├── components/ # 可复用组件
│ ├── common/ # 通用组件
│ └── business/ # 业务组件
├── views/ # 页面组件
├── router/ # 路由配置
├── store/ # 状态管理
├── api/ # API 接口
├── utils/ # 工具函数
├── assets/ # 静态资源
└── styles/ # 样式文件
高效开发技巧
1. 组件开发
<!-- 使用 Composition API -->
<script setup>
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
// 响应式数据
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
// 路由
const router = useRouter()
const route = useRoute()
// 方法
const increment = () => count.value++
</script>
2. 性能优化
// 使用 v-memo 优化列表渲染
<div v-for="item in list" :key="item.id" v-memo="[item.id, item.name]">
{{ item.name }}
</div>
// 使用 shallowRef 优化大对象
const largeObject = shallowRef({})
// 使用 defineAsyncComponent 懒加载
const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'))
3. 状态管理
// 使用 Pinia
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({
user: null,
token: ''
}),
getters: {
isLoggedIn: (state) => !!state.token
},
actions: {
async login(credentials) {
// 登录逻辑
}
}
})
Cursor 辅助开发
- 组件生成:描述组件功能,AI 自动生成
- API 集成:描述接口需求,生成 API 调用代码
- 样式优化:描述设计需求,生成 CSS 样式
- 测试用例:基于组件生成单元测试
React 开发技巧
项目结构
src/
├── components/ # 组件
│ ├── ui/ # UI 组件
│ └── features/ # 功能组件
├── pages/ # 页面
├── hooks/ # 自定义 Hooks
├── services/ # API 服务
├── utils/ # 工具函数
├── types/ # TypeScript 类型
└── styles/ # 样式文件
高效开发技巧
1. Hooks 使用
// 自定义 Hook
import { useState, useEffect } from 'react'
export const useApi = <T>(url: string) => {
const [data, setData] = useState<T | null>(null)
const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(url)
const result = await response.json()
setData(result)
} catch (err) {
setError(err.message)
} finally {
setLoading(false)
}
}
fetchData()
}, [url])
return { data, loading, error }
}
2. 性能优化
// 使用 React.memo 优化组件
const ExpensiveComponent = React.memo(({ data }) => {
return <div>{/* 复杂渲染逻辑 */}</div>
})
// 使用 useMemo 缓存计算结果
const expensiveValue = useMemo(() => {
return computeExpensiveValue(data)
}, [data])
// 使用 useCallback 缓存函数
const handleClick = useCallback(() => {
// 处理点击事件
}, [dependencies])
3. 状态管理
// 使用 Zustand
import { create } from 'zustand'
interface Store {
count: number
increment: () => void
decrement: () => void
}
export const useStore = create<Store>((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count - 1 }))
}))
Cursor 辅助开发
- 组件模板:快速生成 React 组件结构
- TypeScript 类型:自动生成类型定义
- 测试用例:生成 Jest 测试代码
- 样式方案:集成 Tailwind CSS 或 Styled Components
Flutter 开发技巧
项目结构
lib/
├── main.dart # 应用入口
├── app/ # 应用配置
│ ├── app.dart # 应用主配置
│ └── routes.dart # 路由配置
├── features/ # 功能模块
│ ├── auth/ # 认证模块
│ ├── home/ # 首页模块
│ └── profile/ # 个人中心
├── shared/ # 共享组件
│ ├── widgets/ # 通用组件
│ ├── models/ # 数据模型
│ ├── services/ # 服务层
│ └── utils/ # 工具类
└── core/ # 核心功能
├── constants/ # 常量
├── theme/ # 主题配置
└── network/ # 网络请求
高效开发技巧
1. 状态管理 (Provider/Riverpod)
// 使用 Riverpod 进行状态管理
import 'package:flutter_riverpod/flutter_riverpod.dart';
// 定义 Provider
final userProvider = StateNotifierProvider<UserNotifier, User?>((ref) {
return UserNotifier();
});
// 状态管理类
class UserNotifier extends StateNotifier<User?> {
UserNotifier() : super(null);
Future<void> login(String email, String password) async {
try {
state = await authService.login(email, password);
} catch (e) {
state = null;
rethrow;
}
}
void logout() {
state = null;
}
}
// 在 Widget 中使用
class LoginPage extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final user = ref.watch(userProvider);
return Scaffold(
body: Column(
children: [
if (user == null) LoginForm(),
if (user != null) UserProfile(user: user),
],
),
);
}
}
2. 网络请求
// 使用 Dio 进行网络请求
class ApiService {
final Dio _dio = Dio(BaseOptions(
baseUrl: 'https://api.example.com',
connectTimeout: Duration(seconds: 5),
receiveTimeout: Duration(seconds: 3),
));
Future<List<Post>> getPosts() async {
try {
final response = await _dio.get('/posts');
return (response.data as List)
.map((json) => Post.fromJson(json))
.toList();
} on DioException catch (e) {
throw ApiException(e.message);
}
}
Future<Post> createPost(Post post) async {
try {
final response = await _dio.post('/posts', data: post.toJson());
return Post.fromJson(response.data);
} on DioException catch (e) {
throw ApiException(e.message);
}
}
}
3. 自定义 Widget
// 创建可复用的自定义 Widget
class CustomButton extends StatelessWidget {
final String text;
final VoidCallback? onPressed;
final bool isLoading;
final Color? backgroundColor;
const CustomButton({
Key? key,
required this.text,
this.onPressed,
this.isLoading = false,
this.backgroundColor,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: isLoading ? null : onPressed,
style: ElevatedButton.styleFrom(
backgroundColor: backgroundColor ?? Theme.of(context).primaryColor,
padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
child: isLoading
? SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(
strokeWidth: 2,
valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
),
)
: Text(
text,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
);
}
}
4. 主题配置
// 应用主题配置
class AppTheme {
static ThemeData get lightTheme {
return ThemeData(
primarySwatch: Colors.blue,
brightness: Brightness.light,
scaffoldBackgroundColor: Colors.grey[50],
appBarTheme: AppBarTheme(
elevation: 0,
backgroundColor: Colors.white,
foregroundColor: Colors.black,
titleTextStyle: TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.w600,
),
),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
),
);
}
static ThemeData get darkTheme {
return ThemeData(
primarySwatch: Colors.blue,
brightness: Brightness.dark,
scaffoldBackgroundColor: Colors.grey[900],
);
}
}
Cursor 辅助开发
- Widget 生成:描述 UI 需求,生成 Flutter Widget
- 状态管理:生成 Provider/Riverpod 代码
- 网络请求:生成 Dio 网络请求代码
- 数据模型:生成 Dart 数据模型类
小程序开发技巧
项目结构
miniprogram/
├── pages/ # 页面目录
│ ├── index/ # 首页
│ ├── user/ # 用户中心
│ └── detail/ # 详情页
├── components/ # 自定义组件
├── utils/ # 工具函数
├── services/ # 服务层
├── styles/ # 样式文件
├── images/ # 图片资源
├── app.js # 应用入口
├── app.json # 应用配置
└── app.wxss # 全局样式
高效开发技巧
1. 页面开发
// pages/index/index.js
Page({
data: {
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
onLoad() {
this.getUserProfile();
},
getUserProfile() {
wx.getUserProfile({
desc: '用于完善会员资料',
success: (res) => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
});
}
});
},
onShareAppMessage() {
return {
title: '分享标题',
path: '/pages/index/index'
};
}
});
<!-- pages/index/index.wxml -->
<view class="container">
<view class="userinfo">
<block wx:if="{{!hasUserInfo}}">
<button wx:if="{{canIUseGetUserProfile}}"
bindtap="getUserProfile"> 获取头像昵称 </button>
<button wx:elif="{{canIUse}}"
open-type="getUserInfo"
bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<view>请使用1.4.4及以上版本基础库</view>
</block>
<block wx:else>
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
</view>
2. 自定义组件
// components/custom-button/custom-button.js
Component({
properties: {
text: {
type: String,
value: '按钮'
},
type: {
type: String,
value: 'primary'
},
size: {
type: String,
value: 'default'
}
},
data: {
// 组件内部数据
},
methods: {
handleTap() {
this.triggerEvent('tap');
}
}
});
<!-- components/custom-button/custom-button.wxml -->
<button
class="custom-button {{type}} {{size}}"
bindtap="handleTap">
{{text}}
</button>
/* components/custom-button/custom-button.wxss */
.custom-button {
border-radius: 8rpx;
font-size: 28rpx;
padding: 20rpx 40rpx;
}
.custom-button.primary {
background-color: #007aff;
color: white;
}
.custom-button.secondary {
background-color: #f0f0f0;
color: #333;
}
.custom-button.small {
padding: 10rpx 20rpx;
font-size: 24rpx;
}
3. 网络请求封装
// utils/request.js
const baseURL = 'https://api.example.com';
const request = (options) => {
return new Promise((resolve, reject) => {
wx.request({
url: baseURL + options.url,
method: options.method || 'GET',
data: options.data || {},
header: {
'content-type': 'application/json',
...options.header
},
success: (res) => {
if (res.statusCode === 200) {
resolve(res.data);
} else {
reject(res);
}
},
fail: (err) => {
reject(err);
}
});
});
};
// API 方法
const api = {
get: (url, params) => request({ url, method: 'GET', data: params }),
post: (url, data) => request({ url, method: 'POST', data }),
put: (url, data) => request({ url, method: 'PUT', data }),
delete: (url) => request({ url, method: 'DELETE' })
};
module.exports = api;
4. 工具函数
// utils/util.js
const formatTime = date => {
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hour = date.getHours();
const minute = date.getMinutes();
const second = date.getSeconds();
return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`;
};
const formatNumber = n => {
n = n.toString();
return n[1] ? n : `0${n}`;
};
const showToast = (title, icon = 'none') => {
wx.showToast({
title,
icon,
duration: 2000
});
};
const showLoading = (title = '加载中...') => {
wx.showLoading({
title,
mask: true
});
};
const hideLoading = () => {
wx.hideLoading();
};
module.exports = {
formatTime,
formatNumber,
showToast,
showLoading,
hideLoading
};
Cursor 辅助开发
- 页面生成:描述页面需求,生成小程序页面代码
- 组件开发:生成自定义组件代码
- API 封装:生成网络请求封装代码
- 工具函数:生成常用工具函数
UniApp 开发技巧
项目结构
src/
├── pages/ # 页面目录
├── components/ # 组件目录
├── static/ # 静态资源
├── store/ # 状态管理
├── utils/ # 工具函数
├── api/ # API 接口
├── styles/ # 样式文件
├── App.vue # 应用入口
├── main.js # 主入口
├── manifest.json # 应用配置
└── pages.json # 页面配置
高效开发技巧
1. 跨平台开发
<!-- pages/index/index.vue -->
<template>
<view class="container">
<!-- #ifdef H5 -->
<view class="h5-only">H5 特有内容</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="wechat-only">微信小程序特有内容</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view class="app-only">App 特有内容</view>
<!-- #endif -->
<view class="common-content">通用内容</view>
</view>
</template>
<script>
export default {
data() {
return {
platform: ''
}
},
onLoad() {
// 获取平台信息
// #ifdef H5
this.platform = 'H5'
// #endif
// #ifdef MP-WEIXIN
this.platform = '微信小程序'
// #endif
// #ifdef APP-PLUS
this.platform = 'App'
// #endif
},
methods: {
// 平台特定方法
platformMethod() {
// #ifdef H5
console.log('H5 方法')
// #endif
// #ifdef MP-WEIXIN
console.log('微信小程序方法')
// #endif
}
}
}
</script>
<style>
/* 平台特定样式 */
/* #ifdef H5 */
.h5-only {
display: block;
}
/* #endif */
/* #ifdef MP-WEIXIN */
.wechat-only {
display: block;
}
/* #endif */
</style>
2. 状态管理 (Vuex)
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
userInfo: null,
token: '',
cartItems: []
},
mutations: {
SET_USER_INFO(state, userInfo) {
state.userInfo = userInfo
},
SET_TOKEN(state, token) {
state.token = token
},
ADD_CART_ITEM(state, item) {
state.cartItems.push(item)
},
REMOVE_CART_ITEM(state, itemId) {
const index = state.cartItems.findIndex(item => item.id === itemId)
if (index > -1) {
state.cartItems.splice(index, 1)
}
}
},
actions: {
async login({ commit }, credentials) {
try {
const response = await uni.request({
url: '/api/login',
method: 'POST',
data: credentials
})
commit('SET_USER_INFO', response.data.user)
commit('SET_TOKEN', response.data.token)
return response.data
} catch (error) {
throw error
}
},
logout({ commit }) {
commit('SET_USER_INFO', null)
commit('SET_TOKEN', '')
}
},
getters: {
isLoggedIn: state => !!state.token,
cartItemCount: state => state.cartItems.length,
cartTotal: state => state.cartItems.reduce((total, item) => total + item.price * item.quantity, 0)
}
})
export default store
3. 网络请求封装
// utils/request.js
const baseURL = 'https://api.example.com'
// 请求拦截器
const requestInterceptor = (config) => {
// 添加 token
const token = uni.getStorageSync('token')
if (token) {
config.header.Authorization = `Bearer ${token}`
}
// 添加平台标识
config.header['X-Platform'] = getPlatform()
return config
}
// 响应拦截器
const responseInterceptor = (response) => {
if (response.statusCode === 200) {
return response.data
} else if (response.statusCode === 401) {
// token 过期,跳转登录
uni.navigateTo({
url: '/pages/login/login'
})
return Promise.reject(response)
} else {
uni.showToast({
title: response.data.message || '请求失败',
icon: 'none'
})
return Promise.reject(response)
}
}
// 统一请求方法
const request = (options) => {
const config = requestInterceptor({
url: baseURL + options.url,
method: options.method || 'GET',
data: options.data || {},
header: {
'content-type': 'application/json',
...options.header
}
})
return new Promise((resolve, reject) => {
uni.request({
...config,
success: (res) => {
try {
const result = responseInterceptor(res)
resolve(result)
} catch (error) {
reject(error)
}
},
fail: (err) => {
uni.showToast({
title: '网络错误',
icon: 'none'
})
reject(err)
}
})
})
}
// API 方法
export const api = {
get: (url, params) => request({ url, method: 'GET', data: params }),
post: (url, data) => request({ url, method: 'POST', data }),
put: (url, data) => request({ url, method: 'PUT', data }),
delete: (url) => request({ url, method: 'DELETE' })
}
// 获取平台信息
function getPlatform() {
// #ifdef H5
return 'H5'
// #endif
// #ifdef MP-WEIXIN
return 'MP-WEIXIN'
// #endif
// #ifdef APP-PLUS
return 'APP-PLUS'
// #endif
}
4. 组件开发
<!-- components/custom-button/custom-button.vue -->
<template>
<view class="custom-button" :class="[type, size]" @click="handleClick">
<text v-if="loading" class="loading-text">加载中...</text>
<text v-else>{{ text }}</text>
</view>
</template>
<script>
export default {
name: 'CustomButton',
props: {
text: {
type: String,
default: '按钮'
},
type: {
type: String,
default: 'primary',
validator: value => ['primary', 'secondary', 'danger'].includes(value)
},
size: {
type: String,
default: 'default',
validator: value => ['small', 'default', 'large'].includes(value)
},
loading: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
}
},
methods: {
handleClick() {
if (this.loading || this.disabled) return
this.$emit('click')
}
}
}
</script>
<style scoped>
.custom-button {
display: flex;
align-items: center;
justify-content: center;
border-radius: 8rpx;
font-size: 28rpx;
padding: 20rpx 40rpx;
transition: all 0.3s;
}
.custom-button.primary {
background-color: #007aff;
color: white;
}
.custom-button.secondary {
background-color: #f0f0f0;
color: #333;
}
.custom-button.danger {
background-color: #ff3b30;
color: white;
}
.custom-button.small {
padding: 10rpx 20rpx;
font-size: 24rpx;
}
.custom-button.large {
padding: 30rpx 60rpx;
font-size: 32rpx;
}
.custom-button:active {
opacity: 0.8;
}
</style>
Cursor 辅助开发
- 跨平台组件:生成支持多平台的组件代码
- 状态管理:生成 Vuex 状态管理代码
- 网络请求:生成统一的网络请求封装
- 平台适配:生成平台特定的代码逻辑
Android 开发技巧
项目结构
app/
├── src/main/
│ ├── java/com/example/app/
│ │ ├── activities/ # Activity 类
│ │ ├── fragments/ # Fragment 类
│ │ ├── adapters/ # RecyclerView 适配器
│ │ ├── models/ # 数据模型
│ │ ├── network/ # 网络请求
│ │ ├── utils/ # 工具类
│ │ └── viewmodels/ # ViewModel 类
│ ├── res/
│ │ ├── layout/ # 布局文件
│ │ ├── values/ # 资源文件
│ │ └── drawable/ # 图片资源
│ └── AndroidManifest.xml
高效开发技巧
1. Kotlin 协程
// ViewModel 中使用协程
class MainViewModel : ViewModel() {
private val _data = MutableLiveData<List<Item>>()
val data: LiveData<List<Item>> = _data
fun loadData() {
viewModelScope.launch {
try {
val result = withContext(Dispatchers.IO) {
apiService.getData()
}
_data.value = result
} catch (e: Exception) {
// 错误处理
}
}
}
}
2. RecyclerView 优化
// 使用 DiffUtil 优化列表更新
class ItemDiffCallback : DiffUtil.ItemCallback<Item>() {
override fun areItemsTheSame(oldItem: Item, newItem: Item): Boolean {
return oldItem.id == newItem.id
}
override fun areContentsTheSame(oldItem: Item, newItem: Item): Boolean {
return oldItem == newItem
}
}
// 在 Adapter 中使用
class ItemAdapter : ListAdapter<Item, ItemViewHolder>(ItemDiffCallback()) {
// 实现方法
}
3. Jetpack Compose
@Composable
fun UserList(users: List<User>, onUserClick: (User) -> Unit) {
LazyColumn {
items(users) { user ->
UserItem(
user = user,
onClick = { onUserClick(user) }
)
}
}
}
@Composable
fun UserItem(user: User, onClick: () -> Unit) {
Card(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp)
.clickable { onClick() }
) {
Column(modifier = Modifier.padding(16.dp)) {
Text(text = user.name, style = MaterialTheme.typography.h6)
Text(text = user.email, style = MaterialTheme.typography.body2)
}
}
}
Cursor 辅助开发
- 布局生成:描述 UI 需求,生成 XML 布局
- Kotlin 代码:生成 ViewModel 和 Repository 代码
- 网络请求:生成 Retrofit 接口和调用代码
- 数据库操作:生成 Room 数据库代码
iOS 开发技巧
项目结构
MyApp/
├── Sources/
│ ├── App/ # App 入口
│ ├── Features/ # 功能模块
│ │ ├── Home/
│ │ ├── Profile/
│ │ └── Settings/
│ ├── Core/ # 核心功能
│ │ ├── Network/
│ │ ├── Storage/
│ │ └── Utils/
│ └── UI/ # UI 组件
├── Resources/
│ ├── Assets.xcassets/
│ └── Localizable.strings
└── Tests/
高效开发技巧
1. SwiftUI 开发
struct ContentView: View {
@StateObject private var viewModel = ContentViewModel()
var body: some View {
NavigationView {
List(viewModel.items) { item in
ItemRow(item: item)
.onTapGesture {
viewModel.selectItem(item)
}
}
.navigationTitle("Items")
.refreshable {
await viewModel.loadItems()
}
}
}
}
struct ItemRow: View {
let item: Item
var body: some View {
VStack(alignment: .leading) {
Text(item.title)
.font(.headline)
Text(item.description)
.font(.subheadline)
.foregroundColor(.secondary)
}
.padding(.vertical, 4)
}
}
2. Combine 框架
class ContentViewModel: ObservableObject {
@Published var items: [Item] = []
@Published var isLoading = false
private var cancellables = Set<AnyCancellable>()
func loadItems() async {
isLoading = true
do {
let items = try await apiService.fetchItems()
await MainActor.run {
self.items = items
self.isLoading = false
}
} catch {
await MainActor.run {
self.isLoading = false
}
}
}
}
3. 网络层设计
protocol NetworkServiceProtocol {
func fetch<T: Decodable>(_ endpoint: Endpoint) async throws -> T
}
class NetworkService: NetworkServiceProtocol {
private let session = URLSession.shared
func fetch<T: Decodable>(_ endpoint: Endpoint) async throws -> T {
let request = endpoint.urlRequest
let (data, response) = try await session.data(for: request)
guard let httpResponse = response as? HTTPURLResponse,
(200...299).contains(httpResponse.statusCode) else {
throw NetworkError.invalidResponse
}
return try JSONDecoder().decode(T.self, from: data)
}
}
Cursor 辅助开发
- SwiftUI 视图:描述 UI 需求,生成 SwiftUI 代码
- 网络请求:生成 URLSession 或 Alamofire 代码
- 数据模型:生成 Codable 模型类
- 单元测试:生成 XCTest 测试用例
Spring Boot 后端开发技巧
项目结构
src/main/java/com/example/
├── Application.java # 启动类
├── config/ # 配置类
├── controller/ # 控制器
├── service/ # 业务逻辑
├── repository/ # 数据访问层
├── model/ # 实体类
├── dto/ # 数据传输对象
├── exception/ # 异常处理
└── util/ # 工具类
高效开发技巧
1. RESTful API 设计
@RestController
@RequestMapping("/api/v1/users")
@Validated
public class UserController {
private final UserService userService;
@GetMapping
public ResponseEntity<Page<UserDTO>> getUsers(
@RequestParam(defaultValue = "0") int page,
@RequestParam(defaultValue = "10") int size) {
Page<UserDTO> users = userService.getUsers(page, size);
return ResponseEntity.ok(users);
}
@PostMapping
public ResponseEntity<UserDTO> createUser(@Valid @RequestBody CreateUserRequest request) {
UserDTO user = userService.createUser(request);
return ResponseEntity.status(HttpStatus.CREATED).body(user);
}
@PutMapping("/{id}")
public ResponseEntity<UserDTO> updateUser(
@PathVariable Long id,
@Valid @RequestBody UpdateUserRequest request) {
UserDTO user = userService.updateUser(id, request);
return ResponseEntity.ok(user);
}
@DeleteMapping("/{id}")
public ResponseEntity<Void> deleteUser(@PathVariable Long id) {
userService.deleteUser(id);
return ResponseEntity.noContent().build();
}
}
2. 服务层设计
@Service
@Transactional
public class UserService {
private final UserRepository userRepository;
private final PasswordEncoder passwordEncoder;
public Page<UserDTO> getUsers(int page, int size) {
Pageable pageable = PageRequest.of(page, size, Sort.by("createdAt").descending());
Page<User> users = userRepository.findAll(pageable);
return users.map(this::toDTO);
}
public UserDTO createUser(CreateUserRequest request) {
if (userRepository.existsByEmail(request.getEmail())) {
throw new UserAlreadyExistsException("Email already exists");
}
User user = User.builder()
.email(request.getEmail())
.password(passwordEncoder.encode(request.getPassword()))
.name(request.getName())
.build();
User savedUser = userRepository.save(user);
return toDTO(savedUser);
}
private UserDTO toDTO(User user) {
return UserDTO.builder()
.id(user.getId())
.email(user.getEmail())
.name(user.getName())
.createdAt(user.getCreatedAt())
.build();
}
}
3. 数据访问层
@Repository
public interface UserRepository extends JpaRepository<User, Long> {
Optional<User> findByEmail(String email);
boolean existsByEmail(String email);
@Query("SELECT u FROM User u WHERE u.createdAt >= :startDate")
List<User> findUsersCreatedAfter(@Param("startDate") LocalDateTime startDate);
@Query(value = "SELECT COUNT(*) FROM users WHERE created_at >= :startDate", nativeQuery = true)
long countUsersCreatedAfter(@Param("startDate") LocalDateTime startDate);
}
4. 异常处理
@ControllerAdvice
public class GlobalExceptionHandler {
@ExceptionHandler(UserNotFoundException.class)
public ResponseEntity<ErrorResponse> handleUserNotFound(UserNotFoundException ex) {
ErrorResponse error = ErrorResponse.builder()
.message(ex.getMessage())
.timestamp(LocalDateTime.now())
.status(HttpStatus.NOT_FOUND.value())
.build();
return ResponseEntity.status(HttpStatus.NOT_FOUND).body(error);
}
@ExceptionHandler(MethodArgumentNotValidException.class)
public ResponseEntity<ErrorResponse> handleValidationErrors(MethodArgumentNotValidException ex) {
List<String> errors = ex.getBindingResult()
.getFieldErrors()
.stream()
.map(FieldError::getDefaultMessage)
.collect(Collectors.toList());
ErrorResponse error = ErrorResponse.builder()
.message("Validation failed")
.errors(errors)
.timestamp(LocalDateTime.now())
.status(HttpStatus.BAD_REQUEST.value())
.build();
return ResponseEntity.badRequest().body(error);
}
}
Cursor 辅助开发
- API 设计:描述接口需求,生成 Controller 代码
- 业务逻辑:生成 Service 层代码
- 数据模型:生成 Entity 和 DTO 类
- 配置类:生成 Spring 配置代码
数据库设计技巧
1. 数据库设计原则
规范化设计
-- 第一范式:原子性
CREATE TABLE users (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(100) NOT NULL,
email VARCHAR(255) UNIQUE NOT NULL,
phone VARCHAR(20),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
-- 第二范式:消除部分依赖
CREATE TABLE orders (
id INT PRIMARY KEY AUTO_INCREMENT,
user_id INT NOT NULL,
order_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
total_amount DECIMAL(10,2) NOT NULL,
status ENUM('pending', 'paid', 'shipped', 'delivered') DEFAULT 'pending',
FOREIGN KEY (user_id) REFERENCES users(id)
);
CREATE TABLE order_items (
id INT PRIMARY KEY AUTO_INCREMENT,
order_id INT NOT NULL,
product_id INT NOT NULL,
quantity INT NOT NULL,
unit_price DECIMAL(10,2) NOT NULL,
FOREIGN KEY (order_id) REFERENCES orders(id),
FOREIGN KEY (product_id) REFERENCES products(id)
);
-- 第三范式:消除传递依赖
CREATE TABLE products (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(255) NOT NULL,
category_id INT NOT NULL,
price DECIMAL(10,2) NOT NULL,
stock_quantity INT DEFAULT 0,
FOREIGN KEY (category_id) REFERENCES categories(id)
);
CREATE TABLE categories (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(100) NOT NULL,
description TEXT
);
索引设计
-- 主键索引(自动创建)
CREATE TABLE users (
id INT PRIMARY KEY AUTO_INCREMENT,
email VARCHAR(255) UNIQUE NOT NULL
);
-- 复合索引
CREATE INDEX idx_orders_user_date ON orders(user_id, order_date);
-- 覆盖索引
CREATE INDEX idx_products_category_price ON products(category_id, price, name);
-- 全文索引
CREATE FULLTEXT INDEX idx_products_search ON products(name, description);
2. 数据库优化技巧
查询优化
-- 使用 EXPLAIN 分析查询
EXPLAIN SELECT u.name, COUNT(o.id) as order_count
FROM users u
LEFT JOIN orders o ON u.id = o.user_id
WHERE u.created_at >= '2024-01-01'
GROUP BY u.id, u.name
HAVING order_count > 0
ORDER BY order_count DESC;
-- 优化后的查询
SELECT u.name, COUNT(o.id) as order_count
FROM users u
INNER JOIN orders o ON u.id = o.user_id
WHERE u.created_at >= '2024-01-01'
GROUP BY u.id, u.name
ORDER BY order_count DESC;
分页优化
-- 传统分页(大数据量时性能差)
SELECT * FROM products
ORDER BY created_at DESC
LIMIT 10000, 20;
-- 优化分页(使用游标)
SELECT * FROM products
WHERE created_at < '2024-01-01 10:00:00'
ORDER BY created_at DESC
LIMIT 20;
3. 数据库设计模式
软删除模式
CREATE TABLE users (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(100) NOT NULL,
email VARCHAR(255) UNIQUE NOT NULL,
deleted_at TIMESTAMP NULL,
INDEX idx_users_deleted_at (deleted_at)
);
-- 查询时排除已删除记录
SELECT * FROM users WHERE deleted_at IS NULL;
审计模式
CREATE TABLE users (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(100) NOT NULL,
email VARCHAR(255) UNIQUE NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
created_by INT,
updated_by INT,
FOREIGN KEY (created_by) REFERENCES users(id),
FOREIGN KEY (updated_by) REFERENCES users(id)
);
多租户模式
-- 共享表模式
CREATE TABLE users (
id INT PRIMARY KEY AUTO_INCREMENT,
tenant_id INT NOT NULL,
name VARCHAR(100) NOT NULL,
email VARCHAR(255) NOT NULL,
INDEX idx_users_tenant (tenant_id, email)
);
-- 独立表模式
CREATE TABLE tenant_1_users (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(100) NOT NULL,
email VARCHAR(255) UNIQUE NOT NULL
);
4. 数据库迁移和版本控制
迁移文件示例
-- V1__create_users_table.sql
CREATE TABLE users (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(100) NOT NULL,
email VARCHAR(255) UNIQUE NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
-- V2__add_phone_to_users.sql
ALTER TABLE users ADD COLUMN phone VARCHAR(20) AFTER email;
-- V3__create_orders_table.sql
CREATE TABLE orders (
id INT PRIMARY KEY AUTO_INCREMENT,
user_id INT NOT NULL,
total_amount DECIMAL(10,2) NOT NULL,
status ENUM('pending', 'paid', 'shipped') DEFAULT 'pending',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (user_id) REFERENCES users(id)
);
Cursor 辅助开发
- 表结构设计:描述业务需求,生成数据库表结构
- 索引优化:分析查询需求,生成索引设计
- 迁移脚本:生成数据库迁移文件
- 查询优化:分析慢查询,提供优化建议
架构设计技巧
1. 分层架构
经典三层架构
// 表现层 (Presentation Layer)
@RestController
@RequestMapping("/api/users")
public class UserController {
private final UserService userService;
@GetMapping("/{id}")
public ResponseEntity<UserDTO> getUser(@PathVariable Long id) {
UserDTO user = userService.getUserById(id);
return ResponseEntity.ok(user);
}
}
// 业务层 (Business Layer)
@Service
@Transactional
public class UserService {
private final UserRepository userRepository;
private final EmailService emailService;
public UserDTO createUser(CreateUserRequest request) {
// 业务逻辑验证
if (userRepository.existsByEmail(request.getEmail())) {
throw new UserAlreadyExistsException("Email already exists");
}
// 创建用户
User user = User.builder()
.name(request.getName())
.email(request.getEmail())
.build();
User savedUser = userRepository.save(user);
// 发送欢迎邮件
emailService.sendWelcomeEmail(savedUser.getEmail());
return UserDTO.fromEntity(savedUser);
}
}
// 数据访问层 (Data Access Layer)
@Repository
public interface UserRepository extends JpaRepository<User, Long> {
Optional<User> findByEmail(String email);
boolean existsByEmail(String email);
@Query("SELECT u FROM User u WHERE u.createdAt >= :startDate")
List<User> findUsersCreatedAfter(@Param("startDate") LocalDateTime startDate);
}
领域驱动设计 (DDD)
// 领域实体
@Entity
public class Order {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@ManyToOne
private User customer;
@OneToMany(cascade = CascadeType.ALL, mappedBy = "order")
private List<OrderItem> items = new ArrayList<>();
@Enumerated(EnumType.STRING)
private OrderStatus status;
private BigDecimal totalAmount;
// 领域方法
public void addItem(Product product, int quantity) {
OrderItem item = new OrderItem(this, product, quantity);
items.add(item);
recalculateTotal();
}
public void confirm() {
if (items.isEmpty()) {
throw new IllegalStateException("Cannot confirm empty order");
}
this.status = OrderStatus.CONFIRMED;
}
private void recalculateTotal() {
this.totalAmount = items.stream()
.map(OrderItem::getSubtotal)
.reduce(BigDecimal.ZERO, BigDecimal::add);
}
}
// 领域服务
@Service
public class OrderDomainService {
public Order createOrder(User customer, List<OrderItemRequest> items) {
Order order = new Order(customer);
for (OrderItemRequest itemRequest : items) {
Product product = productRepository.findById(itemRequest.getProductId())
.orElseThrow(() -> new ProductNotFoundException("Product not found"));
order.addItem(product, itemRequest.getQuantity());
}
return order;
}
}
2. 微服务架构
服务拆分原则
// 用户服务
@RestController
@RequestMapping("/api/users")
public class UserController {
@GetMapping("/{id}")
public ResponseEntity<UserDTO> getUser(@PathVariable Long id) {
UserDTO user = userService.getUserById(id);
return ResponseEntity.ok(user);
}
}
// 订单服务
@RestController
@RequestMapping("/api/orders")
public class OrderController {
@PostMapping
public ResponseEntity<OrderDTO> createOrder(@RequestBody CreateOrderRequest request) {
// 调用用户服务验证用户
UserDTO user = userServiceClient.getUser(request.getUserId());
OrderDTO order = orderService.createOrder(user, request.getItems());
return ResponseEntity.status(HttpStatus.CREATED).body(order);
}
}
// 服务间通信
@Service
public class UserServiceClient {
private final WebClient webClient;
public UserDTO getUser(Long userId) {
return webClient.get()
.uri("/api/users/{id}", userId)
.retrieve()
.bodyToMono(UserDTO.class)
.block();
}
}
服务发现和配置
# application.yml
spring:
application:
name: order-service
cloud:
discovery:
client:
service-url:
defaultZone: http://localhost:8761/eureka/
config:
uri: http://localhost:8888
fail-fast: true
# 服务配置
server:
port: 8081
management:
endpoints:
web:
exposure:
include: health,info,metrics
3. 事件驱动架构
事件发布和订阅
// 事件定义
public class OrderCreatedEvent {
private final Long orderId;
private final Long userId;
private final BigDecimal totalAmount;
private final LocalDateTime createdAt;
// 构造函数、getter、setter
}
// 事件发布
@Service
public class OrderService {
private final ApplicationEventPublisher eventPublisher;
public OrderDTO createOrder(CreateOrderRequest request) {
Order order = orderRepository.save(createOrderFromRequest(request));
// 发布事件
OrderCreatedEvent event = new OrderCreatedEvent(
order.getId(),
order.getCustomer().getId(),
order.getTotalAmount(),
order.getCreatedAt()
);
eventPublisher.publishEvent(event);
return OrderDTO.fromEntity(order);
}
}
// 事件监听
@Component
public class OrderEventListener {
@EventListener
public void handleOrderCreated(OrderCreatedEvent event) {
// 发送通知
notificationService.sendOrderConfirmation(event.getUserId(), event.getOrderId());
// 更新库存
inventoryService.updateStock(event.getOrderId());
// 记录审计日志
auditService.logOrderCreated(event);
}
}
4. 缓存策略
多级缓存
// 本地缓存
@Service
public class UserService {
@Cacheable(value = "users", key = "#id")
public UserDTO getUserById(Long id) {
return userRepository.findById(id)
.map(UserDTO::fromEntity)
.orElseThrow(() -> new UserNotFoundException("User not found"));
}
@CacheEvict(value = "users", key = "#user.id")
public UserDTO updateUser(UserDTO user) {
User updatedUser = userRepository.save(user.toEntity());
return UserDTO.fromEntity(updatedUser);
}
}
// Redis 缓存
@Configuration
@EnableCaching
public class CacheConfig {
@Bean
public RedisCacheManager cacheManager(RedisConnectionFactory factory) {
RedisCacheConfiguration config = RedisCacheConfiguration.defaultCacheConfig()
.entryTtl(Duration.ofMinutes(30))
.serializeKeysWith(RedisSerializationContext.SerializationPair.fromSerializer(new StringRedisSerializer()))
.serializeValuesWith(RedisSerializationContext.SerializationPair.fromSerializer(new GenericJackson2JsonRedisSerializer()));
return RedisCacheManager.builder(factory)
.cacheDefaults(config)
.build();
}
}
5. 安全架构
JWT 认证
// JWT 工具类
@Component
public class JwtTokenUtil {
@Value("${jwt.secret}")
private String secret;
@Value("${jwt.expiration}")
private Long expiration;
public String generateToken(UserDetails userDetails) {
Map<String, Object> claims = new HashMap<>();
return createToken(claims, userDetails.getUsername());
}
private String createToken(Map<String, Object> claims, String subject) {
return Jwts.builder()
.setClaims(claims)
.setSubject(subject)
.setIssuedAt(new Date(System.currentTimeMillis()))
.setExpiration(new Date(System.currentTimeMillis() + expiration * 1000))
.signWith(SignatureAlgorithm.HS512, secret)
.compact();
}
public Boolean validateToken(String token, UserDetails userDetails) {
final String username = extractUsername(token);
return (username.equals(userDetails.getUsername()) && !isTokenExpired(token));
}
}
// 安全配置
@Configuration
@EnableWebSecurity
public class SecurityConfig {
@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
http.csrf().disable()
.authorizeHttpRequests()
.requestMatchers("/api/auth/**").permitAll()
.anyRequest().authenticated()
.and()
.sessionManagement()
.sessionCreationPolicy(SessionCreationPolicy.STATELESS)
.and()
.addFilterBefore(jwtAuthenticationFilter, UsernamePasswordAuthenticationFilter.class);
return http.build();
}
}
Cursor 辅助开发
- 架构设计:描述系统需求,生成架构设计方案
- 代码生成:基于架构模式生成代码模板
- 设计模式:应用常见设计模式
- 性能优化:提供架构层面的性能优化建议
高效开发工作流
1. 项目初始化
# 使用 Cursor 快速创建项目结构
# 描述项目需求,AI 生成基础代码结构
2. 日常开发流程
- 需求分析:与 AI 讨论功能需求
- 代码生成:使用 AI 生成基础代码
- 代码优化:AI 辅助重构和优化
- 测试编写:AI 生成测试用例
- 文档生成:AI 生成技术文档
3. 调试技巧
- 错误分析:将错误信息粘贴给 AI 分析
- 性能优化:AI 提供性能优化建议
- 代码审查:AI 进行代码质量检查
4. 团队协作
- 代码规范:AI 确保代码风格一致
- 文档同步:AI 生成和更新文档
- 知识分享:AI 解释复杂代码逻辑
最佳实践
1. 代码质量
- 使用 AI 进行代码审查
- 保持代码简洁和可读性
- 遵循设计模式和最佳实践
- 编写完整的测试用例
2. 性能优化
- 使用 AI 分析性能瓶颈
- 实施缓存策略
- 优化数据库查询
- 使用异步处理
3. 安全考虑
- AI 辅助安全代码审查
- 实施输入验证
- 使用安全的认证机制
- 定期更新依赖
4. 持续学习
- 使用 AI 学习新技术
- 阅读 AI 生成的代码示例
- 参与 AI 辅助的代码讨论
- 保持技术栈更新
总结
Cursor 作为 AI 驱动的代码编辑器,能够显著提升开发效率。通过合理使用其功能,结合各技术栈的最佳实践,可以构建高质量、可维护的应用程序。
核心优势
- 智能代码补全:基于上下文理解,提供准确的代码建议
- 多文件理解:AI 能够理解整个项目的代码结构和依赖关系
- 实时错误检测:自动发现语法错误和潜在问题
- 智能重构:提供代码优化和重构建议
- 测试生成:自动生成单元测试和集成测试
- 文档生成:自动生成代码注释和 API 文档
关键要点
- 熟练掌握快捷键和 AI 功能:提高开发效率的基础
- 根据项目需求选择合适的 AI 模型:Sonnet 适合复杂项目,Haiku 适合简单任务
- 建立高效的开发工作流:从需求分析到代码部署的完整流程
- 持续学习和优化开发技巧:跟上技术发展趋势
技术栈覆盖
本指南涵盖了主流技术栈的开发技巧:
前端技术
- Vue.js:组件化开发、状态管理、性能优化
- React:Hooks 使用、性能优化、状态管理
- Flutter:跨平台开发、状态管理、网络请求
- 小程序:页面开发、组件开发、网络封装
- UniApp:跨平台开发、状态管理、平台适配
移动端技术
- Android:Kotlin 协程、Jetpack Compose、MVVM 架构
- iOS:SwiftUI、Combine 框架、网络层设计
后端技术
- Spring Boot:RESTful API、服务层设计、数据访问层
- 数据库设计:规范化设计、索引优化、设计模式
- 架构设计:分层架构、微服务、事件驱动、缓存策略
实用建议
1. 项目初始化
# 使用 Cursor 快速创建项目
# 描述项目需求,AI 生成基础代码结构
# 配置开发环境和工具链
2. 日常开发流程
- 需求分析:与 AI 讨论功能需求和技术方案
- 代码生成:使用 AI 生成基础代码和组件
- 代码优化:AI 辅助重构和性能优化
- 测试编写:AI 生成测试用例和测试数据
- 文档生成:AI 生成技术文档和 API 文档
3. 团队协作
- 代码规范:AI 确保代码风格一致
- 代码审查:AI 辅助代码质量检查
- 知识分享:AI 解释复杂代码逻辑
- 文档同步:AI 自动更新项目文档
4. 持续改进
- 性能监控:使用 AI 分析性能瓶颈
- 安全审查:AI 辅助安全漏洞检查
- 技术升级:AI 推荐新技术和最佳实践
- 架构优化:AI 提供架构改进建议
学习路径建议
初学者
- 熟悉 Cursor 基础功能和快捷键
- 学习 Agent Ask 和 Manual 模式的使用
- 掌握一个主要技术栈(如 Vue.js 或 React)
- 练习使用 AI 生成代码和解决问题
中级开发者
- 深入理解各技术栈的最佳实践
- 学习架构设计原则和模式
- 掌握数据库设计和优化技巧
- 练习跨技术栈的开发能力
高级开发者
- 掌握复杂系统架构设计
- 学习微服务和分布式系统
- 深入研究性能优化和安全
- 指导团队使用 AI 工具提升效率
未来发展趋势
- AI 模型升级:更强大的代码理解和生成能力
- 多模态支持:支持图像、语音等多种输入方式
- 协作功能增强:更好的团队协作和代码审查
- 集成开发环境:与更多开发工具和平台集成
通过合理使用 Cursor 的 AI 功能,结合本指南中的技术栈开发技巧,开发者可以显著提升开发效率,构建更高质量、更易维护的应用程序。