1.为什么做这个

这段时间想学习一个前端框架，原因是这样的，我本身是做游戏的，但是自己对前端web比较感兴趣。然后我就选择自己学哪个框架，Angular、react、vue最后选择了react，选择的理由就不说了。那做个什么东西来学习哪？我和一个朋友搞游戏创业，两个人。日常需要记录知识点、记账、任务管理，所有想就做一个自己用的系统吧！所以后面用业余时间做了一些.演示地址118.25.217.253:4000 账号test密码123，有兴趣的朋友可以看看效果。2.使用了哪些技术前端：react react-route material-ui后端：.net core mysql3.有什么特点很多后台都是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 (        
        );  }}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 (      
        );  }}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 (      
    
                
               
      
       设置
                
                  
                     
                    
                   
                 
              
             
               
      
       知识分类
                
                  
                 
                {this.state.datasource.map(item => {            return (              
                      
                     
                  )          })}        
           
    
    );  }}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 (            
    }>                
                        
                         
                         
                                         
                        );    }}export default KnowledgeSystem;

然后整个知识库管理系统就完了