react项目执行流程（上--页面）

Step1 在桌面创建新的文件文件夹workspace

Step2 使用create-react-app脚手架搭建项目

操作

# 全局下载工具：
npm install -g create-react-app
# 下载模板项目：
create-react-app react-admin_client
# 进入模板项目：
cd react-admin_client
# 运行项目：
npm start
# 访问地址：
open http://localhost:3000

拓展：

# 打包发布：
npm run build
# 安装测试服务器
npm install -g serve
# 执行打包好的build文件夹
serve build
# 访问地址：
open http://localhost:5000

Step3 使用git管理项目

# 1. 在gitHub中创建远程仓库，仓库名为ReactAdmin
#【注意：重新注册了一个github账号，导致后续push请求出现问题，解决办法，找到钥匙串，删除记录（加入团队前执行push操作）】
#【注意：千万不要对生成的.git文件删除或进行修改】

# 2.将本地代码生成本地仓库
git init
git add .
git push 
#...git相关命令操作
# 创建分支，切换分支，解决冲突

# 3.将远程仓库克隆到本地
git clone 
# 查看分支
git branch
# 注意：此时将远程的dev分支也克隆到本地，根据远程dev分支生成本地dev分支并切换，瞬间搞定，不需要发请求
git checkout -b dev origin/dev
# 拉取远程dev分支的内容
git pull origin dev

项目目录设计

--- src
	--- api                # ajax相关
	--- assets           # 公共资源
	--- components  # 非路由组件
	--- config           # 配置
	--- pages            # 路由组件
	--- utils              # 工具模块
	App.js               # 应用根组件
	index.js             # js入口文件

添加插件，简化写法

image

rcc   rfc

antd插件的使用，使页面变得炫酷

# 1.下载组件包
npm add antd
# 2.实现样式的按需引入和主题自定义设置
#【注意：获取form表单内容时，不同的版本获取方法不同，当前项目使用新版本获取form表单内容】
#【使用npm eject暴露依赖文件，此时多了两个文件夹（config和scripts），但是不推荐这种方法修改文件】
#【注意：有些icon需要从@ant-design/icons 图标组件包获取，因为新版进行了’拆包‘】
# 例如：import { UserOutlined, LockOutlined } from '@ant-design/icons';

获取表单数据

image

表单验证

image

# 1.自定义验证：不一定好用，但是代表一种能力
		<Form.Item
                        name="password"
                        rules={[
                            {
                                validator(_, value) {
                                    if (!value) {
                                        return Promise.reject('请输入密码');   
                                    }else if(!/^[a-zA-Z][a-zA-Z0-9]{3,11}$/.test(value)){
                                        return Promise.reject('密码必须已字母开头，且由字母数字下划线组成，长度4-12位');
                                    }
                                    return Promise.resolve();
                                }
                            }
                        ]}
                    >
                        <Input
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        placeholder="Password"
                        />
                    </Form.Item>
# 2.声明式验证：直接使用别人定义好的验证规则进行验证
		 <Form.Item
                        name="username"
                        rules={[
                            { required: true, message: '用户名不能为空!' },
                            { min: 4, message: '用户名最少4位!' },
                            { max: 8, message: '用户名最多8位!' },
                            { pattern: /^[a-zA-Z0-9_]+$/, message: '必须英文数字下划线组成!' },
                            {whitespace:true,message:'不要包含空格！'}
                        ]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                    </Form.Item>

页面跳转：

history.push()
history.replace()
posted @ 2021-04-17 20:00  蔚静  阅读(569)  评论(0)    收藏  举报