# react-methors **Repository Path**: beiysd/react-methors ## Basic Information - **Project Name**: react-methors - **Description**: react 方法和实例集合 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 2 - **Created**: 2020-11-17 - **Last Updated**: 2024-08-25 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## react-template ### 1.less 样式配置，及全局样式配置 路径 /config/webpack.config.js less样式配置，安装less和less-loader;参照css和sass样式，仿写即可 全局样式配置 const commonstyles = { loader: 'style-resources-loader', options: { patterns: path.resolve(__dirname, '../src/assets/styles/*.less') } } ### 2.@代替 src 路径 /jsconfig.json 配置代码 /config/webpack.config.js中修改以下配置 alias: { '@': path.resolve(__dirname, '../src'), } ### 3.prettierrc 代码规范化文件 ### 4.AES 添加了 url-search 传参加密 @/pages/Home中 url-search按钮跳转页面，aes加密传参 ### 5.url-search 传参及使用的公共方法 在工具@/utils/index.js中; objectToSearch() 包装参数并加密； getSearchObject 获取url-search中参数并解密 上述两方法，输入输出均为Object形式 ### 6.随机数公共方法 在工具@/utils/index.js中; ### 7.公共 get post 方法 @/utils/axios ，使用方法见 @/api/test.js **2121/01/06 更新：添加请求拦截，并添加全局可控loading，由config自定义参数控制 ### 8.@/api/test.js 测试接口，使用了数据聚合的免费天气接口 顺便一提，数据聚合的get\post请求方法，只是请求方法换，数据类型依然是拼接在url后 ### 9.@/setupProxy 接口代理设置，支持跨域（前提：目标网站支持跨域访问） ### 10.setupProxy 的引入路径在/config/path.js 修改 ### 11.miment @/utils/miment; github地址: https://github.com/noahlam/Miment 轻量级时间插件,具体使用在@/utils/now-date和@/pages/DateSelect ### 12.mobx 全局数据设置 安装mobx mobx-react @/utils/mobx-store --Store 构造器 **2121/01/06更新：取消构造器，添加全局loading @/store mobx设置 ### 13.react-intl-universal 语种替换 插件支持的语种替换，该语种替换源数据需要手动编写；（当前使用语种替换） 另一种是百度翻译api的语种替换，需要将页面字符提取，转换，再回填，不太准确 ### 14.根据 IP 获取详细地址 当前使用的是数据聚合免费api，支持省市，网络所属； 另一种百度地图普通IP api，当IP为空时，查询请求IP所属地址，支持省市,经纬度 //有些数据聚合支持查询的IP，百度api查不到 eg: 49.4.5.177 ### 15.登录密码框 内容的显示隐藏 控制input自带password属性实现 ### 16.移动滑块完成验证 鼠标控制滑块移动，完成验证 ；路径：@/pages/Pass_word/Block_move ### 17.移动滑块，拼接验证图片 参考地址：https://www.cnblogs.com/huanglei-/p/8568405.html github: https://github.com/yeild/jigsaw 鼠标控制滑块移动，小拼图随之移动，到指定位置验证成功 ；路径：@/pages/Pass_word/Block_img_move ### 18.线上图片转 64 位 转载：https://www.cnblogs.com/zeng-zhi/p/10367182.html 路径：@/utils/base64 ### 19.axios 下载文件，实现文件已下载量的监听，及目标文件的文件名及文件扩展类型 路径：@/pages/Down_load ### 20.test 测试类文件 ### 21.更改 antd 主题色 路径：@/antd-theme.less 参考：https://3x.ant.design/docs/react/customize-theme-cn 配置 less 变量文件# 另外一种方式是建立一个单独的 less 变量文件，引入这个文件覆盖 antd.less 里的变量。 @import '~antd/dist/antd.less'; // 引入官方提供的 less 样式入口文件 @import 'your-theme-file.less'; // 用于覆盖上面定义的变量 注意，这种方式已经载入了所有组件的样式，不需要也无法和按需加载插件 babel-plugin-import 的 style 属性一起使用。 ### 22.svg 学习 路径：@/pages/Svg_file ### 23 仿 Element table 超出隐藏,移入展示标签 路径：@/pages/Tool_tip ### 24 仿廖雪峰官网头部导航栏自适应 路径：@/pages/Auto_apply ### 25 设置项目端口号 路径：/package.json package.json中修改scripts中start；如下： "start": "set PORT=3200 && node scripts/start.js", ### 26 sort 排序使用-电话簿实现 路径：@/pages/Sort ### 27 highlight.js 语法高亮 路径：@/pages/HighLight ### 28 JavaScript reduce()学习 路径：@/pages/Reduce ### 29 component 公共组件统一导出 ### 30 scroll 滚动条变进度条 路径：@/pages/Scroll ### 31 canvas 画正六边形 路径：@/pages/Hexagon ### 32 前端弹幕实验 路径：@/pages/Barrage ### 33 字体被选中样式修改 路径：@/pages/App.less ### 34 瀑布流效果展示-采用传统列方式呈现，不支持自适应，滚动至底部加载模式 路径：@/pages/Water_fall 使用数据聚合新闻接口，此接口添加设置，取消全局loading ### 35 全局 loading 设置 流程： 1.在App.js或主文件中添加antd-Spin加载控件，及subscribe监听loading状态更改 2.新增reducers文件，更改loading状态 3.在@/store 中createStore创建一个包含reducers的store，存放方法并导出，方便其引入可用 4.在@/utils/axios 中添加请求拦截，使用dispatch传参，调用引入的store内部reducers方法，更改loading状态，由subscribe监听 5.拓展：同一页面多个请求，添加num计算；全局loading可控，由config自定义参数判断 参考：https://blog.csdn.net/weixin_43443341/article/details/105703198 ### 36 是否离开当前页面 是否重新加载当前页面 提示，每个浏览器显示不同 路径：@/pages/test ### 37 添加错误边界 componentDidCatch 逻辑：在@/pages/Water_fall中使用错误方法，入口文件App.js使用错误边界判断，使用降级UI ### 38 打包优化，dll 外链库使用 详细使用：https://blog.csdn.net/weixin_40532650/article/details/112859682 ### 39 可视化打包文件大小查看 详细使用：https://blog.csdn.net/weixin_40532650/article/details/112859682 链接底部 ### 40 打包前后跨域解决 详细使用：https://blog.csdn.net/weixin_40532650/article/details/112679495 ### 41 选中字体样式更改 路径：@/App.less ### 42 react 中排序；jQuery 中也有 sort，移动排序 路径：@/MoveSort ### 43 cross-env 全局变量存储与引用 安装：yarn add cross-env -D 路径：App.js+.env ### 44 pdf预览等功能实现 路径：@/pages/PDFView 内部依赖：/index.jsx 外部组件：/view-two.jsx (https://github.com/mozilla/pdf.js/)