1.为什么做这个
这段时间想学习一个前端框架,原因是这样的,我本身是做游戏的,但是自己对前端web比较感兴趣。然后我就选择自己学哪个框架,Angular、react、vue最后选择了react,选择的理由就不说了。那做个什么东西来学习哪?我和一个朋友搞游戏创业,两个人。日常需要记录知识点、记账、任务管理,所有想就做一个自己用的系统吧!所以后面用业余时间做了一些.演示地址118.25.217.253:4000 账号test密码123,有兴趣的朋友可以看看效果。
2.使用了哪些技术
前端:react react-route material-ui
后端:.net core mysql
3.有什么特点
很多后台都是crud操作,所有我做了通用的crud界面。对于简单的列表页面我们常有的功能就是添加、修改、删除。一些字段的显示一般是文本,字段的编辑根据不同的类型使用不同的控件。所以我想直接一个地方配置字段的这些情况,界面都是通用不是很节省开发时间吗?
4.比如你要做个知识库管理,包括分类管理,知识管理
我们先来看看,做完后知识库展现出的是这样的界面
下图是知识库管理的所有js文件,只有四个文件
a.其中分类管理页面的源码如果下
import React from 'react';
import ObjectPage from '../object/object-page'
//定义列
const columnData = [
{ id: 'name', type: 'text', listshow: true,editshow:true,infoshow:true, label: '名称', sort: true, width: 'auto',verify:{required:true,range:"3-50"} },
];
class KnowledgeCategoryPage extends React.Component {
render() {
return (
<ObjectPage
title='知识分类'
apicontroller='KnowledgeCategory'
showCheckBox={false}
isFullScreen={false}
showOperation={true}
dataPageSize={14}
columnData={columnData} />
);
}
}
export default KnowledgeCategoryPage;
b.知识页面的源码如下
import React from 'react';
import ObjectPage from '../object/object-page'
//定义列
const columnData = [
{ id: 'title', type: 'text', listshow: true,editshow:true,infoshow:true, label: '标题', sort: true, width: 'auto',verify:{required:true,range:"0-50"} },
{ id: 'content', type: 'textare', listshow: false,editshow:true,infoshow:true, label: '内容', sort: true, width: 'auto'},
{ id: 'categoryID', type: 'select', listshow: false,editshow:true,infoshow:false, label: '分类', sort: true, width: 'auto'},
{ id: 'categoryName', type: 'text', listshow: false,editshow:false,infoshow:true, label: '分类', sort: true, width: 'auto'},
];
class KnowledgePage extends React.Component {
render() {
return (
<ObjectPage
title='知识'
apicontroller='Knowledge'
urlpar={this.props.match.params.category}
showCheckBox={false}
isFullScreen={true}
showOperation={false}
dataPageSize={14}
columnData={columnData} />
);
}
}
export default KnowledgePage;
c.知识库左边的菜单源码
import React from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import SettingsIcon from '@material-ui/icons/Settings';
import { Link } from 'react-router-dom'
import ListSubheader from '@material-ui/core/ListSubheader';
import EventNotificationCenter from '../../components/event-notification-center'
import EventNames from '../../config/event-names'
class KnowledgeMenu extends React.Component {
state = { datasource: [] };
componentDidMount() {
EventNotificationCenter.register(EventNames.KnowledgeCategoryMenu, (props) => {
this.setState({ datasource: props });
});
};
componentWillUnmount() {
EventNotificationCenter.unregister(EventNames.KnowledgeCategoryMenu);
};
render() {
return (
<div>
<List component="nav" >
<ListSubheader>设置</ListSubheader>
<ListItem button component={Link} to="/knowledge/category">
<ListItemIcon>
<SettingsIcon />
</ListItemIcon>
<ListItemText inset primary="分类管理" />
</ListItem>
</List>
<List component="nav" >
<ListSubheader>知识分类</ListSubheader>
<ListItem button component={Link} to="/knowledge">
<ListItemText primary="全部" />
</ListItem>
{this.state.datasource.map(item => {
return (
<ListItem key={item.id} button component={Link} to={"/knowledge/" + item.id}>
<ListItemText primary={item.name} />
</ListItem>
)
})}
</List>
</div>
);
}
}
export default KnowledgeMenu;
d.知识库系统的路由文件源码
import React from 'react';
import { Route, Switch } from 'react-router-dom'
import AdminLayout from '../admin-layout';
import KnowledgeMenu from './knowledge-menu'
import KnowledgePage from "./knowledge-page"
import KnowledgeCategoryPage from "./knowledge-category-page"
class KnowledgeSystem extends React.Component {
render() {
return (
<AdminLayout leftMenu={<KnowledgeMenu />}>
<Switch>
<Route path="/knowledge" exact component={KnowledgePage} />
<Route path="/knowledge/category" exact component={KnowledgeCategoryPage} />
<Route path="/knowledge/:category" exact component={KnowledgePage} />
</Switch>
</AdminLayout>
);
}
}
export default KnowledgeSystem;
然后整个知识库管理系统就完了