跳到主要内容

Cursor 使用指南配置其他模型永久白嫖方案提示词优化

· 阅读需 2 分钟
素明诚
Full stack development

Cursor 下载与安装

访问 Cursor 官网 https://zhuanlan.zhihu.com/p/717659843/www.cursor.com/,点击 Download 按钮下载适合你操作系统的安装包

Cursor 为什么比其他的工具好用很多?

可以灵活地根据代码内容组合 prompt

分析当前 tab 中附近的代码

分析用户主动框选的特定代码段

分析用户选择的整个文件中的代码

利用 RAG 将整个工作区的代码向量化,作为分析的上下文

使用指南,记住两个快捷键

Cursor 常用快捷键和 Visual Studio Code 键盘快捷键基本相同。快速上手只需要记住以下快捷键。如果你本身就是 VSCode 用户,记得导入插件和配置

Ctrl+K

快速让 Cursor 帮你编写你需要的代码,也可以选中代码进行优化

f7e74bbf06724d6a8403276777dcdf0c

输入你的编码需求

b5a2fa317a1f360ea59cd750925e8a10

确认生成的代码

9293fc4411cac057b86191f4307dc14e

这里觉得最有用的功能是这个 Web,可以帮助你联网搜索问题,其他的功能各位可以慢慢感受

Ctrl+L

弹出 Chat 聊天框,进行 QA

36f54213379c9f1989013ff5593807b8## 注意事项

Cursor 强大是因为有 claude 3.5,所以你要么开通 Cursor pro,要么有其他优秀模型的 sk-key

在使用 Cursor 持续居高不下的 CPU 负载,你可能需要去设置里面把 embedding 整个项目关掉,这样会好很多

使用其他模型

deepseek

deepseek 注册送一个月 10 元(500 万 tokens)额度,在 cursor 里配置一下,普通编辑需求够用

https://platform.deepseek.com/

配置模型和密钥

462c41a49d56edb3c4595cbf95140281

model: deepseek-ai/DeepSeek-Coder-V2-Instruct 添加完成后记得打开模型后面的开关

base Url : https://api.siliconflow.cn/v1

98bfcbcbbfd6ce04a5a182bb18dbce21

日常使用还行,主要是便宜

Cursor 到期了怎么办?

在 Cursor 中退出当前到期账号,谷歌搜索临时邮箱,重新注册登录,原有的 cursor 配置不会被清除,依然保留,白嫖成功~

c9665efc8988c063d887d0e183b5a1ad### Cursor 配置提示词

这里有很多参考,你随便选择。https://cursor.directory/

2e0c182049eb46921f821d3d057e192c

各位如果有补充的欢迎评论区留言~

2024 年 12 月 1 日 15:23:29 补充

有很多人私信说邮箱反复更换会被限制,这个没办法,cursor 估计也被撸秃了。建议使用谷歌邮箱或者是微软邮箱。

标签:

Python 去除文件名称内的特殊字符

· 阅读需 1 分钟
素明诚
Full stack development
import os
import re

def sanitize_filename(filename):
""" 使用'-'替换文件名中的特殊字符和空格 """
return re.sub(r'[^\w.-]', '-', filename)

def rename_files_in_directory(directory):
""" 遍历目录并重命名文件 """
for root, dirs, files in os.walk(directory):
for filename in files:
# 生成新文件名
new_filename = sanitize_filename(filename)
if new_filename != filename:
# 构建完整的文件路径
original_file_path = os.path.join(root, filename)
new_file_path = os.path.join(root, new_filename)
# 重命名文件
os.rename(original_file_path, new_file_path)
print(f"已将文件 {filename} 重命名为 {new_filename}")

def main():
# 获取当前脚本的目录
current_directory = os.path.dirname(os.path.abspath(__file__))
# 开始重命名流程
rename_files_in_directory(current_directory)
print("所有文件处理完毕!")

if __name__ == '__main__':
main()

VS Code 安装使用中文简体插件

· 阅读需 1 分钟
素明诚
Full stack development

确认插件安装成功

确保中文插件已经正确安装。在 VS Code 的扩展视图中搜索“Chinese”(简体中文),检查是否有安装标记。

28307fec8661d659ff745848a1da86d9## 激活语言包

有时安装语言包后需要重新启动 VS Code 才能生效。尝试关闭并重新启动 VS Code。

手动设置语言

如果自动切换没有生效,你可以手动设置语言。打开命令面板(Ctrl+Shift+P),然后输入 Configure Display Language,选择它。在打开的语言列表中选择中文(简体)zh-cn,然后重启 VS Code。

检查配置文件

打开 VS Code 的用户设置(文件 > 首选项 > 设置 或使用快捷键 Ctrl+,),在搜索栏输入 locale。检查 "locale": "zh-cn" 是否设置正确。

重新安装中文插件

如果以上步骤都未能解决问题,尝试卸载中文插件后重启 VS Code,然后重新安装该插件。

通过上述步骤,通常能够解决中文显示问题。如果问题依然存在,可能需要检查是否有其他插件或设置干扰了语言包的正常工作。

gitmoji-cli 使用

· 阅读需 1 分钟
素明诚
Full stack development

安装 gitmoji-cli

首先,确保你的计算机上安装了 Node.js 和 npm。然后,通过 npm 安装 gitmoji-cli

npm install -g gitmoji-cli

使用 gitmoji-cli

安装完成后,你可以通过以下命令开始使用 gitmoji-cli

初始化 gitmoji-cli: 使用命令 gitmoji -i 可以初始化 gitmoji 提交钩子(hook)。这会在你的项目中设置一个自动提示符,当你用 git commit 命令时,它会提示你选择一个 gitmoji。

查看所有可用的 gitmojis: 执行 gitmoji -l 可以列出所有可用的 gitmojis。这可以帮助你熟悉不同 gitmojis 的用途。

9e832bc775e4c368fc130b4129f89edc

选择后提交即可

你可以从 docker inspect 获取哪些信息

· 阅读需 2 分钟
素明诚
Full stack development

对正在运行的 MySQLdocker inspect 后内容如下

[
{
"Id": "92fe41a6dfd5...", // 容器的唯一标识符
"Created": "2024-10-09T08:32:41.659Z", // 容器创建的时间戳
"Path": "docker-entrypoint.sh", // 容器启动时执行的脚本
"Args": ["--default-authentication-plugin=mysql_native_password"], // 脚本参数
"State": {
"Status": "running", // 容器当前状态,正在运行
"Running": true, // 容器是否在运行
"Health": {
"Status": "healthy", // 容器健康状态为健康
"FailingStreak": 0, // 健康检查失败次数
"Log": [] // 健康检查日志
}
},
"Image": "mysql:8.0.36", // 使用的MySQL镜像版本
"Name": "/mysql_server", // 容器名称
"RestartCount": 0, // 重启次数
"HostConfig": {
"NetworkMode": "mysql_mysql", // 网络模式
"PortBindings": { // 端口绑定配置
"3306/tcp": [{ "HostIp": "", "HostPort": "3306" }] // 映射到主机的3306端口
},
"RestartPolicy": {
"Name": "always" // 重启策略,始终重启
}
},
"Config": {
"Env": [ // 环境变量配置
"MYSQL_DATABASE=demo", // 数据库名
"MYSQL_USER=admin", // 用户名
"MYSQL_PASSWORD=123456", // 用户密码
"MYSQL_ROOT_PASSWORD=123456" // 根密码
],
"Cmd": ["--default-authentication-plugin=mysql_native_password"], // 容器启动命令
"Healthcheck": { // 健康检查配置
"Test": ["CMD", "mysqladmin", "ping", "-h", "localhost"], // 使用mysqladmin ping测试
"Interval": 30000000000, // 检查间隔
"Retries": 3 // 重试次数
}
},
"NetworkSettings": {
"IPAddress": "172.27.0.2", // 容器分配的IP地址
"Networks": {
"mysql_mysql": { // 网络配置
"IPAddress": "172.27.0.2", // 网络中的IP地址
"Gateway": "172.27.0.1" // 网关
}
}
}
}
]

Web 开发下 MVC 流程

· 阅读需 4 分钟
素明诚
Full stack development

流程图

ef754b81052e9cd5cc26059ecbf3b353### 前端发起请求,传递必要的参数(如用户 ID)

前端通过浏览器、移动客户端或其他客户端发起 HTTP 请求,通常是 RESTful API 调用(GETPOST等)。例如,前端可能请求一个特定 ID 的用户信息。 请求中可能携带查询参数(如分页参数、排序条件、筛选条件等)或路径参数(如用户 ID),具体取决于 API 的设计。

路由层解析请求并将其转发给相应的控制器方法

**路由层(Router)**负责解析 HTTP 请求并将其转发给相应的控制器方法。路由会根据请求的方法(GET、POST 等)和路径(如/api/user/{id})来匹配相应的控制器。 在现代 Web 框架(如 Gin、Express、Spring 等)中,路由通常会独立于控制器进行配置,路由管理器会根据 URL 匹配到相应的控制器方法。在某些框架中,路由层和控制器层可能是分开的。

控制器从请求中提取参数,并调用服务层来获取数据

**控制器层(Controller)**负责接收请求并提取必要的参数(如用户 ID、查询条件等)。控制器的主要职责是调度请求,决定需要调用哪个服务层的功能,执行相应的业务操作。 控制器层本身并不包含业务逻辑,所有的业务逻辑应交给服务层处理。控制器将接收到的参数传递给服务层,以获取或处理数据。

服务层处理业务逻辑,并调用数据库(通过模型)获取数据

**服务层(Service)专注于处理具体的业务逻辑。在这一步,服务层会执行参数验证、数据计算或其他必要的处理逻辑。 服务层通过模型层(Model)**来访问数据库或其他持久化存储,获取、插入或更新数据。模型层通常通过 ORM(如 Gorm、Sequelize 等)与数据库进行交互。 服务层还可能包括缓存的读取、日志记录、外部 API 的调用等跨域逻辑。

数据从数据库返回后,服务层将其返回给控制器

在完成数据库操作后,服务层将返回的数据(通常是对象或结构化数据)传递给控制器层。 服务层通常返回的格式可以是一个模型对象,也可能是经过一定处理后的数据,取决于具体的业务需求。

控制器使用 DTO 将从数据库获取的数据转换为前端需要的格式

控制器层将从服务层获得的模型数据(Model)转换为前端所需的格式,通常是通过DTO(数据传输对象)来实现。 DTO 用于将数据格式化为 API 所需的标准结构,并去除不必要的字段或敏感数据(如密码、内部 ID 等)。 在一些复杂场景下,控制器也可能使用ViewModel,特别是当数据的展示层要求较高时,ViewModel 更多地关注展示层的需要,可能包含计算字段或格式化的结果。

控制器通过 HTTP 响应将 DTO 数据返回给前端

控制器将经过 DTO 转换后的数据以HTTP 响应的形式返回给前端。响应通常以JSONXML格式发送,具体取决于前后端约定。

前端接收到数据后进行处理并展示给用户

前端接收到数据后,通过 JavaScript 等前端技术进行展示。通常,前端会基于 API 返回的 JSON 数据动态更新页面内容,使用框架如ReactVueAngular等来处理数据绑定和 UI 渲染。 前端还可能进行一些额外的数据处理,例如表单验证UI 更新交互。在复杂的前端应用中,状态管理(如 Redux、Vuex 等)可能会涉及,帮助集中管理应用的状态。

四种主要RBAC模型

· 阅读需 2 分钟
素明诚
Full stack development

**角色基于访问控制(RBAC)**是一种广泛使用的访问控制机制,它通过将权限与角色关联,而不是直接与单个用户关联,从而简化了权限管理。RBAC 可以根据不同的复杂度分为多个级别,这些级别能够满足不同安全需求的组织。

RBAC0 - 基础 RBAC

RBAC0 是最简单的 RBAC 模型,实现了 RBAC 的核心概念。在这个模型中,系统管理员将权限分配给角色,然后将角色分配给用户。用户通过其角色获得执行特定任务所需的权限。这种模型是 RBAC 的基本形式,适用于访问控制需求相对简单的环境。

a4392d47861fbd6e00f579f18fbb776a### RBAC1 - 具有角色层级的 RBAC

在 RBAC1 模型中,角色之间可以建立层级关系,形成父子角色的结构。子角色继承父角色的所有权限,并且可以拥有特定的附加权限。这种层级结构使得权限管理更加灵活和精细。例如,某个“高级管理员”角色可以包含多个子角色,如“数据库管理员”和“网络管理员”,这些子角色继承“高级管理员”的通用权限,同时也可以有独立的特定权限。

105defe386ea88c2e592530d56d791d3### RBAC2 - 具有约束的 RBAC

RBAC2 模型在 RBAC 的基础上增加了约束条件,以实现更细粒度的安全控制。这些约束包括角色的互斥性(例如,禁止同一用户同时拥有财务和审计角色),以及基于时间或上下文的约束(例如,某个角色的权限只在特定时间或满足特定条件下有效)。这种模型适用于对安全性有较高要求的环境,能够防止潜在的权限滥用。

c7b9fcc50ff2ce7bffff14f525aa6c08### RBAC3 - 综合 RBAC

RBAC3 是最全面的 RBAC 模型,结合了 RBAC1 中的角色层级和 RBAC2 中的约束规则。它提供了完整的访问控制机制,适用于对安全性和权限管理有严格要求的复杂系统。通过同时引入层级结构和约束条件,RBAC3 能够在确保安全性的同时,提供更大的灵活性和可扩展性。

33d2fe39f4468487d2229a5b08b33151

iframe 在同源和跨域的通信方式

· 阅读需 4 分钟
素明诚
Full stack development

同源

父页面和 iframe 可以直接访问对方的 DOM 和 JavaScript 对象。

这种方式简单高效,但需要注意代码的安全性和健壮性,避免产生错误或安全漏洞。

跨域

由于同源策略的限制,需要使用 window.postMessage() 方法进行通信。

同源情况下的通信

直接访问 iframe 的内容

从父页面访问 iframe

父页面可以通过 iframe 元素的 contentWindowcontentDocument 属性获取 iframewindow 对象或 document 对象,然后直接访问其 DOM 或 JavaScript 变量。

从 iframe 访问父页面

iframe 可以通过 window.parent 访问父页面的 window 对象。

示例

父页面(parent.html)

<!DOCTYPE html>
<html>
<head>
<title>父页面</title>
</head>
<body>
<h1>父页面</h1>
<iframe id="myIframe" src="iframe.html"></iframe>

<script>
// 等待 iframe 加载完成
document.getElementById('myIframe').onload = function() {
// 获取 iframe 的 window 对象
var iframeWindow = document.getElementById('myIframe').contentWindow;

// 调用 iframe 中的函数
iframeWindow.showMessageFromIframe();

// 访问 iframe 中的变量
console.log('从 iframe 获取的变量:', iframeWindow.iframeVariable);

// 修改 iframe 中的 DOM 元素
var iframeDocument = iframeWindow.document;
iframeDocument.getElementById('iframeElement').innerText = '父页面修改了 iframe 的内容';

// 从 iframe 获取输入框的值
var inputValue = iframeDocument.getElementById('iframeInput').value;
console.log('从 iframe 获取的输入框值:', inputValue);
};

// 定义供 iframe 调用的函数
function showMessageFromParent() {
alert('这是父页面的消息!');
}
</script>
</body>
</html>

iframe 页面(iframe.html)

<!DOCTYPE html>
<html>
<head>
<title>iframe 页面</title>
</head>
<body>
<h2>iframe 页面</h2>
<p id="iframeElement">这是 iframe 中的段落。</p>
<input type="text" id="iframeInput" value="iframe 输入框的默认值">

<script>
// 定义变量
var iframeVariable = '这是 iframe 中的变量';

// 定义函数
function showMessageFromIframe() {
alert('这是 iframe 中的消息!');
}

// 调用父页面的函数
window.parent.showMessageFromParent();

// 访问父页面的 DOM 元素
var parentTitle = window.parent.document.title;
console.log('父页面的标题是:', parentTitle);

// 修改父页面的背景颜色
window.parent.document.body.style.backgroundColor = '#f0f8ff';
</script>
</body>
</html>

确保 iframe 已经加载完成,才能访问其内容。


跨域情况下的通信

当父页面和 iframe 来自不同的域名、协议或端口时,浏览器的同源策略将阻止它们直接访问对方的内容。

使用 postMessage 进行跨域通信

window.postMessage() 方法允许来自不同源的窗口之间安全地进行通信。

示例

父页面(parent.html)

<!DOCTYPE html>
<html>
<head>
<title>父页面</title>
</head>
<body>
<h1>父页面</h1>
<iframe id="myIframe" src="https://otherdomain.com/iframe.html"></iframe>

<script>
var iframe = document.getElementById('myIframe');

// 向 iframe 发送消息
iframe.onload = function() {
var message = { type: 'GREETING', text: '你好,iframe!' };
iframe.contentWindow.postMessage(message, 'https://otherdomain.com');
};

// 接收来自 iframe 的消息
window.addEventListener('message', function(event) {
// 验证消息来源
if (event.origin !== 'https://otherdomain.com') {
console.warn('来自未知来源的消息:', event.origin);
return;
}

// 处理消息
console.log('收到来自 iframe 的消息:', event.data);
});
</script>
</body>
</html>

iframe 页面(iframe.html)

<!DOCTYPE html>
<html>
<head>
<title>iframe 页面</title>
</head>
<body>
<h2>iframe 页面</h2>

<script>
// 接收来自父页面的消息
window.addEventListener('message', function(event) {
// 验证消息来源
if (event.origin !== 'https://parentdomain.com') {
console.warn('来自未知来源的消息:', event.origin);
return;
}

// 处理消息
console.log('收到来自父页面的消息:', event.data);

// 回复父页面
var reply = { type: 'RESPONSE', text: '你好,父页面!' };
event.source.postMessage(reply, event.origin);
});
</script>
</body>
</html>

postMessage 中指定准确的 targetOrigin,不要使用 "*",以防止消息被发送到不受信任的窗口。

最佳实践和安全考虑

明确的 targetOrigin:始终在 postMessage 中指定准确的目标源,防止数据泄露。

// 不推荐的做法
iframe.contentWindow.postMessage(message, '*'); // 可能导致安全风险

// 推荐的做法
iframe.contentWindow.postMessage(message, 'https://otherdomain.com');

验证 event.origin:在接收消息时,验证消息的来源。

window.addEventListener('message', function(event) {
if (event.origin !== 'https://expected-origin.com') {
console.warn('不可信的消息来源,已忽略。');
return;
}
// 处理可信的消息
});

验证消息的数据结构和内容:确保消息的数据格式符合预期,防止被恶意代码利用。

if (typeof event.data !== 'object' || !event.data.type) {
console.warn('消息格式不正确,已忽略。');
return;
}

packagejson 三种类型的依赖

· 阅读需 3 分钟
素明诚
Full stack development

package.json

{
"dependencies" {
"react" "^18.2.0",
"react-dom" "^18.2.0",
"axios" "^1.2.3"
},
"devDependencies" {
"webpack" "^5.60.0",
"webpack-cli" "^4.9.0",
"babel-loader" "^8.2.3",
"eslint" "^8.0.0",
"style-loader" "^3.3.1",
"css-loader" "^6.7.0"
},
"peerDependencies" {
"react" "^18.0.0"
}
}

dependencies

dependencies 中列出了项目运行时必需的包。换句话说,这些库是在应用运行时必须存在的。

ReactReact-DOM 是 React 应用的核心库,它们会被安装到 node_modules 中并在应用启动时加载。

Axios 是一个用于发送 HTTP 请求的库,通常用于与后端 API 进行交互,它也属于运行时所需的依赖。

"dependencies" {
"react" "^18.2.0", // React库,应用必须依赖它来构建UI
"react-dom" "^18.2.0", // React-DOM库,用于在DOM中渲染React组件
"axios" "^1.2.3" // Axios,用于发送 HTTP 请求
}

当你运行 npm install 时,dependencies 中列出的所有库都会被安装到项目中。

devDependencies

devDependencies 中列出了项目在开发阶段需要的工具和库。这些包只会在开发环境中使用,并且不会在生产环境中被包含。

Webpack 是打包工具,用于将代码捆绑成生产环境所需的文件。

Babel-loader 是用来将现代 JavaScript(如 ES6+)转译成兼容性更好的版本,通常配合 Webpack 使用。

ESLint 是一个 JavaScript 代码检查工具,用于保证代码质量。

"devDependencies" {
"webpack" "^5.60.0", // Webpack,用于打包代码
"webpack-cli" "^4.9.0", // Webpack CLI,允许在命令行中使用Webpack
"babel-loader" "^8.2.3", // Babel loader,用于转译JS代码
"eslint" "^8.0.0", // ESLint,用于代码风格和质量检查
"style-loader" "^3.3.1", // Style loader,处理CSS的加载
"css-loader" "^6.7.0" // CSS loader,处理CSS文件
}

这些库的主要作用是为了帮助你在开发过程中构建和优化代码。例如,你使用 Webpack 打包代码,Babel 将 ES6 转译为 ES5,ESLint 确保代码符合规范。而这些工具在生产环境中不需要,因此它们只会被列在 devDependencies 中。

peerDependencies

peerDependencies 用来指定该库所依赖的外部库的版本范围,但并不直接安装这些库,而是要求使用该库的项目自己安装这些依赖。

假设你在开发一个 React 组件库,这个组件库依赖于 react,但是你并不希望直接将 react 包含在你的组件库中,因为你的用户可能已经安装了 react。这时,你就可以在 peerDependencies 中指定 react 的版本范围。

"peerDependencies" {
"react" "^18.0.0" // 组件库要求项目使用 React 18 或更高版本
}

这样,假设用户已经在他们的项目中安装了 react@18.0.0,那么他们就可以使用你的组件库了。如果用户没有安装正确版本的 react,npm 会给出警告提示。