当前位置: 首页 > news >正文

SpringBootWeb 篇-入门了解 Vue 前端工程的创建与基本使用

🔥博客主页: 【小扳_-CSDN博客】
❤感谢大家点赞👍收藏⭐评论✍

文章目录

        1.0 基于脚手架创建前端工程

        1.1 基于 Vue 开发前端项目的环境要求

        1.2 前端工程创建的方式

        1.2.1 基于命令的方式来创建前端工程

        1.2.2 使用图形化来创建前端工程

        1.3 启动、停止项目

        1.4 前端项目中的重点文件

        2.0 Vue 基本使用方式

        2.1 Vue 组件

        2.2 文本插值

        2.3 属性绑定

        2.4 事件绑定

        2.5 双向绑定

        2.6 条件渲染

        2.7 Axios

        2.7.1 axiox 创建的 API 与配置代理

        2.7.2 使用 axiox.post() 方法来发送请求 

        2.7.3 使用 axios.get() 方法来发送请求

        2.7.4 vue 统一使用方式 - axiox

        2.7.5 完整代码


        1.0 基于脚手架创建前端工程

        基于脚手架可以快速的创建前端工程,让开发者可以更快速地开始实际开发工作。脚手架工具提供了一些预设的配置选项和常用的功能模块,开发人员可以根据项目需求选择适合的模板和插件,并生成一个完整的项目结构。

        除了创建项目,脚手架工具还通常提供了一些命令来帮助开发人员进行开发、构建和部署等操作,例如启动开发服务器、打包代码、进行代码检查等功能,大大提高了开发效率。

        1.1 基于 Vue 开发前端项目的环境要求

        1)node.js:前端项目的运行环境。

        2)npm:JavaScript 的包管理工具。

        3)Vue CLI:基于 Vue 进行快速开发的完整系统,实现交互式的项目脚手架。

使用以下命令来全局安装 Vue CLI:

npm install -g @vue/cli

安装完成后,您可以通过以下命令来验证 Vue CLI 的安装是否成功:

vue --version

运行结果:

C:\Users\86187>vue --version
@vue/cli 5.0.8

        1.2 前端工程创建的方式

        1.2.1 基于命令的方式来创建前端工程

在命令框中输入:

vue create 项目名称

举个例子:

        首先,在没有中文的路径下创建前端工程:

        接着,输入 vue create 项目名称:

        需要注意的是,包名中包含非 URL 友好字符,例如空格、特殊符号等,就会出现错误。npm 的包名必须是 URL 友好的,只能包含小写字母、数字和连接符(-)。如果包名中包含其他字符,就会触发该错误。还要注意的是,最后不需要用 ";" 结尾。

        再接着,选择 Vue2 来创建前端工程项目:

        最后出现以下结果,则说明创建成功了。

        该路径下就会出现前端项目的文件夹。 

        1.2.2 使用图形化来创建前端工程

vue ui

举个例子:

        首先在命令框中输入:vue ui

        接着,就会跳转到以下网页:

        点击 vue-project 下拉框,再点击 Vue 项目管理器:

        再跳转到以下页面:

        点击创建项目:

        选择 Vue2 来创建:

        最后,文件中就会出现 vue-project1 文件夹了。

        1.3 启动、停止项目

        使用 VS code 来启动项目:

        在终端输入:npm run serve,这样前端工程就启动起来了。

        control + 点击左键连接就可以进入前端网页了:

        使用 control + c 来结束前端工程项目:

        1.4 前端项目中的重点文件

        1)node_modules:当前项目依赖的 js 包

        2)assets:静态资源存放目录

        比如说要展示的图片或者视频、音频之类的资源,都可以存放在该目录中。

        3)components:公共组件存放目录

        存放的公共的资源。这个文件夹中存放的是在整个应用中都会用到的通用性组件,比如按钮、输入框、模态框等。这些组件可以被多个页面或模块共享使用,有利于代码的复用和维护。

        4)App.vue:项目的主组件,页面的入口文件

        5)main.js:整个项目的入口文件

        6)package.json:项目的配置信息、依赖包管理

        7)vue.config.js:vue-cli 配置文件

        配置项目中的信息。

        比如说:前端项目启动后,服务端默认为 8080,很容易和后端 tomcat 端口号冲突。如何修改前端服务的端口号?

        这就可以通过 vue.config.js 文件来配置前端端口号:

        记得保存修改之后的信息,关闭前端服务之后,再来重新启动前端服务:

        2.0 Vue 基本使用方式

        2.1 Vue 组件

        Vue 的组件文件以 .vue 结尾,每一个组件由三部分组成:

        1)<template>:结构,只有一个元素,由它生成 HTML 代码。

        2)<style>:样式,编写 css ,控制页面展示效果。全局样式:影响所有组件;局部样式:只作用于当前组件。

        3)<script>:逻辑,编写 js 代码,控制模板的数据来源和行为。

举个例子:

        在前端工程中,已经存在 vue 组件,如:App.vue 、HelloWorld.vue 组件文件:

        都是由结构、样式、逻辑三个部分组成。

        2.2 文本插值

        用来绑定 data 方法返回的对象属性,通过 {{}}  来使用。

代码演示:

运行结果:

        页面展示的结果:

        2.3 属性绑定

        为标签的属性绑定 data 方法中返回的属性。

        用法:v-bind:xxx,简写为 :xxx 。

代码演示:

<template><div class="hello">{{name}} {{age}} <br><!-- 具体书写的方式 --><input type="text" v-bind:value="name"> <br><!-- 简写的方式 --><input type="text" :value="age"> <br></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String},data() {return {name: "小扳手",age: 22,};}}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

页面的展示结果:

        2.4 事件绑定

        为元素绑定对应的事件。

用法:v-on:xxx,简写为 @xxx 

代码演示:

网页展示的结果:

        2.5 双向绑定

        表单输入项和 data 方法中的属性进行绑定,任意一方改变都会同步给另一方。

用法:v-model

代码演示:

<template><div class="hello">{{name}} {{age}} <br><!-- 具体书写的方式 --><input type="text" v-bind:value="name"> <br><!-- 简写的方式 --><input type="text" :value="age"> <br><!-- 详细的方式 --><input type="button" value="保存1" v-on:click="handleSave" /> <!-- 简写的方式 --><input type="button" value="保存2" @click="handleSave" /> <br><!-- 直接从表单中改变name --><input type="text" v-model="name" /> <br><!-- 在script中改变named值 --><input type="button" value="点击改变name的值" @click="change"/></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String},data() {return {name: "小扳",age: 22,};},methods: {handleSave(){alert("点击保存");},change(){this.name = "小扳手"}}}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

        当要从页面表格中改变 name 的值:从表单输入项改变

        从 data 方法中改变:点击 “点击改变name的值”按钮

        2.6 条件渲染

        根据表达式的值来动态渲染页面元素。

用法:v-if、v-else、v-else-if 

代码演示:

<template><div class="hello">{{name}} {{age}} <br><!-- 具体书写的方式 --><input type="text" v-bind:value="name"> <br><!-- 简写的方式 --><input type="text" :value="age"> <br><!-- 详细的方式 --><input type="button" value="保存1" v-on:click="handleSave" /> <!-- 简写的方式 --><input type="button" value="保存2" @click="handleSave" /> <br><!-- 直接从表单中改变name --><input type="text" v-model="name" /> <br><!-- 在script中改变named值 --><input type="button" value="点击改变name的值" @click="change"/><div v-if="sex == 1">男生</div><div v-else-if="sex == 2">女生</div><div v-else>未知</div></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String},data() {return {name: "小扳",age: 22,sex: 1};},methods: {handleSave(){alert("点击保存");},change(){this.name = "小扳手"}}}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

页面展示结果:

        2.7 Axios

        Axios 是一个基于 promise 的网络请求库,作用于浏览器和 node.js 中。

需要深入了解可以点击该连接:请求配置 | Axios中文文档 | Axios中文网 (axios-http.cn)

安装命令:

        在终端输入命令进行安装:

npm install axios

        就会出现在 package.json 文件中:

        接着导入 axios 包:

import axiox from 'axios'

        2.7.1 axiox 创建的 API 与配置代理

axiox 的 API 列表常见的请求方式:

        1)axiox.get(url[,config]):url 表示请求路径,config 表示配置对象,可以设置查询参数、请求头信息。

        2)axiox.post(url[,data[,config]]):url 表示请求路径,config 表示配置对象,可以设置查询参数、请求头信息,data 表示请求体数据,最常见的是 JSON 格式数据。

配置代理:

        为了解决跨域问题,可以在 vue.config.js 文件中配置代理。

代码演示:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,devServer: {port: 7070,proxy: {'/api' : {target: 'http://localhost:8080',pathRewrite: {'^/api': ''}}}}
})

        配置完代理后,就可以给后端发送请求了。

        2.7.2 使用 axiox.post() 方法来发送请求 

代码演示:

        绑定了一个发送请求的方法,使用 axiox.post() 方法来发送 post 类型的请求给后端,执行成功后,会自动调用 then() 方法。

        点击发送请求:

抓包结果:

        成功获取来后端返回来的数据。

        后端也成功接收到了前端发送过来的请求:

        2.7.3 使用 axios.get() 方法来发送请求

        可以用到的参数有 url 、config 。

代码演示:

sentGet(){axiox.post("/api/admin/employee/login",{username: "admin",password: "123456"}).then(ret => {console.log(ret.data)axiox.get("/api/admin/employee/1",{headers: {token: ret.data.data.token}}).then(ret => {console.log(ret.data)})})}

        绑定发送 get 请求的方法,先获取到 token 字段的值,再将 token 字段的值设置为发送 get 的请求的请求头 token 的字段值。最后请求发送成功之后,获取返回回来的数据。

抓包结果:

        先发送 post 请求获取到令牌:

        再发送 get 请求:

        2.7.4 vue 统一使用方式 - axiox

        只有 url 是必需的。如果没有指定 method ,请求将默认使用 get 方法。

        使用方式:axiox(config) 

        method:指定请求的方法。

        url:指定请求的路径。

        data:post 请求中存放发送请求体的内容。

        params:get 请求中存放参数信息。

        headers:配置请求头中的消息。

代码演示:

        发送一个 post 请求:

      axiox({method: "post",url: '/api/admin/employee/login',data: {username: "admin",password: "123456"}}).then(ret => {alert(ret.data.data.token)})

        发送一个 get 请求:

axiox({method: 'get',url: '/api/admin/employee/1',headers: {token: "eyJhbGciOiJIUzI1NiJ9.eyJlbXBJZCI6MSwiZXhwIjoxNzE4ODY0MjI5fQ.ZMmX2z6VP5WNotBuq0SpG8UwFe0ZCxj0icoVA2T2ltU"},params: {id: 1}}).then(ret => {console.log(ret.data)})

        2.7.5 完整代码

<template><div class="hello">{{name}} {{age}} <br><!-- 具体书写的方式 --><input type="text" v-bind:value="name"> <br><!-- 简写的方式 --><input type="text" :value="age"> <br><!-- 详细的方式 --><input type="button" value="保存1" v-on:click="handleSave" /> <!-- 简写的方式 --><input type="button" value="保存2" @click="handleSave" /> <br><!-- 直接从表单中改变name --><input type="text" v-model="name" /> <br><!-- 在script中改变named值 --><input type="button" value="点击改变name的值" @click="change"/><div v-if="sex == 1">男生</div> <div v-else-if="sex == 2">女生</div> <div v-else>未知</div>  <br><br><input type="button" value="发送post请求" @click="sentPost" /><input type="button" value="发送get请求" @click="sentGet" /><input type="button" value="发送统一方式请求" @click="sent1" /><input type="button" value="发送统一方式请求" @click="sent2" /></div>
</template><script>
import axiox from 'axios'
export default {name: 'HelloWorld',props: {msg: String},data() {return {name: "小扳",age: 22,sex: 1};},methods: {handleSave(){alert("点击保存");},change(){this.name = "小扳手"},sentPost(){axiox.post("/api/admin/employee/login",{username: "admin",password: "123456"}).then(ret => {console.log(ret.data)})},sentGet(){axiox.post("/api/admin/employee/login",{username: "admin",password: "123456"}).then(ret => {console.log(ret.data)axiox.get("/api/admin/employee/1",{headers: {token: ret.data.data.token}}).then(ret => {console.log(ret.data)})})},sent1(){axiox({method: "post",url: '/api/admin/employee/login',data: {username: "admin",password: "123456"}}).then(ret => {alert(ret.data.data.token)})},sent2(){axiox({method: 'get',url: '/api/admin/employee/1',headers: {token: "eyJhbGciOiJIUzI1NiJ9.eyJlbXBJZCI6MSwiZXhwIjoxNzE4ODY0MjI5fQ.ZMmX2z6VP5WNotBuq0SpG8UwFe0ZCxj0icoVA2T2ltU"},params: {id: 1}}).then(ret => {console.log(ret.data)})}}}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

相关文章:

SpringBootWeb 篇-入门了解 Vue 前端工程的创建与基本使用

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 基于脚手架创建前端工程 1.1 基于 Vue 开发前端项目的环境要求 1.2 前端工程创建的方式 1.2.1 基于命令的方式来创建前端工程 1.2.2 使用图形化来创建前端工程 1.…...

折线统计图 初级

此为折线统计图的初级题目。 本次的题目较难&#xff0c;菜鸡请退出。 4. 下图显示了甲、乙两台电脑的价格以及它们已使用的年数&#xff0c;从图中可以知道( )。 15. 妈妈去菜市场买菜&#xff0c;走到半路遇到一位熟人聊了一会儿&#xff0c;突然发现忘了带钱。于是马上回…...

最新下载:XmanagerXShell【软件附加安装教程】

​相信大家都认同支持IPv6&#xff1a;最近越来越多的公司和国家都采用了IPv6&#xff0c;Xmanager的最新版本v5也加入支持这个功能&#xff0c;无论你是同时使用IPv4和IPv6网络或者完全的IPv6网络&#xff0c;Xmanager 5都可完全满足你的要求&#xff0c;使用MIT Kerberos认证…...

Coursera耶鲁大学金融课程:Financial Markets 笔记Week 02

Financial Markets 本文是学习 https://www.coursera.org/learn/financial-markets-global这门课的学习笔记 这门课的老师是耶鲁大学的Robert Shiller https://en.wikipedia.org/wiki/Robert_J._Shiller Robert James Shiller (born March 29, 1946)[4] is an American econom…...

读书笔记:《生死疲劳》

《生死疲劳》. 莫言 生死疲劳》是莫言最重要的代表作之一。他用动物的视角、俏皮的语言和鬼才的叙事手法&#xff0c;使这本讲述沉重故事的书中处处充满惊喜&#xff1b;用幽默、戏谑的方式化解现实的痛苦&#xff0c;让人在痛苦时依旧能笑出声来&#xff0c;给人以力量。…...

C++面向对象三大特性--多态

C面向对象三大特性–多态 文章目录 C面向对象三大特性--多态1.虚函数&#xff08;Virtual Function&#xff09;2.纯虚函数&#xff08;Pure Virtual Function&#xff09;和抽象类&#xff08;Abstract Class&#xff09;3.重写&#xff08;Override&#xff09;4.动态绑定&am…...

啥移动硬盘格式能更好兼容Windows和Mac系统 NTFS格式苹果电脑不能修改 paragon ntfs for mac激活码

对于同时使用Windows和Mac操作系统的用户而言&#xff0c;选择一个既能确保数据互通又能满足大容量存储需求的移动硬盘格式尤为重要。下面我们来看看啥移动硬盘格式能更好兼容Windows和Mac系统&#xff0c;NTFS格式苹果电脑不能修改的相关内容。 一、啥移动硬盘格式能更好兼容…...

【面试】i++与++i的区别

目录 1. 情况11.1 i1.2 i 2. 情况23. 情况34. 情况4 1. 情况1 1.1 i 1.代码块 public void test(){int i 10;i;System.out.println(i);}2.字节码 0 bipush 102 istore_13 iinc 1 by 16 getstatic #2 <java/lang/System.out : Ljava/io/PrintStream;>9 iload_1 10 inv…...

使用 devtool 本地调试 nodejs

安装 # 全局安装 $ npm install devtool -g # 或临时安装 $ npx devtool [file] [opts]用法 Usage:devtool [入口文件] [opts]Options:--watch, -w enable file watching (for development) # 动态检测文件变更&#xff0c;不用每次手动重启--quit, -q …...

element-plus 表单组件 之element-form

elment-plus的表单组件的标签有el-form,el-form-item。 单个el-form标签内包裹若干个el-form-item,el-form-item包裹具体的表单组件&#xff0c;如输入框组件&#xff0c;多选组件&#xff0c;日期组件等。 el-form组件的主要作用是&#xff1a;提供统一的布局给其他表单组件&…...

redis持久化主从哨兵分片集群

文章目录 1. 单点Redis的问题数据丢失问题并发能力问题故障恢复问题存储能力问题 2. Redis持久化 -> 数据丢失问题RDB持久化linux单机安装Redis步骤RDB持久化与恢复示例&#xff08;详细&#xff09;RDB机制RDB配置示例RDB的fork原理总结 AOF持久化AOF配置示例&#xff08;详…...

IOS Swift 从入门到精通: 结构体的访问控制、静态属性和惰性

文章目录 初始化器引用当前实例惰性属性静态属性和方法访问控制总结初始化器 初始化器是一种特殊方法,可提供创建结构体的不同方式。所有结构体都默认带有一个初始化器,称为成员初始化器- 它会要求您在创建结构体时为每个属性提供一个值。 User如果我们创建一个具有一个属性…...

SQL题:未完成率较高的50%用户近三个月答卷情况

SQL题&#xff1a;未完成率较高的50%用户近三个月答卷情况 这是一道牛客网上SQL进阶图库中的一道困难题目&#xff0c;个人花了近两个小时才通过所有用例。之所以想记录下来是因为这道题算是一个很考验基本功的题目&#xff0c;也不乏一些SQL中的技巧。下面我们逐步分析&#…...

挑战与机遇的交织

AI与音乐创作&#xff1a;挑战与机遇的交织 引言 近年来&#xff0c;人工智能技术的迅猛发展使得其在各个领域都展现出了巨大的潜力和影响力&#xff0c;音乐创作领域也不例外。最近上线的音乐大模型&#xff0c;无疑是这一趋势的一个重要节点&#xff0c;它极大地降低了素人…...

Java项目:基于SSM框架实现的精品酒销售管理系统分前后台【ssm+B/S架构+源码+数据库+毕业论文】

一、项目简介 本项目是一套基于SSM框架实现的精品酒销售管理系统 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简单、功…...

[论文笔记]Are Large Language Models All You Need for Task-Oriented Dialogue?

引言 今天带来论文Are Large Language Models All You Need for Task-Oriented Dialogue?的笔记。 主要评估了LLM在完成多轮对话任务以及同外部数据库进行交互的能力。在明确的信念状态跟踪方面&#xff0c;LLMs的表现不及专门的任务特定模型。然而&#xff0c;如果为它们提…...

Django 模版过滤器

Django模版过滤器是一个非常有用的功能&#xff0c;它允许我们在模版中处理数据。过滤器看起来像这样&#xff1a;{{ name|lower }}&#xff0c;这将把变量name的值转换为小写。 1&#xff0c;创建应用 python manage.py startapp app5 2&#xff0c;注册应用 Test/Test/sett…...

计算机组成原理 —— 存储系统(DRAM和SRAM,ROM)

计算机组成原理 —— 存储系统&#xff08;DRAM和SRAM&#xff09; DRAM和SRAMDRAM的刷新DRAM地址复用ROM&#xff08;Read-Only Memory&#xff08;只读存储器&#xff09;&#xff09; 我们今天来看DRAM和SRAM&#xff1a; DRAM和SRAM DRAM&#xff08;动态随机存取存储器&…...

第22篇 Intel FPGA Monitor Program的使用<五>

Q&#xff1a;如何用Intel FPGA Monitor Program创建C语言工程并运行呢&#xff1f; A&#xff1a;总体过程与创建汇编语言工程类似&#xff0c;不同的是在指定程序类型时选择C Program。 后续用到DE2-115开发板的硬件如LED、SW和HEX等外设时&#xff0c;还需要将描述定义这些…...

网信办公布第六批深度合成服务算法备案清单,深兰科技大模型入选

6月12日&#xff0c;国家互联网信息办公室发布了第六批深度合成服务算法备案信息&#xff0c;深兰科技硅基知识智能对话多模态大模型算法通过相关审核&#xff0c;成功入选该批次《境内深度合成服务算法备案清单》。同时入选的还有腾讯混元大模型多模态算法、支付宝图像生成算法…...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...