React通用Web应用框架-概述

Aklman 发布于2019-08-23 11:57 / 2205人阅读

摘要：为什么做这个这段时间想学习一个前端框架，原因是这样的，我本身是做游戏的，但是自己对前端比较感兴趣。然后我就选择自己学哪个框架，最后选择了，选择的理由就不说了。一些字段的显示一般是文本，字段的编辑根据不同的类型使用不同的控件。

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;

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

idc机房托管服务器托管前端框架react react-web web框架 web开发框架

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97749.html

React通用Web应用框架-概述

摘要：为什么做这个这段时间想学习一个前端框架，原因是这样的，我本身是做游戏的，但是自己对前端比较感兴趣。然后我就选择自己学哪个框架，最后选择了，选择的理由就不说了。一些字段的显示一般是文本，字段的编辑根据不同的类型使用不同的控件。 1.为什么做这个这段时间想学习一个前端框架，原因是这样的，我本身是做游戏的，但是自己对前端web比较感兴趣。然后我就选择自己学哪个框架，Angular、react...

Lorry_Lu 2019-08-05 14:58 评论0 收藏0
全栈开发自学路线

摘要：前言这里筑梦师是一名正在努力学习的开发工程师目前致力于全栈方向的学习希望可以和大家一起交流技术共同进步用简书记录下自己的学习历程个人学习方法分享本文目录更新说明目录学习方法学习态度全栈开发学习路线很长知识拓展很长在这里收取很多人的建议以后决前言这里筑梦师,是一名正在努力学习的iOS开发工程师,目前致力于全栈方向的学习,希望可以和大家一起交流技术,共同进步,用简书记录下自己的学习历程...

wwolf 2019-08-05 13:37 评论0 收藏0
全栈开发自学路线

摘要：前言这里筑梦师是一名正在努力学习的开发工程师目前致力于全栈方向的学习希望可以和大家一起交流技术共同进步用简书记录下自己的学习历程个人学习方法分享本文目录更新说明目录学习方法学习态度全栈开发学习路线很长知识拓展很长在这里收取很多人的建议以后决前言这里筑梦师,是一名正在努力学习的iOS开发工程师,目前致力于全栈方向的学习,希望可以和大家一起交流技术,共同进步,用简书记录下自己的学习历程...

CoXie 2019-07-31 17:57 评论0 收藏0
全栈开发自学路线

摘要：前言这里筑梦师是一名正在努力学习的开发工程师目前致力于全栈方向的学习希望可以和大家一起交流技术共同进步用简书记录下自己的学习历程个人学习方法分享本文目录更新说明目录学习方法学习态度全栈开发学习路线很长知识拓展很长在这里收取很多人的建议以后决前言这里筑梦师,是一名正在努力学习的iOS开发工程师,目前致力于全栈方向的学习,希望可以和大家一起交流技术,共同进步,用简书记录下自己的学习历程...

galaxy_robot 2019-06-28 18:47 评论0 收藏0
全栈开发自学路线

摘要：前言这里筑梦师是一名正在努力学习的开发工程师目前致力于全栈方向的学习希望可以和大家一起交流技术共同进步用简书记录下自己的学习历程个人学习方法分享本文目录更新说明目录学习方法学习态度全栈开发学习路线很长知识拓展很长在这里收取很多人的建议以后决前言这里筑梦师,是一名正在努力学习的iOS开发工程师,目前致力于全栈方向的学习,希望可以和大家一起交流技术,共同进步,用简书记录下自己的学习历程...

Scorpion 2019-08-22 16:34 评论0 收藏0