最近在写前后端分离的项目，后端用的mutipartFlie数组接收多文件，我用的是swagger接口文档，但是，接口文档给我的是一个文本域，根本没法调试，靠前端来调试？不太现实。然后搜索了一波，发现了swagger-bootstrap-ui这个牛逼的插件。解决了swagger的多文件调试问题。



下面说一下，怎么在springboot中使用这个玩意儿。

pom.xml
<!--swagger2的依赖-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.6.1</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/com.github.xiaoymin/swagger-bootstrap-ui -->
        <dependency>
            <groupId>com.github.xiaoymin</groupId>
            <artifactId>swagger-bootstrap-ui</artifactId>
            <version>1.8.5</version>
        </dependency>

写个swagger配置类：
package com.cs.demo.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;

/**
 * @author 熊义杰
 * @date 2019.3.27
 */
@Configuration
public class SwaggerConfig {

    @Bean
    public Docket createRestApi() {
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.cs.demo"))
                .paths(PathSelectors.any())
                .build();
    }

    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title("项目api文档")
                .description("后端的api接口文档")
                .termsOfServiceUrl("http://www.xyj123.xyz")
                .version("1.0")
                .build();
    }
}

package com.cs.demo.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @author www.xyjz123.xyz
 * @description
 * @date 2019/5/6 8:59
 */
@Configuration
public class SwaggerWebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/statics/**").addResourceLocations("classpath:/statics/");
        
        registry.addResourceHandler("/doc.html").addResourceLocations("classpath:/META-INF/resources/");
        registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
    }
}

如果没有用spring security之类的权限访问控制框架的话（或者权限访问控制的配置），那么可以直接访问http://{host}:{post}/doc.html就可以看到接口文档了。

但如果用了访问权限控制的话，就得配置一下了（我这里使用的是spring security）
@Configuration
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring(). antMatchers("/doc.html")
                .antMatchers("/webjars/**")
                .antMatchers("/v2/**")
                .antMatchers("/swagger-resources/**")
                .antMatchers("/static/front/**");
    }
}

目的
el-upload组件默认情况下上传多少个文件就会请求多少次上传接口 实现请求一次接口同时上传多个文件及表单
实现方案
multiple  支持多选文件

:auto-upload="false"  不在选取文件后立即进行上传

:http-request="httpRequest"  覆盖默认的上传行为 自定义上传的实现

this.$refs.upload.submit()
代码实现
<template>
    <div id="text">
    <el-form ref="form" :model="newData" label-width="80px" label-position="right" size="mini">
        <el-form-item label="上传文件" prop="name">
            <el-upload
                ref="upload"
                multiple
                name="File"
                action=""
                :auto-upload="false"
                accept=".dll, .DLL, .xml, .XML"
                :http-request="httpRequest"
                >
                <el-button size="small" type="primary">点击上传</el-button>
                <span slot="tip" class="el-upload__tip">&nbsp;&nbsp;&nbsp;只能上传dll/xml文件</span>
            </el-upload>
        </el-form-item>
        <el-form-item label="作者名称" prop="authorName">
            <el-input v-model="newData.authorName"></el-input>
        </el-form-item>
        <el-form-item label="作者单位" prop="authorFirm" >
            <el-input v-model="newData.authorFirm"></el-input>
        </el-form-item>
        <el-form-item label="模型类别" prop="number">
            <el-input v-model="newData.number"></el-input>
        </el-form-item>
        <el-form-item label="模型版本" prop="versions">
            <el-input v-model="newData.versions"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark"  label-width="80px">
            <el-input v-model="newData.remark" type="textarea"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="newForm" size="mini">确 定</el-button>
        <el-button @click="editDialog = false" size="mini">取 消</el-button>
    </div>    
  </div>
</template>
<script>
import request from "@/Utils/request";

export default {
  data () {
    return {
      newData:{},
      file:[]    
    }
  },
  methods:{
    httpRequest(param) {
        this.file.push(param.file);// 一般情况下是在这里创建FormData对象，但我们需要上传多个文件，为避免发送多次请求，因此在这里只进行文件的获取，param可以拿到文件上传的所有信息
    },
    // 提交
    newForm(){
        var upData = new FormData();
        this.$refs.upload.submit();// 这里是执行文件上传的函数，其实也就是获取我们要上传的文件   
        this.file.forEach(function (file) {// 因为要上传多个文件，所以需要遍历
            upData.append('file', file, file.name); 
            // upData.append('file', this.file); //不要直接使用我们的文件数组进行上传，你会发现传给后台的是两个Object
        })
        upData.append("body", JSON.stringify(this.newData)) // 这里需要转换一下格式传给后台
        request
        .post('http://202.41.241.221:9095/uploader/uploadFile',upData)
        .then(function(response) {
        if (response.data.code == 200) {
        }
        })
        .catch(function(error) {
            console.log(error);
        });
    } 
  }
}
</script>
<style scoped>
#text{
  background: #fff;
  margin: 20px;
  padding: 20px
}
</style>

效果展示

将表单内容以formdata形式传参
newForm(){
    var vm=this; 
    var upData = new FormData();
    this.$refs.upload.submit(); 
    this.file.forEach(function (file) {
        upData.append('file', file, file.name); 
    })
    Object.keys(vm.newData).forEach(function(key){
      upData.append(key, vm.newData[key]); 
      console.log(key,vm.newData[key])
    });
    request
    .post('http://202.41.241.221:9095/uploader/uploadFile',upData)
    .then(function(response) {
    if (response.data.code == 200) {
    }
    })
    .catch(function(error) {
        console.log(error);
    });
} 

效果展示

使用Jmeter串联调用多个接口

Jmeter接口数据传递
使用Jmeter串联调用多个接口
前言
目标：登录一批账号后，立即使用该账号发送一批日记
一、单独建立接口请求
1.用Charles抓取app登录和发布日记的接口
2.代入已有的参数检查一下发日记接口是否能够调用
二.连接数据库，完成接口数据传递
1.创建JDBC Connection configuration,用来连接数据库
2.创建JDBC Request,查询所需的数据
3.添加【正则表达式提取器】
4.添加【循环控制器】
5.添加【计数器】
6.JDBC Reques查询次数语句
7.创建一个HTTP Request，将phone的参数传到我们同请求发送的参数phone中
8.使用JSON Extractor（JSON后置处理器）将UserID，UserKey取出来
9.创建HTTP Request，将UserID与UserKey的参数传入postfeed（发布日记）发送的请求参数中
10.单独运行检查接口是否串联成功
11.线程组中增加【CSV数据文件设置】
12.运行，查看结果树
13.设置线程组，批量运行
14.生成log文件



前言
使用Jmeter单独调用接口现在基本上已经满足了我们日常接口相关工作的90%内容；但是，日常工作当中仍然有一些工作无法使用一个接口单独完成；因此，我在此处例举一个相对来说较好理解的实例给大家，内容基本上是流程框架的描述，希望对大家有所帮助。



提示：以下是本篇文章正文内容，下面案例可供参考
目标：登录一批账号后，立即使用该账号发送一批日记
一、单独建立接口请求
1.用Charles抓取app登录和发布日记的接口


2.代入已有的参数检查一下发日记接口是否能够调用
下面是发布日记的HTTP Request


下面是登录接口的请求结果


下面是发日记接口的请求结果


二.连接数据库，完成接口数据传递
1.创建JDBC Connection configuration,用来连接数据库

2.创建JDBC Request,查询所需的数据

获取到数据后，我们需要一个处理器将我们查询到的数据提取出来，这里用【正则表达式提取器】将我们查询到的phone提取出来通过传参传到我们需要这个数据的地方
3.添加【正则表达式提取器】

我们将通过正则表达式提取出来的参数phone传到将要发送的参数phone中，但是要达到每个用户都登录一次的效果，我们在请求前还要加上一个循环控制器
4.添加【循环控制器】

然后再在控制器中嵌套一个计数器，使它每次递增1
5.添加【计数器】

为了知道我们到底要循环多少次，先计算我们从数据库中得到了多少条数据，添加一个JDBC Request查询语句
6.JDBC Reques查询次数语句

7.创建一个HTTP Request，将phone的参数传到我们同请求发送的参数phone中


上面phone中的__V函数可以用来拼接两个变量，我们将计数器得到的index与phone两个变量拼接

梳理一下：

发布日记必要参数：UserID，UserKey，content（文本内容），imageIDList（图片内容）
8.使用JSON Extractor（JSON后置处理器）将UserID，UserKey取出来



9.创建HTTP Request，将UserID与UserKey的参数传入postfeed（发布日记）发送的请求参数中

10.单独运行检查接口是否串联成功

现在我们可以用多个账号发送日记了，但是我们发送的日记是相同的，现在我们需要使用一个CSV数据文件工具，这样我们就可以将我们想要发的日记编写成一个CSV文档，通过jmeter的CSV数据文件设置工具，将文档里的内容传参到接口请求的content中
11.线程组中增加【CSV数据文件设置】

在请求中引用csv数据文件中的变量：


12.运行，查看结果树

13.设置线程组，批量运行

14.生成log文件
jmeter -n -t post.jmx -l report\01-result.csv -j report\01-log.log

-n 表示设置命令行模式

-t 表示指定jmx脚本路径

-l 表示指定结果文件路径

-j 表示指定执行日志路径

在项目开发中，web项目的前后端分离开发，APP开发，需要由前后端工程师共同定义接口，编写接口文档，之后大家都根据这个接口文档进行开发，到项目结束前都要一直维护。

一、为什么要写接口文档？

正规的团队合作或者是项目对接，接口文档是非常重要的，一般接口文档都是通过开发人员写的。一个工整的文档显得是非重要。
项目开发过程中前后端工程师有一个统一的文件进行沟通交流开发，项目维护中或者项目人员更迭，方便后期人员查看、维护

二、接口规范是什么？
首先接口分为四部分：方法、uri、请求参数、返回参数


方法:新增(post) 修改(put) 删除(delete) 获取(get)






接口详情





地址
www.baidu.com


方式
GET




uri：以/a开头，如果需要登录才能调用的接口(如新增、修改；前台的用户个人信息，资金信息等)后面需要加/u，即：/a/u；

中间一般放表名或者能表达这个接口的单词；get方法，如果是后台通过搜索查询列表，那么以/search结尾，如果是前台的查询列表，以/list结尾；url参数就不说了中间一般放表名或者能表达这个接口的单词；get方法，如果是后台通过搜索查询列表，那么以/search结尾，如果是前台的查询列表，以/list结尾；url参数就不说了


请求参数和返回参数，都分为5列：字段、说明、类型、备注、是否必填

字段是类的属性；说明是中文释义；类型是属性类型，只有String、Number、Object、Array四种类型；

备注是一些解释，或者可以写一下例子，比如负责json结构的情况，最好写上例子，好让前端能更好理解；是否必填是字段的是否必填。


返回参数结构有几种情况：


返回接口调用成功还是失败（如新增、删除、修改等），如下图：




返回结果
格式
JSON




状态码
200
success(成功)


状态码
500
error(失败)


状态码
501
param error(参数错误)


…
…
…




如果要返回某些参数，则有两个结构体：1是code/mesage/data，2是data里写返回的参数,data是object类型；


如果要返回列表，那么有三个结构体，1是code/mesage/data,data是object，里面放置page/size/total/totalPage/list 5个参数，其中list是Arrary类型，list里放object，object里是具体的参数。





注意：uri地址里不允许出现大写字母，如果是两个单词拼接，用/分开


三.如何合理设计接口？
一、 设计原理

深入了解需求:从“客户端-接口-数据库”的层次上看，接口明显扮演着承上启下的角色，一方面要明白接口要什么数据，另一方面要考虑如何从数据库获取、组织数据。所以如果不了解需求，你就无法正确抽象对象来组织数据给客户端，也无法验证数据库的数据结构能否满足需求。
了解数据库结构:既然接口要明白如何从数据库获取、组织数据，就当然要了解数据库结构啦。
了解客户端原型:了解原型，其实更多是为了帮助你设计接口时需要提供的数据和结构。

二、设计原则

充分理由:不是随便一个功能就要有个接口，也不是随便一个需求就要加个接口。每新建一个接口，就要有充分的理由和考虑，无意义的接口不仅增加了维护的难度，更重要是对于程序的可控性的大大降低，接口也会十分臃肿。
职责明确:一个接口只负责一个业务功能，比如查询会员，但不要在查询会员的同时还有修改权限等类似的其他业务功能，应该分成两个接口做。
高内聚低耦合:一个接口要包含完整的业务功能，而不同接口之间的业务关联要尽可能的小。
分析角度明确:设计接口分析的角度要统一明确。否则会造成接口结构的混乱。
入参格式统一:所有接口的参数格式要求及风格要统一，不要一个接口参数是逗号分隔，另一个就是数组;不要一个接口日期参数是x年x月x日风格，另一个就是x-x-x。
状态及消息:提供必要的接口调用状态信息。调用是否成功?如果失败，那么失败的原因是什么。这些必要的信息必须要告诉给客户端。
控制数据量:一个接口返回不应该包含过多的数据量，过多的数据量不仅处理复杂，对数据传输的压力也非常大，会导致客户端反应缓慢。过多的数据量很多时候都是接口划分不明确。