与数据库配置界面相识,左边可以显示所有配置的接口列表。
中间是对应的接口可视化配置信息。
右边是最终生成之后的代码。包括后端接口代码与前端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前缀如下图
为空则表示不做权限的限制。
5.0.2之后接口配置改为用流程图来配置,更为直观。如下图。
左侧为变量,函数,以及常用的数据库操作。
参数模块如下:
拖拽变量到视图既可添加一个变量。
注意:创建变量需要输入默认值。如果是字符串请用双引号括起来。
生成之后的代码如下:
除了有些参数是通过变量定义的以外,我们还需要从获取从前端传递过来的参数。拖拽前端参数既可添加一个前端传递过来的参数。
添加前端参数有两种情况,第一种是直接拖拽一个“前端参数”到视图里。
拖拽进来的名称都是默认的名称,所以还需要修改。
第二种方法可以直接找到对应的数据库操作函数,点击“参数列表”选择对应的要添加字段即可添加一个前端参数进来。并且会自动连线。
不为空:选择不为空,则调用接口会优先判断参数是否是空的,如果是空的则直接返回,“某某参数不能为空”给前端页面。
新增接口多用于保存数据到数据库中,
选择数据库表,然后点击“新增”按钮即可快速插入一个新增接口
代码如下:
也可以直接在组件库里拖拽“新增”接口进来
参数列表或者从组件库里将参数拖拽进来,然后将参数与函数连接起来即可。如下图:
生成的代码如下:
也就是调用接口时,会将这些参数保存到数据库中。
用于对以添加好的数据进行修改操作。
与新增接口类似但多了一些条件查询字段。
选择数据库之后点击“修改”按钮即可快速添加一个 更新接口
或者将数据库函数中的“更新数据”拖拽进视图中
更新接口函数有两个连接节点,第一个则为查询条件,第二个为要更新的字段。如下图:也就是先根据传递过来的_id查询到该数据,然后更新里面对应的字段内容。
删除接口用于对数据进行删除操作。
选择数据库表点击“删除”按钮即可快速添加删除接口。注意:不要点击红色的“删除”按钮,此按钮用于删除所选的接口。
或者直接拖拽接口到视图
删除接口的函数顶部的节点用于添加删除条件。符合条件即可删除数据
分页查询多用于对数据太多的情况进行一个分段查询,
分页组件也可以通过该接口查询对应的数据。
选择数据库表之后然后点击“分页查询”
或者组件库里选择“分页查询”拖入到视图即可
排序默认是按创建时间与_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, '服务器错误')
}
如果还需要查询更多的表,则继续添加子表即可。
将查询之后的结果(也就是主表)连接到“返回正确结果”即可。