aegis-dev-tools的使用

Posted 2020-12-16 dshvv

前言
aegis-dev-tools是一个辅助开发前端的工具包，用于根据后端接口文档生成前端封装api请求。

 

创建后端项目
要求使用swagger，且controler书写规范，输入输出类型，备注都要 合理，比如

package com.dshvv.myblogserver.controller;

import com.dshvv.myblogserver.model.entity.Teacher;
import com.dshvv.myblogserver.utils.JsonResult;
import io.swagger.annotations.ApiOperation;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;

import java.util.ArrayList;

@RestController
@RequestMapping("/teacher")
public class TeacherController {

  @ApiOperation(value = "添加老师", notes = "添加老师的接口", produces = "application/json")
  @PostMapping
  public JsonResult save(Teacher teacher) {
    return JsonResult.success();
  }

  @ApiOperation(value = "获取老师", notes = "获取老师的接口", produces = "application/json")
  @GetMapping(path = "/{id}")
  public JsonResult get(@PathVariable int id) {
    Teacher t1 = new Teacher();
    t1.setId(202001);
    t1.setName("丁老师");
    t1.setAge(20);
    return JsonResult.success(t1);
  }

  @ApiOperation(value = "获取老师列表", notes = "获取老师列表的接口", produces = "application/json")
  @GetMapping()
  public JsonResult list() {
    Teacher t1 = new Teacher();
    t1.setId(202001);
    t1.setName("丁老师");
    t1.setAge(20);
    ArrayList teachers = new ArrayList();
    teachers.add(t1);
    return JsonResult.success(teachers);
  }

  @ApiOperation(value = "删除老师", notes = "删除老师的接口", produces = "application/json")
  @DeleteMapping
  public JsonResult delete(int id) {
    return JsonResult.success();
  }

}

 

package com.dshvv.myblogserver.controller;

import com.dshvv.myblogserver.model.entity.Teacher;
import com.dshvv.myblogserver.utils.JsonResult;
import io.swagger.annotations.ApiOperation;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;

import java.lang.reflect.Array;
import java.util.ArrayList;
import java.util.HashMap;

@RequestMapping
@RestController
public class OtherController {

  @ApiOperation(value = "后端服务起始页", notes = "用于用查看后端服务是否启动", produces = "text/html")
  @GetMapping("/")
  public ModelAndView Home() {
    return new ModelAndView("home");
  }

  @ApiOperation(value = "测试接口", notes = "用于测试后台是否可被访问", produces = "application/json")
  @GetMapping("/test")
  public JsonResult test() {
    return JsonResult.success();
  }
}

 

创建前端项目
要求用ts创建vue项目

 vue create vuetseg

 

开始使用
前端依赖依赖包

npm install aegis-api-proxy aegis-dev-tools

根目录增加配置文件api.config.js

module.exports = {
    templates: {},
    configs: [{
      url: ‘http://localhost:7777/v2/api-docs‘, // 后端swagger地址
      typeParameterReflects: [{
        name: ‘KeyValue‘,
        typeProperties: [‘key‘, ‘value‘]
      }, {
        name: ‘JsonResult‘,
        typeProperties: [‘data‘]
      }, {
        name: ‘Page‘,
        typeProperties: [‘content‘]
      }, {
        name: ‘SimplePage‘,
        typeProperties: [‘list‘]
      }, {
        name: ‘Pair‘,
        typeProperties: [‘first‘, ‘second‘]
      }, {
        name: ‘RequestValues‘,
        typeProperties: [‘data‘]
      }]
    }],
    typesAsAny: [‘JSONArray‘, ‘Serializable‘, ‘JSONObject‘],
    unwrapTypes: [‘Response‘, ‘ResponseSimpleEnum‘, ‘JsonResult‘]
  };

新增文件夹
根目录下，新增文件夹api、types

生成代码
packge.json的script增加如下代码

"api": "generate-api"

打开终端，执行

npm run api

此时，打开api、types两个文件夹，即可发现接口以及接口所需的类型文件都已经生成
但是此时还是不能使用，仍然需要继续配置

配置使用
如上，单纯的生成是不能使用的，还需要额外的配置
新增一个配置文件，configapibase.config.ts。当然在任意位置和文件名，无特定要求
然后内容如下

import {Global} from ‘aegis-api-proxy‘;
import apiObj from ‘./api-definition‘;

// ajax请求的基本配置
const config = {
  pathSuffix: ‘‘,
  basePath: ‘http://localhost:7777‘,
  httpStatusErrorHandler: () => {
    return true;
  },
  logicErrorHandler: () => {
    return true;
  }
};

export default Global.proxyAPI(apiObj, config, {
  headers: {common: {}}
});

将此文件引入main.js中

import ‘./config/apibase.config‘

自此，已经全部配置准备完毕

 

测试验证
app.vue修改如下

<template>
  <div class="app">
    <button @click="test">测试</button>
  </div>
</template>

<script lang="ts">
  import {Component, Vue} from ‘vue-property-decorator‘;

  @Component
  export default class HelloWorld extends Vue {
    private async test() {
      const res: any = await this.$api.teacher.get.requestData(1);
      console.log(res);
    }
  }
</script>