摘要：為什么做這個(gè)這段時(shí)間想學(xué)習(xí)一個(gè)前端框架，原因是這樣的，我本身是做游戲的，但是自己對(duì)前端比較感興趣。然后我就選擇自己學(xué)哪個(gè)框架，最后選擇了，選擇的理由就不說(shuō)了。一些字段的顯示一般是文本，字段的編輯根據(jù)不同的類型使用不同的控件。

1.為什么做這個(gè)
這段時(shí)間想學(xué)習(xí)一個(gè)前端框架，原因是這樣的，我本身是做游戲的，但是自己對(duì)前端web比較感興趣。然后我就選擇自己學(xué)哪個(gè)框架，Angular、react、vue最后選擇了react，選擇的理由就不說(shuō)了。那做個(gè)什么東西來(lái)學(xué)習(xí)哪？我和一個(gè)朋友搞游戲創(chuàng)業(yè)，兩個(gè)人。日常需要記錄知識(shí)點(diǎn)、記賬、任務(wù)管理，所有想就做一個(gè)自己用的系統(tǒng)吧！所以后面用業(yè)余時(shí)間做了一些.演示地址118.25.217.253:4000 賬號(hào)test密碼123，有興趣的朋友可以看看效果。

2.使用了哪些技術(shù)
前端：react react-route material-ui
后端：.net core mysql
3.有什么特點(diǎn)
很多后臺(tái)都是crud操作，所有我做了通用的crud界面。對(duì)于簡(jiǎn)單的列表頁(yè)面我們常有的功能就是添加、修改、刪除。一些字段的顯示一般是文本，字段的編輯根據(jù)不同的類型使用不同的控件。所以我想直接一個(gè)地方配置字段的這些情況，界面都是通用不是很節(jié)省開(kāi)發(fā)時(shí)間嗎？
4.比如你要做個(gè)知識(shí)庫(kù)管理，包括分類管理，知識(shí)管理
我們先來(lái)看看，做完后知識(shí)庫(kù)展現(xiàn)出的是這樣的界面

下圖是知識(shí)庫(kù)管理的所有js文件，只有四個(gè)文件

a.其中分類管理頁(yè)面的源碼如果下

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.知識(shí)頁(yè)面的源碼如下

import React from "react";
import ObjectPage from "../object/object-page"
//定義列
const columnData = [
  { id: "title", type: "text", listshow: true,editshow:true,infoshow:true, label: "標(biāo)題", sort: true, width: "auto",verify:{required:true,range:"0-50"} },
  { id: "content", type: "textare", listshow: false,editshow:true,infoshow:true, label: "內(nèi)容", 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.知識(shí)庫(kù)左邊的菜單源碼

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 (
      
        
        
          設(shè)置
          
            
              
            
            
          
        

        
          知識(shí)分類
          
            
          

          {this.state.datasource.map(item => {
            return (
              
                
              
            )
          })}
        
      
    );
  }
}

export default KnowledgeMenu;

d.知識(shí)庫(kù)系統(tǒng)的路由文件源碼

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;

然后整個(gè)知識(shí)庫(kù)管理系統(tǒng)就完了