cursor浅谈-全栈开发工程师进阶之路1

Cursor 开发技巧完全指南

目录

  1. Cursor 基础功能
  2. Cursor 高效使用指南
  3. Agent Ask 与 Manual 模式详解
  4. Cursor 编辑器配置技巧
  5. 快捷键大全
  6. Cursor 问答模型特点
  7. Vue.js 开发技巧
  8. React 开发技巧
  9. Flutter 开发技巧
  10. 小程序开发技巧
  11. UniApp 开发技巧
  12. Android 开发技巧
  13. iOS 开发技巧
  14. Spring Boot 后端开发技巧
  15. 数据库设计技巧
  16. 架构设计技巧
  17. 高效开发工作流
  18. 最佳实践

Cursor 基础功能

核心特性

  • AI 代码补全:实时智能代码建议
  • Chat 功能:与 AI 助手对话编程
  • 代码重构:智能代码优化建议
  • 错误检测:实时语法和逻辑错误提示
  • 多文件理解:跨文件的代码理解能力

安装与配置

  1. 下载 Cursor 编辑器
  2. 安装相关语言扩展
  3. 配置 Git 集成
  4. 设置代码格式化规则
  5. 配置 AI 模型偏好
  6. 设置代码片段和模板

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. 日常开发流程

  1. 需求分析:与 AI 讨论功能需求
  2. 代码生成:使用 AI 生成基础代码
  3. 代码优化:AI 辅助重构和优化
  4. 测试编写:AI 生成测试用例
  5. 文档生成:AI 生成技术文档

3. 调试技巧

  • 错误分析:将错误信息粘贴给 AI 分析
  • 性能优化:AI 提供性能优化建议
  • 代码审查:AI 进行代码质量检查

4. 团队协作

  • 代码规范:AI 确保代码风格一致
  • 文档同步:AI 生成和更新文档
  • 知识分享:AI 解释复杂代码逻辑

最佳实践

1. 代码质量

  • 使用 AI 进行代码审查
  • 保持代码简洁和可读性
  • 遵循设计模式和最佳实践
  • 编写完整的测试用例

2. 性能优化

  • 使用 AI 分析性能瓶颈
  • 实施缓存策略
  • 优化数据库查询
  • 使用异步处理

3. 安全考虑

  • AI 辅助安全代码审查
  • 实施输入验证
  • 使用安全的认证机制
  • 定期更新依赖

4. 持续学习

  • 使用 AI 学习新技术
  • 阅读 AI 生成的代码示例
  • 参与 AI 辅助的代码讨论
  • 保持技术栈更新

总结

Cursor 作为 AI 驱动的代码编辑器,能够显著提升开发效率。通过合理使用其功能,结合各技术栈的最佳实践,可以构建高质量、可维护的应用程序。

核心优势

  1. 智能代码补全:基于上下文理解,提供准确的代码建议
  2. 多文件理解:AI 能够理解整个项目的代码结构和依赖关系
  3. 实时错误检测:自动发现语法错误和潜在问题
  4. 智能重构:提供代码优化和重构建议
  5. 测试生成:自动生成单元测试和集成测试
  6. 文档生成:自动生成代码注释和 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. 日常开发流程

  1. 需求分析:与 AI 讨论功能需求和技术方案
  2. 代码生成:使用 AI 生成基础代码和组件
  3. 代码优化:AI 辅助重构和性能优化
  4. 测试编写:AI 生成测试用例和测试数据
  5. 文档生成:AI 生成技术文档和 API 文档

3. 团队协作

  • 代码规范:AI 确保代码风格一致
  • 代码审查:AI 辅助代码质量检查
  • 知识分享:AI 解释复杂代码逻辑
  • 文档同步:AI 自动更新项目文档

4. 持续改进

  • 性能监控:使用 AI 分析性能瓶颈
  • 安全审查:AI 辅助安全漏洞检查
  • 技术升级:AI 推荐新技术和最佳实践
  • 架构优化:AI 提供架构改进建议

学习路径建议

初学者

  1. 熟悉 Cursor 基础功能和快捷键
  2. 学习 Agent Ask 和 Manual 模式的使用
  3. 掌握一个主要技术栈(如 Vue.js 或 React)
  4. 练习使用 AI 生成代码和解决问题

中级开发者

  1. 深入理解各技术栈的最佳实践
  2. 学习架构设计原则和模式
  3. 掌握数据库设计和优化技巧
  4. 练习跨技术栈的开发能力

高级开发者

  1. 掌握复杂系统架构设计
  2. 学习微服务和分布式系统
  3. 深入研究性能优化和安全
  4. 指导团队使用 AI 工具提升效率

未来发展趋势

  1. AI 模型升级:更强大的代码理解和生成能力
  2. 多模态支持:支持图像、语音等多种输入方式
  3. 协作功能增强:更好的团队协作和代码审查
  4. 集成开发环境:与更多开发工具和平台集成

通过合理使用 Cursor 的 AI 功能,结合本指南中的技术栈开发技巧,开发者可以显著提升开发效率,构建更高质量、更易维护的应用程序。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容