素明诚

Full stack development

View All Authors

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

2024年12月1日 · 阅读需 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 去除文件名称内的特殊字符

2024年11月27日 · 阅读需 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 安装使用中文简体插件

2024年11月26日 · 阅读需 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 使用

2024年11月26日 · 阅读需 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 获取哪些信息

2024年11月22日 · 阅读需 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 流程

2024年11月20日 · 阅读需 4 分钟

素明诚

Full stack development

流程图

ef754b81052e9cd5cc26059ecbf3b353 ### 前端发起请求，传递必要的参数（如用户 ID）

前端通过浏览器、移动客户端或其他客户端发起 HTTP 请求，通常是 RESTful API 调用（GET、POST等）。例如，前端可能请求一个特定 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 响应的形式返回给前端。响应通常以JSON或XML格式发送，具体取决于前后端约定。

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

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

四种主要RBAC模型

2024年11月20日 · 阅读需 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

导出浏览器 Cookies

2024年11月18日 · 阅读需 1 分钟

素明诚

Full stack development

下载 EditThisCookie

https://wwtl.lanzouv.com/iRbkv2ffpkxg

下载后导入到谷歌浏览器

导出

c4b3b11e6376d4c070ac0d0d58d90b56

完事了

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

2024年11月13日 · 阅读需 4 分钟

素明诚

Full stack development

同源

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

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

跨域

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

同源情况下的通信

直接访问 iframe 的内容

从父页面访问 iframe

父页面可以通过 iframe 元素的 contentWindow 或 contentDocument 属性获取 iframe 的 window 对象或 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 三种类型的依赖

2024年11月11日 · 阅读需 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 中列出了项目运行时必需的包。换句话说，这些库是在应用运行时必须存在的。

React 和 React-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 会给出警告提示。

Cursor 下载与安装​

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

使用指南，记住两个快捷键​

Ctrl+K​

Ctrl+L​

使用其他模型​

deepseek​

配置模型和密钥​

Cursor 到期了怎么办？​

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

确认插件安装成功​

手动设置语言​

检查配置文件​

重新安装中文插件​

安装 gitmoji-cli​

使用 gitmoji-cli​

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

流程图​

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

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

服务层处理业务逻辑，并调用数据库（通过模型）获取数据​

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

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

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

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

RBAC0 - 基础 RBAC​

下载 EditThisCookie​

导出​

同源​

跨域​

同源情况下的通信​

直接访问 iframe 的内容​

从 iframe 访问父页面​

示例​

跨域情况下的通信​

使用 postMessage 进行跨域通信​

示例​

最佳实践和安全考虑​

package.json​

dependencies​

devDependencies​

peerDependencies​

Cursor 下载与安装

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

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

Ctrl+K

Ctrl+L

使用其他模型

deepseek

配置模型和密钥

Cursor 到期了怎么办？

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

确认插件安装成功

手动设置语言

检查配置文件

重新安装中文插件

安装 gitmoji-cli

使用 gitmoji-cli

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

流程图

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

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

服务层处理业务逻辑，并调用数据库（通过模型）获取数据

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

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

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

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

RBAC0 - 基础 RBAC

下载 EditThisCookie

导出

同源

跨域

同源情况下的通信

直接访问 iframe 的内容

从 iframe 访问父页面

示例

跨域情况下的通信

使用 postMessage 进行跨域通信

示例

最佳实践和安全考虑

package.json

dependencies

devDependencies

peerDependencies