react后台项目开发(一)
1. 项目开发准备
- 描述项目
- 技术选型
- api 接口(4部分:3请求{url,请求方式,请求参数格式}, 1响应数据格式)/ 接口文档/ 测试接口
2. 启动项目开发
- 使用react脚手架创建项目
- 开发环境运行: npm start
- 生产环境打包运行: npm run build serve build
3. git管理项目
- 创建远程仓库
- 创建本地仓库
- 配置 .gitignore
- git init
- git add .
- git commit -m "init"
- 将本地仓库推送到远程仓库
- git remote add origin url
- git push origin master
- 在本地创建dev分支,并推送到远程
- gitcheckout -b dev
- git push origin dev
- 如果本地有修改
- git add.
- git commit -m "xxx"
- git push origin dev
- 新的同时:克隆仓库
- git clone url
- git checkout -b dev origin/dev
- git pull origin dev
- 如果远程修改
- git pull origin dev
4. 创建项目的基本结构
api: ajax请求模块
components: 非路由组件
pages: 理由组件
app.js: 应用的根组件
index.js: 入口js
5. 引入antd
下载antd包 ( npm i antd -d )
按需打包:只打包import引入组件的js/css
下载工具包 ( npm i react-app-rewired customize-cra babel-plugin-import )
config-overrides.js
package.jason
自定义主题
下载工具包 ( npm i less less-loader -d )
config-overrides.js
使用antd的组件
根据antd的文档编写
6. 引入路由
下载: react-router-dom
拆分应用路由:
Login: 登陆
Admin: 后台管理界面
注册路由:
<BrowserRouter> //路由器
<Switch> //切换其中一个路由
<Route path='' component={ }/> //路由
7. Login的静态组件
- 自定义了一部分样式布局
- 使用antd的组件实现登陆表单界面
- Form / Form.Item
- Input
- Icon
- Button
8. 收集表单数据和表单的前台验证
1. form 对象
如何让包含<Form> 的组件得到form对象?
WrapLoginForm = Form.create()(LoginForm)
WrapLoginForm是LoginForm的父组件,它给LoginForm传入form属性,用到了高阶函数和高阶组件的技术
2. 操作表单数据
form.getFiledDecorator('标识名称', { initialValue:初始值,rules:[]})(<Input/>)包装表单项组件标签
form.getFieldsValue(); 得到包含所有输入数据的对象
form.getFieldValue(id); 根据标识得到对应字段输入的数据
3. 前台表单验证
1. 声明式实时表单验证
form.getFieldDecorator('标识名称',{rules:[{min:4,message:'错误提示信息'}]}) (<Input/>)
2.自定义表单验证
form.getFieldDecorator('标识名称',{rules:{validator:this.validatePwd}})(<Input/>)
validatePwd = (rule,value,callback)=>{ if(问题) callback('错误提示') else callback()
}
3.点击提示时统一验证
form.validateFields((error,values)=>{
if(!error){ 通过验证,发送ajax请求}
})
9. 高阶函数和高阶组件
react后台项目开发(一)的更多相关文章
- Expo大作战(三)--针对已经开发过react native项目开发人员有针对性的介绍了expo,expo的局限性,开发时项目选型注意点等
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
- 【共享单车】—— React后台管理系统开发手记:项目工程化开发
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 【共享单车】—— React后台管理系统开发手记:主页面架构设计
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- react实战项目开发(2) react几个重要概念以及JSX语法
前言 前面我们已经学习了利用官方脚手架搭建一套可以应用在生产环境下的React开发环境.那么今天这篇文章主要先了解几个react重要的概念,以及讲解本文的重要知识JSX语法 React重要概念 [思想 ...
- 【共享单车】—— React后台管理系统开发手记:AntD Form基础组件
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 【共享单车】—— React后台管理系统开发手记:Router 4.0路由实战演练
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- react实战项目开发(1) 搭建react开发环境初始化项目(Create-react-app)
前言 Create React App npm install -g create-react-app create-react-app my-app cd my-app npm start 执行命令 ...
- 【共享单车】—— React后台管理系统开发手记:Redux集成开发
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 【共享单车】—— React后台管理系统开发手记:权限设置和菜单调整(未完)
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
随机推荐
- Python流程控制之循环结构
目录 while循环 for循环 嵌套循环 break.continue.pass 练习 当出现有规律或者是重复的事情就可以使用循环. 1.循环变量初始化 2.循环条件 3.循环体 4.改变循环变量 ...
- 【Html JS】使用问题记录
[Html JS]使用问题记录 ================================================================ 1.td 文字换行 2.正则表达式 = ...
- 205K+程序员关注过的问题:为什么不应该使用Java的原始类型?
在逛 Stack Overflow 的时候,发现了一些访问量像熊耳山一样高的问题,比如说这个:为什么不应该使用Java的原始类型?访问量足足有 205K+,这不得了啊!说明有很多很多的程序员被这个问题 ...
- Linux Bash文本操作之grep篇
Linux grep命令用于查找文件里符合条件的字符串.是文本检索中常用的工具之一. grep 指令在文件中查找能够匹配指定模式字符串的行.如果没有指定文件名,或者文件名为 - ,则从标准输入设 ...
- 一起学MyBatis之入门篇(2)
概述 本文主要讲解MyBatis中类型转换的功能,其实在MyBatis中,提供了默认的数据类型之间的转换,但只是基本数据类型的转换,如果跨类型进行转换,则需要自定义转换类,如java中是boolean ...
- 【nginx+keepalived】nginx+keepalived搭建高可用
一.结构及环境 1.1 环境介绍 操作系统:centos7 nginx+keepalived:106.53.73.200 master nginx+keepalived:182.254.184.102 ...
- tp5.1批量删除商品
选中要删除的商品,点击批量删除 先在控制器使用sql语句查出商品信息goods 然后在html源码中使用goods变量. <table> {foreach $goods as $item} ...
- jquery实现商品sku多属性选择(商品详情页)
转载于https://blog.csdn.net/csdn924618338/article/details/51455595 实现效果 源码 <!DOCTYPE HTML> <ht ...
- ABAP分享六 alv显示的几种方式的简单示例
方法1,也是大家常见的方法通过函数 REUSE_ALV_GRID_DISPLAY TYPES: BEGIN OF ty_spfli, "定义结构 carrid like s ...
- 如何编写一个工程文件夹下通用的Makefile
新建工程文件夹,在里面新建 bsp.imx6ul.obj 和project 这 3 个文件夹,完成以后如图所示: 新建的工程根目录文件夹 其中 bsp 用来存放驱动文件:imx6ul 用来存放跟芯片有 ...