目录
- toIndex接口
- ApiListVO
- ApiListVO.java的代码
- api join apiclassification
- ApiMapper.java的代码
- ApiService.java的代码
- ApiServiceImpl.java的代码
- ApiController.java的代码
- apiList.js的部分代码
- apiList.html的代码修改
- 按类别查询api
- ApiMapper.java的代码修改
- ApiService.java的代码修改
- ApiServiceImpl.java的代码修改
- ApiController.java的代码修改
- index.html的代码修改
- ApiClassificationController.java的代码修改
- 添加接口功能
- 遇到的问题汇总
toIndex接口
Request URL: http://admin.ck.org/lemon/apiClassification/toIndex?projectId=5&tab=1
在com.one.common下的类ApiClassificationVO.java中,需要加上@Data注解,才会显示接口响应中的apis。
ApiListVO
在com.one.common中创建类ApiListVO.java
public class ApiListVO{
private String id;
private String name;
private String method;
private String url;
private String classificationName;
}
ApiListVO.java的代码
记得加上@Data的注解
package com.one.common;
import lombok.Data;
@Data
public class ApiListVO{
private String id;
private String name;
private String method;
private String url;
private String classificationName;
}
api join apiclassification
SELECT
t1.*, t2. NAME
FROM
api t1,
api_classification t2
WHERE
t2.project_id = 5
AND t1.api_classification_id = t2.id
ApiMapper.java的代码
package com.one.mapper;
import com.one.common.ApiListVO;
import com.one.pojo.Api;
import java.util.List;
import org.apache.ibatis.annotations.Select;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
/**
* <p>
* Mapper 接口
* </p>
*
* @author annie
* @since 2020-02-16
*/
public interface ApiMapper extends BaseMapper<Api> {
@Select("select * from api where api_classification_id = #{apiClassificationId}")
public List<Api> findApi(Integer apiClassificationId);
@Select("SELECT t1.*, t2. NAME classificationName FROM api t1, api_classification t2 WHERE t2.project_id = #{projectId} AND t1.api_classification_id = t2.id")
public List<ApiListVO> showApiListByProject(Integer projectId);
}
ApiService.java的代码
package com.one.service;
import com.one.common.ApiListVO;
import com.one.pojo.Api;
import java.util.List;
import com.baomidou.mybatisplus.extension.service.IService;
/**
* <p>
* 服务类
* </p>
*
* @author annie
* @since 2020-02-16
*/
public interface ApiService extends IService<Api> {
public List<ApiListVO> showApiListByProject(Integer projectId);
}
ApiServiceImpl.java的代码
package com.one.service.impl;
import com.one.pojo.Api;
import com.one.common.ApiListVO;
import com.one.mapper.ApiMapper;
import com.one.service.ApiService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
/**
* <p>
* 服务实现类
* </p>
*
* @author annie
* @since 2020-02-16
*/
@Service
public class ApiServiceImpl extends ServiceImpl<ApiMapper, Api> implements ApiService {
@Autowired
ApiMapper apiMapper;
public List<ApiListVO> showApiListByProject(Integer projectId){
return apiMapper.showApiListByProject(projectId);
}
}
ApiController.java的代码
package com.one.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.one.common.Result;
import com.one.common.ApiListVO;
import com.one.service.ApiService;
/**
* <p>
* 前端控制器
* </p>
*
* @author annie
* @since 2020-02-16
*/
@RestController
@RequestMapping("/api")
public class ApiController {
@Autowired
ApiService apiService;
@GetMapping("/showApiUnderProject")
public Result showApiListByProject(Integer projectId){
List<ApiListVO> list = apiService.showApiListByProject(projectId);
Result result = new Result("1",list);
return result;
}
}
apiList.js的部分代码
$(function)(){}是jQuery的ready函数,页面一加载完毕,就开始干事情。
两种情况:
- url----showapiunderproject
- 当点击左边的类别时,右边呈现该类别下的api
$(function(){
var projectId = sessionStorage.getItem("projectId");
var apiClassificationId = $("[name='apiClassificationId']").val()==undefined?"":$("[name='apiClassificationId']").val();
var listUrl = "";
//获取数据接口
if(projectId!=""){
listUrl = lemon.config.global.adminUrl+"/api/showApiUnderProject?projectId="+projectId;
}else if(apiClassificationId!=''){
listUrl = lemon.config.global.adminUrl+"/api/showApiUnderApiClassification?apiClassificationId="+apiClassificationId;
}
$.ajax({
headers:{"Authorization":$.cookie("sessionId")},
url: listUrl,
type:"GET",
success:function(ret){
$(".desctit-interlist span").text("("+ret.data.length+")");
if(ret!=null&&ret.data.length>0){
//分页显示数据
pagingDataShow(ret.data,10);
}
if(ret.status==1&&ret.message=="账号未登录"){
location.href = lemon.config.global.rootUrl + "/html/login.html";
}
}
});
apiList.html的代码修改
此处改为0
按类别查询api
t2.id就是类别
SELECT
t1.*, t2. NAME
FROM
api t1,
api_classification t2
WHERE
t2.id = 1
AND t1.api_classification_id = t2.id
ApiMapper.java的代码修改
增加如下代码:
@Select("SELECT t1.*, t2. NAME classificationName FROM api t1, api_classification t2 WHERE t2.id = #{apiClassificationId} AND t1.api_classification_id = t2.id")
public List<ApiListVO> showApiListByApiClassification(Integer apiClassificationId);
ApiService.java的代码修改
增加如下代码:
public List<ApiListVO> showApiListByApiClassification(Integer apiClassificationId);
ApiServiceImpl.java的代码修改
增加如下代码:
public List<ApiListVO> showApiListByApiClassification(Integer apiClassificationId){
return apiMapper.showApiListByApiClassification(apiClassificationId);
}
ApiController.java的代码修改
增加如下代码:
@GetMapping("/showApiUnderApiClassification")
public Result showApiUnderApiClassification(Integer apiClassificationId){
List<ApiListVO> list = apiService.showApiListByApiClassification(apiClassificationId);
Result result = new Result("1",list);
return result;
}
index.html的代码修改
分类增加点击事件@click=“goTo(apiClassification.id)”
全部接口增加点击事件@click=“goAll()”
将<script type="text/javascript" src="/lemon/js/base.js"></script>
放到vue的下面,分类列表就可以展示下面的接口了。
- sessionStorage.getItem
- sessionStorage.setItem
- sessionStorage.removeItem
index.html的代码修改如下:
<script type="text/javascript" src="/lemon/js/jquery.cookie.js" charset="UTF-8"></script>
<script src="/lemon/js/vue.js"></script>
<script src="/lemon/js/axios.min.js"></script>
<script type="text/javascript">
var app = new Vue({
//el: "#listInter",
el: ".left-interlist",
data: {
contextPath: lemon.config.global.adminUrl,
info: {},
info2:""
},
methods: {
goAll(){
sessionStorage.removeItem("apiClassificationId");
},
goTo(apiClassificationId){
sessionStorage.setItem("apiClassificationId",apiClassificationId);
},
goTo2(apiId){
sessionStorage.setItem("apiId",apiId);
},del(i){
axios.delete(
this.contextPath+"/api"+i,
{headers:{
"Authorization":$.cookie("sessionId")
}}).then(response=>{
this.info2 = response.data;
console.log(info2.message);
window.location.reload();
if (info2.status == 0 && info2.message == "未登陆"){
location.href = lemon.config.global.rootUrl+"/html/login.html";
}
});
},
delClassification(id){
alert(id);
let url = lemon.config.global.adminUrl + "/apiClassification/"+id;
axios.delete(url,{
headers: {"Authorization":$.cookie("sessionId")},
}).then(response=>{
let result = response.data;
if(result.status==1&result.message=="删除成功"){
alert(result.message);
}else{
location.href = lemon.config.global.rootUrl+"/html/login.html";
}
})
}
},
created () {
//let url = lemon.config.global.adminUrl + "/apiClassification/toIndex";
let projectId = sessionStorage.getItem("projectId");
let tab=sessionStorage.getItem("tab");
axios.get(this.contextPath+"/apiClassification/toIndex",{
headers: {"Authorization":$.cookie("sessionId")},
params: {"projectId": projectId, "tab":1}
}).then(response=>{
this.info = response.data;
if(this.info.status==1&this.info.message=="未登陆"){
location.href = lemon.config.global.rootUrl+"/html/login.html";
}
})
}
})
</script>
<script type="text/javascript" src="/lemon/js/base.js"></script>
ApiClassificationController.java的代码修改
增加如下代码:
//根据projectid单表查询分类信息
@GetMapping("/findAll")
public Result findAll(Integer projectId){
QueryWrapper queryWrapper = new QueryWrapper();
queryWrapper.eq("project_id", projectId);
List<ApiClassification> list = apiClassificationService.list(queryWrapper);
return new Result("1",list);
}
添加接口功能
点击添加接口,弹出模态框。
$(".line-addinter select[name=‘classificationId’]").html();
或者
遇到的问题汇总
前端无法展示分类列表:
index.html将如下红框内从info修改为info.data后,问题解决。
修改完成后,就可以正常按照项目展示分类,以及正常按照分类展示左边的列表以及右边的接口页面了。
全部接口如下图所示:
用户类接口如下图所示: