%20(2).svg)
项目简介
本项目是基于 React 框架构建的 Web 应用系统，运用 Webpack 进行项目构建。集成了 TypeScript、Redux、React Router、Axios 等多种技术，具备清晰的目录结构与模块化设计，便于代码的维护与扩展。同时支持国际化和本地接口 Mock 配置，还提供了多个自定义组件。
项目的主要特性和功能
主要特性
- 多技术集成：用 TypeScript 扩展 JavaScript 语法，结合 React 搭建架构，利用 Redux 管理状态，采用 React Router 实现路由。
- 国际化支持：集成 react - i18next 插件，可进行多语言切换。
- 接口管理：使用 Axios 处理异步请求，支持反代理配置和本地 Mock 数据。
- 样式管理：运用 CSS Modules 和 Sass 开发样式，提升样式可维护性。
- 组件化开发：提供 formInput、notifyPop、moneyTable 和 progressBar 等多个自定义组件，方便页面开发。
主要功能
- 页面按需加载：通过路由实现页面按需加载，提升用户体验。
- 接口请求：支持与后端接口进行数据交互，可配置反代理和 Mock 数据。
- 数据展示：利用 moneyTable 组件展示资金模块表格数据。
- 用户交互：提供 formInput 组件进行表单输入，notifyPop 组件实现弹框交互，progressBar 组件展示进度条。
安装使用步骤
安装依赖
项目使用 npm 或 yarn 管理依赖，在项目根目录执行以下命令：
bash
npm install || yarn install
启动本地调试
安装完成后，使用以下命令启动本地开发服务器，访问地址为 localhost:8080：
bash
npm run dev || yarn dev
本地打包压缩
执行以下命令进行本地打包压缩：
bash
npm run build || yarn build
反代理配置
若本地代码需访问测试环境接口，可在 /config/index.js 文件中配置，示例如下：
bash
dev: {
proxyTable: {
'/api': {
target: 'http://jsonplaceholder.typicode.com/',
changeOrigin: true,
pathRewrite: {'^/api': ''}
}
}
}
本地 ajax mock 配置
可在 /mock 目录下创建 JSON 或 JavaScript 文件配置 Mock 数据。在 config/mock.js 文件中添加配置，示例如下：
bash
module.exports = {
'GET::/api/1.json': 'mock::/users/list.json',
'GET::/test/2.json': 'mock::/users/user.js',
}
引入新页面
新页面统一在 /src/pages 目录添加，在 routes.js 中按需加载配置，示例如下：
bash
{
path: '/',
component: loadableHandler(() => import('./pages/home'))
}
使用自定义组件
使用前需引入相应组件，示例如下：
- formInput 组件：
javascript
import SafeInput from '@/components/safeInput';
<SafeInput onChange={} onBlur={} onFocus={} type="0" btnState lable="谷歌验证码" placeholder="请输入谷歌验证码" />
- notifyPop 组件：
javascript
import NotifyPop from '../../../components/notifyPop';
<NotifyPop type="primary" visable={this.state.visable} width="400" height="250" contant="<div>123</div>" confirm={} cancel={} />
- moneyTable 组件：
javascript
import MoneyTable from '@/components/moneyTable';
<MoneyTable model="primary" dataShow={this.state.divShow} dataSource={this.state.dataList} dataHeader={this.state.dataHeader} InCoin={this.Incoin} OutCoin={this.Outcoin} GetBack={this.Getback} GetInfo={this.Getinfo} />
- progressBar 组件：
javascript
import ProgressBar from '../../../components/progressBar';
<ProgressBar step={} words={[]} />
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】