小而美的 DMS Web 管理系统
TNT 倾情推出极简DMS,复杂系统只需要一个组件搞定,而且暴露出来的api也非常简单,必须要的参数只有action,action返回的是一个Promise对象;
系统截图
基本信息
安装
npm i @tntd/dms-react --save
页面引用
import React from 'react';
import Dms, { mockJsonBySql } from "@tntd/dms-react";
import 'antd/dist/antd.css'; // dms 依赖 antd,正常使用不用引入
const Home = props => (
<div>
<h4>自定义Home</h4>
<pre style={{ backgroundColor: '#fff', padding: '20px' }}>
{JSON.stringify(props, null, 4)}
</pre>
</div>
);
const App = () => (
<Dms
isDevelopmentEnv={true}
title="TNT DMS"
action={(sql, { sqls } = {}) => {
console.log('excute sql:', sql, sqls);
return new Promise(resolve => {
resolve(
mockJsonBySql(sql)
);
});
}}
renderHome={Home}
/>
);
export default App;
前后端约定推荐
url: /dms/execute
method: post
params: str
传入的参数使用AES
进行加密
import CryptoJS from "crypto-js";
// Encrypt加密
const ciphertext = CryptoJS.AES.encrypt(value, "OrF7l2hF81yhVEtxfYKUYxsPsxfM4fZm");
完整示例
import DMS from '@tntd/dms-react';
import CryptoJS from 'crypto-js';
import { message } from 'antd';
import service from './service'; // 改成你自己使用的service
export default () => (
<DMS
title="司南DMS"
action={(sql, { sqls } = {}) => {
sqls = sqls || [sql];
return service.executeSql({
values: sqls.filter(sql => sql && sql.trim()).map(
sql => CryptoJS.AES.encrypt(encodeURIComponent(sql), 'OrF7l2hF81yhVEtxfYKUYxsPsxfM4fZm').toString()
)
}).catch(err => message.error(err.message || err.toString()));
}}
renderHome={<div>自定义 home</div>}
/>
);