Vuejs开发入门(6):v-on、methods、$emit
我们这里继续使用蛋老师的例子
1git checkout -f 06-start
v-on
v-on用于监听事件。在日常的开发中,常常会缩写成@,后面不需要加:
现在我们想要在网页上通过输入框和添加按钮新增一行我们不同口味的鱿鱼丝,这时候我们就用到了v-on,使用v-on在按钮处监听点击submit事件,然后再对事件进行处理。
1234<form @submit="处理方法"> <input type="text" placeholder="输入爱吃的鱿鱼丝..." /> <button type="submit">添加</button></form>
那么这里处理方法我们应该如何添加呢,这时候就用到了在createApp中与computed等同级的属性methods
methods
methods与computed都可以用来定义组件中的方法,但它们的使用场景和行为略有不同。
computed是一个计算属性,用于根据响应式依赖进行计算和 ...
Vuejs开发入门(5):props
props
props简单来说就是向组件中传递数据。很多时候,我们都有类似的需求:我们正在构建一个博客,我们可能需要一个表示博客文章的组件。我们希望所有的博客文章分享相同的视觉布局,但有不同的内容。要实现这样的效果自然必须向组件中传递数据,例如每篇文章标题和内容,这就会使用到 props。
假如我们需要传递给我们博客文章一个标题,我们需要在组件template同级的属性props中声明
12345678export default { template: /*html*/` <h4> {{title}} </h4> `, props: { title: String }}
然后我们可以在父组件这样写
123456789101112131415import Test from "./Test.js";export default { components: {Test}, ...
Vuejs开发入门(4):组件
在Vue的createApp方法中,除了data(){}存放映射到页面的值、computed存放方法,还有一个属性template,这个属性说白了就是用来写HTML文件的。
由于Vue是挂载到DOM上的,因此我们可以通过template属性,把我们组件的HTML代码编写在里面,就可以不用多次书写HTML,可以用Vue一对多挂载上去
Vuejs一大特点就是组件式开发,组件式开发简单来说就是把一个网页各部分都拆分开来,当作一个个组件进行开发,组件就是一个个单独可用的功能块,然后通过复用组件达到代码的复用的效果。
根组件
我们目前写的这个网页可以看作是一个根组件,我们可以通过组件拆分的方式拆分我们的根组件,将其拆分为不同功能块的子组件。
首先我们创建一个components文件夹,用来存放组件,然后我们在里面创建一个App.js,这个文件用来存放我们的根组件,我们将我们index.html代码移动过来
123456789101112131415161718192021222324252627282930313233343536373839404142export defa ...
Vuejs开发入门(3):key、v-show、computed
filter
现在我们完成一个需求,将显示区域划分为上下两个部分,一个是零食的未购区域,一个是零食的已购区域。
首先我们需要将已购买和未购买筛选出来,这时候我们就用到了数组的filter方法,我们在v-for对foods添加filter方法
123456789101112131415161718192021<section> <h2>已购零食</h2> <ul> <li v-for="food in foods.filter(item => item.purchased)"> <img v-bind:src="food.image"> <span>{{ food.name }}</span> <input type="checkbox" v-model="food.purchased"> ...
信息收集(2):Banner识别、敏感目录
Banner识别
识别一个网站的Banner信息(服务器对外显示的一些基础信息)对整个渗透测试过程具有十分重要的作用。我们往往可以通过网站网站的Banner信息,可以得到很多方向与思路,如尝试相关历史漏洞,或根据当前系统的特性,进行尝试。
操作系统
ping判断,Windows TTL一般为128,Linux则为64。TTL大于100一般为Windows,几十的一般为Linux
nmap -O
Windows大小写不敏感,Linux大小写区分
网站服务 \ 容器类型
F12查看响应头Server字段
浏览器插件 Wappalyzer
脚本类型
通过插件也可以查到脚本类型
数据库类型
CMS识别 CMS:网站内容管理
常见的CMS:dedecms(织梦)、Discuz、phpcms等
在线识别工具
在线指纹识别,在线cms识别小插件–在线工具 (bugscaner.com)
Onlinetools
https://github.com/iceyhexman/onlinetools
Wappalyzer除了作为一个浏览器插件,还具有一个Pytho ...
信息收集(1):概述
前期信息收集
信息收集是指通过各种方式获取所需要的信息
信息包括目标站点ip、中间件、脚本语言、端口、邮箱等,包括资产收集但不限于资产收集
信息收集的意义
渗透测试成功的保障
更多的暴露面
更大的可能性
信息收集的分类
主动信息收集
通过直接对网站进行操作、扫描等,这种是有网络流量经过目标服务器的信息收集方式
被动信息收集
基于公开的渠道,如搜索引擎,在不与目标交互的情况下获取信息,并尽量避免留下痕迹
需要收集的信息
服务器信息(端口、服务、真实ip)
网站信息(网站架构[操作系统、中间件、数据库、编程语言]、指纹信息、WAF、敏感目录、敏感文件、源码泄露、旁站、C段)
域名信息(whois、 备案信息、子域名)
管理员信息(姓名、职务、生日、联系电话、邮件地址)
以上均是包括但不限于
域名信息收集
whois查询
通过whois查询,我们可以收集到域名的ip及其所有者的信息
可以通过域名注册商、站长工具、命令行查询等等方式查询到whois
域名备案信息
在中国大陆解析网站都需要备案,备案具有网站的很多信息,同样的我们也可以通过站长工具进行查询
注册人、邮箱反查
通 ...
Vuejs开发入门(2):v-for、v-bind、v-model
1git checkout 02-start
v-for
打开示例代码,我们看到我们返回值内有一个列表。
加入我们需要将这个列表在HTML文档中展示出来,我们并不需要一行一行手动使用插值表达式,vue给我们提供了一个标签内的属性——v-for,可以很方便的循环我们的标签。
在v-for值内我们通过item in items的形式,遍历items内的值
12345678<div id="app"> <h1>{{ title }}</h1> <ul> <li v-for="food in foods"> <span>{{food.name}}</span> </li> </ul></div>
v-bind
我们可以看到我们在foods的属性内有一个图片属性,如果我们想展示我们的图片,直 ...
Vuejs开发入门(1):创建应用与插值表达式
开发入门的代码示例来源于
技术蛋老师 https://space.bilibili.com/327247876
12git clone https://gitee.com/eggtoopain/vue3-entry-video-related-codegit checkout 01-start
创建应用
每次使用Vue的时候,我们都需要使用创建App,通过Vue内的createApp函数我们可以很方便的创建我们的一个App。
这个函数有一个可选选项,我们可以传入一个对象。然后我们还需要使用mount()方法将我们创建的应用挂载到DOM上,没有挂载到DOM上的应用则不受影响
1Vue = createApp({}).mount('#app');
接下来我们在一个div元素中,使用id指明我们挂载的app
123456789101112131415<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&quo ...
抓包分析-wireshark
WireShark是一个网络封包分析软件,可以直接与网卡进行数据报文交互。是一个非常强大的抓包工具。
软件的安装
个人环境为:Manjaro Linux X86_64
1yay -S wireshark-qt
我们需要使用Root权限去打开WireShark,否则会无法抓取到我们网卡的网络封包,例如
我们有两种方式的通过Root权限打开WireShark,第一种是在命令行通过sudo wireshark &执行,但是控制台关闭WireShark也会关闭。
第二种是使用sudo的图形化版本gksu,然后在wireshark的.desktop内修改Excu
安装gksu
1yay -S gksu
打开/usr/share/applications,用编辑器打开WireShark的快捷方式,将Excu一行修改成这样
1Exec=gksu wireshark %f
接下来我们打开命令行会看到这样的窗口
证明成功,输入密码打开即可看到我们的网卡。
基础使用
首先我们选到捕获-选项
这里会展示出所有的接口,展开接口我们会看到我们的ip地址,通过这个地址,我们可以找到我们的网卡 ...
网络安全学习(6):中间人攻击
主要教程为利用Kali系统模拟攻击者,利用中间人的攻击手段获取用户登录的用户与密码。
(请勿在无授权情况下测试!)
环境介绍
设备:均在虚拟环境下
WindowsServer2022 ---- 模拟WEB及FTP服务器
Windows10 ---- 模拟客户机
Kali ---- 攻击机
工具:ettercap
设备拓扑结构:三台设备在同一网络下,互相可以通讯
攻击基本原理
利用的ARP协议漏洞:后到达的ARP协议包会更新ARP缓存表
ARP协议原理:(为了获取接受目标的MAC地址)
发送机发送ARP广播请求
目标机发送ARP单播应答
攻击人通过发送虚假的ARP应答实现ARP缓存投毒,而其他设备无法对其进行身份(真伪)验证
因此中间人攻击又称ARP欺骗攻击。
流程
调整网络
首先我们开启我们的虚拟机,并设置到同一网段内:
Windows10 ----- 10.1.1.1
KaliLinux ----- 10.1.1.2
Windows2022 ----- 10.1.1.3
搭建F ...