Unduh tntweb admin - tntweb admin Unduh kode sumber

tntweb admin

Kategori lainnya

1.0.0

Unduh

Ringkasan

tntweb-admin adalah proyek yang membantu pengguna mengintegrasikan perpustakaan ekologi terkait konsentrasi dan reaksi serta memiliki panduan praktik terbaik bawaan untuk memberikan pengalaman unik kepada pengguna, termasuk namun tidak terbatas pada fungsi berikut:

Demonstrasi api konsentrasi yang umum digunakan
contoh organisasi direktori model
demonstrasi integrasi ts
Demonstrasi penulisan kasus uji

Proyek ini dikembangkan dan dibangun menggunakan webpack. Ia juga menyediakan versi vite-concent-pro berdasarkan vite. Kode sumber src keduanya sama.

Pratinjau

Contoh daring

Instal dan jalankan

Tarik kode proyek

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

Instal dependensi terkait

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

Mulai dan debug proyek

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

Pengujian dan verifikasi format

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

Pengiriman kode dan push

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

Tambahkan halaman

Tambahkan menu dan rute
Tambahkan informasi menu yang sesuai dengan rute di src/configs/menus
Tambahkan halaman perutean
Tambahkan komponen halaman ke direktori src/pages

Anda dapat merujuk ke src/pages/_DemoTempalte untuk melihat kode contoh. Setelah memulai proyek, kunjungi localhost:3000/template untuk mengakses halaman komponen.

Tambahkan modul

Modul dapat ditambahkan di direktori src/models , atau modul bisnis dapat ditambahkan di dekatnya di halaman/xxxComp. Perhatikan bahwa modul tersebut harus diekspos di file src/models/index.ts src/configs/c2Mods.ts

Tambahkan nama modul

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

Tambahkan modul multi-file. Tambahkan direktori hello di bawah src/models , dan pisahkan state , reducer , dan computed modul.

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

Tentukan status [wajib]

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

Tentukan metode [opsional]

 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 } ;
}

Tentukan perhitungan [opsional]

 import { St } from './state' ;

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

File src/models/hello/index.ts memperlihatkan modul

 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 ,
  }
} ;

File src/models/index.ts memperkenalkan modul dan menggabungkannya ke dalam modul root

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

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

export default toExport;

Komponen tugas menggunakan useC2Mod untuk menggunakan data modul dan menggunakan metode modul

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

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

Saran pengkodean

Jika komponen yang dibagi dalam 1 halaman tidak melibatkan penggunaan kembali lintas halaman, disarankan untuk menempatkannya di dekatnya. Jika nanti digunakan kembali, pindahkan ke components/** .
Status modul 2 halaman disarankan untuk ditempatkan di dekatnya

tumpukan teknologi

ketergantungan waktu proses

reaksi 16.13.1 Pustaka dasar UI pemrograman berbasis komponen
solusi perutean reaksi react-router v5
Concent v2 memiliki koleksi ketergantungan bawaan, kerangka kerja pengembangan reaksi progresif dan berkinerja tinggi
react-router-concent v2 adalah perpustakaan perantara yang menjembatani react-router dan concent
ant-design v4 bereaksi pustaka komponen ui dasar

Ketergantungan pembangunan

buat-reaksi-aplikasi v3
mocker-api v1.13
eslint
paket web
naskah ketikan
bersenda gurau
serak

struktur direktori root

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

struktur direktori 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               # 其他业务基础服务
| |____...