国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React通用Web應用框架-概述

Aklman / 2300人閱讀

摘要:為什么做這個這段時間想學習一個前端框架,原因是這樣的,我本身是做游戲的,但是自己對前端比較感興趣。然后我就選擇自己學哪個框架,最后選擇了,選擇的理由就不說了。一些字段的顯示一般是文本,字段的編輯根據不同的類型使用不同的控件。

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 (
        
    );
  }
}
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;

然后整個知識庫管理系統就完了

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/97749.html

相關文章

  • 全棧開發自學路線

    摘要:前言這里筑夢師是一名正在努力學習的開發工程師目前致力于全棧方向的學習希望可以和大家一起交流技術共同進步用簡書記錄下自己的學習歷程個人學習方法分享本文目錄更新說明目錄學習方法學習態度全棧開發學習路線很長知識拓展很長在這里收取很多人的建議以后決 前言 這里筑夢師,是一名正在努力學習的iOS開發工程師,目前致力于全棧方向的學習,希望可以和大家一起交流技術,共同進步,用簡書記錄下自己的學習歷程...

    galaxy_robot 評論0 收藏0
  • 全棧開發自學路線

    摘要:前言這里筑夢師是一名正在努力學習的開發工程師目前致力于全棧方向的學習希望可以和大家一起交流技術共同進步用簡書記錄下自己的學習歷程個人學習方法分享本文目錄更新說明目錄學習方法學習態度全棧開發學習路線很長知識拓展很長在這里收取很多人的建議以后決 前言 這里筑夢師,是一名正在努力學習的iOS開發工程師,目前致力于全棧方向的學習,希望可以和大家一起交流技術,共同進步,用簡書記錄下自己的學習歷程...

    Scorpion 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<