react项目实战
飞天代码
这个作者很懒,什么都没留下…
展开
-
react项目实战(权限模块开发五) 系统首页开发
前面我们完成了登陆界面开发,现在我们来实现下首页界面的开发效果图如下: 是基于bootstrap的模板进行开发。 功能分析:点击上面的按钮可以切换菜单区域的显示与隐藏点击显示待办信息其他功能就不说了,直接上代码吧原创 2017-07-20 10:03:59 · 1963 阅读 · 0 评论 -
react项目实战(权限模块开发六)semantic-ui-react 加入到开发环境中
本打算使用antd的组件来开发模块界面,但今天被semantic-ui-react提供的table组件给震撼了,实在是比antd的table好看多了,就果断决定打算用semantic-ui-react来作为基础组件,而antd作为辅助组件来进行开发。 第一步就是安装semantic-ui-reactcnpm i --save-dev semantic-ui-react第二步自然是安装css了cnp原创 2017-07-27 00:25:11 · 7173 阅读 · 1 评论 -
react项目实战(权限模块开发四) SkinDropDown插件开发
login.js文件中用到了一个SkinDropDwon插件import SkinDropCom from '../../components/SkinDropCom'; ... <SkinDropCom skinsList={loginMd.skinsList} visibility={loginMd.visibility}原创 2017-07-19 11:33:31 · 601 阅读 · 0 评论 -
react项目实战(权限模块开发九)dva的table控件使用
dva的table使用其实没必要讲的,看官方api就知道咋用。 但项目提出了2个需求,在现有控件里面并没有找到相应的方法。 1、点击行时,设置当前行的checkbox进行选中,并将以前选中的行取消,点击行只能是单选。 2、点击checkbox、设置当前行为选中,并不取消以前选中的行,也就是通过点击checkbox实现多选。 3、如果当前行的checkbox被选中,则该行的添加一个背景颜色,方原创 2017-07-31 16:59:58 · 896 阅读 · 0 评论 -
react项目实战(权限模块开发三) 登陆界面开发
首先上效果图: 选择皮肤下拉。功能分析:点击记住用户名区域,checkbox选中,再点击则checkbox取消选中。点击皮肤选择框,会显示皮肤下拉。如果记住用户勾选了,则从本地缓存中读取上次登陆的用户名称。如果记住用户勾选了,则点击登陆提交时,需要将当前用户的名称保存到本地缓存中。点击皮肤选择框,弹出皮肤选择下拉,但点击界面其他地方时将下拉框隐藏。点击登陆按钮时请求后台数据,如果登陆成原创 2017-07-19 11:00:09 · 2151 阅读 · 1 评论 -
react项目实战(权限模块开发二) 项目配置修改
1 由于dva默认是会给class后面添加后缀,由于本项目会引用大量外部css,所以需要关闭该功能。 修改.roadhogrc,在里面添加一句 "entry": "src/index.js", "disableCSSModules":true, "env": {2 编辑 .roadhogrc,使 babel-plugin-import (按需加载)插件生效。 首先安装插件$ npm i原创 2017-07-18 14:07:55 · 1920 阅读 · 0 评论 -
react项目实战(权限模块开发一) 配置路由
第一步:采用dva创建项目,然后通过webstore打开项目(忽略) 项目解构如下:container是我新增加的文件夹用来存放相应的界面。 第二步 分析需求, 打算用react做个权限管理模块,首先是登陆界面,登陆完成后进入到首页框架界面,对权限信息进行维护,维护信息主要是:用户信息User角色信息Role机构信息Org资源信息Resource资源权限信息ResourceACL原创 2017-07-18 13:53:01 · 10537 阅读 · 0 评论 -
react项目实战(权限模块开发八)js文件分开打包
才开发几个界面就发现打包出的index.js文件就有700多kb了,由于部分插件的js文件是不会变化的,单独打包可以充分利用浏览器的缓存功能。第一步:在项目跟目录下面添加一个webpack.config.js文件第二步:为了将原有的js分开打,需要修改entry的指定webpackConfig.entry={ "index": "./src/index.js", vendor: ve原创 2017-07-29 21:34:50 · 5651 阅读 · 1 评论 -
react项目实战(权限模块开发七)通过ajax技术获取数据
react获取数据一般都是通过fetch加上promise的方式来获取,但由于本人对ajax毕竟感情深厚,怎么也的尝试下。在构造函数中调用加载数据的ajax请求: constructor(...props){ //构造函数 绑定事件 super(...props); [ '_loadDate' ].forEach(func=> {原创 2017-07-29 00:25:29 · 2389 阅读 · 0 评论