• react-后台管理系统 2020-05-19 23:31:12
    react后台管理系统
  • lz在公司用react开发后台管理系统,大家都知道,后台管理系统,最主要的是数据的处理与后台的交互,实现支持App各种各样的功能。 既然说到数据处理,那么react的数据驱动和双向绑定就发挥了很大的作用;另外react的...
    lz在公司用react开发后台管理系统,大家都知道,后台管理系统,最主要的是数据的处理与后台的交互,实现支持App各种各样的功能。
    既然说到数据处理,那么react的数据驱动和双向绑定就发挥了很大的作用;另外react的事件监听机制也是核心,通过触发事件触发函数中的方法,函数方法的罗列成为写后台管理系统的重点。
    ————————————————————————————————————————————————————
    闲话不多说,直接说我的开发模式:
    
    ![这是我项目目录](https://img-blog.csdn.net/20170315105105630?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdG9uZ3NodW9fMTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
    首先,来剖析一下项目的模式:
    **1、我所理解的react,它就是一个View,负责显示;**
    **2、但是通过react我们可以再View层做很多事情,例如对数据的操作和事件的触发;**
    **3、用react将controler层和View层结合,那么对于一个项目来说,缺少的只是Server了;**
    **4、这里的Server我选择了node服务,node服务中有很多框架可供选择:koa、koa2、express等,对于我的项目,由于启动较早,我选用了express,如果现在让我重新做的话,我会毫不犹豫选择koa2;**
    **5、因为所有的操作和请求都是在View层做的,所以服务并不是主要的组成部分,完全可以替换成nginx,httpserver等简单的服务;**
    **6、项目目录中src是根本react本地开发目录,本地开发启动webpack服务,开发完成后最后打包生成静态文件js,css和img图片到dist文件夹中,这时候,只需要在express框架中配置一下静态文件目录指向dist文件夹;**
    
    ![整体架构的示意图](https://img-blog.csdn.net/20170315121050472?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdG9uZ3NodW9fMTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
    
    通过整体架构的示意图,看出整个项目框架分为两部分,一内层react的View层,一是外层的node服务层,下面由内到外分别详细说一下内层外层和内外层之间的桥接;
    **1、**内层react的View层可以理解为一个单页应用,在一个入口页面index.html中存在一个根元素**``**所有的react组件都将渲染在这个根元素内部(下面称其为root元素),再由react引擎渲染成dom元素,了解react的童鞋都知道,react是虚拟的dom,是由js动态生成的dom元素,所以dom元素在root元素中是通过js脚本控制并且不断变化的;
    	a、这里有个疑问,怎么去控制dom的切换和局部刷新?
    	这个问题react已经帮我们做好;react的核心是数据驱动,数据驱动的概念是当数据发生变化,View随之发生改变,es5中提出的数据驱动原理,监听数据的读取触发事件,这个原理跟Vue.js中的数据双向绑定是大同小异;在后台管理系统中,从接口拿到数据,首先对数据进行处理(其实这一步我更愿意让后端的童鞋去做,直接拿到我想要的数据结构~),大多处理成一维数组、二维数组、对象、甚至字符串等,将这些数据在定义的变量中储存——**`setState()`**方法,这样数据就会被监听,每次对数据进行处理后调用这个方法,那么根据双向绑定原理,页面的显示将会刷新,这里刷新的是与修改的数据有关的元素,也就是局部刷新;
    	b、还有对于新接触react的童鞋来说,肯定会存在这样一个疑问,整个项目只有一个html文件,怎么去跳转页面,进行页面间的切换?
    	确实,在整个react项目中,只有一个html文件,也就是上面所说的入口页面,也是存放root元素的页面。在上面已经提到,react所有dom都是虚拟的,由js动态生成的,这里说一下怎么去控制dom元素的生成与删除——react的前端路由;**通过前端路由渲染不同的react组件来实现页面的切换**;在我的项目里,每个页面是一个大的组件,当然这个大的组件可能包含很多小的组件,形成组件嵌套、复用,最后将这个大组件(页面)export出来,让前端路由获取,那么当URL的hash值发生该变的时候,触发事件去寻找与URL相匹配的路由,进而渲染与路由匹配的页面;
    
    **2、**外层node服务,这个node框架仅仅是个server,当然还需要有个**后端路由来render整个项目的入口页面--index.html**,通过node服务的启动,这个入口页面就在服务器上跑起来了,剩下的事情交给react来做;
    
    剩下要说的就是请求:对于后台管理系统来说,一个功能页面相对有大量的请求,各种方式的请求并存,获取数据get请求,提交数据post请求,表单,上传图片、文件,导出数据表格等等······
    
    既然这么多的请求,则对于请求的封装是必不可少的,在我的项目中,选用了fetch作为请求工具,fetch请求是对ajax进行的封装, 下面贴出fetch原生支持率;
    ![fetch](https://img-blog.csdn.net/20170316114212862?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdG9uZ3NodW9fMTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
    可以看出fetch的原生支持率并不高,好在我们项目只需要支持chrome 45以上,那么我就不用操心再引入一些库来对fetch进行封装了。这里也贴出对fetch进行封装的一些主流的方法;
    ```
    引入下面这些 polyfill 后可以完美支持 IE8+ :
    
    1.由于 IE8 是 ES3,需要引入 ES5 的 polyfill: es5-shim, es5-sham
    2.引入 Promise 的 polyfill: es6-promise
    3.引入 fetch 探测库:fetch-detector
    4.引入 fetch 的 polyfill: fetch-ie8
    5.可选:如果你还使用了 jsonp,引入 fetch-jsonp
    6.可选:开启 Babel 的 runtime 模式,现在就使用 async/await
    Fetch polyfill 的基本原理是探测是否存在 window.fetch 方法,如果没有则用 XHR 实现。这也是 github/fetch 的做法,但是有些浏览器(Chrome 45)原生支持 Fetch,但响应中有中文时会乱码,老外又不太关心这种问题,所以我自己才封装了 fetch-detector 和 fetch-ie8 只在浏览器稳定支持 Fetch 情况下才使用原生 Fetch。这些库现在每天有几千万个请求都在使用,绝对靠谱!
    ```
    fetch请求是由页面(browser)发出去的,虽然chrome 45支持fetch,但是我也利用es6的Promise将fetch针对项目需求进行了封装,使其适应各种请求,使其在报错的时候在浏览器的控制台打出错误日志,这对开发很有帮助;
    
    好了,以上所说框架的外围思路,也就是整体的大方向。基本就是这样,以后想到详细的再添加~
    
    本人菜鸟,不喜轻喷,当然,欢迎大家多多说出自己的意见和建议,在这里我们共同进步~
    
    展开全文
  • 从头开始react后台管理系统-安装create-react-app脚手架 introduce 在做微信小程序, 想着顺便做一个管理系统的 随便扯扯 我是个菜鸡,很菜很菜的菜鸡,春招各家凉,现在还是0offer。心情很差。 流程 安装node...
  • React16 React-Router4 webpack3 Antdesign 电商后台管理系统
  • 基于 react + antd 的管理系统 说明 这个是我在学习react时编写的项目,后面完善了部分功能,美化了页面,成为了一个简单的管理系统demo。其中大部分使用的是antd框架里的控件,此外涉及到echarts、redux、跨域交互 ...
  • 使用前端框架react,以及javascript实现的员工管理系统
  • react的一个后台管理系统代码,包括左侧导航,各种表格展示。 如果你是初学者,那么注意以下步骤: 1. nodejs官网下载安装nodejs 2.将本资源放到nodejs的安装路径下,例如我的在D:\Program Files\nodejs\下 3.解压本...
  • 此项目是我接私活进行的项目开发,项目预览拥有全部功能,开源代码禁止全部商用,给客服开发的正式项目...此项目也是我在业余时间学习react后开发的第一个react管理项目,使用了他人的开源基本模版,我在此开源模版...
  • 该项目是基于react全家桶(ReactReact-router-dom、redux、styled-components)开发的一套博客后台管理系统,用于前端小站的管理,主要功能包括游客浏览、文章管理、类别管理、评论通知、推荐设置和用户管理
  • react项目-后台管理系统 react+redux+antd的后台管理系统~~~~~~~~~~~~~~~~
  • React后台管理系统-登录页面 登录页面 <div className="col-md-4 col-md-offset-4">  <div className="panel panel-default login-panel">  <...
  • 在差不多过完React的所有知识后,寻思着开始做一个React的项目,浏览了下GitHub,上面大多是用React做后台管理系统的前端页面。PS: 还没做完,不过大致的模板已经出了,需要的同学可以去我GitHub上clone 界面展示 ...
  • React 后台管理系统项目 2019-11-15 14:24:33
    该项目架构是纯手工搭建的,并非使用脚手架搭建~ 相关技术 react + redux + react-router + sass + antd + eslint + webpack 项目预览地址 https://jesonman.github.io/react-admin-demo/ 项目源码地址 ...
  • create-react-app 搭建框架 主要三方库:react-router-dom redux react-redux UI库:antd 组件分类:分为普通pages(包含login)和 layout(header,sider等),除Login页、404以外,其他页面均嵌套在MyLayout...
  • React 项目-后台管理系统 2019-07-29 20:57:14
    React 项目-后台管理系统 尚硅谷前端研究院 第 1 章: 准备 1.1. 项目描述 1) 此项目为一个前后台分离的后台管理的 SPA, 包括前端 PC 应用和后端应用 2) 包括用户管理 / 商品分类管理 / 商品管理 / 权限...
  • 之前一直开发的技术栈主要是VueJS相关,平时也有阅读React文档,但是没有把React相关技术栈串联起来,形成一个后台管理系统的模板。在学习的过程之中,基于React开发推荐的create-react-app脚手架搭建管理系统模板。 ...
  • React+Antd 后台管理系统 2018-10-20 17:00:51
    说明之前为了熟练antd框架,特别做了这个后台管理系统练手。 正因为要熟悉,所以在设计面板的时候,尽可能想上更多的控件。 于是对照着antd的API,开始往这个项目上堆控件。效果图!Components General Button...
  • 业余时间撸的 react 管理系统,欢迎探讨留言,模板只是一个空模板 前端技术: react + antd + router + redux 本项目没有使用 dva 及 umi集成开发,纯 官方脚手架 暴露配置文件开发,项目配置好了,开发和测试...
  • 前言 React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来...而相对于另一个轻量级前端框架Vue来说,React虽然学习和使用起来难度稍微大一些,但是React的社区相对来说人气更旺,而且在...
  • react-antd实现的后台管理系统,有登录退出功能,登录成功后,能够在不同目录下看到各种折线图,表格,同时有上传文件的功能。登录账号:admin,密码:admin。适合需要学习react-antd的新手,或者需要完成毕设的同学...
1 2 3 4 5 ... 20
收藏数 27,173
精华内容 10,869