README.md · 贝茵斯都/react-methors

## 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/)

贝茵斯都/react-methors

简介

发行版

贡献者

语言

近期动态

贝茵斯都/react-methors .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

语言

近期动态

搜索帮助

贝茵斯都/react-methors