react 高效高质量搭建后台系统 系列 —— 结尾

其他章节请看：

react 高效高质量搭建后台系统 系列

尾篇

本篇主要介绍表单查询、表单验证、通知（WebSocket）、自动构建。最后附上 myspug 项目源码。

项目最终效果：

表单查询

需求：给角色管理页面增加表格查询功能，通过输入角色名称，点击查询，从后端检索出相应的数据。

效果如下：

spug 中的实现

[spug][spug] 中的这类查询都是在前端过滤出相应的数据（没有查询按钮），因为 spug 中大多数的 table 都是一次性将数据从后端拿回来。

spug 中角色管理搜索相关代码如下：

• 随着 input 中输入要搜索的角色名称更改 store 中的 f_name 字段：

<SearchForm>
  <SearchForm.Item span={8} title="角色名称">
    <Input allowClear value={store.f_name} onChange={e => store.f_name = e.target.value} placeholder="请输入"/>
  </SearchForm.Item>
</SearchForm>

注：select 中的值不同于 input（e.target.value），直接就是第一个参数，所以得这么写：onChange={v => store.f_xx = v}

• 表格的数据源会动态过滤：

@computed get dataSource() {
  // 从 this.records 中过滤出数据
  let records = this.records;
  if (this.f_name) records = records.filter(x => x.name.toLowerCase().includes(this.f_name.toLowerCase()));
  return records
}

实现

相对 spug 的查询，现在思路得变一下：通过点击搜索按钮，重新请求数据，附带查询关键字给后端。

核心逻辑如下：

// myspug\src\pages\system\role\index.js

import ComTable from './Table';
import { AuthDiv, SearchForm, } from '@/components';
import store from './store';

export default function () {
  return (
    <AuthDiv auth="system.role.view">
      <SearchForm>
        <SearchForm.Item span={6} title="角色名称">
          <Input allowClear value={store.f_name} onChange={e => store.f_name = e.target.value} placeholder="请输入" />
        </SearchForm.Item>
        <SearchForm.Item span={6}>
          <Button type="primary" onClick={() => {
            // 重置为第一页
            store.setCurrent(1)
            store.fetchRecords();
          }}>查询</Button>
        </SearchForm.Item>
      </SearchForm>
      <ComTable />
    </AuthDiv>
  )
}

Store 中就是在请求表格时将过滤参数带上：

 class Store {
+  @observable f_name;

   @observable records = [];

   _getTableParams = () => ({current: this.current, ...this.tableOptions})

+  @action setCurrent(val){
+    this.current = val
+  }

   fetchRecords = () => {
     const realParams = this._getTableParams()
+    // 过滤参数
+    if(this.f_name){
+      realParams.role_name = this.f_name
+    }
+    console.log('realParams', realParams)
     this.isFetching = true;
     http.get('/api/account/role/', {params: realParams})
       .then(res => {

Tip：剩余部分就没什么了，比如样式直接复制 spug 中（笔者直接拷过来页面有点问题，稍微注释了一段 css 即可）；SearchForm 就是对表单简单封装，统一 spug 中表单的写法：

// myspug\src\components\SearchForm.js
import React from 'react';
import { Row, Col, Form } from 'antd';
import styles from './index.module.less';

export default class extends React.Component {
  static Item(props) {
    return (
      <Col span={props.span} offset={props.offset} style={props.style}>
        <Form.Item label={props.title}>
          {props.children}
        </Form.Item>
      </Col>
    )
  }

  render() {
    return (
      <div className={styles.searchForm} style={this.props.style}>
        <Form style={this.props.style}>
          <Row gutter={{md: 8, lg: 24, xl: 48}}>
            {this.props.children}
          </Row>
        </Form>
      </div>
    )
  }
}

效果

实现效果如下：

输入关键字name，点击查询按钮，重新请求表格数据（从第一页开始）

表单验证

spug 中的表单验证

关于表单验证，spug 中前端写的很少。请看以下一个典型示例：

新建角色时，为空等校验都是后端做的。

虽然后端一定要做校验，但前端最好也做一套。

实现

笔者表单的验证思路是：

• 必填项都有值（还可以包括其他逻辑），提交按钮才可点，否则置灰
• 点击提交后，前端根据需求做进一步验证，例如名字不能有空格

以下是新增和编辑时的效果（重点关注确定按钮）：

• 当必填项都有值时确定按钮可点，否则置灰
• 必填项都有值时，点击确定按钮做进一步校验（例如名字不能有空格）
• 编辑时如果都有值，则确定按钮可点击

表单

先实现表单，效果如下：

核心代码如下：

• 首先定义表单模块：

// myspug\src\pages\system\role\Form.js
import http from '@/libs/http';
import store from './store';

export default observer(function () {
    // 文档中未找到这种解构使用方法
    const [form] = Form.useForm();
    // useState 函数组件中使用 state
    // loading 默认是 flase
    const [loading, setLoading] = useState(false);

    function handleSubmit() {
        setLoading(true);
        // 取得表单字段的值
        const formData = form.getFieldsValue();
        // 新建时 id 为 undefined
        formData['id'] = store.record.id;
        http.post('/api/account/role/', formData)
            .then(res => {
                message.success('操作成功');
                store.formVisible = false;
                store.fetchRecords()
            }, () => setLoading(false))
    }

    return (
        // Modal 对话框
        <Modal
            visible
            maskClosable={false}
            title={store.record.id ? '编辑角色' : '新建角色'}
            onCancel={() => store.formVisible = false}
            confirmLoading={loading}
            onOk={handleSubmit}>
            <Form form={form} initialValues={store.record} labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
                <Form.Item required name="name" label="角色名称">
                    <Input placeholder="请输入角色名称" />
                </Form.Item>
                <Form.Item name="desc" label="备注信息">
                    <Input.TextArea placeholder="请输入角色备注信息" />
                </Form.Item>
            </Form>
        </Modal>
    )
})

• 然后在入口页中根据 store 中的 formVisible 控制显隐藏表单组件

// myspug\src\pages\system\role\index.js
export default observer(function () {
   return (
     <AuthDiv auth="system.role.view">
       <SearchForm>
         </SearchForm.Item>
       </SearchForm>
       <ComTable />
+      {/* formVisible 控制表单显示 */}
+      {store.formVisible && <ComForm />}
     </AuthDiv>
   )
})

• 点击新建是调用 store.showForm() 让表单显示出来

 // myspug\src\pages\system\role\store.js

 class Store {
+  @observable formVisible = false;
+  @observable record = {};


+  // 显示新增弹框
+  // info 或许是为了编辑
+  showForm = (info = {}) => {
+    this.formVisible = true;
+    this.record = info
+  };

表单校验

在表单基础上实现校验。

主要在 Form.js 中修改，思路如下：

• 首先利用 okButtonProps 控制确定按钮是否可点
• 然后通过 shouldUpdate={emptyValid} 自定义字段更新逻辑
• 可提交后，在做进一步判断，例如名字不能为空

 // myspug\src\pages\system\role\Form.js
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { observer } from 'mobx-react';
 import { Modal, Form, Input, message } from 'antd';
 import http from '@/libs/http';
     // useState 函数组件中使用 state
     // loading 默认是 flase
     const [loading, setLoading] = useState(false);
+    const [canSubmit, setCanSubmit] = useState(false);
     function handleSubmit() {
         // 取得表单字段的值
         const formData = form.getFieldsValue();
+
+        if(formData.name && (/\s+/g).test(formData.name)){
+            message.error('名字不允许有空格')
+            return
+        }
+        if(formData.tel && (/\s+/g).test(formData.tel)){
+            message.error('电话不允许有空格')
+            return
+        }

         // 新建时 id 为 undefined
         formData['id'] = store.record.id;
         http.post('/api/account/role/', formData).then(...)
         
     }

+    function emptyValid() {
+        const formData = form.getFieldsValue();
+        const { name, tel } = formData;
+        const isNotEmpty = !!(name && tel);
+        setCanSubmit(isNotEmpty)
+    }

+    useEffect(() => {
+        // 主动触发，否则编辑时即使都有数据，`确定`按钮扔不可点
+        emptyValid()
+    }, [])
+
     return (
         // Modal 对话框
         <Modal
             title={store.record.id ? '编辑角色' : '新建角色'}
             onCancel={() => store.formVisible = false}
             confirmLoading={loading}
+            // ok 按钮 props
+            okButtonProps={{disabled: !canSubmit}}
             onOk={handleSubmit}>
             <Form form={form} initialValues={store.record} labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
-                <Form.Item required name="name" label="角色名称">
+                <Form.Item required shouldUpdate={emptyValid} name="name" label="角色名称">
                     <Input placeholder="请输入角色名称" />
                 </Form.Item>
+                {/* shouldUpdate - 自定义字段更新逻辑 */}
+                {/* 注：需要两个字段都增加 shouldUpdate。如果只有一个，修改该项则不会触发 emptyValid，你可以将 `shouldUpdate={emptyValid}` 放在非必填项中。*/}
+                <Form.Item required shouldUpdate={emptyValid} name="tel" label="手机号">
+                    <Input placeholder="请输入手机号" />
+                </Form.Item>
                 <Form.Item name="desc" label="备注信息">
                     <Input.TextArea placeholder="请输入角色备注信息" />
                 </Form.Item>

注：有两点需要注意

• 需要两个字段都增加 shouldUpdate。如果只有一个，修改该项则不会触发 emptyValid()
• 组件加载后主动触发 emptyValid()，否则编辑时即使都有数据，确定按钮扔不可点

效果

以下演示了新建和编辑时的效果：

• 当必填项都有值时确定按钮可点，否则置灰
• 必填项都有值时，点击确定按钮做进一步校验（例如名字不能有空格）
• 编辑时如果都有值，则确定按钮可点击

WebSocket

通知

后端系统通常会有通知功能，用轮询的方式去和后端要数据不是很好，通常是后端有数据后再告诉前端。

spug 中的通知使用的是 webSocket。

Tip：WebSockets 是一种先进的技术。它可以在用户的浏览器和服务器之间打开交互式通信会话。使用此 API，您可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应。

以下是 spug 中通知模块的代码片段：

  // spug\src\layout\Notification.js
  function fetch() {
    setLoading(true);
    http.get('/api/notify/')
      .then(res => {
        setReads(res.filter(x => !x.unread).map(x => x.id))
        setNotifies(res);
      })
      .finally(() => setLoading(false))
  }

  function listen() {
    if (!X_TOKEN) return;
    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
    // Create WebSocket connection.
    ws = new WebSocket(`${protocol}//${window.location.host}/api/ws/notify/?x-token=${X_TOKEN}`);
    // onopen - 用于指定连接成功后的回调函数。
    // Connection opened
    ws.onopen = () => ws.send('ok');
    // onmessage - 用于指定当从服务器接受到信息时的回调函数。
    // Listen for messages
    ws.onmessage = e => {
      if (e.data !== 'pong') {
        fetch();
        const {title, content} = JSON.parse(e.data);
        const key = `open${Date.now()}`;
        const description = <div style={{whiteSpace: 'pre-wrap'}}>{content}</div>;
        const btn = <Button type="primary" size="small" onClick={() => notification.close(key)}>知道了</Button>;
        notification.warning({message: title, description, btn, key, top: 64, duration: null})
      }
    }
  }

通过 WebSocket 创建 webSocket 连接，然后通过 onmessage 监听服务端的消息。这里好像是后端告诉前端有新消息，前端在通过另一个接口发起 http 请求。

服务端

笔者接下来用 node + ws 实现 WebSocket 服务端。

效果如下（每3秒客户端和服务器都会向对方发送一个消息）：

对应的请求字段：

实现如下：

• 新建项目，安装依赖

$ mkdir websocket-test
$ cd websocket-test
// 初始化项目，生产 package.json
$ npm init -y
// 安装依赖
$ npm i ws express

• 新建服务器 server.js

const express = require('express')
const app = express()
app.get('/', function (req, res) {
    res.sendfile(__dirname + '/index.html');
});
app.listen(3020);

const WebSocketServer = require('ws');
const wss = new WebSocketServer.Server({ port: 8080 });
wss.on('connection', function connection(ws) {

    // 监听来自客户端的消息
    ws.on('message', function incoming(message) {
        console.log('' + message);
    });

    setInterval(() => {
        ws.send('客户端你好');
    }, 3000)
});

• 客户端代码 index.html:

<body>
    <script>
        var ws = new WebSocket('ws://localhost:8080');
        ws.onopen = function () {
              ws.send('ok');
        };
        ws.onmessage = function (e) {
            console.log(e.data)
        };

        setInterval(() => {
            ws.send('服务器你好');
        }, 3000)
    </script>
</body>

• 最后启动服务 node server.js，浏览器访问 http://localhost:3020/

扩展

面包屑

spug 中的面包屑（导航）仅对 antd 面包屑稍作封装，不支持点击。

要实现点击跳转的难点是要有对应的路由，而 spug 这里对应的是 404，所以它干脆就不支持跳转

自动构建

笔者代码提交到 gitlab，使用其中的 CICD 模块可用于构建流水线。以下是 wayland（导入 wayland 官网到内网时发现的，开源精神极高，考虑到网友有这个需求。） 的一个构建截图：

这里不过多展开介绍 gitlab cicd 流水线。总之通过触发流水线，gitlab 就会执行项目下的一个 .yml 脚本，我们则可以通过脚本实现编译、部署。

需求：通过流水线实现 myspug 的部署。

• 新建入口文件：.gitlab-ci.yml

// .gitlab-ci.yml

stages:
  - deploy
# 部署到测试环境
deplay_to_test:
  state: deply
  tags:
    # 运行流水线的机器
    - ubuntu2004_27.141-myspug
  rules:
    # 触发流水线时的变量，EFPLOY_TO_TEST 不为空则运行 deploy-to-test.sh 这个脚本
    - if: EFPLOY_TO_TEST != null && $DEPLOY_TO_TEST != ""
  script:
    - chmod + x deploy-to-test.sh && ./deploy-to-test.sh
# 部署到生产环境
deplay_to_product:
  state: deply
  tags:
    - ubuntu2004_27.141-myspug
  rules:
    - if: EFPLOY_TO_product != null && $DEPLOY_TO_product != ""
  script:
    - chmod + x deploy-to-product.sh && ./deploy-to-product.sh 

• 部署到生产环境的脚本：deploy-to-product.sh

// deploy-to-product.sh 

#!/bin/bash
# 部署到生产环境
# 开启：如果命令以非零状态退出，则立即退出
set -e
DATETIME=$(date +%Y-%m-%d_%H%M%S)
echo DATETIME=$DATETIME

SERVERIP=192.168.27.135

SERVERDIR=/data/docker_data/myspug_web

BACKDIR=/data/backup/myspug

# 将构建的文件传给服务器
zip -r build.zip build
scp ./build.zip root@${SERVERIP}:${BACKDIR}/
rm -rf build.zip

# 登录生产环境服务器
ssh root${SERVERIP}<< reallssh
echo login:${SERVERIP}

# 备份目录
[ ! -d "${BACKDIR}/${DATETIME}" ] && mkdir -p "${BACKDIR}/${DATETIME}"

echo 备份目录已创建或已存在

# 删除30天以前的包
find ${BACKDIR}/ -mtime +30 -exec rm -rf {} \;

# 将包备份一份
cp ${BACKDIR}/build.zip ${BACKDIR}/${DATETIME}

mv ${BACKDIR}/build.zip ${SERVERDIR}/

cd ${SERVERDIR}/

rm -rf ./build

unzip build.zip

rm -rf build.zip

echo 部署完成

exit

reallssh

完整项目

项目已上传至 github（myspug）。

克隆后执行以下两条命令即可在本地启动服务：

$ npm i
$ npm run start

浏览器访问效果如下：

后续

后续有时间还想再写这3部分：

• 项目文档。一个系统通常得有对应的文档。就像这样：

• 系统概要设计。用于其他人快速接手这个项目

• 交互设计。spug 中有不少的交互点可以提高相关系统的见识。例如这个抽屉交互

其他章节请看：

react 高效高质量搭建后台系统 系列