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

项目描述

技术选型

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

/src/App/App.jsx

import {Browser, Switch, Route} from "react-route-dom";

import Login from "./Login/Login";

import Admin from "./Admin/Admin";

...

<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>

</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={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 项目开发 (5)_前后端分离_后台管理系统_开始

推荐阅读