落霞与孤鹜齐飞,秋水共长天一色。
百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 互联网 > 技术教程 > 正文

springboot服务端接口公网远程调试,并实现HTTP服务监听

jellybean 2023-05-26 23 浏览 0 评论

前后端分离项目中,在调用接口调试时候,我们可以通过cpolar内网穿透将本地服务端接口模拟公共网络环境远程调用调试,本次教程我们以Java服务端接口为例。

1. 本地环境搭建

1.1 环境参数

? JDK1.8

? IDEA

? SpringBoot

? Maven

? Tomcat9.0

? Postman

1.2 搭建springboot服务项目

搭建一个springboot服务的项目,编写一个接口,为了更好直观看到,这里创建一个pos请求的接口

@RestController
@RequestMapping("/test")
public class InterfaceTest {

/**
* 测试接口
* @param data
* @return Map<String,String>
*/
@PostMapping("/interTest")
public Map<String,String>interTest(@RequestBody Map<String,String> data){
System.out.println(data);

if (data.size()>0){

return data;
}

data.put("code","404");
return data;
}
}

2. 内网穿透

这里我们使用cpolar来进行内网穿透,支持http/https/tcp协议,不限制流量,无需公网IP,也不用设置路由器,使用简单。

2.1 安装配置cpolar内网穿透

cpolar官网:https://www.cpolar.com/

访问cpolar官网,注册一个账号,然后下载并安装客户端,具体安装教程可以参考官网文档教程。

? windows系统:在官网下载安装包后,双击安装包一路默认安装即可。

? linux系统:支持一键自动安装脚本,详细请参考官网文档——入门指南

2.2 创建隧道映射本地端口

cpolar安装成功后,在浏览器上访问本地9200端口【http://localhost:9200】,使用cpolar账号登录。

点击左侧仪表盘的隧道管理——创建隧道,创建一个tomcat的8080端口 http隧道

? 隧道名称:可自定义命名,注意不要与已有的隧道名称重复

? 协议:选择http

? 本地地址:8080

? 域名类型:免费选择随机域名

? 地区:选择China vip

点击创建

隧道创建成功后,点击左侧的状态——在线隧道列表,查看所生成的公网地址,然后复制地址

2.3 测试公网地址

这里以Postman接口调试工具向接口发送请求,在postman创建一个post请求方式.输入复制的公网地址加上接口路径,参数使用JSON格式,设置好参数点击

在服务接口端debug调试接口,查看请求是否进入接口,进入接口表示调用成功

3. 固定公网地址

由于以上使用cpolar所创建的隧道使用的是随机公网地址,24小时内会随机变化,不利于长期远程访问。因此我们可以为其配置二级子域名,该地址为固定地址,不会随机变化【ps:cpolar.cn已备案】

注意需要将cpolar套餐升级至基础套餐或以上,且每个套餐对应的带宽不一样。【cpolar.cn已备案】

3.1 保留一个二级子域名

登录cpolar官网,点击左侧的预留,选择保留二级子域名,设置一个二级子域名名称,点击保留,保留成功后复制保留的二级子域名名称

3.2 配置二级子域名

访问http://127.0.0.1:9200/,登录cpolar web UI管理界面,点击左侧仪表盘的隧道管理——隧道列表,找到所要配置的8080隧道,点击右侧的编辑

修改隧道信息,将保留成功的二级子域名配置到隧道中

? 域名类型:选择二级子域名

? Sub Domain:填写保留成功的二级子域名,本例为test01

点击更新

更新完成后,打开在线隧道列表,此时可以看到公网地址已经发生变化,地址名称也变成了保留过的二级子域名名称,将其复制下来

3.3 测试使用固定公网地址

打开postman,使用固定http地址进行调用

同样在服务端debug调试查看请求是否进入接口,进入接口表示成功

4. Cpolar监听器

我们还可以使用cpolar监听器(http://localhost:4040)查看接口请求日志,处理一个讨厌的bug。甚至可以重播请求消息包,加速测试的请求,单击重放(Replay)按钮,重新发送该HTTP信令请求,而不是手动重新触发操作。下面介绍使用cpolar监听器监听请求。

4.1 开启侦听功能

选择我们刚刚创建配置的http隧道,并点击右侧的编辑

打开高级设置,开启侦听功能

4.2 请求侦听

在浏览器访问本地4040端口,http://localhost:4040

向服务端发送请求后,此处就会显示相关的请求日志,可以看到请求的方式,请求的数据,接口路径,和返回状态及结果,极大提高了调试效率。

相关推荐

全栈之路:从零搭建docker+jenkins+node.js自动化部署环境

上两篇全栈之路:前端工程师如何从0开始了解Docker全栈之路:vue-cli3项目从搭建优化到docker部署1、docker部分1.1、docker简介Docker是一个开源的应用容器引...

Vue脚手架(基础+Node.js安装)【vue脚手架教程】

关于VueVue.js(读音:/vju?/,类似于:view)是一套构建用户界面的渐进式框Vue.js的官方网址是:https://cn.vuejs.org/index.html传统的前端开发...

开源Vue后端UI开箱即用解决方案——vuestic-admin

引言这是一个Vue的后端开箱即用UI项目框架,和之前的ReactAdmin类似,它是一个框架,也就意味着它帮你完成了很多公用的部分,你只需要在其基础上进行自己的项目扩展即可。大体上这是由Vue和boo...

用css3实现惊艳面试官的背景即背景动画(高级附源码)

我们传统的前端更多的是用javascript实现各种复杂动画,自从有了Css3transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越容易。这篇...

基于vue-cli4构建vue项目【vue cli搭建】

前提条件:(1)安装node.js(2)安装yarn(3)安装@vue/cliyarnglobaladd@vue/cli通过命令行模式创建一个项目:vuecreatehello-world注...

74、scss 是什么?在 Vue-cli 中的安装使用步骤是?有哪几大特性?

1、基本定义SCSS即是SASS的新语法,是SassyCSS的简写,是CSS3语法的超集,也就是说所有有效的CSS3样式也同样适合于SASS,SASS是CSS3的一个扩展,...

前端基础学习:Vue2.0实现移动端外卖平台项目,参考旧版饿了么!

主要依赖基于vue@2.0使用vue-cli@2.0搭建项目框架使用vue-router@2.1进行页面路由切换使用vue-resource@1.0.1进行http请求获取数据mock假数据...

手把手教你深刻理解vue实例的生命周期和钩子函数

虽然经常使用mounted、created等几个钩子函数,但是并没有很系统的将它和生命周期关联一起去理解,这导致我在最近项目里踩了坑。所以现在花点时间,整理一下这方面的知识。转载链接:https://...

记一次Vue3.0技术干货分享会【vue3.0入门】

作者:lulu_up转发链接:https://segmentfault.com/a/1190000022719461前言前面小编也整理了关于Vue3.0的设计原则、入门语法、虚拟Dom、Vue3.0...

Vue3 入门教程 两种方式创建Vue项目【创建一个vue3项目】

脚手架创建#全局重新安装最新版本的 @vue/cliyarnglobaladd@vue/cli@next#ORnpminstall-g@vue/cli@next#要...

打造vuecli3+element后台管理系统(三)优化路由和vuex仓库

我们在做后台系统的时候,经常会有比较多的功能页面,每个页面或多或少都会有需要存储在vuex中的数据,一般情况下我们会在state下定义不同的object,但是当功能一多,全部字段和action、mut...

2021年到了,Vue 3准备好了吗?【vue3正式发布了吗】

Vue3.0图/v3.cn.vuejs.org经历了两年多的开发,Vue3.0终于在2020年9月18日发布[1]。2021年年初,我抱着尝鲜的想法用Vue3及其生态编写了一个企业应用的管理后...

vue3学习第一步-创建vue3项目【vue3新建项目】

使用vue-cli创建vue3初始化项目介绍:1.创建一个vue3目录,安装vue-cli,vue-cli的版本4.0以上。cnpminstall@vue/cli(电脑已存在vue2不用cnp...

非常优秀vue开源框架Vuetify最新版本1.5.14【vue开发框架使用实例】

简介VuetifyStar数为19K+,提供了80多个Vue.js组件,这些组件是根据谷歌MaterialDesign指南实现的。开箱即用的项目脚手架,Vuetify已预先制作了8...

基于 vue3.x+vant3.x 搭建示例项目【搭建网站】

今天给大家分享一些如何使用Vue3.0+Vant3搭建demo项目。目前市面上有关vue3的项目并不多,vue3的UI组件库有ant-design-vue和vant-ui。接下来讲解下使用vue3、v...

取消回复欢迎 发表评论: