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

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={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);