整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
~java完整代码如下~~
package one; //包名随意
import java.applet.*;
import java.awt.*;
import java.awt.event.*; //系统库
public class ChooseButton extends Applet implements ActionListener{
String s="以上";
Button b1=new Button("确定");
Button b2=new Button("取消"); //初始化并定义各个变量-随意
public void init(){
add(b1);
add(b2);
b1.addActionListener(this);
b2.addActionListener(this); //设置监听-你会点击哪个
}
public void actionPerformed(ActionEvent e){
s=e.getSource()==b1?b1.getLabel():b2.getLabel(); //进行选择判断动作
repaint();
}
public void paint(Graphics g){
g.setColor(Color.BLUE);
Font f=new Font("黑体",Font.BOLD,20); //常规属性设置-显示内容-随意
g.setFont(f);
g.drawString("你单击的是"+s+"按钮",50,70);
}
}
----华丽分割线----
运行java程序后
运行结果初始
点击“确定”按钮后
选择交互显示
运行的同时，在你的bin文件夹里会生成一个网页文件
html文件
该文件理论上也是可以用浏览器打开的，希望感兴趣的朋友多多尝试。
钮点击追踪可能是网站运营中最常见的需求之一。现在，通过GA4 和 Google 跟踪代码管理器(GTM)的配合，我们可以轻易实现追踪，甚至可以导入到google ads，辅助广告优化。
具体实现方法有很多，本文主要介绍使用GTM的方法。
首先，我们需要创建一个触发器，或更具体地说，创建一个通用点击触发器。这将允许 GTM 监听与点击相关的事件。
在 Google 跟踪代码管理器中，我们可以选择 2 个点击触发选项：
? All Elements
? Just links
Just links是一种常见的方式，因为许多按钮本质上是用户点击的装饰链接。但是，如果您的按钮恰好不是链接，您将无法获得更多信息来跟踪。
这就是为什么我们喜欢使用All Elements作为触发器类型。此触发器类型能够侦听任何内容（例如图像、文件、按钮、空白区域等）和链接上发生的点击。它只是更通用、更通用。
创建一个新触发器并选择All Elements。
现在，GTM 可以识别何时发生点击，无论是链接点击还是任何元素点击。
然而，我们可能需要更多的信息，而不仅仅是知道存在点击交互。
要获取有关点击的信息，请转到 Google 跟踪代码管理器并启用与点击相关的所有内置变量。这些变量将为我们提供所需的大部分点击详细信息，例如Click Text，它会显示按钮上的文本。
在 GTM 工作区中，选择Variables，然后选择Configure。
启用所有单击变量。
该信息将用于创建触发我们的标签的条件。
返回我们的产品页面，让我们单击Add to Cart按钮。（在这里，添加购物车仅仅是示例，你可以把这个方法应用在任何按钮）
前往 Google 跟踪代码管理器的调试界面。识别Summary下的Click事件并选择它。查看之前启用的变量向我们展示了什么信息。
这里我们需要找到足够独特的数据作为触发条件。
在“调试”界面中，选择左侧面板中的Click事件，然后单击Variables选项卡。
重点关注我们已启用的变量（Click Classes, Click ID, Click Target, Click Text, and Click URL），尽力识别按钮特有的数据。
通常，许多按钮都是构建为链接的，这意味着您的 Click URL 变量值很有可能显示链接。您可以将其用于您的触发条件。
但是，很多时候并非所有维度的数据都齐全。在我们的示例中，Click URL没有值，这时我们可以使用另外两条信息：
? Click Classes，值为：single_add_to_cart_button button alt
? Click Text，值为： Add to cart
需要注意的是，Click Classes和Click Text很有可能不是唯一值，该方法只适用于追踪网站所有同类按钮。
如果我们仅仅只需要追踪与 Ninja 产品的添加到购物车按钮，怎样才能做到这一点呢？
首先，我们需要确保该按钮是唯一的，并且在整个网站中不会重复。
为此，我们将使用 Chrome 开发人员工具。如果您不熟悉，只需按照以下步骤操作即可。
右键单击您的按钮并选择检查。
这将使您能够访问浏览器的开发人员工具来查看按钮的 HTML 和 CSS 源代码。
单击键盘上的CTRL + F来过滤 HTML 文档。
复制并粘贴该类并将其粘贴到过滤器中。我们将复制粘贴single_add_to_cart_button 按钮 alt。
过滤器将显示您的网站上存在多少个此类。
如果过滤器结果是1 of 1 ，这意味着该按钮的类仅有唯一一项。使用与此按钮相关的 GTM 点击类只会跟踪此按钮，而不会跟踪另一个按钮。
如果结果超过 1 个，而您只想追踪特定按键，不是同类的所有按键，则需要进一步过滤。
解决方案是在触发器中添加页面 URL ，以仅跟踪位于 Flying Ninja 海报所在位置的“添加到购物车”按钮。
让我们回到All Elements触发器。
默认情况下，我们的触发器会帮助我们检测所有用户点击。我们需要从All Clicks切换为Some Clicks。
接下来是触发条件的设置，在我们的例子中是：Click Classes → contains → single_add_to_cart_button
重命名您的触发器并保存。
首先，我们创建一个新的 GA4 事件代码。 Tag Type选择Google Analytics: GA4 Event，再根据GA4的衡量ID对应选择Configuration Tag。如果没有预设的Tag，则选择None - Manually Set ID，再手动填入衡量ID即可。
然后我们需要命名我们的事件。建议button_click。遵从Google 的命名规则的最佳实践是小写字母加下划线。
此外，最好不要发明名称，而应该首先查看 Google 跟踪的内容。增强测量中会跟踪点击次数，但没有任何特定于按钮点击的内容。他们将事件命名为Click，我们也可以使用它。
此时，我们可以像这样将事件发送到 GA4。
但是，我们希望向 GA4 发送有关此次点击的更多详细信息，因此我们将使用事件参数。
按钮的文本和页面位置对我们很有价值，因此我们将添加 2 个自定义参数。
我们的设置如下所示。
? 注意：我们讨论的命名事件的方法与命名事件参数的方法相同。建议使用推荐事件或增强测量列表中任何适合您需求的事件。如果您选择为事件参数使用自定义名称，并且想要在 GA4 报告（自定义维度）中使用，则参数的数量将被限制为 50 个。
Google 的推荐事件和增强型测量没有与按钮文本相关的参数。我们能找到的最接近的是link_text。link_text参数用于文件下载 。
你也可以自定义Parameter Name。例如，button_text，甚至click_text。
由于目标是显示按钮文本的值，因此我们可以从之前启用的Click Text变量中获取值。
选择Click Text。
如果我们还想知道按钮所在的页面。只需重复上述过程并在Value下选择Page页面 URL即可。
添加我们之前创建的所有触发器。
保存您的标签。
启用Preview模式并单击Add to cart按钮。
您可以看到我们的标签已触发。
在 GA4 的 DebugView 中，您将看到即将发生的事件。
在参数旁边，您可以看到我们的link_text和page_location事件参数及其值。
至此，事件创建已经完成。最多不超过48小时，我们就可以在GA4的事件中找到它，也可以用它创建转化和受众。
ostman是一款支持http协议的接口调试与测试工具，其主要特点就是功能强大，使用简单且易用性好 。无论是开发人员进行接口调试，还是测试人员做接口测试，postman都是我们的首选工具之一 。那么接下来就介绍下postman到底有哪些功能，它们分别都能干些什么 。下面先通过一张图来直观地来看下postman中所包含的功能 。
当然，以上功能也只是展示了postman的一部分功能，为了能更加全面的体现这款工具的特点，我将从以下三个维度来加以说明。它们分别是：
postman在2018年之后就不再支持浏览器版本，所以，想要使用它就必须先下载客户端再安装使用，下面就以Windows系统为例进行安装 。
1.下载与安装
postman安装步骤：
2.界面导航说明
初次使用postman的朋友可能对界面上的一些元素不太熟悉，下面就通过一张图来说明这些元素的含义 。
3.发送第一个请求
如果你是第一次使用postman发送请求，下面这个例子可以作为一个最基本的入门，可以帮我们建立一个初始印象 。
1.常见类型的接口请求
常见的接口有如下四种类型，分别是含有查询参数的接口，表单类型的接口，json类型的接口以及含有上传文件的接口，以下就对这四种类型接口及如何在postman中请求进行说明 。
1.1 .查询参数的接口请求
什么是查询参数?
所谓的查询参数，其实就是URL地址中问号（?）后面的部分就叫查询参数，比如：http://cx.shouji.360.cn/phonearea.php?number=13012345678 。在这个接口中，查询参数就是:number=13012345678 。而这一部分是由有键值对组成，格式为：key1=value1&key2=value2, 如果有多组键值对，要用&隔开 。
postman如何请求
在postman中实现对这类接口请求非常简单，一般就需要明确俩个参数即可，一个是请求方法，一个请求地址。
针对上面的那个接口，地址已经给出 ，而它的请求方法是get 。那么在postman中只需要把这俩个参数填写上即可请求 。
具体实现步骤：
说明：查询参数的URL一般直接拷贝到输入的URL地址栏中就可以了，当然也可以把查询参数在Params中输入，俩者的效果是一样的 。
1.2 表单类型的接口请求
什么是表单 ？
我们都知道，在发送HTTP请求的时候，一个请求中一般包含三个部分，分别是请求行，请求头，请求体 。
不同的接口，请求体的数据类型是不一样的，比较常见的一种就是表单类型，那么什么是表单类型呢 ？ 简单理解就是在请求头中查看Content-Type，它的值如果是:application/x-www-form-urlencoded .那么就说明客户端提交的数据是以表单形式提交的 。见下图
postman中如何请求？
如果在postman请求上图的接口，我们只需要填写四个参数，分别是(可以参考上图)：
实现步骤：
1.3 上传文件的表单请求
在做接口测试时，我们经常会遇到需要上传文件的接口，比如微信的更新头像。这就需要用到：multipart/form-data。它也属于一种表单，但它既支持表单请求，也支持文件上传。 它的请求报文中数据往往是下面这样的。
POST http://localhost/index.php/home/Uploadify/imageUp/savepath/head_pic/pictitle/banner/dir/images.html HTTP/1.1
Content-Type: multipart/form-data
file=a1.jpg这种类型的接口，在postman中该如何请求呢 ？ 我们先分析需要填写的参数 。
实现步骤：
1.4 json类型的接口请求
这应该是接口测试中最常见的一种情况了 ， 也就是请求体类型为json,我们来看下这个请求报文 。
POST http://xxx/api/sys/login HTTP/1.1
Content-Type: application/json;charset=UTF-8
{"account":"root","password":"123456"}根据以上报文，我们可以分析出，我们在postman只需要填写四个参数即可，具体如下：
实现步骤：
2.接口响应数据解析
响应数据是发送请求后经过服务器处理后返回的结果，响应由三部分组成，分别是状态行、响应头、响应体。我们来看下postman的响应数据展示。
在postman中的响应数据展示：
那么这些数据对我们做接口测试有什么作用呢 ？
接下来我们再来关注下Body中的几个显示主题，分别是：Pretty，Raw，Preview .
Pretty:翻译成中文就是漂亮 ， 也就是说返回的Body数据在这个标签中查看 ，都是经过格式化的，格式化后的数据看起来更加直观，所以postman默认展示的也是这个选项。比如返回html页面，它会经过格式化成HTML格式后展示，比如返回json，那么也会格式化成json格式展示 。
Raw：翻译成中文未经过加工的，也就是原始数据 ，原始数据一般都是本文格式的，未经过格式化处理的，一般在抓包工具中都有这个选项 。
Preview：翻译成中文就是预览，这个选项一般对返回HTML的页面效果特别明显，如请求百度后返回结果，点击这个选项后就直接能查看到的页面 ，如下图 。同时这个选项和浏览器抓包中的Preview也是一样的 。
3.接口管理（Collection）
当我们对一个或多个系统中的很多用例进行维护时，首先想到的就是对用例进行分类管理，同时还希望对这批用例做回归测试 。在postman也提供了这样一个功能，就是Collection 。通过这个Collection就可以满足我们的上面说的需求。
先对Collection功能的使用场景做个简单总结 。
那么Collection是如何去管理用例的呢 ？ 先想象我们要测试一个系统，系统下有多个模块，每个模块下有很多的被测接口用例 。那么基于这个场景，我们来通过Collection来进行实现：
那么通过以上三个步骤，达到的效果就是如图所示：
总结，通过上面的操作，我们实现了一个最简单的demo模型。但实际上，有了这个功能才是postman学习的开始，因为很多功能都是基础这个功能的基础上进行的，比如用例的批量执行，Mock ，接口文档等功能 。
4. 批量执行接口请求
当我们在一个Collection中编写了很多的接口测试用例，想一起执行这批用例，在postman中是如何操作呢 ？
实现步骤：
对上面的几个红框内的功能进行简单说明：
总体来说，这个功能主要是用于对一个Collection中的所有用例或部分用例进行批量运行，已达到手工回归测试的目的。
5.日志调试
在做接口测试时，经常会因为代码写的有问题导致报错，这时通过查看日志就显得非常重要了，postman也提供了这样的功能，它允许我们在脚本中编写打印语句，查看打印的结果 ; 同时也可以查看每个请求的日志信息 。
在postman中编写日志打印语句使用的是JavaScript，编写的位置可以是Pre-request Script 或Tests标签中。编写打印语句如：console.log("我是一条日志")
那么打印的日如何看呢 ？ 在postman中有俩个入口，第一个入口就是：view-show postman console 。
第二个入口就是左下角第三个图标 。
打开的日志界面
这里面有几个比较实用的功能：
总之，通过这个功能，我们在请求接口报错时，通过打印响应的日志，就能很轻松地找到问题原因了 。
6.断言
如果没有断言，我们只能做接口的功能测试，但有了断言后，就为我们做自动化提供了条件，并且在postman中的断言是非常方便和强大的 。
我们先来了解下postman断言的一些特点 ，具体如下
在上面我们介绍到，编写的断言代码是JavaScript，那如果不会写怎么办 ？ 不用担心，因为postman已经给我们内置了一些常用的断言 。用的时候，只需从右侧点击其中一个断言，就会在文本框中自动生成对应断言代码块 。
接下来就让我们了解一些常用断言，还是按响应的组成来划分，分别是状态行，响应头，响应体。
状态行中又包括状态码，状态消息 。在postman也可以对这两个进行断言
状态行中的断言：
pm.test("Status code is 200", function () {
pm.response.to.have.status(200); //这里填写的200是预期结果，实际结果是请求返回结果
});pm.test("Status code name has string", function () {
pm.response.to.have.status("OK"); //断言响应状态消息包含OK
});响应头中的断言
pm.test("Content-Type is present", function () {
pm.response.to.have.header("Content-Type"); //断言响应头存在"Content-Type"
});断言响应体(重点)
pm.test("Body matches string", function () {
pm.expect(pm.response.text()).to.include("string_you_want_to_search");
});
//注解
pm.expect(pm.response.text()).to.include("string") 获取响应文本中包含stringpm.test("Body is correct", function () {
pm.response.to.have.body("response_body_string");
});
//注解
pm.response.to.have.body("response_body_string"); 获取响应体等于response_body_stringpm.test("Your test name", function () {
var jsonData=pm.response.json();
pm.expect(jsonData.value).to.eql(100);
});
//注解
var jsonData=pm.response.json() 获取响应体，以json显示，赋值给jsonData .注意：该响应体必须返会是的json，否则会报错
pm.expect(jsonData.value).to.eql(100) 获取jsonData中键名为value的值，然后和100进行比较响应时间(一般用于性能测试)
pm.test("Response time is less than 200ms", function () {
pm.expect(pm.response.responseTime).to.be.below(200); //断言响应时间<200ms
});案例说明：
针对以下接口返回的数据进行断言：
{
"cityid": "101120101",
"city": "济南",
"update_time": "2020-04-17 10:50",
"wea": "晴",
"wea_img": "qing",
"tem": "16",
"tem_day": "20",
"tem_night": "9",
"win": "东北风",
"win_speed": "3级",
"win_meter": "小于12km/h",
"air": "113"
}总结，整体来说，如果用postman做接口测试，这个断言功能必不可少，其中我们常断言的响应体包含和JSON这俩个断言又是重重之重。
7. 变量（全局/集合/环境）
变量可以使我们在请求或脚本中存储和重复使用其值，通过将值保存在变量中，可以在集合，环境或请求中引用。
对我们做接口测试来说，又是一个非常重要的功能 。
在postman常用的三种变量分别是全局变量，环境变量，集合变量 。
其中，他们的作用域范围依次从大到小：全局变量>集合变量>环境变量 。 当在几个不同的范围内都申明了相同的变量时，则会优先使用范围最小的变量使。
想要使用变量中的值只需俩个步骤，分别是定义变量和获取变量 。
定义变量
定义全局变量和环境变量，点击右上角的小齿轮，弹出如下界面，就可以根据需求定义全局变量或者环境变量了。
已经定义的全局变量和环境变量，可以进行快速查看
定义集合变量
选择一个集合，打开查看更多动作(...)菜单，然后点击编辑 。选择“变量”选项卡以编辑或添加到集合变量。
定义变量除了以上方式，还有另外一种方式 。但是这种方式在不同的位置定义，编写不一样。
在Tests，Pre-requests Script：
获取变量
定义好变量，接下来就可以使用变量了 。需要注意的是，在不同的位置获取变量，编写的规则也是不一样的 。
如果在请求参数中获取变量，无论是获取全局变量，还是环境变量，还是集合变量，获取的方式都是一样的编写规则：{{变量名}} 。
如果是在编写代码的位置(Tests,Pre-requests Script)获取变量，获取不同类型的变量，编写的代码都不相同，具体如下：
变量的使用场景非常广泛，比如我们后面要提到的接口关联，请求前置脚本都会使用到变量 。
8.请求前置脚本
前置脚本其实就是在Pre-requests Script中编写的JavaScript脚本，想要了解这个功能，需要先了解它的执行顺序。那么下面就来看下它的执行顺序 。
可以看出，一个请求在发送之前，会先去执行Pre Request Script（前置脚本）中的代码 。那么这个功能在实际工作中有什么作用呢 ？
主要场景：一般情况下，在发送请求前需要对接口的数据做进一步处理，就都可以使用这个功能，比如说，登录接口的密码，在发送前需要做加密处理，那么就可以在前置脚本中做加密处理，再比如说，有的接口的输入参数有一些随机数，每请求一次接口参数值都会发送变化，就可以在前置脚本中编写生成随机数的代码 。总体来说，就是在请求接口之前对我们的请求数据进行进一步加工处理的都可以使用前置脚本这个功能。
接下来通过一个案例来看下该功能是如何使用 ？
案例：
实现步骤：
总之，这个前置脚本对我们做接口测试也非常有用，对一些复杂的场景，都可以使用前置脚本进行处理后再请求接口 。
9. 接口关联
在我们测试的接口中，经常出现这种情况 。 上一个接口的返回数据是下一个接口的输入参数 ，那么这俩个接口就产生了关联。 这种关联在做接口测试时非常常见，那么在postman中，如何实现这种关联关系呢 ？
实现思路：
案例：
{
"url": "/public/upload/user//head_pic//ba51d1c2f7f7b98dfb5cad90846e2d79.jpg",
"title": "banner",
"original": "",
"state": "SUCCESS",
"path": "images"
}而图像预览接口URL为：http://localhost/public/upload/user//head_pic//ba51d1c2f7f7b98dfb5cad90846e2d79.jpg 。可以看出这个接口的URL后半部分其实是上一个接口返回的url的值 。那么这俩个接口就产生了关联。那么在postman 可以通过以下三步完成这俩个接口的关联实现 。
实现步骤：
可以看出，接口的关联的解决方案都是用的是变量中的知识，也就是说只要你明确了要提取的值，后面就是保存该值，然后在其他接口使用该值就可以了。
10.常见返回值获取
在做接口测试时，请求接口返回的数据都是很复杂的json数据，有着多层嵌套，这样的数据层级在postman怎么获取呢 ？
案例1：多层json嵌套, 获取user_id的值
{
"code": 0,
"message": "请求成功！",
"data": {
"user_id": "1252163151781167104"
}
}//获取json体数据
var jsonData=pm.response.json()
// 获取user_id的值,通过.获取
var user_id=jsonData.data.user_id案例2：json中存在列表，获取points中的第二个元素
{
"code": 0,
"message": "请求成功！",
"data": {
"roles": {
"api": [
"API-USER-DELETE"
],
"points": [
"point-user-delete",
"POINT-USER-UPDATE",
"POINT-USER-ADD"
]
},
"authCache": null
}
}//获取json体数据
var jsonData=pm.response.json()
// 获取user_id的值,通过下标获取列表中某个元素
var user_id=jsonData.data.roles.points[1]案例3：列表中取最后一个元素
{
"code": 0,
"message": "请求成功！",
"data": {
"total": 24,
"rows": [
{
"id": "1066370498633486336",
"mobile": "15812340003",
"username": "zbz"
},
{
"id": "1071632760222810112",
"mobile": "16612094236",
"username": "llx"
},
...
{
"id": "1075383133106425856",
"mobile": "13523679872",
"username": "test001",
},//获取json体数据
var jsonData=pm.response.json()
// 获取id的值,通过slice(-1)获取列表中最后一个元素。
var id=jsonData.data.rows.slice(-1)[0]说明：由于平台文章规则限制，在一文中无法容纳过多的内容，故将第二部分和第三部分分成两个单独的篇幅加以发布，感兴趣的朋友可以查看后面的两篇postman文章 。
*请认真填写需求信息，我们会在24小时内与您取得联系。
