react_app 项目开发 _前后端分离_后台管理系统_开始 _项目开发

男儿欲遂平生志，六经勤向窗前读。这篇文章主要讲述react_app 项目开发 _前后端分离_后台管理系统_开始相关的知识，希望能为你提供帮助。
项目描述

技术选型
react
API 接口
接口文档，url，请求方式，参数类型，
根据文档描述的方法，进行 postman 测试，看是否能够得到理想的结果
collections - 创建文件取项目名 -
- 添加 url - 指定 post - Body - x-www-form-urlencoded

文章图片

Git 进行版本控制
配置 .gitignore ---- node_modules、.idea
git init
git add *
git commit -m "项目开始"
去 GIthub 创建有一个仓库 reactAdmin ---- react 后台管理项目
git remote add origin https://github......
git push -u origin master
-------------------------------------------------------------
git checkout -b dev // 创建 dev 开发分支，并切换到 dev 分支
git push origin dev // 在远程仓库 Github 上也同步创建 dev 分支

文章图片
在 dev 分支上做开发，可能一天才将 dev 合并一次到 master 分支
开发人员：
git clone https://github.com/......git
git checkout -b dev origin/dev // 将远程仓库分支的东西，同步到本地仓库的 dev 分支
npm start // http://localhost:3000 访问测试 create-react-app 的初始项目
npm install -g serve // 需要先安装支持库，再进行
npm run build // 项目打包成产品
serve build // 运行服务器，执行 build
antd 搭建
按需打包
使用：
import {Button, message} from "antd";
< Button type="primary" onClick={message.info("antd 的 Button 和 message")}> Test< /Button> // 使用主题有颜色
< Button onClick={message.error("message.error 信息对话框")}> Test< /Button> // 不指定 type，则默认 type
npm run start // 更改了配置，必须重启
引入路由
yarn add react-route-dom --dev // @4.3.1

/src/index.js
/src/App/App.jsx
登录界面 /App/Login/Login.jsx
后台管理主界面 /App/Admin/Admin.jsx
5

/src/App/App.jsx

import {Browser, Switch, Route} from "react-route-dom";
import Login from "./Login/Login";
import Admin from "./Admin/Admin";
...
< BrowserRoute>
< Switch>
< Route path="/login" component={Login}> < /Route> {/* 会先试试路由是否匹配*/}
< Route path="/admin" component={Admin}> < /Route> {/* 再自上而下匹配 */}
{/* 如果是 /xxx 会匹配 / 的路由，因为是逐层匹配的*/}
< /Switch>
< /BrowserRoute>
...

登录界面 /App/Login/Login.jsx

import {} from "antd";
...
< Form className="login_form"> {/* From 表单 */}
< Item>
< Input {/* Input 输入框 */}
prefix={< Icon type="user" /> }
placeholder="请输入用户名"
/>
< /Item>

< Form.Item>
< Input {/* Input 输入框 */}
prefix={< Icon type="lock" /> }
placeholder="请输入密码"
/>
< /Form.Item>

< Form.Item>
< Button type="primary" className="login_btn"> 登录< /Button>
< /Form.Item>
< /Form>
...

文章图片

将 FORM 提取出来成 OriginLoginForm
然后包装一下，才能进行表单验证
// 新的组件 Wrapped 包装了原来的 Diy 组件
const WrappedLoginForm = Form.create({name: "WrappedLoginForm "})(OriginLoginForm);

// Wrapped 组件向 Origin 组件传递了一个对象 this.props.form
class OriginLoginForm ....{
checkLogin(){
const userName = this.props.form.getFieldValue("username"); // 会监听输入，实时收集到数据
console.log(userName);
}
render(){
const {getFieldDecorator} = this.props.form;
// this.props.form.getFieldValue("username"); // 会监听输入，实时收集到数据
return (
< Item>
{
getFieldDecorator(\'username\', { // 包装器，包装了 < input ... />
rules: [{ // 配置对象，固定的属性写法
required: true,
message: \'必须输入用户名\'
}]
})(
< Input {/* Input 输入框 */}
prefix={< Icon type="user" /> }
placeholder="请输入用户名"
/>
)
}
< /Item>
... ...
< Form.Item>
< Button type="primary" className="login_btn" onClick={this.checkLogin}> 登录< /Button>
< /Form.Item>
)
}
}
表单验证：
/* 1. 简单却有限制的 - 纯声明式验证配置 */ rules

文章图片

/* 2. 麻烦但灵活的 - validator 验证器 - 半编程式验证 */

文章图片

import React, { Component } from \'react\'; import {Form, Input, Icon, Button} from "antd"; import "./css/Login.css"; import logoPng from "./img/logo.png"; export default class Login extends Component { render(){ return ( < div className="login_box"> < h2> < img src=https://www.songbingjia.com/android/{logoPng} alt="登录 Logo"/> 后台管理系统 < /h2> < WrappedLoginForm/> < /div> ) } }class OriginLogin_form extends Component { checkLogin = ()=> { // 通过包装器获取表单项的值 const userName = this.props.form.getFieldValue("user_name"); const userPWD = this.props.form.getFieldValue("user_password"); this.props.form.validateFields((error, values)=> { if(error){}else{ console.log(userName+" ---- "+userPWD+" ---- 输入合法，可以进行 ajax 请求了") } this.props.form.resetFields(); // 不传参，默认重置所有表单项 }); }; // rule 是字段的描述 checkPassword = (rule, value, callback)=> { console.log(rule); if(!value){ callback("必须输入密码"); }else if(value.length< 4 || value.length> 8){ callback("密码必须 4-8 位"); }else{ callback(); // 不传参数代表成功 } }; render(){ const {getFieldDecorator} = this.props.form; return ( < Form> < Form.Item> { getFieldDecorator("user_name", { initialValue: "admin", rules: [// 声明式验证用户名表单 {required: true, message: "必须输入用户名"}, {min: 4, message: "用户名必须 4 个字符以上"} ] })( < Input prefix={< Icon type="user" /> } placeholder="请输入用户名" /> ) } < /Form.Item> < Form.Item> { getFieldDecorator("user_password", { rules: [// 灵活性更强 - 编程式验证密码表单 {validator: this.checkPassword} ] })( < Input prefix={< Icon type="lock" /> } placeholder="请输入密码" /> ) } < /Form.Item> < Form.Item> < Button type="primary" onClick={this.checkLogin}> 登录< /Button> < /Form.Item> < /Form> ) } }const WrappedLoginForm = Form.create()(OriginLogin_form);

【react_app 项目开发 _前后端分离_后台管理系统_开始】