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