React使用Tinymce富文本
感谢 TinyMCE中文文档中文手册 提供的文档支持。 常见功能代码地址功能演示 使用本地方式引入(跳过API Key) 在 社区版 下载对应版本的压缩包 解压后将 tinymce 文件夹放到项目的 public 文件夹下 在 src/components/CustomEditor/index.tsx 中找到 tinymceScriptSrc, 然后引入本地的 tinymce 文件 1234567<Editor ..., init={{ ..., tinymceScriptSrc={'/tinymce/tinymce.min.js'} }}/> 注意: 一定要放在 public 文件下, 否则会被打包, 导致找不到文件 下载语言包 在 语言包下载地址 找到需要的语言包并下载 解压后将 langs 文件夹放到项目的 public 文件夹下 在 src/components/CustomEditor/index.tsx 中找到 language, 填上对应 ...
实现React、Vue3的动态路由
后端说明 简单说一下常见的 RBAC (Role Based Access Control) 模型, 主要是由 User、Role、Resource 三个表组成, 如图所示: User 表存储用户信息, Role 表存储角色信息, Resource 表存储资源信息, User 和 Role 是多对多的关系, Role 和 Resource 是多对多的关系, 通过 UserRole 和 RoleResource 两张中间表来实现多对多的关系, UserRole 表存储 User 和 Role 的关系, RoleResource 表存储 Role 和 Resource 的关系 流程 用户登录之后得到用户 Id user_id 在 user_role 表中 根据 user_id 得到对应的角色 role_id 在 role_resource 表中 根据 role_id 得到对应的资源 resource_id 列表 在 resource 表中 根据 resource_id 得到对应的 resource, 最后组合成列表就是用户拥有的资源 示例一 后端返回处理好的树形结构的数 ...
使用useSWR+Axios封装React请求
前提 因为 React18 的 React.StrictMode (严格模式), 组件会在开发环境下执行两次, 但是在生产环境下, 只执行一次. 所以在 useEffect 写请求就不再合适。 关于 useSWR 关于 React.StrictMode 示例代码 封装 Axios请求响应拦截器(错误抛出的弹窗, 自定义处理)123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657// 请求拦截器(全局配置)axios.interceptors.request.use( (config: any) => { // 这里可以做一些请求拦截,比如请求头携带 token // @ts-ignore (防止下面报错) // config.headers.Authorization = localStorage.getItem("token"); return co ...
获取微信小程序用户信息
前提 获取用户信息调整, 详见官方公告 目前尝试获取的用户信息只有头像和昵称,其他信息都是空的 个人开发者不能获取用户手机号,需要企业开发者才能获取 前端获取用户信息示例代码三种方式获取用户手机号 通过微信小程序的云开发能力获取手机号 cloudID. (未使用过 x.x, 本文没有介绍) 通过后端向微信服务端换取真实手机号的动态令牌 code 通过 wx.login 获取的 code 以及 加密数据 encryptedData, iv.注意: 不要在 button 回调里写 wx.login, 否则请求微信服务端会出现 pad block corrupted 问题 123456789const getUserPhone = (e: any) => { // e.detail = { // cloudID: "xxx", // 云ID (方式1) // code: "xxx", // 后端向微信服务端换取 真实手机号 的 code, 不是 wx.login 的 code (方式2) // ...
封装Taro请求
流程图 文件目录1234⊢ request ⨽ http.ts ⨽ index.ts ⨽ interceptors.ts 使用 Taro.addInterceptor 添加请求/响应拦截器 [interceptors.ts]123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105import Taro from "@tarojs/taro";import { post } from ".";/** * 获取 Token */export async function requestToken() { let token = Taro.getSto ...