test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: 修改请求方式显示样式、提升文档页面数据加载的性能 

修改请求方式显示样式、提升文档页面数据加载的性能
This commit is contained in:
song.tianyang 2021-02-25 15:28:41 +08:00
parent 19508c3254
commit 56a369b6a6
2 changed files with 66 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
backend/src/main/java/io/metersphere/api/service/ApiDocumentService.java
View File

@ -51,7 +51,7 @@ public class ApiDocumentService {
List<String> shareIdList = this.selectShareIdByApiDocumentShareId(request.getShareId());
request.setApiIdList(shareIdList);
return extApiDocumentMapper.findApiDocumentSimpleInfoByRequest(request);
}else {
} else {
return extApiDocumentMapper.findApiDocumentSimpleInfoByRequest(request);
}
} else {
@ -62,14 +62,14 @@ public class ApiDocumentService {
private List<String> selectShareIdByApiDocumentShareId(String shareId) {
List<String> shareApiIdList = new ArrayList<>();
ApiDocumentShare share = apiDocumentShareMapper.selectByPrimaryKey(shareId);
if(share!=null){
try{
if (share != null) {
try {
JSONArray jsonArray = JSONArray.parseArray(share.getShareApiId());
for (int i = 0; i < jsonArray.size(); i++) {
String apiId = jsonArray.getString(i);
shareApiIdList.add(apiId);
}
}catch (Exception e){
} catch (Exception e) {
e.printStackTrace();
}
}
@ -86,7 +86,7 @@ public class ApiDocumentService {
public ApiDocumentInfoDTO conversionModelToDTO(ApiDefinitionWithBLOBs apiModel) {
ApiDocumentInfoDTO apiInfoDTO = new ApiDocumentInfoDTO();
JSONObject previewObj = new JSONObject();
JSONArray previewJsonArray = new JSONArray();
if (apiModel != null) {
apiInfoDTO.setId(apiModel.getId());
apiInfoDTO.setName(apiModel.getName());
@ -94,7 +94,6 @@ public class ApiDocumentService {
apiInfoDTO.setUri(apiModel.getPath());
apiInfoDTO.setStatus(apiModel.getStatus());
if (apiModel.getRequest() != null) {
JSONObject requestJsonObj = JSONObject.parseObject(apiModel.getRequest());
//head赋值
@ -162,32 +161,38 @@ public class ApiDocumentService {
if (bodyObj.containsKey("raw")) {
String raw = bodyObj.getString("raw");
apiInfoDTO.setRequestBodyStrutureData(raw);
previewObj = JSONObject.parseObject(raw);
//转化jsonObje 或者 jsonArray
this.setPreviewData(previewJsonArray, raw);
}
}
} else if (StringUtils.equalsAny(type, "XML", "Raw")) {
if (bodyObj.containsKey("raw")) {
String raw = bodyObj.getString("raw");
apiInfoDTO.setRequestBodyStrutureData(raw);
previewObj = JSONObject.parseObject(raw);
JSONObject previewObj = JSONObject.parseObject(raw);
this.setPreviewData(previewJsonArray, raw);
}
} else if (StringUtils.equalsAny(type, "Form Data", "WWW_FORM")) {
if (bodyObj.containsKey("kvs")) {
JSONArray bodyParamArr = new JSONArray();
JSONArray kvsArr = bodyObj.getJSONArray("kvs");
Map<String, String> previewObjMap = new LinkedHashMap<>();
for (int i = 0; i < kvsArr.size(); i++) {
JSONObject kv = kvsArr.getJSONObject(i);
if (kv.containsKey("name") && kv.containsKey("value")) {
bodyParamArr.add(kv);
previewObj.put(String.valueOf(kv.get("name")), String.valueOf(kv.get("value")));
previewObjMap.put(String.valueOf(kv.get("name")), String.valueOf(kv.get("value")));
}
}
this.setPreviewData(previewJsonArray, JSONObject.toJSONString(previewObjMap));
apiInfoDTO.setRequestBodyFormData(bodyParamArr.toJSONString());
}
} else if (StringUtils.equals(type, "BINARY")) {
if (bodyObj.containsKey("binary")) {
List<Map<String, String>> bodyParamList = new ArrayList<>();
JSONArray kvsArr = bodyObj.getJSONArray("binary");
Map<String, String> previewObjMap = new LinkedHashMap<>();
for (int i = 0; i < kvsArr.size(); i++) {
JSONObject kv = kvsArr.getJSONObject(i);
if (kv.containsKey("description") && kv.containsKey("files")) {
@ -206,9 +211,11 @@ public class ApiDocumentService {
bodyMap.put("contentType", "File");
bodyParamList.add(bodyMap);
previewObj.put(String.valueOf(name), String.valueOf(value));
previewObjMap.put(String.valueOf(name), String.valueOf(value));
}
}
this.setPreviewData(previewJsonArray, JSONObject.toJSONString(previewObjMap));
apiInfoDTO.setRequestBodyFormData(JSONArray.toJSONString(bodyParamList));
}
}
@ -301,24 +308,37 @@ public class ApiDocumentService {
}
}
}
apiInfoDTO.setRequestPreviewData(previewObj);
apiInfoDTO.setRequestPreviewData(previewJsonArray);
return apiInfoDTO;
}
private void setPreviewData(JSONArray previewArray, String data) {
try {
JSONObject previewObj = JSONObject.parseObject(data);
previewArray.add(previewObj);
} catch (Exception e) {
}
try {
previewArray = JSONArray.parseArray(data);
} catch (Exception e) {
}
}
/**
* 生成 api接口文档分享信息
* 根据要分享的api_id和分享方式来进行完全匹配搜索。
* 搜索的到就返回那条数据，搜索不到就新增一条信息
* 根据要分享的api_id和分享方式来进行完全匹配搜索。
* 搜索的到就返回那条数据，搜索不到就新增一条信息
*
* @param request 入参
* @return ApiDocumentShare数据对象
* @return ApiDocumentShare数据对象
*/
public ApiDocumentShare generateApiDocumentShare(ApiDocumentShareRequest request) {
ApiDocumentShare apiDocumentShare = null;
if (request.getShareApiIdList() != null && !request.getShareApiIdList().isEmpty()
&&StringUtils.equalsAny(request.getShareType(), ApiDocumentShareType.Single.name(),ApiDocumentShareType.Batch.name())) {
&& StringUtils.equalsAny(request.getShareType(), ApiDocumentShareType.Single.name(), ApiDocumentShareType.Batch.name())) {
//将ID进行排序
List<ApiDocumentShare> apiDocumentShareList = this.findByShareTypeAndShareApiIdWithBLOBs(request.getShareType(),request.getShareApiIdList());
if(apiDocumentShareList.isEmpty()){
List<ApiDocumentShare> apiDocumentShareList = this.findByShareTypeAndShareApiIdWithBLOBs(request.getShareType(), request.getShareApiIdList());
if (apiDocumentShareList.isEmpty()) {
String shareApiIdJsonArrayString = this.genShareIdJsonString(request.getShareApiIdList());
long createTime = System.currentTimeMillis();
@ -330,12 +350,12 @@ public class ApiDocumentService {
apiDocumentShare.setUpdateTime(createTime);
apiDocumentShare.setShareType(request.getShareType());
apiDocumentShareMapper.insert(apiDocumentShare);
}else {
} else {
return apiDocumentShareList.get(0);
}
}
if(apiDocumentShare==null){
if (apiDocumentShare == null) {
apiDocumentShare = new ApiDocumentShare();
}
return apiDocumentShare;
@ -343,13 +363,14 @@ public class ApiDocumentService {
private List<ApiDocumentShare> findByShareTypeAndShareApiIdWithBLOBs(String shareType, List<String> shareApiIdList) {
String shareApiIdString = this.genShareIdJsonString(shareApiIdList);
return extApiDocumentShareMapper.selectByShareTypeAndShareApiIdWithBLOBs(shareType,shareApiIdString);
return extApiDocumentShareMapper.selectByShareTypeAndShareApiIdWithBLOBs(shareType, shareApiIdString);
}
/**
* 根据treeSet排序生成apiId的Jsonarray字符串
*
* @param shareApiIdList 要分享的ID集合
* @return 要分享的ID JSON格式字符串
* @return 要分享的ID JSON格式字符串
*/
private String genShareIdJsonString(Collection<String> shareApiIdList) {
TreeSet<String> treeSet = new TreeSet<>(shareApiIdList);
@ -358,7 +379,7 @@ public class ApiDocumentService {
public ApiDocumentShareDTO conversionApiDocumentShareToDTO(ApiDocumentShare apiShare) {
ApiDocumentShareDTO returnDTO = new ApiDocumentShareDTO();
if(!StringUtils.isEmpty(apiShare.getShareApiId())){
if (!StringUtils.isEmpty(apiShare.getShareApiId())) {
BaseSystemConfigDTO baseSystemConfigDTO = systemParameterService.getBaseInfo();
String url = "/#/apiDocumentInfo?documentId=" + apiShare.getId();
returnDTO.setId(apiShare.getId());

38
frontend/src/business/components/api/definition/components/document/ApiDocumentItem.vue
View File

@ -56,7 +56,7 @@
<el-row class="apiInfoRow">
<div class="simpleFontClass">
<el-tag size="medium"
:style="{'background-color': getColor(apiInfo.method), border: getColor(apiInfo.method),borderRadius:'0px', marginRight:'20px'}">
:style="{'background-color': getColor(true,apiInfo.method), border: getColor(true,apiInfo.method),borderRadius:'0px', marginRight:'20px',color:'white'}">
{{ apiInfo.method }}
</el-tag>
{{ apiInfo.uri }}
@ -452,9 +452,8 @@ export default {
selectApiInfo(index,apiId) {
let simpleInfoUrl = "/api/document/selectApiInfoById/" + apiId;
this.$get(simpleInfoUrl, response => {
//this.apiInfoObj = response.data;
//this.apiInfoArray.push(response.data);
this.$set(this.apiInfoArray,index,response.data);
let returnData = response.data;
this.$set(this.apiInfoArray,index,returnData);
});
},
clickStep(apiId) {
@ -558,11 +557,6 @@ export default {
this.$message.error(this.$t('api_report.error'));
},
handleScroll(){
// let itemHeight = 0;
// if(this.$refs.apiDocInfoDivItem.length>0){
// //子元素高度为 item的高度+20(20是margin距离)
// itemHeight = this.$refs.apiDocInfoDivItem[0].offsetHeight+20;
// }
//apiDocInfoDiv的总高度，是(每个item的高度+20)数量
let apiDocDivScrollTop = this.$refs.apiDocInfoDiv.scrollTop;
@ -600,19 +594,33 @@ export default {
let beforeNodeIndex = itemIndex<3?0:(itemIndex-3);
let afterNodeIndex = (itemIndex+3)<this.apiInfoArray.length?(itemIndex+3):this.apiInfoArray.length;
for(let i = itemIndex;i < afterNodeIndex;i++){
let apiInfo = this.apiInfoArray[i];
for(let beforeIndex = itemIndex;beforeIndex < afterNodeIndex;beforeIndex++){
let apiInfo = this.apiInfoArray[beforeIndex];
if(apiInfo==null){
continue;
}
if(apiInfo == null || !apiInfo.selectedFlag){
let apiId = apiInfo.id;
this.selectApiInfo(i,apiId);
console.log(apiInfo.isSearching+":"+apiId);
if(!apiInfo.isSearching){
apiInfo.isSearching = true;
this.selectApiInfo(beforeIndex,apiId);
}
}
}
for(let i = beforeNodeIndex;i <itemIndex;i++){
let apiInfo = this.apiInfoArray[i];
for(let afterIndex = beforeNodeIndex;afterIndex <itemIndex;afterIndex++){
let apiInfo = this.apiInfoArray[afterIndex];
if(apiInfo==null){
continue;
}
if(apiInfo == null || !apiInfo.selectedFlag){
let apiId = apiInfo.id;
this.selectApiInfo(i,apiId);
console.log(apiInfo.isSearching+":"+apiId);
if(!apiInfo.isSearching) {
apiInfo.isSearching = true;
this.selectApiInfo(afterIndex,apiId);
}
}
}
}