React默认工程的目录说明

工程目录图

【重点】：启动项目命令 npm run dev or yarn dev
在这里插入图片描述

整体结构说明

文件名称	文件说明
node_modules	第三方依赖包。拉去新工程npm install一下就有了
public	公用文件部分也是静态文件CSS、JS、IMG、字体、入口文件等文件存放位置
src	存放业务源码
index.html	页面渲染的入口文件
package.json	项目包文件（node_modulesd 的依赖是根据 package.json 来下载的）
tsconfig.json	TypeScript 编译器的配置文件，TypeScript 编译器可以根据它的规则来对代码进行编译
tsconfig.node.json	tsconfig.node.json 是node 里的规则，tsconfig 是项目里的编译规则。
vite.config.json	使用 vite 创建的项目里默认的配置

src目录下的说明

文件名称	文件说明
assets	静态资源文件，放一些css文件和image图片
common	定义data数据的文件
components	组件文件
redux	redux全局状态管理器
request	http 请求、拦截文件
router	工程的路由文件
utils	共通方法文件
App.ts	根文件文件
main.tsx	工程的入口文件
vite-env.d.ts	环境配置文件

文件下的代码及引用关系

src

assets

页面使用

import "./assets/css/base.scss"    //根据对应页面写路径
1

common

// data定义
const state = {
"loginInfo": {
  "userName":  '',
  "userPassword": '',
  "remember": false
  },
};
export default state;
1
2
3
4
5
6
7
8
9

components

common
- footer
- header
home

import React, { Component } from 'react'
// 使用antd组件库
import * as ant from 'antd';
// 使用定义是的data
import State from '../../common/login'
// 使用封装的请求方法
import { login } from '../../request/api';
// 使用redux
import { connect } from 'react-redux';
class index extends Component {
    constructor(props:any) {
        super(props)
        this.state = State
    }
    // 双向绑定
    onchange(key: any, val: any) {
        let {loginInfo}:any=this.state
         this.setState({
            loginInfo: Object.assign({},loginInfo, { [key]: val })
         })
        console.log(loginInfo)
    }
    // login事件
    getLogin() {
         let {loginInfo}:any =this.state
        login({ loginInfo },{}).then((res) => {
            console.log(res);
        })
    }
    render() {
        let { loginInfo }: any = this.state
        console.log(this.props);
    return (
      <div>
            <ant.Input type="text" value={loginInfo.userName} name="userName" onChange={this.onchange.bind(this,"userName")}  placeholder="输入用户ID"></ant.Input>
            <ant.Input.Password value={loginInfo.userPassword} name="userPassword" onChange={this.onchange.bind(this,"userPassword")} placeholder="输入用户密码"></ant.Input.Password>
            <br />
            <ant.Button onClick={() => {this.getLogin() }}>登录</ant.Button> 
      </div>
    )
  }
}
// 建立一个从state对象到props对象的映射关系
function mapStateToProps(state:any) {
    return Object.assign({}, state)
}
export default connect(mapStateToProps)(index)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

redux

home

action

-// 事件处理 修改state，创建action对象
import * as Types from '../actionType/loginType';
export const addCount = (value:any) => {
   return {
       type: Types.SETNAME,
       value
   }
}
1
2
3
4
5
6
7
8

actionType

// 定义类型
export const SETNAME = 'SETNAME';
// 定义数据
export const initState = {
    loginInfo: {
        "userName": '李san'
    },
}
1
2
3
4
5
6
7
8

reducer

import * as Types from '../actionType/loginType';
const initState = Types.initState
const reducer = (preState = initState, action:any) => {
    let { type } = action;
    switch (type) {
        case Types.SETNAME:
            return { loginInfo: Object.assign({}, preState.loginInfo, { "userName": action.value }) };
        default:
            return preState
    }
}
export default reducer
1
2
3
4
5
6
7
8
9
10
11
12

index.ts

import * as actions from './action/login';
import Login from './reducer/loginReducer';

export { actions, Login }
1
2
3
4

store.ts

// 根据reducer来生成store仓库，调用入口
import { configureStore } from '@reduxjs/toolkit'
import { Login } from './login/index'

const store = configureStore({
    reducer: {
        Login
    }
})
export default store
1
2
3
4
5
6
7
8
9
10

request

api.ts

import { get, post } from './http'
export const login = (params:any, headers:any) => post('raku0000/login', params,);
1
2

http.ts

import axios from "axios";

axios.create({
    timeout: 50000,
    baseURL:"http://localhost:3000"
})
/**
* http request 拦截器
**/
axios.interceptors.request.use(
   (config) => {
       config.data = JSON.stringify(config.data);
       config.headers = {
           "Content-Type": "application/json",
        };
        return config;
   },
   (error) => {
       return Promise.reject(error);
   }
);

/**
* http response 拦截器
*/
axios.interceptors.response.use(
   (response) => {
       console.log(response)
       return response;
   },
   (error) => {
       console.log("请求出错：", error);
   }
);

/**
* 封装get方法
* @param url  请求url
* @param params  请求参数
* @returns {Promise}
*/
export function get(url:string, params = {}) {
   return new Promise((resolve, reject) => {
       axios.get(url, {
           params: params,
       }).then((response) => {
           landing(url, params, response.data);
           resolve(response.data);
       })
           .catch((error) => {
               reject(error);
           });
   });
}

/**
* 封装post请求
* @param url
* @param data
* @returns {Promise}
*/

export function post(url:string, data:any) {
   return new Promise((resolve, reject) => {
       axios.post(url, data).then(
           (response) => {
               //关闭进度条
               resolve(response.data);
           },
           (err) => {
               reject(err);
           }
       );
   });
}

/**
* 封装patch请求
* @param url
* @param data
* @returns {Promise}
*/
export function patch(url:string, data = {}) {
   return new Promise((resolve, reject) => {
       axios.patch(url, data).then(
           (response) => {
               resolve(response.data);
           },
           (err) => {
               msag(err);
               reject(err);
           }
       );
   });
}

/**
* 封装put请求
* @param url
* @param data
* @returns {Promise}
*/

export function put(url:string, data = {}) {
   return new Promise((resolve, reject) => {
       axios.put(url, data).then(
           (response) => {
               resolve(response.data);
           },
           (err) => {
               msag(err);
               reject(err);
           }
       );
   });
}

//统一接口处理，返回数据
export default function (fecth:any, url:string, param:any) {
   let _data = "";
   return new Promise((resolve, reject) => {
       switch (fecth) {
           case "get":
               console.log("begin a get request,and url:", url);
               get(url, param)
                   .then(function (response) {
                       resolve(response);
                   })
                   .catch(function (error) {
                       console.log("get request GET failed.", error);
                       reject(error);
                   });
               break;
           case "post":
               post(url, param)
                   .then(function (response) {
                       resolve(response);
                   })
                   .catch(function (error) {
                       console.log("get request POST failed.", error);
                       reject(error);
                   });
               break;
           default:
               break;
       }
   });
}

//失败提示
function msag(err:any) {
   if (err && err.response) {
       switch (err.response.status) {
           case 400:
               alert(err.response.data.error.details);
               break;
           case 401:
               alert("未授权，请登录");
               break;

           case 403:
               alert("拒绝访问");
               break;

           case 404:
               alert("请求地址出错");
               break;

           case 408:
               alert("请求超时");
               break;

           case 500:
               alert("服务器内部错误");
               break;

           case 501:
               alert("服务未实现");
               break;

           case 502:
               alert("网关错误");
               break;

           case 503:
               alert("服务不可用");
               break;

           case 504:
               alert("网关超时");
               break;

           case 505:
               alert("HTTP版本不受支持");
               break;
           default:
       }
   }
}

/**
* 查看返回的数据
* @param url
* @param params
* @param data
*/
function landing(url:string, params:any, data:any) {
   if (data.code === -1) {
   }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210

router

index.ts

import { useRoutes } from 'react-router-dom'
import  constantRouteMap  from './index.config'

const RouterView = () => useRoutes(constantRouteMap)


export default RouterView
1
2
3
4
5
6
7

index.config.ts

import * as React from 'react';
import type { RouteObject } from "react-router-dom";
const Login =React.lazy(()=>import('../components/login/index'))
const constantRouteMap: RouteObject[] = [
  {
    path: '/',
    element: <Login />,
  }
]

export default constantRouteMap;
1
2
3
4
5
6
7
8
9
10
11

utils
App.tsx

  import * as React from 'react';
  import { BrowserRouter } from 'react-router-dom';
  // 引入router
  import RootRoutes from './router/index';
  import "./assets/css/base.scss"
  const App: React.FC = () => (
        <BrowserRouter>
          <RootRoutes/>  
        </BrowserRouter>
  );
  
  export default App;
1
2
3
4
5
6
7
8
9
10
11
12

main.tsx

  import React from 'react'
  import ReactDOM from 'react-dom/client'
  import App from './App'
  import 'antd/dist/antd.css';
  ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  )
1
2
3
4
5
6
7
8
9

相关阅读:
白嫖一个属于你的私有大模型
 linux 开通指定端口号解决telnet不通的问题
 maven的下载安装与卸载
 【计算机网络】你真的懂学校的校园网吗？
新手怎么做短剧推广和小说推文授权渠道
 Cordova 自定义插件(Android版本)
看板系统如何异地电脑手机访问?主机内网ip端口映射域名外网访问
 React 与 Angular：项目的最佳框架
 Node.js教程
 广州地铁14号线新市墟站开建，白云区居民即将开启双线换乘模式！
原文地址：https://blog.csdn.net/ZTAHNG/article/details/126524352