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

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

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

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

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

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

技术点

前端:react  react-route material-ui

后端:.net core mysql

哪些尝试?

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

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

分类管理页面里是这样的

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 (
<ObjectPage
title='知识分类'
apicontroller='KnowledgeCategory'
showCheckBox={false}
isFullScreen={false}
showOperation={true}
dataPageSize={14}
columnData={columnData} />
);
}
}
export default KnowledgeCategoryPage;

知识页面是这样的

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 (
<ObjectPage
title='知识'
apicontroller='Knowledge'
urlpar={this.props.match.params.category}
showCheckBox={false}
isFullScreen={true}
showOperation={false}
dataPageSize={14}
columnData={columnData} />
);
}
}
export default KnowledgePage;

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

小二助手(react应用框架)-概述的更多相关文章

  1. 小二助手-react.js分块加载

    小二助手在线演示地址:http://118.25.217.253:8000  账号test 密码123 小二助手是用material-ui开发的,感觉国内使用的人数不是特别多,所以创建了一个qq交流群 ...

  2. React框架概述

    一.React框架概述 官网:https://reactjs.org/       最新版V16.10 中文网:https://zh-hans.reactjs.org/ 中文社区网:https://r ...

  3. Entity Framework 学习总结之一:ADO.NET 实体框架概述

    http://www.cnblogs.com/xlovey/archive/2011/01/03/1924800.html ADO.NET 实体框架概述 新版本中的 ADO.NET 以新实体框架为特色 ...

  4. ThinkPHP框架概述

    框架概述 1.什么是框架 框架,即framework.其实就是某种应用的半成品,就是一组组件,供你选用完成你自己的系统. 2.框架的应用场景 ① 代码重用 ② 合理分工 ③ 解决团队协作开发问题 3. ...

  5. iOS Foundation 框架概述文档:常量、数据类型、框架、函数、公布声明

    iOS Foundation 框架概述文档:常量.数据类型.框架.函数.公布声明 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业 ...

  6. struts2框架概述

    框架概述 什么是框架,为什么使用框架,框架优点 框架(framework)是一个基本概念上的结构,用于去解决或者处理复杂的问题 框架,即framework.其实就是某种应用的半成品,就是一组组件,供你 ...

  7. 芝麻软件: Python爬虫进阶之爬虫框架概述

    综述 爬虫入门之后,我们有两条路可以走. 一个是继续深入学习,以及关于设计模式的一些知识,强化Python相关知识,自己动手造轮子,继续为自己的爬虫增加分布式,多线程等功能扩展.另一条路便是学习一些优 ...

  8. React 等框架使用 index 做 key 的问题

    React 等框架使用 index 做 key 的问题 假如有两个树,一个是之前,一个是更变之后,我们抽象成两种可能性. 插入内容在最后 插入内容在最前 关于插在中间,原理一样,就不阐述. 使用 ul ...

  9. 写写Django中DRF框架概述以及序列化器对象serializer的构造方法以及使用

    写写Django中DRF框架概述以及序列化器对象serializer的构造方法以及使用 一.了解什么是DRF DRF: Django REST framework Django REST framew ...

  10. Python爬虫进阶一之爬虫框架概述

    综述 爬虫入门之后,我们有两条路可以走. 一个是继续深入学习,以及关于设计模式的一些知识,强化Python相关知识,自己动手造轮子,继续为自己的爬虫增加分布式,多线程等功能扩展.另一条路便是学习一些优 ...

随机推荐

  1. EffectiveJava读书笔记

    less, but is more. 创建和销毁对象 避免创建不必要对象 消除过期的对象引用 使可变性最小 泛型 用标记接口定义类型 检查参数有效性 返回零长度的数组或集合,而不是null 需要精确答 ...

  2. appium===setup/setupclass的区别,以及@classmathod的使用方法

    一.装饰器 1.用setUp与setUpClass区别 setup():每个测试case运行前运行 teardown():每个测试case运行完后执行 setUpClass():必须使用@classm ...

  3. 【反演复习计划】【bzoj3529】数表

    Orz PoPoQQQ大爷 按照他ppt的解法,这题可以划归到之前的题了OrzOrz 跪wy写的题解(Stealth Assassin)https://www.luogu.org/wiki/show? ...

  4. xpath用法(持续更新ing)

    article:选取所有article元素的所有子节点 /article:选取根元素article article/a:选取所有属于article的子元素的a元素 //div:选取所有div元素 ar ...

  5. 肢解 HTTP 服务器构建

    更好阅读请戳 这里 1. 最简单的 http 服务器 // server.js var http = require("http"); http.createServer(func ...

  6. selenium 下拉框处理

    web应用中有很多时候我们会遇见<select></select>标签的下列列表框,一般是无法直接去操作下列列表中的选择的.selenium webdriver 提供了专门操作 ...

  7. selenium 难定位元素,时间插件,下拉框定位,string包含,定位列表中的一个,技巧

    关于frame: 如果网页存在iframe的话,传统的定位有时候找不到元素,需要切换frame: # 切换到leftFrame定位“测井设计” driver.switch_to_frame(" ...

  8. 识别浏览器的JavaScript引擎的方法

    答案来自StackOverflow,打开这个网页http://jsbin.com/opuvas即可,这个网页也是答题者自己写的. 二维码是这个网址.网页内有统计访问量,作者想知道对多少人有用,建议尊重 ...

  9. 洛谷 P3383 【模板】线性筛素数-线性筛素数(欧拉筛素数)O(n)基础题贴个板子备忘

    P3383 [模板]线性筛素数 题目描述 如题,给定一个范围N,你需要处理M个某数字是否为质数的询问(每个数字均在范围1-N内) 输入输出格式 输入格式: 第一行包含两个正整数N.M,分别表示查询的范 ...

  10. HDU 1015 Safecracker【数值型DFS】

    Safecracker Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...