react_app 專案開發 (5)_前後端分離_後臺管理系統_開始
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>
...
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
55
5
5
5
5
5
5
5
5
5
5
5
5
5
5