YAPI:docker部署、二次开发、问题整理

658 阅读3分钟

YAPI

采用方式

采用现有docker容器,并在基础上二次修改:yapipro

Docker容器中使用命令增加又增加了 GIT(因为暂时不知道其他方式去重新打包,所以我觉得这个办法肯定不是最优解,所以,日后更新),使用GIT重新拉取代码的方式更新YAPI平台

  • 命令
apk add git

部署问题记录

  1. config.json文件,实际使用到的字段解释

  • port:启动端口

  • adminAccount:管理员邮箱

  • closeRegister:用户注册是否关闭,true 关闭,默认false

  • timeout:超时时间

  • db:数据库配置

    • servername:数据库服务地址
    • DATABASE:数据库名称
    • port:数据库端口
    • user:用户
    • pass: 密码
  • mail:邮箱配置

    • enable:是否开启
    • host:smtp 服务地址
    • post:smtp 端口
    • from:发送人的名称。如想要发送人的为YAPI,这里就可以配置 YAPI
    • auth:权限验证配置
{
    "port": "8081",
    "adminAccount": "xxxx@xxx.net",
    "closeRegister": true,
    "timeout":120000,
    "db": {
        "servername": "127.0.0.1",
        "DATABASE": "yapi",
        "port": 27017,
        "user": "yapi",
        "pass": "admin"
    },
    "mail": {
        "enable": true,
        "host": "smtp.xxx.com",
        "port": 465,
        "from": "mashipeng@zhaoshang.net",
        "auth": {
            "user": "mashipeng@zhaoshang.net",
            "pass": "jFYT65jNCx6D8JH9"
        }
    }
}

二次开发

新增<添加用户>按钮

此方法借鉴:Yapi禁用注册后之管理员添加用户 作者:bing果冻

server 改动
  1. server/router.js路径,user数组下添加新的路由
{
    action: "add",
    path: 'add',
    method:'post'
}
  1. server/controllers/user.js路径下,添加新的接口

这个接口可以加在任意方法的 上方 或 下方,不会受到其他影响

 /**
   * 添加用户,只有admin用户才有此权限
   * @interface /user/add
   * @method POST
   * @returns {Object}
   * @example
   */
  async add(ctx) {

    try {
      // 只有管理员可以创建
      if (this.getRole() !== 'admin') {
        return (ctx.body = yapi.commons.resReturn(null, 402, 'Without permission.'));
      }

      let userInst = yapi.getInst(userModel);
      let params = ctx.request.body; //获取请求的参数,检查是否存在用户名和密码

      params = yapi.commons.handleParams(params, {
        username: 'string',
        password: 'string',
        email: 'string'
      });

      if (!params.email) {
        return (ctx.body = yapi.commons.resReturn(null, 400, '邮箱不能为空'));
      }

      if (!params.password) {
        return (ctx.body = yapi.commons.resReturn(null, 400, '密码不能为空'));
      }

      let checkRepeat = await userInst.checkRepeat(params.email); //然后检查是否已经存在该用户

      if (checkRepeat > 0) {
        return (ctx.body = yapi.commons.resReturn(null, 401, '该email已经注册'));
      }

      let passsalt = yapi.commons.randStr();
      let data = {
        username: params.username,
        password: yapi.commons.generatePassword(params.password, passsalt), //加密
        email: params.email,
        passsalt: passsalt,
        role: 'member',
        add_time: yapi.commons.time(),
        up_time: yapi.commons.time(),
        type: 'site'
      };

      if (!data.username) {
        data.username = data.email.substr(0, data.email.indexOf('@'));
      }
      let user = await userInst.save(data);
      await this.handlePrivateGroup(user._id, user.username, user.email);

      ctx.body = yapi.commons.resReturn({
        uid: user._id,
        email: user.email,
        username: user.username,
        add_time: user.add_time,
        up_time: user.up_time,
        role: 'member',
        type: user.type,
        study: false
      });

    } catch (e) {
      ctx.body = yapi.commons.resReturn(null, 402, e.message);
    }
  }

注意:以上server改动修改完成后,需要重启server(如果使用docker的话,直接重启镜像即可)

client 改动

client改动修改完成后,需要重新打包client否则代码不会生效 命令:

  • 如果使用yarnyarn build-client 以下代码解释,为了方便理解全部附带 修改位置前后的代码,修改内容上下做标记 可能会遇到ykit找不到的问题,正常使用yarn install 就可以解决
  1. client/containers/User/List.js路径下 添加<添加用户>按钮
  • React render 部分
// new add
import {Table, Popconfirm, message, Input, Button, Modal, Row, Col} from 'antd';
// new add
<div className="user-search-wrapper">
    // new add
    <div style={{ marginBottom: '10px' }}>
        <Button type="primary" onClick={() => this.setState({ addUserVisible: true })}>添加用户</Button>
        <Modal
            title="添加用户"
            visible={this.state.addUserVisible}
            onOk={this.addUser}
            onCancel={() => this.setState({addUserVisible:false,email:'',password:'',username:''})}
            className="add-group-modal"
        >
        <Row gutter={6} className="modal-input">
            <Col span="5">
            <div className="label">邮箱:</div>
            </Col>
            <Col span="15">
            <Input placeholder="请输入邮箱" onChange={e => this.setState({email:e.target.value})}/>
            </Col>
        </Row>
        <Row gutter={6} className="modal-input">
            <Col span="5">
            <div className="label">密码:</div>
            </Col>
            <Col span="15">
            <Input placeholder="请输入密码" type="password" onChange={e => this.setState({ password: e.target.value })} />
            </Col>
        </Row>
        <Row gutter={6} className="modal-input">
            <Col span="5">
            <div className="label">名字:</div>
            </Col>
            <Col span="15">
            <Input placeholder="名字" onChange={e => this.setState({ username: e.target.value })} />
            </Col>
        </Row>
        </Modal>
    </div>
    // new add
    <h2 style={{ marginBottom: '10px' }}>用户总数:{this.state.total}位</h2>
    <Search
    onChange={e => this.handleSearch(e.target.value)}
    onSearch={this.handleSearch}
    placeholder="请输入用户名"
    />
</div>
  • javascript 部分
addUser = () => {
    const { email: email, password: password, username: username } = this.state;
    if(!email || !password || !username) {
      message.success('字段均不能为空');
      return false;
    }
    axios.post('/api/user/add', { email, password, username }).then(res=>{
      if (res.data.errcode === 0) {
        message.success('添加成功');
        this.getUserList();
        this.setState({
          addUserVisible: false
        });
      } else {
        message.error(res.data.errmsg);
      }
    })
  };

BUG 修复

  1. 添加tag后报错 /server/controllers/interface.js文件下 825行前面加一行params.project_id = interfaceData.project_id;
    yapi.emitHook('interface_update', id).then();
(825->)    params.project_id = interfaceData.project_id;
    await this.autoAddTag(params);

    ctx.body = yapi.commons.resReturn(result);
    return 1;