快看，前端小白怎么快速开发页面（API开放平台前后端开发笔记）

2024-08-22 20:05

阅读352

2024-08-22 20:05

阅读 352

前言

陆陆续续做了二十天也是把接口开放平台开发差不多了，主要卡进度的还是前端==，一开始是拉的星球前端代码，因为没学过react,改的很困难,然后就后端面对前端接口开发了接着想要自己开发一些功能的时候发现，前端不会改，于是花了一星期时间用ant design pro of vue 重新写了前端,这篇笔记也会主要写一下我这个只学过一点html,css,js和vue全程看文档写的前端小白，是如何通过ant design pro of vue的文档来使用这个框架的，希望可以为学后端的小伙伴写前端能有些帮助基本界面如下（接口分析页还未完成，因为支付模块还没有什么想法，例如分布式控制购买，这些不知道怎么写的好一点，打算先学习一下，后面回来优化这个模块）

前端 Ant design pro of vue

这里我写前端的时间是2024年8月22日，拉取的框架代码使用的是vue2，本文结合官方文档食用更舒服噢

文档地址

ant design pro of vue: Ant Design Pro of Vue (antdv.com)

ant design of vue: Ant Design of Vue - Ant Design Vue (antdv.com)

入门使用

ant design pro of vue看见这个名字大家应该都能知道是基于vue的，通过官方文档我们可以直接拉取他的demo，根据demo和文档来编写代码实现自己想要的界面首先根据文档拉取代码，使用编译器打开，安装依赖。由于对前端没有啥要求，能看就行，于是我在安装依赖后干的第一件事情就是把eslint给移除掉，移除方法是把eslint.json这个文件清空，但是不要删掉这个文件，不然会报错接着直接打开package.json运行,不出意外的报错了...报了一个找不到webpack依赖的错误，通过百度几种方法后通过重新安装缺失的依赖后解决然后点击package.json的run serve就运行成功啦，最初的界面这里框架基本把需要用到的组件都展示出来了，选择拼起来用就可以了(仅针对后端选手对写前端没什么要求而言)

路由和菜单

这里需要先讲一下ant design pro权限控制 ant design pro的路由和菜单是绑定在一起的，拉取的代码是只需要你往src/config/router.config.js里的asyncRouterMap对象里面填一个路由对象，他就可以生成菜单和路由，废话不多说上官方文档的介绍如何添加菜单栏中的一级选项，二级选项只需要在asyncRouterMap第一个对象内写相对于嵌套路由即可，如下图，如果我想给接口广场加几个子菜单选项，就在他的chidren里写相对于的路由对象即可

▼
javascript
复制代码
{
    path: 'https://pro.loacg.com/docs/getting-started', //路由地址
    name: 'docs', //路由名字
    hidden: false, //是否在菜单栏中显示
    meta: { //看官方文档
        title: '文档',  //在菜单中显示的名称
        icon: 'form',  //图标
        keepAlive: true //是否开启路由缓存
   }
}

这里有个需要注意的是，如果我想要自动生成路由但是不显示在菜单的话就需要在路由对象中设置hidden值true，我这个平台不需要很严格的权限控制，就只有管理和分析页只对管理员开放，所以我决定就把权限控制去掉（绝不是因为看着他好复杂）去掉权限控制的方法：https://pro.antdv.com/docs/remove-authority-management

发请求

可以直接看文档 https://pro.antdv.com/docs/server ant design pro 是已经把axios封装了，在src/utils/request.js内可以修改请求的主机地址在src/api内建个js写自己的请求路径，参数等等，直接复制个login.js，对着改就ok

至于怎么新增页面，只需要在view里面添加vue组件，然后到根据上文的路由和菜单注册一下就ok了

这里推荐不要把开始的那些页面组件删掉，把路由删掉或隐藏就ok了，稍微改一改就可以写成自己需要的页面，实现小白快速快乐开发

后端

由于是先写项目再写笔记，有些问题也记不得了

主要的问题

如何调用第三方接口

我的处理方法是在新建第三方接口时统一加上一个前缀例如/interface/other 这样子在调用接口时，请求由后台的InterfaceInfoController的invoke接口使用http的api向相对应发请求时会被网关拦截下来，网关根据/interface/other转发到统一处理的服务器，在服务器内对针对不同请求类型发送http请求

### 全局异常拦截这里百度以及参考了星球另外一个小伙伴reFlux的处理方法 ### 网关获取使用Body 给网关添加了一个最高级别过滤器,对请求的body方法进行重写,具体原理我也不是很懂，先记录一下方法吧 ```javascript @Component @Slf4j public class RequestParamGlobalFilter implements GlobalFilter, Ordered {

▼
text
复制代码
@Override
public Mono<Void> filter(ServerWebExchange exchange, GatewayFilterChain chain) {

    /**
     * save request path and serviceId into gateway context
     */
    ServerHttpRequest request = exchange.getRequest();
    HttpHeaders headers = request.getHeaders();

    // 处理参数
    MediaType contentType = headers.getContentType();
    long contentLength = headers.getContentLength();
    if (contentLength > 0) {
        if (MediaType.APPLICATION_JSON.equals(contentType) || MediaType.APPLICATION_JSON_UTF8.equals(contentType)) {
            return readBody(exchange, chain);
        }
    }

    return chain.filter(exchange);
}


/**
 * default HttpMessageReader
 */
private static final List<HttpMessageReader<?>> messageReaders = HandlerStrategies.withDefaults().messageReaders();
/**
 * ReadJsonBody
 *
 * @param exchange
 * @param chain
 * @return
 */
private Mono<Void> readBody(ServerWebExchange exchange, GatewayFilterChain chain) {
    /**
     * join the body
     */
    return DataBufferUtils.join(exchange.getRequest().getBody()).flatMap(dataBuffer -> {
        byte[] bytes = new byte[dataBuffer.readableByteCount()];
        dataBuffer.read(bytes);
        DataBufferUtils.release(dataBuffer);
        Flux<DataBuffer> cachedFlux = Flux.defer(() -> {
            DataBuffer buffer = exchange.getResponse().bufferFactory().wrap(bytes);
            DataBufferUtils.retain(buffer);
            return Mono.just(buffer);
        });
        /**
         * repackage ServerHttpRequest
         */
        ServerHttpRequest mutatedRequest = new ServerHttpRequestDecorator(exchange.getRequest()) {
            @Override
            public Flux<DataBuffer> getBody() {
                return cachedFlux;
            }
        };
        /**
         * mutate exchage with new ServerHttpRequest
         */
        ServerWebExchange mutatedExchange = exchange.mutate().request(mutatedRequest).build();
        /**
         * read body string with default messageReaders
         */
        return ServerRequest.create(mutatedExchange, messageReaders).bodyToMono(String.class)
                .doOnNext(objectValue -> {
                    log.debug("[GatewayContext]Read JsonBody:{}", objectValue);
                }).then(chain.filter(mutatedExchange));
    });
}
@Override
public int getOrder() {
    return HIGHEST_PRECEDENCE;
}

}

▼
text
复制代码
在其他过滤器需要获取body这样写
```javascript
  AtomicReference<String> requestBody = new AtomicReference<>("");
  RecorderServerHttpRequestDecorator requestDecorator = new RecorderServerHttpRequestDecorator(request);
  Flux<DataBuffer> body = requestDecorator.getBody();
  body.subscribe(buffer -> {
      CharBuffer charBuffer = StandardCharsets.UTF_8.decode(buffer.asByteBuffer());
      requestBody.set(charBuffer.toString());
  });
  //TODO 拿到body参数之后做你自己的校验
  body = requestBody.get();

结语

在写这篇笔记之前做完了用户中心和伙伴匹配，但是都没有做笔记，对于一些问题的处理也没有即使记录，使他在我的记忆中慢慢淡去了。。。于是在快做完api开放时我就觉得不能如此，还是要把一些问题记录下来，以后遇到也能更快的解决，以及分享给各位，写这篇笔记主要还是安利ant design pro of vue，简直是前端小白福音，简单的操作，不需要专注于前端页面的绘画，只需搞好请求的发送与处理就差不多了开了这个头希望自己在后面的项目都要实时写笔记，就从今天的面试鸭项目直播开始吧

问答助学