tntweb admin 다운로드 - tntweb admin 소스코드 다운로드

tntweb admin

기타 카테고리

1.0.0

다운로드

개요

tntweb-admin은 사용자가 콘센트 및 반응 관련 생태 라이브러리를 통합하는 데 도움이 되는 프로젝트이며 다음 기능을 포함하되 이에 국한되지 않는 즉시 사용 가능한 경험을 사용자에게 제공하기 위한 모범 사례 지침이 내장되어 있습니다.

일반적으로 사용되는 Concent API 시연
모델 디렉토리 구성 예
TS 통합 시연
테스트 케이스 작성 시연

이 프로젝트는 webpack을 사용하여 개발 및 구축되었습니다. 또한 vite를 기반으로 한 vite-concent-pro 버전도 제공합니다. 두 가지 모두 vite를 사용해보고 싶은 친구에게 권장됩니다.

시사

온라인 예시

설치 및 실행

프로젝트 코드 가져오기

git clone https://github.com/tnfe/concent-pro.git
cd concent-pro

관련 종속성 설치

npm i --registry=https://registry.npmjs.org

프로젝트 시작 및 디버그

npm start （包含启动前端 和 mock服务）
// 如需分开启动
npm run api （启动mock服务）
npm run app （启动前端）

테스트 및 형식 검증

npm run test (jest测试)
npm run lint (eslint校验)
npm run lintfix (eslint修复)

코드 제출 및 푸시

 git commit -am 'xxxx_msg' (触发 husky钩子 pre-commit: npm run lintfix)
git push (触发 husky钩子 pre-commit: npm run test)

페이지 추가

메뉴 및 경로 추가
src/configs/menus 에 해당 경로에 해당하는 메뉴 정보를 추가합니다.
라우팅 페이지 추가
src/pages 디렉토리에 페이지 구성요소 추가

src/pages/_DemoTempalte 를 참조하여 샘플 코드를 볼 수 있습니다. 프로젝트를 시작한 후 localhost:3000/template을 방문하여 구성 요소 페이지에 액세스합니다.

모듈 추가

모듈은 src/models src/models/index.ts 에 추가할 수 있거나 비즈니스 모듈은 Pages/XxxComp 근처에 추가할 수 있습니다. 모듈 이름은 src/configs/c2Mods.ts 에서 동일하게 유지 관리됩니다. src/configs/c2Mods.ts 파일

모듈 이름 추가

 // src/configs/c2Mods.ts文件
export const HELLO = modName('Hello');
export type T_HELLO = typeof HELLO;

다중 파일 모듈을 추가하고 src/models 아래에 hello 디렉토리를 추가하고 모듈의 state , reducer 및 computed 분리합니다.

 | ____models              
| |____hello             
| | |____state.ts
| | |____reducer.ts
| | |____computed.ts
| | |____index.ts

상태 정의 [필수]

 function getInitialState ( ) {
  return {
    str : '' ,
    loading : false ,
  } ;
}
export type St = ReturnType < typeof getInitialState > ;
export default getInitialState ;

방법 정의 [선택 사항]

 import { St } from './state' ;
import { VoidPayload , AC } from 'types/store' ;
import { T_HELLO } from 'configs/c2Mods' ;
import { delay } from 'utils/timer' ;

type IAC = AC < T_HELLO > ;

export function simpleChange ( payload : string , moduleState : St , ac : IAC ) {
    return { str : payload } ;
}

export async function complexChange ( payload : string , moduleState : St , ac : IAC ) {
    await ac . setState ( { loading : true } ) ;
    await delay ( 2000 ) ;
    // 下面两句可合写为：return {str:payload, loading: false};
    ac . dispatch ( simpleChange , payload ) ; // 当前文件内复用其他reducer逻辑
    return { loading : false } ;
}

계산 정의 [선택 사항]

 import { St } from './state' ;

// only value change will triiger this function to execute again
export function reversedStr ( { str } : St ) {
  return str . split ( '' ) . reverse ( ) . join ( '' ) ;
}

src/models/hello/index.ts 파일은 모듈을 노출합니다.

 import { HELLO } from 'configs/c2Mods' ;
import state from './state' ;
import * as computed from './computed' ;
import * as reducer from './reducer' ;

export default {
  [ HELLO ] : {
    state ,
    computed ,
    reducer ,
  }
} ;

src/models/index.ts 파일은 모듈을 소개하고 이를 루트 모듈에 병합합니다.

 import global from './global'; // 覆写concent内置的$$global模块
import Hello from './hello';

const toExport = {
  ...Hello,
  ...global,
};

export default toExport;

작업 구성 요소는 useC2Mod 사용하여 모듈 데이터를 사용하고 모듈 메서드를 사용합니다.

 import { useC2Mod } from 'services/concent' ;
import { HELLO } from 'configs/c2Mods' ;

export function SomeComp ( ) {
    // state:数据，mr:方法
    const { state , mr } = useC2Mod ( HELLO ) ;
}

코딩 제안

1페이지로 분할된 컴포넌트가 페이지 간 재사용이 필요하지 않은 경우 나중에 재사용할 경우에는 가까운 곳에 배치하는 것이 components/** .
2페이지 모듈 상태는 근처에 배치하는 것이 좋습니다.

기술 스택

런타임 종속성

16.13.1 컴포넌트 기반 프로그래밍 UI 기본 라이브러리
React-Router v5 반응 라우팅 솔루션
Concent v2에는 종속성 수집, 고성능, 점진적 반응 개발 프레임워크가 내장되어 있습니다.
React-router-concent v2는 React-Router와 Concent를 연결하는 중간 라이브러리입니다.
ant-design v4 반응 기본 UI 구성 요소 라이브러리

개발 종속성

생성 반응 앱 v3
mocker-api v1.13
에스린트
웹팩
타이프스크립트
농담
에스키모 개의

루트 디렉토리 구조

 |____config             # CRA webpack相关配置[由npm run eject弹出]   
|____mock               # mock api配置
|____public             # webpack-dev-server 静态资源目录
|____scripts            # npm 脚本
|____src                # 项目源码

src 디렉토리 구조

 |____configs
| |____constant           # 各种常量定义处目录
| |____runConcent.ts      # 启动concent
| |____menus.ts           # 站点菜单配置(包含了路由)
| 
|____index.tsx            # app入口文件
|____utils                # 通用的非业务相关工具函数集合（可以进一步按用途分类）
|____models               # [[business models(全局模块配置)]]
| |____index.js           # 如需全局各个组件共享的model，可提升到此处导出（model可就近放置也可放到models目录下）
| |____global             # [[ 一个标准的模块文件(可以copy到各处，只需修改meta里的模块名即可 ]]
| | |____index.ts         # 模型导出文件
| | |____reducer.ts       # 修改模块数据方法(可选)
| | |____computed.ts      # 模块数据的计算函数(可选)
| | |____watch.ts         # 模块数据的观察函数(可选)
| | |____lifecycle.ts     # 模块生命周期配置(可选)
| | |____state.ts         # 模块状态(必需)
| | |____meta.ts          # 模块元数据文件- 导出整个模块的描述对象、相关类型、钩子等
| |____...
| |
|____components           # [[多个页面复用的基础组件集合]]
|
|____pages                # [[页面组件，通常也是路由组件]]
| |____PageFoo
|   |____ model           # 当前页面的model定义，方便就近打开就近查看（定义可见models/global）
|   |____ dumb            # 当前页面的一些业务笨组件（如果出现多个页面重用则可以进一步调整到components/dumb下）
|
|____types                # 类型定义目录
| |____store              # store相关的各种类型推导文件(这是一个固定的文件，无需用户改动)
| |____mods               # 模型推导辅助文件，无需用户修改
| |____ev-map             # 事件相关的类型定义
| |____domain             # 业务领域相关的对象类型定义，通常是后端返回的对象
| |____biz                # 其他一些全局通用的前端定义的对象类型
|
|
|____services             # [[services，涉及业务io相关、业务通用逻辑相关下沉到此处]]
| |____domain             # 领域模型相关服务
| | |____user
| | |____ticket
| |____common-func        # 和领域无关的基础业务函数集合
| |____http               # 其他业务基础服务
| |____...