测试开发系列之——接口分类&接口功能（二）

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后，问题解决。

修改完成后，就可以正常按照项目展示分类，以及正常按照分类展示左边的列表以及右边的接口页面了。

全部接口如下图所示：

用户类接口如下图所示：