前段时间想学习一个前端框架，原因是这样的，我本身是做游戏的，但是自己对前端web比较感兴趣。

然后我就选择自己学哪个框架，Angular、react、vue

最后选择了react，选择的理由就不说了

那做个什么东西来学习哪？我和一个朋友搞游戏创业，两个人。日常需要记录知识点、记账、任务管理，所有想就做一个自己用的系统吧！

所以后面用业余时间做了一些.浏览地址http://118.25.217.253:4000 账号test密码123

我先说下这个东西用了哪些技术，做了哪些尝试吧，后面有时间慢慢更新内容

技术点

前端：react  react-route material-ui

后端：.net core mysql

哪些尝试？

很多后台都是crud操作，所有我做了通用的crud界面。

那么比如你要做个知识库管理，包括分类管理，知识管理。

分类管理页面里是这样的

  1. import React from 'react';
  2. import ObjectPage from '../object/object-page'
  3.  
  4. //定义列
  5. const columnData = [
  6.   { id: 'name', type: 'text', listshow: true,editshow:true,infoshow:true, label: '名称', sort: true, width: 'auto',verify:{required:true,range:"3-50"} },
  7. ];
  9. class KnowledgeCategoryPage extends React.Component {
  10.   render() {
  11.     return (
  12.         <ObjectPage 
  13.         title='知识分类' 
  14.         apicontroller='KnowledgeCategory' 
  15.         showCheckBox={false} 
  16.         isFullScreen={false} 
  17.         showOperation={true}
  18.         dataPageSize={14}
  19.         columnData={columnData} />
  20.     );
  21.   }
  22. }
  23. export default KnowledgeCategoryPage;

知识页面是这样的

  1. import React from 'react';
  2. import ObjectPage from '../object/object-page'
  3. //定义列
  4. const columnData = [
  5.   { id: 'title', type: 'text', listshow: true,editshow:true,infoshow:true, label: '标题', sort: true, width: 'auto',verify:{required:true,range:"0-50"} },
  6.   { id: 'content', type: 'textare', listshow: false,editshow:true,infoshow:true, label: '内容', sort: true, width: 'auto'},
  7.   { id: 'categoryID', type: 'select', listshow: false,editshow:true,infoshow:false, label: '分类', sort: true, width: 'auto'},
  8.   { id: 'categoryName', type: 'text', listshow: false,editshow:false,infoshow:true, label: '分类', sort: true, width: 'auto'},
  9. ];
  11. class KnowledgePage extends React.Component {
  12.   render() {
  13.     return (
  14.       <ObjectPage 
  15.       title='知识' 
  16.       apicontroller='Knowledge' 
  17.       urlpar={this.props.match.params.category} 
  18.       showCheckBox={false} 
  19.       isFullScreen={true}
  20.       showOperation={false}  
  21.       dataPageSize={14} 
  22.       columnData={columnData} />
  23.     );
  24.   }
  25. }
  26. export default KnowledgePage;

另外两个文件一个是知识页面的左边分类选择控件，另外一个是负责路由（可以拆分js包），然后就没有了…….

posted on 2018-09-05 11:30 小芒果 阅读(…) 评论(…) 编辑 收藏

版权声明：本文为liuhaili原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/liuhaili/p/9591138.html