react實戰系列 —— 起步（mockjs、第一個模組、docusaurus）
其他章節請看：
起步
本篇我們首先引入 mockjs ，然後進入 spug 系統，接著模仿」任務計劃「模組實現一個類似的一級導航頁面（」My任務計劃「），最後玩一下 Facebook 的 docusaurus，將 spug 官網文檔在本地跑起來。
Tip：環境準備請看 上文
mockjs
點擊登錄，提示「請求異常: Network Error」。因為沒有後端提供介面。
筆者使用 mockjs 來繞過，進入系統。
添加 mockjs 只需要三步。
首先安裝依賴：
spug-study> npm i -D mockjs@1
added 1 package, and audited 1789 packages in 54s
107 packages are looking for funding
run `npm fund` for details
33 vulnerabilities (1 low, 16 moderate, 15 high, 1 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
然後新建 src/mock/index.js，內容如下：
import Mock from 'mockjs'
// 開發環境引入 mock
if (process.env.NODE_ENV === 'development') {
Mock.mock('/api/account/login/', 'post', {
"data": { "id": 1, "access_token": "5bb076db06fd4001b85d12e44ab96c56", "nickname": "\u7ba1\u7406\u5458", "is_supper": true, "has_real_ip": true, "permissions": [] }, "error": ""
})
}
最後在 src/index.js 中引入 mock：
+ import './mock'
重啟服務，再次點擊點擊「登錄」，即可進入系統：
Tip：spug 提供了「演示預覽」，只需要關注即可獲取體驗帳號，上面的 mock 數據就是這麼來的。
注：mockjs 這種使用方式，在瀏覽器開發介面是看不到 ajax 請求的。倘若想看到 ajax 請求，你可以把 mockjs 配合 node 的 express 使用，mockjs 僅僅當作造數據的工具，url 匹配就交由 express 處理。
任務計劃
」任務計劃「頁面分為兩部分：上面用於過濾、下面是表格：
My任務計劃
模仿」任務計劃「，最終效果如下：
點擊「開始執行」和刷新表格，「更新於「中的模擬時間都會變化。
程式碼如下：
新增導航」M任務計劃「：
// src/routes.js
import ScheduleIndex from './pages/schedule';
+ import MyScheduleIndex from './pages/myschedule';
{
icon: <ScheduleOutlined/>,
title: '任務計劃',
auth: 'schedule.schedule.view',
path: '/schedule',
component: ScheduleIndex
},
+ {
+ icon: <ScheduleOutlined/>,
+ title: 'M任務計劃',
+ auth: 'myschedule.myschedule.view',
+ path: '/myschedule',
+ component: MyScheduleIndex
+ },
增加 mock 數據：
// src/mock/index.js
// 開發環境引入 mock
if (process.env.NODE_ENV === 'development') {
Mock.mock('/api/schedule/', 'get', {
"data": { "types": ["每天執行"], "tasks": [{ "id": 1, "name": "\u6e05\u7406\u8ba2\u5355\u6570\u636e", "type": "\u6bcf\u5929\u6267\u884c", "command": "echo '\u6e05\u7406\u8ba2\u5355\u6570\u636e'", "targets": ["local"], "trigger": "cron", "trigger_args": { "rule": "0 1 * * *", "start": null, "stop": null }, "is_active": true, "desc": null, "latest_id": null, "rst_notify": { "mode": "0" }, "created_at": "2021-04-28 12:07:56", "created_by_id": 1, "updated_at": "2021-04-28 12:19:16", "updated_by_id": 1, "latest_status": null, "latest_run_time": null, "latest_status_alias": null }] }, "error": ""
})
Mock.mock('/api/myschedule/', 'get', () => ({
"data": [{ "id": 1, "name": "項目A", machine: '192.168.1.3', time: new Date().toLocaleTimeString(), status: '進行中'}],
"error": ""
}))
// 點擊「開始執行」
Mock.mock(/\/api\/myschedule.*/, 'post', () => ({
data: { test: 'test' }, error: ''
}))
}
增加 myschedule 路由組件。共 3 個文件，內容如下：
// src/pages/myschedule/index.js
import React from 'react';
import { observer } from 'mobx-react';
import { Select, Button } from 'antd';
import { SearchForm, AuthDiv, Breadcrumb } from 'components';
import ComTable from './Table';
import store from './store';
export default observer(function () {
return (
<AuthDiv auth="myschedule.myschedule.view">
<Breadcrumb>
<Breadcrumb.Item>首頁</Breadcrumb.Item>
<Breadcrumb.Item>M任務計劃</Breadcrumb.Item>
</Breadcrumb>
<SearchForm>
<SearchForm.Item span={6} title="項目">
<Select allowClear value={store.name} onChange={v => store.name = v} placeholder="請選擇">
<Select.Option value="p1">項目1</Select.Option>
<Select.Option value="p2">項目2</Select.Option>
<Select.Option value="p3">項目3</Select.Option>
<Select.Option value='p4'>項目4</Select.Option>
</Select>
</SearchForm.Item>
<SearchForm.Item span={6} title="機器">
<Select allowClear value={store.machine} onChange={v => store.machine = v} placeholder="請選擇">
<Select.Option value='m1'>機器1</Select.Option>
<Select.Option value='m2'>機器2</Select.Option>
<Select.Option value='m3'>機器3</Select.Option>
<Select.Option value='m4'>機器4</Select.Option>
</Select>
</SearchForm.Item>
<Button type="primary" onClick={store.build}>開始執行</Button>
</SearchForm>
<ComTable />
</AuthDiv>
)
})
// src/pages/myschedule/store.js
import { observable, computed } from 'mobx';
import http from 'libs/http';
class Store {
// 表格數據
@observable records = [];
// 是否正在請求數據
@observable isFetching = false;
// 計算屬性
// 數據源
@computed get dataSource() {
return this.records
}
fetchRecords = () => {
this.isFetching = true;
http.get('/api/myschedule/')
.then(res => this.records = res)
.finally(() => this.isFetching = false)
};
build = () => {
const params = {
name: this.name,
machine: this.machine
}
console.log('params', params)
http.post('/api/myschedule', {params})
.then(res => {
this.fetchRecords()
})
}
}
export default new Store()
// src/pages/myschedule/Table.js
import React from 'react';
import { observer } from 'mobx-react';
import { Tag } from 'antd';
import { Action, TableCard } from 'components';
import store from './store';
@observer
class ComTable extends React.Component {
componentDidMount() {
store.fetchRecords()
}
colors = ['orange', 'green', 'red'];
columns = [{
title: '項目',
dataIndex: 'name',
}, {
title: '機器',
dataIndex: 'machine',
}, {
title: '更新於',
dataIndex: 'time',
}, {
title: '最新狀態',
render: info => {
return <Tag color="blue">{info.status}</Tag>
},
}, {
title: '操作',
width: 180,
render: info => (
<Action>
<Action.Button disabled>詳情</Action.Button>
</Action>
)
}];
render() {
return (
<TableCard
// tKey 必須唯一？
tKey="msi"
rowKey="id"
title="M任務列表"
loading={store.isFetching}
dataSource={store.dataSource}
onReload={store.fetchRecords}
pagination={{
showSizeChanger: true,
showLessItems: true,
showTotal: total => `共 ${total} 條`,
pageSizeOptions: ['10', '20', '50', '100']
}}
columns={this.columns} />
)
}
}
export default ComTable
docusaurus
spug 的官網文檔採用 Facebook 的 docusaurus（快速 構建 高效 的網站，專註處理 內容） 來構建的。
我們可以將 spug 的文檔在克隆到本地。步驟如下：
$ git clone //github.com/JackieLieu/spug.dev.git spug-docs
Cloning into 'spug-docs'...
remote: Enumerating objects: 525, done.
Receiving objects: 73% (384/5remote: Total 525 (delta 0), reused 0 (delta 0), pack-reused 525
Receiving objects: 100% (525/525), 458.97 KiB | 420.00 KiB/s, done.
Resolving deltas: 100% (317/317), done.
進入 spug-docs/website，查看目錄：
spug-docs/website (master)
$ ll
total 21
drwxr-xr-x 1 78614 197609 0 4月 17 17:58 blog/
drwxr-xr-x 1 78614 197609 0 4月 17 17:58 core/
-rw-r--r-- 1 78614 197609 390 4月 17 17:58 package.json
drwxr-xr-x 1 78614 197609 0 4月 17 17:58 pages/
-rw-r--r-- 1 78614 197609 4258 4月 17 17:58 README.md
-rw-r--r-- 1 78614 197609 1289 4月 17 17:58 sidebars.json
-rw-r--r-- 1 78614 197609 3567 4月 17 17:58 siteConfig.js
drwxr-xr-x 1 78614 197609 0 4月 17 17:58 static/
安裝依賴：
PS website> cnpm i
√ Installed 1 packages
√ Linked 845 latest versions
[1/6] scripts.postinstall [email protected] › [email protected] › jpegtran-bin@^4.0.0 run "node lib/install.js", root: "spug-docs\\website\\node_modules\\[email protected]@jpegtran-bin"
√ jpegtran pre-build test passed successfully
[1/6] scripts.postinstall [email protected] › [email protected] › jpegtran-bin@^4.0.0 finished in 954ms
[2/6] scripts.postinstall [email protected] › [email protected] › gifsicle@^4.0.0 run "node lib/install.js", root: "spug-docs\\website\\node_modules\\[email protected]@gifsicle"
√ gifsicle pre-build test passed successfully
[2/6] scripts.postinstall [email protected] › [email protected] › gifsicle@^4.0.0 finished in 751ms
...
[6/6] scripts.postinstall [email protected] › [email protected] › fast-folder-size@^1.6.1 run "node get-sysinternals-du.js", root: "spug-docs\\website\\node_modules\\[email protected]@fast-folder-size"
...
deprecate [email protected] › [email protected] › [email protected] › [email protected] › gulp-header@^1.7.1 Removed event-stream from gulp-header
√ All packages installed (973 packages installed from npm registry, used 59s(network 38s), speed 148.83kB/s, json 846(5.51MB), tarball 0B)
啟動項目：
PS spug-docs\website> npm run start
> start
> docusaurus-start
Failed to start live reload server: RangeError: Maximum call stack size exceeded
LiveReload server started on port 35729
Docusaurus server started on port 3001
注：docusaurus 官網提到系統要求是 node >= 14，筆者嘗試用 node 14 編譯 spug-docs，報各種錯誤，最後嘗試 node 16，卻成功了。
spug 與內網
倘若你要在內網中使用 spug，你可能會遇到如下問題：
cnpm 導致壓縮失敗
將 node_modules 壓縮拷貝，如果安裝 spug 的依賴使用的是 cnpm i，可能會壓縮失敗（筆者嘗試使用了各種壓縮工具），可以改用 npm i。
win7
如果你的環境是 win7，那麼 node 最多只能安裝 node 14 以下的版本，筆者使用 v13.14。
而 node 12 是不能對 spug 項目進行構建的。
其他章節請看：
