guiplan官网

接口配置介绍


接口配置介绍

与数据库配置界面相识,左边可以显示所有配置的接口列表。

中间是对应的接口可视化配置信息。

右边是最终生成之后的代码。包括后端接口代码与前端api调用接口的代码。

顶部几个按钮可以选择数据库来快速生成增删改查分页接口。也可以保存,删除,更新接口。

视频教程如下

一键生成增删改查分页接口


选择对应数据库表之后,右边有五个按钮,分别对应的新增接口,更新接口,单条数据查询接口,分页查询接口以及删除接口。如下图

点击完之后会自动生成可视化配置结构,自动生成接口代码与api调用代码。

前端一键生成增删改查分页,也是选择数据库之后自动调用这些接口。

当然生成代码之后大家也可以可视化的去修改接口。

复制新增保存与删除操作


复制接口

点击”复制“按钮即可快速复制当前所选的接口。

生成代码

配置好接口之后点击生成代码

右边会自动看到生成好的接口代码与api调用接口的代码。

插入代码

点击”插入后端后端接口代码“即可自动将代码插入到对应的文件中并且会自动保存。

也就是后端的控制器/servers/app/controller

以及后端的路由配置/servers/router

点击”插入前端api代码“则会自动将封装好的接口调用方法插入到/src/api中。

从而我们在前端调用接口的时候就简单很多,只需要一键插入即可搞定。

重置接口配置

如果想从零开始配置,或者想将配置好的接口清空掉。

则可以点击”重置“按钮。

如果是不小心点击了”重置“按钮也没关系,不要点击保存,也不要点击插入代码。

切换其他接口配置即可自动恢复。(也就是没有保存即可自动恢复)

保存接口配置

保存接口配置是线上存储你的配置,也就是下次再进来可以继续可视化配置接口。

插入代码到本地文件时会自动线上保存。

删除接口

删除接口要注意如下图,红色的删除按钮则表示删除掉该接口。

并且会将后端接口配置,接口地址,api代码都会删除的一干二净。

而左边的蓝色背景的删除按钮,其实快速新增一个删除接口。注意区分

一键更新接口

我们最常遇到的情况就是需求的变更,其中最少不了的就是字段的变更。

如果数据库表中添加或删除了一些字段,那我们的接口也需要添加或删除对应的字段。

这样我们还得手动一个个去改接口。特别是新增接口与更新接口。

而这个一键更新接口,则是选择对应的数据库表之后,会自动将当前的接口添加或删除对应的字段。

比如创建用户表的时候,只有username与password表。但后续后添加了age表。

而我们的更新用户表接口与新增用户表接口也需要添加age字段,一键更新的话就会自动给你添加好。

接口可视化基础配置


基本配置如下

接口名称

也就是后端控制器封装的方法名称,与api接口调用封装的名称。

命名规则为查询类型 + 方法名称。

如该接口查询单条数据,生成的方法名称为findOneArticle

接口描述

接口名称则用来描述接口的作用。

生成的代码会自动形成注释,如上图的article-查询 就是代码注释。

这样那么后续二次开发也能很清楚的看懂接口的作用。

请求方式

请求方式目前只支持get请求与post请求。后续可能会开发socket,delete等。

项目类型与接口地址

项目类型可分为后台接口、前台接口、移动端接口。

生成的预览地址也会不同。

路由配置文件也不同。

返回的内容也不同。

element后台:配置好接口地址之后,真实地址会自动添加admin前缀,

通常用于element后台对接口的调用,返回的则是json格式的数据。

art-template前台模板:则没有任何前缀。并且会多出一个选项,可以选择静态模板页面。

也就是/servers/view里的html页面。

比如

并且生成的代码返回的是带有数据的静态页面,而不是json数据结构。

通常用于做简单的cms企业建站等展示类型的前台页面。

移动接口:可以配置uniapp相关的接口,接口地址配置好之后,实际接口地址也会自带app前缀如下图

登录校验

无需登录:则表示该配置的接口不需要登录,任何人都可以访问。
需要登录:则表示该配置的接口是需要通过登录才可访问,否则会返回token不能为空的错误。

权限名称

在菜单管理中配置的权限标识,添加角色的时候选择不同的菜单则会拥有该菜单的相关权限。也就是有对应的权限标识对应的权限。

如果你配置的接口需要这些权限才能访问,则可以将上图中的权限标识填写进去既可。
调用接口时会自动查询该用户是否有访问该接口的权限。

为空则表示不做权限的限制。



参数配置


参数配置

5.0.2之后接口配置改为用流程图来配置,更为直观。如下图。
左侧为变量,函数,以及常用的数据库操作。


参数模块如下:

变量

拖拽变量到视图既可添加一个变量。

注意:创建变量需要输入默认值。如果是字符串请用双引号括起来。

生成之后的代码如下:


映射


排序

前端参数(前端传来的参数)


介绍

除了有些参数是通过变量定义的以外,我们还需要从获取从前端传递过来的参数。拖拽前端参数既可添加一个前端传递过来的参数。

添加前端参数

添加前端参数有两种情况,第一种是直接拖拽一个“前端参数”到视图里。

拖拽进来的名称都是默认的名称,所以还需要修改。

第二种方法可以直接找到对应的数据库操作函数,点击“参数列表”选择对应的要添加字段即可添加一个前端参数进来。并且会自动连线。

前端参数详解

校验条件

不为空:选择不为空,则调用接口会优先判断参数是否是空的,如果是空的则直接返回,“某某参数不能为空”给前端页面。


默认

如果该参数没有传递则会用默认值。如果是查询接口,则默认值选以下几个按钮自动添加进来。
点击“查所有”则表示:如果没有传递该参数就去数据库表里查所有数据。
点击“查不为空”则表示:如果没有传递参数进来则自动查询该字段不为空的数据。
点击“根据数组查询多个”则表示:传递一个数组表示查多个,比如字段名称为name,数组内容为如下
则表示查询name为“id1”与“id2”的数据。

查询方式

也是针对分页查询的一些条件
关键字查询:比如所选的name字段,传递过来关键字如“张” 则会查询到关于name中含有“张”的所有数据。如“张三”,"一张床"
完全匹配查询:则全词匹配,一个字都不能多,也不能少。

新增接口


新增接口介绍

新增接口多用于保存数据到数据库中,

添加接口

选择数据库表,然后点击“新增”按钮即可快速插入一个新增接口

代码如下:



也可以直接在组件库里拖拽“新增”接口进来

添加参数

参数列表或者从组件库里将参数拖拽进来,然后将参数与函数连接起来即可。如下图:


生成的代码如下:

也就是调用接口时,会将这些参数保存到数据库中。

更新接口


更新接口介绍

 用于对以添加好的数据进行修改操作。

与新增接口类似但多了一些条件查询字段。

添加接口

选择数据库之后点击“修改”按钮即可快速添加一个 更新接口


或者将数据库函数中的“更新数据”拖拽进视图中



接口详解

更新接口函数有两个连接节点,第一个则为查询条件,第二个为要更新的字段。如下图:也就是先根据传递过来的_id查询到该数据,然后更新里面对应的字段内容。



删除接口


删除接口介绍

删除接口用于对数据进行删除操作。

添加接口

选择数据库表点击“删除”按钮即可快速添加删除接口。注意:不要点击红色的“删除”按钮,此按钮用于删除所选的接口。


或者直接拖拽接口到视图



删除接口的函数顶部的节点用于添加删除条件。符合条件即可删除数据


分页查询接口


分页查询接口

分页查询多用于对数据太多的情况进行一个分段查询,

分页组件也可以通过该接口查询对应的数据。

添加接口

选择数据库表之后然后点击“分页查询”

或者组件库里选择“分页查询”拖入到视图即可

接口详解

排序

排序默认是按创建时间与_id降序排序

若想按其他字段排序,则可勾选其他的字段,进行排序即可。

过滤字段

分页查询中的列表数据,有可能数据很多的情况,数据量会很大。比如文章的内容,无需在列表中展示出来,而是需要点击详情才能看内容。

所以我们需要对字段进行过滤。把不需要展示的字段过滤掉。



分页与条数

组件库里的“分页开始”与“分页条数”则表示为从序号开始的位置,查询多少条。默认是从0开始,查询后面10条数据。

返回结果

默认返回结果为{total:1000,list:[]}总数与列表数据。

选中结果点击“添加结果”即可将结果数据添加进来。





单条数据查询


单条数据查询介绍

单条数据查询多用于查询详细,也就是所有数据。

比如文章列表进入到文章详情页面,则只需根据文章id查询详细信息。

添加接口

选择对应的数据库表然后点击“详细信息”即可快速添加详细接口。


组件列表中选中“详细查询”拖拽到视图区域


接口详解

条件参数

函数顶部节点用于连接条件。比如根据前端传递过来的_id来查询该数据的所有信息。



结果参数

如果只是想返回部分字段,可以在结果参数中添加想返回给前端用户的数据。

然后将该结果连接到“返回结果”上面的节点中即可。
多用于过滤铭感信息。比如查询用户的详细信息,但不能把密码也返回给前端。则可用此方法进行过滤字段。
比如只是返回名称给前端即可。生成代码如下




多表查询


介绍

多表查询用于查询多个表,比如我需要查询张三的店铺最热门的五个商品。则需要先从用户信息表里查询到张三的个人信息,然后再查张三有哪些店铺,最后再查询店铺里有哪些商品。

添加接口

拖拽“多表查询”

点击该函数,选择要查询的数据库表


添加好查询条件,比如 输入身份证来查询数据


代码如下:

let patientAggregateList
    try {
        let aggregeteParams = [{
                $match: {
                    idNumber: idNumber
                }
            },

            {
                $skip: parseInt(start),
                $limit: parseInt(limit)
            },

        ]
        patientAggregateList = await mongodb.getConnection('patient').aggregate(aggregeteParams)
    } catch (err) {
        logger.error(err)
        return response.error(ctx, '服务器错误')
    }

添加子表

如果还需要查询其他的表

拖拽“子表lookup查询”

选择好要查询的表,然后选择关联id,关联id则是上一个表与当前所选的表的关联关系。


将上个表需要关联的id添加进来,然后连接子表的参数节点上。如下:用患者表里的_id去关联 患者信息表里的patientId

代码如下:

先去患者表里找到多个患者信息,然后根据患者的_id去,患者信息表里去找patientId与_id匹配的患者信息。

try {
        let aggregeteParams = [{
                $match: {}
            },

            {
                $skip: parseInt(start),
                $limit: parseInt(limit)
            },
            {
                "$lookup": {
                    "from": "patientInfo",
                    "localField": "_id",
                    "foreignField": "patientId",
                    "as": "patientInfo"
                }
            }
        ]
        patientAggregateList = await mongodb.getConnection('patient').aggregate(aggregeteParams)
    } catch (err) {
        logger.error(err)
        return response.error(ctx, '服务器错误')
    }

如果还需要查询更多的表,则继续添加子表即可。

将查询之后的结果(也就是主表)连接到“返回正确结果”即可。

自定义条件代码


待更新。。。

用户id参数


用户id用于查询属于用户自己的数据。比如张三登录了,用户id为zs001,则接口会从token中获取到用户信息里的_id字段,并赋值给userId变量,查询的时候就会根据这个userId才查询该用户自己的数据(也就是userId为zs001的数据),而不会查询到所有数据。常见功能有:如用户查询自己个人信息,用户查询自己购买的商品,查询自己收藏的商品等等。包括后续的更新,删除等接口也是需要这个字段。注意:如果没有添加用户id查询,否则会造成张三的账号,可以改李四的信息。

进群学习:
请加微信号guiplan
文字