查看其他章节：
React 实战系列
开始
本文我们先介绍，然后进入spug系统，然后模仿“任务计划”模块实现类似的一级导航页面（“我的任务计划”），最后，来玩玩，在本地运行spug官网文档。
提示：环境准备见上文
点击登录，会提示“请求异常：错误”。因为没有后端提供接口。
作者使用绕过进入系统。
添加只需三个步骤。
首先安装依赖项：
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": "u7ba1u7406u5458", "is_supper": true, "has_real_ip": true, "permissions": [] }, "error": ""
})
}
最后在 src/index.js 中引入 mock：
+ import './mock'
重启服务，再次点击“登录”，即可进入系统：
提示：spug提供“demo预览”，跟着获取体验号即可，上面的mock数据就这么来了。
注意：这种使用方式，在浏览器开发界面是看不到ajax请求的。如果想看ajax请求，可以配合node使用，作为创建数据的工具，url匹配会交给.
任务计划
“任务计划”页面分为两部分：上半部分用于过滤，下半部分是表格：
我的任务计划
模仿“任务计划”，最终效果如下：
点击“Start ”，刷新表中的仿真时间，“ on”会发生变化。
代码如下：
添加导航“M任务计划”：
// src/routes.js
import ScheduleIndex from './pages/schedule';
+ import MyScheduleIndex from './pages/myschedule';
{
icon: ,
title: '任务计划',
auth: 'schedule.schedule.view',
path: '/schedule',
component: ScheduleIndex
},
+ {
+ icon: ,
+ title: 'M任务计划',
+ auth: 'myschedule.myschedule.view',
+ path: '/myschedule',
+ component: MyScheduleIndex
+ },
添加模拟数据：
// src/mock/index.js
// 开发环境引入 mock
if (process.env.NODE_ENV === 'development') {
Mock.mock('/api/schedule/', 'get', {
"data": { "types": ["每天执行"], "tasks": [{ "id": 1, "name": "u6e05u7406u8ba2u5355u6570u636e", "type": "u6bcfu5929u6267u884c", "command": "echo 'u6e05u7406u8ba2u5355u6570u636e'", "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: ''
}))
}
添加路由组件。一共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 (
首页
M任务计划
store.name = v} placeholder="请选择">
项目1
项目2
项目3
项目4
store.machine = v} placeholder="请选择">
机器1
机器2
机器3
机器4
)
})
// 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 {info.status}
},
}, {
title: '操作',
width: 180,
render: info => (
详情
)
}];
render() {
return (
`共 ${total} 条`,
pageSizeOptions: ['10', '20', '50', '100']
}}
columns={this.columns} />
)
}
}
export default ComTable
Spug的官网文档搭建用（快速搭建高效网站，专注内容）。
我们可以在本地克隆 spug 文档。步骤如下：
$ git clone https://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/ 并查看目录：
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 docusaurus@1.14.7 › imagemin-jpegtran@6.0.0 › jpegtran-bin@^4.0.0 run "node lib/install.js", root: "spug-docs\website\node_modules\_jpegtran-bin@4.0.0@jpegtran-bin"
√ jpegtran pre-build test passed successfully
[1/6] scripts.postinstall docusaurus@1.14.7 › imagemin-jpegtran@6.0.0 › jpegtran-bin@^4.0.0 finished in 954ms
[2/6] scripts.postinstall docusaurus@1.14.7 › imagemin-gifsicle@6.0.1 › gifsicle@^4.0.0 run "node lib/install.js", root: "spug-docs\website\node_modules\_gifsicle@4.0.1@gifsicle"
√ gifsicle pre-build test passed successfully
[2/6] scripts.postinstall docusaurus@1.14.7 › imagemin-gifsicle@6.0.1 › gifsicle@^4.0.0 finished in 751ms
...
[6/6] scripts.postinstall docusaurus@1.14.7 › tree-node-cli@1.5.2 › fast-folder-size@^1.6.1 run "node get-sysinternals-du.js", root: "spug-docs\website\node_modules\_fast-folder-size@1.6.1@fast-folder-size"
...
deprecate docusaurus@1.14.7 › markdown-toc@1.2.0 › remarkable@1.7.4 › autolinker@0.28.1 › 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-docswebsite> 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
注意：官网提到系统要求是node >= 14，笔者尝试用node 14编译spug-docs，报各种错误，最后尝试node 16，但成功了。
spug 和
如果想在内网使用spug，可能会遇到以下问题：
cnpm 导致压缩失败
会压缩副本，如果安装spug的依赖是cnpm i，可能会压缩失败（作者尝试了各种压缩工具），可以用npm i代替。
win7
如果你的环境是win7，那么node最多只能安装node 14以下的版本，我用v13.14.
并且节点 12 无法构建 spug 项目。
查看其他章节：
React 实战系列
© 版权声明
本站下载的源码均来自公开网络收集转发二次开发而来，
若侵犯了您的合法权益，请来信通知我们1413333033@qq.com，
我们会及时删除，给您带来的不便，我们深表歉意。
下载用户仅供学习交流，若使用商业用途，请购买正版授权，否则产生的一切后果将由下载用户自行承担，访问及下载者下载默认同意本站声明的免责申明，请合理使用切勿商用。
THE END
暂无评论内容