碳反应
CarbonReact是CarbonORM系列的一部分. 它是一种反应MySQL ORM,它设计用来生成所有你的锅炉板 代码.
安装
碳反应在 国家预防机制。你会需要 节点JS 已安装 预装 npm (节点包管理器) .
npm install @carbonorm/carbonreact
生成模型
以下命令生成单个 C6.ts 包含表格、类型和 REST 绑定的文档。 保留输出
服务器和客户端的版本控制和导入。 所有论据都是可选的。 如果你不给他们提供
将使用默认值。 下面的例子参数为默认.
npx generateRestBindings --user root --pass password --host 127.0.0.1 --port 3306 --dbname carbonPHP --prefix carbon_ --output ./shared/rest/C6.ts
生成的文件导出 C6, (中文(简体) ), GLOBAL_REST_PARAMETERS,和每表绑定物(例如:. Users:
import { C6, GLOBAL_REST_PARAMETERS, Users } from "./shared/rest/C6";
关于碳节点及其世代的更多信息,请参见 碳节点。 。 。 .
快速启动执行
碳反应被设计为您的应用的诱饵。 它负责管理你申请的状态.
最理想的是,一旦它挂起,它就永远不会被卸下. 在无法申请的情况下,您可提供
shouldStatePersist 属性到碳反应反应组件。 这将允许你坚持你的状态
应用程序,即使组件已卸载。 当组件是时访问或更新状态的行为
未知(未定义),应当避免。 下面的例子显示了碳反应的简单实施. 我们的用户
定义组件为 CarbonORM 用于扩展 CarbonReact 课。 您的落实也必须
扩展 CarbonReact名称 CarbonORM 是任意的,可以更改为应用程序的名称.
import 'react-toastify/dist/ReactToastify.min.css'; // This is required for alerts to work and not break styling
const container = document.getElementById('root');
const root = createRoot(container!);
root.render(
<React.StrictMode>
<CarbonORM />
</React.StrictMode>
);
CarbonReact应该在页面加载后立即加载. 有计划允许使用其他警报系统,但 现在,我们使用 反应托拉斯化。必须在您的文件中需要它 并且通常可以完成您的项目的根.
export const initialCarbonORMState: typeof initialRestfulObjectsState
& typeof initialRequiredCarbonORMState
& iAuthenticate
& iVersions
& iUi
& {} = {
...initialVersionsState,
...initialRestfulObjectsState,
...initialRequiredCarbonORMState,
...initialAuthenticateState,
...initialUiState,
}
export default class CarbonORM extends CarbonReact<{ browserRouter?: boolean }, typeof initialCarbonORMState> {
static instance: CarbonORM;
state = initialCarbonORMState;
constructor(props) {
super(props);
CarbonORM.instance = this;
CarbonReact.instance = this;
}
componentDidMount() {
Carbons.Get()
authenticateUser()
}
render() {
console.log("CarbonORM TSX RENDER");
const {isLoaded, backendThrowable} = this.state;
if (backendThrowable.length > 0) {
return <BackendThrowable />
}
const reactRouterContext = (children: any) => {
if (isTest) {
return <MemoryRouter initialEntries={['/']}>{children}</MemoryRouter>
}
return <HashRouter>{children}</HashRouter>
}
return reactRouterContext(<>
<Routes>
<Route path={UI + "*"}>
<Route path={MATERIAL_DASHBOARD + "*"} element={ppr(Dashboard, {})}>
<Route path={DASHBOARD + '*'} element={ppr(DashboardPage, {})}/>
<Route path={USER_PROFILE + '*'} element={ppr(UserProfile, {})}/>
<Route path={TABLES + '*'} element={ppr(TableList, {})}/>
<Route path={TYPOGRAPHY + '*'} element={ppr(Typography, {})}/>
<Route path={ICONS + '*'} element={ppr(Icons, {})}/>
<Route path={MAPS + '*'} element={ppr(Maps, {})}/>
<Route path={NOTIFICATIONS + '*'} element={ppr(Notifications, {})}/>
<Route path={UPGRADE_TO_PRO + '*'} element={ppr(UpgradeToPro, {})}/>
<Route path={'*'} element={<Navigate to={'/' + UI + MATERIAL_DASHBOARD + DASHBOARD}/>}/>
</Route>
<Route path={MATERIAL_KIT + "*"} element={ppr(MaterialKit, {})}>
<Route path={SECTION_NAVBARS + '*'} element={ppr(SectionNavbars, {})}/>
<Route path={SECTION_BASICS + '*'} element={ppr(SectionBasics, {})}/>
<Route path={SECTION_TABS + '*'} element={ppr(SectionTabs, {})}/>
<Route path={SECTION_PILLS + '*'} element={ppr(SectionPills, {})}/>
<Route path={SECTION_NOTIFICATIONS + '*'} element={ppr(SectionNotifications, {})}/>
<Route path={SECTION_TYPOGRAPHY + '*'} element={ppr(SectionTypography, {})}/>
<Route path={SECTION_JAVASCRIPT + '*'} element={ppr(SectionJavascript, {})}/>
<Route path={SECTION_COMPLETED_EXAMPLES + '*'} element={ppr(SectionCompletedExamples, {})}/>
<Route path={SECTION_LOGIN + '*'} element={ppr(SectionLogin, {})}/>
<Route path={LANDING_PAGE + '*'} element={ppr(LandingPage, {})}/>
<Route path={SECTION_DOWNLOAD + '*'} element={ppr(SectionDownload, {})}/>
<Route path={'*'} element={<Navigate to={'/' + UI + MATERIAL_KIT + SECTION_NAVBARS}/>}/>
</Route>
<Route path={'*'} element={<Navigate to={'/' + UI + MATERIAL_DASHBOARD}/>}/>
</Route>
<Route path={DOCUMENTATION + '*'} element={ppr(Documentation, {})}>
<Route path={CARBON_ORM_INTRODUCTION + '*'} element={ppr(CarbonORMIntroduction, {})}/>
<Route path={SUPPORT + '*'} element={ppr(Support, {})}/>
<Route path={CARBONPHP + '*'} element={ppr(CarbonPHP, {})}/>
<Route path={DEPENDENCIES + '*'} element={ppr(Dependencies, {})}/>
<Route path={CHANGELOG + "*"} element={ppr(Changelog, {})}/>
<Route path={IMPLEMENTATIONS + "*"} element={ppr(Implementations, {})}/>
<Route path={LICENSE + "*"} element={ppr(License, {})}/>
<Route path={'*'} element={<Navigate to={'/' + DOCUMENTATION + CARBON_ORM_INTRODUCTION}/>}/>
</Route>
<Route path="/landing-page" element={ppr(LandingPage, {})}/>
<Route path={'*'} element={<Navigate to={'/documentation'}/>}/>
</Routes>
<ToastContainer
autoClose={3000}
draggable={false}
position="top-right"
hideProgressBar={false}
newestOnTop
closeOnClick
rtl={false}
pauseOnHover
/>
</>)
}
}
Websocket 更新( 可选)
后端:在每个写作(POST/PUT/DELETE)上广播由CarbonNode生成的有效载荷.
import { GLOBAL_REST_PARAMETERS } from "./shared/rest/C6";
GLOBAL_REST_PARAMETERS.websocketBroadcast = (payload) => {
wsServer.broadcast(JSON.stringify(payload));
};
前端: 通过 C6 输入CarbonReact,这样websocket客户端就可以使更新正常化,并且只在行时应用它们
已经在当地州。 除错日志仅在 VERBOSE 已启用.
import { C6 } from "./shared/rest/C6";
root.render(
<React.StrictMode>
<CarbonORM websocket={{ C6, url: "ws://localhost:8888/carbonorm/websocket" }} />
</React.StrictMode>
);
我们的测试工具 欢乐 需求 反应路由器 Dom
进入 MemoryRouter 模式。 这是因为杰斯特没有DOM,因此不能使 HashRouter 或者说
BrowserRouter 组件。 碳反应不需要 React Router Dom 将安装。 您可以使用任何路由器
喜欢。 上面的例子使用了 HashRouter 这是 由于网站的需要
免费使用主机 GitHub 页面。 。 。 .
名为文件夹 状态 在您的项目根
src/state/ 应当包含您所有的状态文件。 这些文件的编写目的应该是要导入
输入您的碳反应扩展组件。 下面的例子显示了上面执行的简单状态文件. 帮助
函数也包含在国家文件中。 这些函数被设计为用于您的 React 组件 。 反应
状态操作必须被一个函数所包裹,因此在初始的页面加载时不能运行.
更新状态与调用一样简单 CarbonORM.instance.setState({})分类名称 CarbonORM 可替换为
任何你喜欢的名字。 通常情况下,您会想要使用您的工程名称 .
import CarbonORM from "CarbonORM";
export interface iUi {
pureWordpressPluginConfigured?: boolean,
documentationVersionURI: string,
isLoaded: boolean,
darkMode: boolean,
}
export const initialUiState: iUi = {
pureWordpressPluginConfigured: false,
documentationVersionURI: '0.0.0',
isLoaded: false,
darkMode: true,
}
export const switchDarkAndLightTheme = () => {
CarbonORM.instance.setState({
darkMode: !CarbonORM.instance.state.darkMode
});
};