Vue2-基础知识

目录

一.vue简介 

1.概念

2.特性

(1)数据驱动视图

(2)双向数据绑定

3.MVVM

4.基本使用步骤

5.调试工具

二.vue基础

1.指令

(1)内容渲染指令

(2)属性绑定指令

(3)事件绑定指令

(4)双向绑定指令

​编辑(5)条件渲染指令

(6)列表渲染指令

2.过滤器

(1)概念

(2)分类

3. 侦听器

4.计算属性

5.vue-cli

(1)单页面应用程序

(2)vue-cli

(3)使用

6.组件

(1)组件化开发

(2)vue组件组成部分

(3)组件的使用

(4)props

(5)组件样式冲突

7.组件的生命周期

(1)概念

(2)分类

8.数据共享

(1)父向子组件数据共享

(2)子向父组件数据共享

(3) 兄弟组件数据共享

9.ref引用

10.动态组件

(1)概念

(2)keep-alive

(3)name

11.插槽

(1)概念

 (2)具名插槽

(3)作用域插槽

12.自定义指令 

(1)私有自定义指令

(2)全局自定义指令

三.路由

1.简介

(1)前端路由

(2)后端路由

2.vue-router基本用法

3.vue-router常见用法

(1)路由重定向

(2)嵌套路由

(3)动态路由匹配

(4)声明式导航&编程式导航

(5)vue-router编程式导航API

(6)导航守卫

一.vue简介 

1.概念

用于构建用户界面的前端框架

2.特性

vue两大特性: 数据驱动视图,双向数据绑定

(1)数据驱动视图

  • 数据变化会驱动视图自动更新,当数据发生变化时,vue会监听数据变化,从而自动重新渲染页面结构(无须手动操作DOM)
  • 单向的数据绑定(数据变化导致页面变化) 

(2)双向数据绑定

  • 在填写表单时,双向数据绑定可以辅助开发者在不操作DOM 的前提下,自动把用户填写的内容同步到数据源中
  • js数据发生变化,会自动渲染到页面上; 页面表单数据发生变化时,被vue自动获取并更新到js中

e1db5b7088db4ee2ab4cec5c65291b14.png

3.MVVM

  • MVVM是vue实现数据驱动视图和双向数据绑定的核心原理(底层)
  • MVVM指Model(数据源),View(DOM结构)和ViewModel(vue实例)
  • 它把每个HTML页面都拆分成了这三个部分 (Model表当前页面渲染时所依赖的数据源, View表示当前页面所渲染的DOM结构, ViewModel表vue的实例,它是MVVM的核心)

e027dd474fcc4f5da6cf052234cb3562.png

  • 当数据源发生变化时,会被ViewModel监听到,并自动重新渲染页面结构
  • 当表单元素的值发生变化时,也会被VM 监听到并把变化后最新的值自动同步到Model数据源中

4.基本使用步骤

  • 导入 vue.js 的 script 脚本文件
  • 在页面中声明一个将要被 vue 所控制的 DOM 区域
  • 创建 vm 实例对象（vue 实例对象）

aa192eecb97845d39ba752d41b289e48.png

5.调试工具

  • 浏览器更多工具 -> 扩展程序(将下载的文件拖入即可)-> Vue.js devtools详细信息(勾选在所有网络上, 允许访问文件网址即可)
  • Chrome浏览器在线安装 vue-devtools： https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
  • FireFox浏览器在线安装: https://addons.mozilla.org/zh-CN/firefox/addon/vue-js-devtools/

6.{{ }}

  • 插值表达式Mustache,只是内容占位符 ,不覆盖原因内容
  • 只能用在元素内容节点,不能用在属性节点  <p>性别: {{ sex }}</p> 
  • 不能识别标签

二.vue基础

1.指令

指令(Directives)是vue为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构,vue 中的指令按照不同的用途可以分为6 大类

(1)内容渲染指令

用来辅助开发者渲染DOM元素的文本内容。常用的内容渲染指令有如下 3 个

  • v-text: 会覆盖元素默认内容  <p v-text="username"></p>
  • v-html : 渲染带标签的内容,并实现标签样式,会覆盖元素默认内容  <div v-html="属性"></div>

(2)属性绑定指令

  • v-bind: (简写英文 :): 为元素的属性动态绑定属性值, 单向绑定(数据源影响DOM变)
  • 支持绑定简单的数据值  <imgsrc=""  v-bind:placeholder="tips">
  • 支持绑定js表达式的运算 <div :title=" 'box-' + index">div盒子</div> 字符串需加' '

(3)事件绑定指令

  • v-on:(简写@): 为DOM元素绑定事件监听 
  • 处理函数写在实例对象的methods属性下 <button @click="add()">点击</button> ()可传参
  • 原生DOM对象onclick,oninput,onkeyup等原生事件,替换为@click,@input,@keyup

$event

vue 提供的特殊变量,表原生的事件参数对象event, 可解决事件参数对象event被覆盖的问题(点击按钮变色问题)

事件修饰符

方便对事件的触发控制  <a href=" " @click.prevent=" "></a>

dfa249a858f646768740af687f2fad25.png

按键修饰符

监听键盘事件时,判断详细的按键,可为键盘相关的事件添加按键修饰符

e.g:  <input @keyup.enter="submit"> 只有按键Enter时,调用submit()

(4)双向绑定指令

v-model: 双向数据绑定指令,不操作DOM的前提下,快速获取表单的数据

44bb3c8e1dfc41c09dc30f0b3bc9082e.png(5)条件渲染指令

按需控制 DOM 的显示与隐藏

  • v-if: 动态创建或移出实现元素显示与隐藏, 有更高的切换开销,在运行时条件很少改变,使用较好(e.g: 刚进入页面时,某些元素默认不需要被展示,后期也不需展示)
  • v-show: 动态为元素添加或移除 style="display: none;" 样式实现显示与隐藏,  有更高的初始渲染开销, 需要非常频繁地切换,使用较好
  • v-else 必须配合v-if指令一起使用,否则不会被识别
  • v-else-if 必须配合v-if指令一起使用,否则不会被识别

(6)列表渲染指令

  • v-for: 基于一个数组来循环渲染一个列表结构
  • 使用item in list形式特殊语法(item待循环数组, item被循环的每一项); 
  • 用索引时(item, index) in list ,  item项和index 索引都是形参,可重命名

使用key维护列表状态

  • 官方建议,使用v-for必须绑定属性key,且值通常为id 
  • 当列表的数据变化时,默认情况下,vue会尽可能的复用已存在的DOM元素,从而提升渲染的性能. 但这种默认的性能优化策略,会导致有状态的列表无法被正确更新
  • 为给vue一个提示,以便它能跟踪每个节点的身份,从而在保证有状态的列表被正确更新的前提下,提升渲染的性能,需要为每项提供一个唯一的key属性
  • e.g:<tr v-for="(item,index) in list" :key="item.id" :title="index + item.uname  ">

key的注意事项

  • key 的值只能是字符串或数字类型
  • key 的值必须具有唯一性（即：key的值不能重复）
  • 建议把数据项 id 属性的值作为key的值（id 属性的值具有唯一性）
  • 使用 index 的值当作key的值没有任何意义（index 的值不具有唯一性,与每一项无强制关系）
  • 建议使用v-for指令时一定要指定key的值（既提升性能、又防止列表状态紊乱）

2.过滤器

(1)概念

  • 过滤器(Filters)常用于文本的格式化, 过滤器可以用在插值表达式和v-bind属性绑定中
  • 过滤器应该被添加在JS表达式的尾部,由管道符( | )进行调用, 可连续多个调用,前边的处理结果传递给后边的过滤器
  • 本质是js函数,可接受参数

兼容性

仅在vue 2.x和1.x中支持,在 vue 3.x 的版本中剔除了过滤器相关的功能(官方建议使用计算属性或方法代替被剔除的过滤器功能 )

(2)分类

私有过滤器

  • 在 filters 节点下定义的过滤器, 只能在当前 vm 实例所控制的 el 区域内使用

全局过滤器

  • 多个 vue 实例之间共享过滤器
  • Vue.filter('过滤器名', (参1, 参2,参3)=>{  }) 必须定义在vue实例之前
  • 参数1永远为管道符| 前边待处理的值, 第二个参数开始,才是调用过滤器传递的参数

3. 侦听器

  • watch侦听器监视数据的变化,从而针对数据的变化做特定的操作, 写在watch节点下
  • 侦听器本质是一个函数, 监视哪个数据,就将他作为函数名, 参数中新值在前,旧值在后
  • immediate选项: 实现初次页面渲染好,侦听器立即被调用 immediate: true,  默认false
  • deep选项: 深度侦听, 可监听对象中的属性的变化 deep: true
  • 侦听对象中的单个属性:  对象.属性:{ handler(参数){ } }  handler为侦听器处理函数

4.计算属性

  • 计算属性指的是通过一系列运算之后,最终得到一个属性值, 写在computed节点下
  • 定义为方法格式,使用时按属性使用, 实现代码复用
  • 会缓存计算的结果, 只有依赖数据源变化,计算属性会重新求值

5.vue-cli

(1)单页面应用程序

Single Page Application简称 SPA,指一个Web网站中只有唯一的一个HTML页面,所有的功能与交互都在这唯一的一个页面内完成

(2)vue-cli

  • Vue.js开发的标准工具, 简化了程序员基于webpack创建工程化的Vue 项目的过程
  • https://cli.vuejs.org/zh/
  • 安装: npm i -g @vue/cli

(3)使用

  • 基于vue-cli快速生成工程化的Vue项目：vue create 项目的名称 (不包含大写,汉字,空格等)
  • 选择配置项0c25bba633c14d1fa42c5c57becee5bf.png
  • 自动创建项目,初始化git,以及安装所需依赖包 
  • 安装配置完成后,显示npm run serve 以开发的方式运行项目(serve相当于dev, 配置文件scripts节点中, 发布build)2b102d6fb6024c5b8da5faef3324cecb.png6f8d4f7c7bae4b1282fdbfb84b29137d.png
  • 项目目录说明 99a0e81425dc4ba493c4269110540cb7.png 

 

6.组件

(1)组件化开发

  • 根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护
  • vue 是一个支持组件化开发的前端框架, vue中的组件后缀名是 .vue

(2)vue组件组成部分

template

  • 组件的模板结构(必选)
  • 只起到包裹性质的作用,不会被渲染为真正的DOM 元素
  • 只能包含唯一根节点

script  

  • 组件的JavaScript行为(可选)
  • 只要写script, 其中必须包含export default{  可包含data, methods…  }默认导出
  • 组件中的数据源data必须是个函数,return的对象中可定义数据;   不能直接指向一个数据对象(会导致多个组件实例共用同一份数据的问题)  e.g:data(){ return { username: 'ff'  } }

style

  • 组件的样式(可选)
  • 启用less预处理器  <style  lang="less">

(3)组件的使用

关系

  • 组件在被封装好之后,彼此之间是相互独立的,不存在父子关系
  • 在使用组件的时候,根据彼此的嵌套关系,形成了父子关系、兄弟关系

使用步骤

  • 使用components节点注册组件, components:{ Left , //  'Left': Left 简写   }
  • 使用import 语法导入需要的组件, import Left from '@/components/left.vue'
  • 以标签形式使用刚才注册的组件, template中<Left></Left>

私有子组件

  • 通过components注册的是私有子组件
  • 在组件 A 的components节点下,注册组件 F, 则组件F只能用在组件 A 中,不能被用在组件C中

全局组件 

  • main.js 入口文件中,通过 Vue.component()方法,可以注册全局组件
  • import Count from '@/components/Count.vue';        Vue.component('MyCount',Count)

(4)props

  • 自定义属性, 封装通用组件使用,可提高组件的复用性
  • prop:['自定义A', '自定义B'…],       props:{ 属性A:{  //默认值…  }}
  • 自定义属性是只读的,不能直接修改props的值,否则会直接报错,修改 props 的值,可以把 props 的值转存到data中(data 中的数据都是可读可写)
  • default 声明自定义属性时,定义属性的默认值 (未传,则用默认值)
  • type 声明自定义属性时,定义属性的值类型( 传过来的值类型不符,报错)
  • required 将属性设置为必填项，强制用户必须传递属性的值(校验有无该属性,与默认值无关)

(5)组件样式冲突

  • 默认情况下,写在 .vue 组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题

根本原因是：

  • 单页面应用程序中，所有组件的DOM结构，都是基于唯一的index.html页面进行呈现的
  • 每个组件中的样式，都会影响整个index.html页面中的DOM

解决:

  • 为每个组件分配唯一的自定义属性,通过属性选择器来控制样式的作用域
  • scoped属性 <style scoped></style>  可防止组件之间的样式冲突,但当前组件的样式对其子组件是不生效
  • /deep/ 深度选择器  可让某些样式对子组件生效

7.组件的生命周期

(1)概念

  • 生命周期(Life Cycle)是指一个组件从创建 -> 运行 -> 销毁的整个阶段,强调的是一个时间段
  • 生命周期函数:  内置函数,会伴随着组件的生命周期,自动按次序执行, 强调的是时间点

(2)分类

  • 组件创建阶段 new Vue()->beforeCreate->created->beforeMount->mounted
  • 组件运行阶段 beforeUpdate->updated
  • 组件销毁阶段 beforeDestroy->destroyed

2512e3144d5b4e6d9239933bd4fe6f4a.png

8.数据共享

(1)父向子组件数据共享

使用自定义属性

01fbcc4232234b83a6a44ddac6e99bab.png

(2)子向父组件数据共享

使用自定义事件

40d333942c774392b2e065dba38c28ee.png

(3) 兄弟组件数据共享

在 vue2.x 中,兄弟组件之间数据共享的方案是 EventBus (eventBus.js)

65bf2e2c2bc14e229b85ae6f6902751c.png

9.ref引用

  • ref 用来辅助开发者在不依赖于 jQuery 的情况下,获取 DOM 元素或组件的引用
  • $refs 对象: 每个vue的组件实例上都包含一个,里面存储着对应的DOM元素或组件的引用,默认$refs指向一个空对象
  • 使用ref,为子组件创建实例,可直接操作子组件中的方法和属性  <Myref ref="comRef"></Myref>

this.$nextTick(callback) 方法

  • 会把 cb 回调推迟到下一个 DOM 更新周期之后执行
  • 等组件的DOM更新完成后,再执行cb回调函数,从而能保证cb回调函数可以操作最新DOM元素

10.动态组件

(1)概念

  • 动态组件指的是动态切换组件的显示与隐藏
  • 通过内置组件<component>,专门实现动态组件的渲染 <component is="Left"></component>
  • 可绑定is属性 实现动态切换 <component :is="comName"></component>

(2)keep-alive

  • <keep-alive> 组件保持状态, 默认情况下,切换动态组件时无法保持组件的状态(会将组件销毁

keep-alive 对应的生命周期函数

  • 当组件被缓存时,会自动触发组件的 deactivated 生命周期函数
  • 当组件被激活时,会自动触发组件的 activated 生命周期函数

属性

  • include:  指定可以缓存的组件,其余组件切换后就会被销毁
  • exclude: 指定不被缓存的组件  
  • 不能同时使用

(3)name

  • name属性,用于组件声明时,指定该组件名称, 结合keep-alive标签实现组件缓存功能, 在调试工具中显示
  • 注册组件时名称,用于以标签形式,把注册好的组件渲染显示到页面中  components:{   Left,  }

11.插槽

(1)概念

  • 插槽(Slot)是vue为组件的封装者提供的能力,允许开发者在封装组件时,把不确定的,希望由用户指定的部分定义为插槽 (为用户预留的内容的占位符)
  • 未使用<template>包裹需要填充的内容,默认填充到default插槽中
  • 若在封装组件时没有预留任何 <slot> 插槽，则用户提供的任何自定义内容都会被丢弃
  • 后备内容:插槽中写的内容, 优先填充显示用户自定义内容,若没有填充到插槽中的内容,则显示后备内容

 (2)具名插槽

  • <slot name="xxx"></slot>  带有具体名称的插槽叫做“具名插槽”
  • 没有指定name 名称的插槽,默认插槽名为default

v-slot:(#)指令:

  • v-slot(#)指令,指定填充到哪个插槽
  • 不能直接用在元素上, 要用在<template>虚拟标签上

(3)作用域插槽

  • <slot> 插槽绑定props数据(自定义属性及值,或动态数据)
  • <template #content="scope">  可用scope形参来接收对象
  • 接收过来本来就是对象,也可直接解构拿到其中属性 { msg, user }

12.自定义指令 

(1)私有自定义指令

  • directives 节点下声明
  • 使用时, 加v-前缀即可, template 结构中可以通过=为当前指令动态绑定参数值
		// 私有自定义指令节点directives:{/* color:{ // 定义名为color的自定义指令, 指向一个配置对象// 当指令首次被绑定到元素上时,会立即触发bind函数, 若DOM更新时,不会触发// 形参el为当前被绑定的DOM对象  binding接收data传的值bind(el, binding){el.style.color = binding.value;},	update(el, binding){  // DOM更新时触发el.style.color = binding.value;},} */// 简写 color(el, binding){el.style.color = binding.value;},},

(2)全局自定义指令

// 全局自定义指令  定义在main.js中   通常使用全局自定义指令, 私有的意义不大
Vue.directive('col',(el, binding)=>{el.style.color = binding.value;
})

三.路由

1.简介

router, 就是对应关系

(1)前端路由

  • 前端路由: Hash地址与组件之间的对应关系
  • Hash地址: 锚链接, url地址中 #及#之后的内容就是hash地址
  • SPA与前端路由: SPA(单页面程序)项目中,不同功能之间的切换,依赖于前端路由

工作方式:

  • 用户点击页面上的路由链接, 导致URL地址栏中的 Hash值发生变化
  • 前端路由监听了到 Hash地址的变化, 把当前 Hash 地址对应的组件渲染到浏览器中

实现简易前端路由:

  • 可通过<component>标签, 绑定动态属性渲染组件
  • 通过<a>添加对象的hash值 
  • 在created()中用 window.onhashchange = () => { }来监听hash地址的变化,并动态切换要展示的组件

(2)后端路由

  • 请求方式,请求地址与function处理函数之间的对应关系
  • 在node.js中,express路由即为后端路由

2.vue-router基本用法

  • 官方给出的路由解决方案, 只能结合vue项目进行使用,能够轻松的管理SPA项目中组件的切换     
  • https://router.vuejs.org

基本用法

  • 安装vue-router包: npm i vue-router@3.5.2 -S  (vue2安装router版本过高会报错)
  • 创建路由模块并初始化  src->router->index.js
  • 导入并挂载路由模块 
  • 组件中声明路由链接<router-link> (替换普通<a>链接)和占位符<router-view>

3.vue-router常见用法

(1)路由重定向

  • 访问地址A 时,强制跳转到地址C 
  • redirect 属性指定一个新的路由地址   e.g:可实现在/路径下显示主页

(2)嵌套路由

  • 通过路由实现组件的嵌套展示
  • 声明子路由占位符和子路由链接( /父级路径/子级路径 )  
  • children 属性声明子路由规则 

(3)动态路由匹配

  • 把 Hash 地址中可变的部分定义为参数项( :参数), 从而提高路由规则的复用性
  • $route.params 参数对象   可访问到动态匹配的参数值
  • props 传参,简化的接收路由参数获取形式

(4)声明式导航&编程式导航

  • 声明式导航:  浏览器中,点击链接实现导航的方式  e.g: 普通<a>链接, vue<router-link>
  • 编程式导航:  浏览器中,调用 API 方法实现导航的方式  e.g:普通调用location.href 

(5)vue-router编程式导航API

其中最常用的导航 API 分别是：

  • this.$router.push('hash地址')   跳转到指定 hash 地址,并增加一条历史记录
  • this.$router.replace('hash地址')  跳转到指定的 hash 地址,并替换掉当前的历史记录
  • this.$router.go(数值n)   实现导航历史前进(正值),后退(负值)
  • $router.back() 在历史记录中, 后退到上一个页面
  • $router.forward() 在历史记录中, 前进到下一个页面

(6)导航守卫

控制路由的访问权限

全局前置守卫  router.beforEach( (to, from, next)=>{ } )

// src->router-> index.js
// 1.装vue-router@3.5.2包
// 2.导入Vue, 路由模块, 以及所需要的组件
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Router/Home.vue'
// 3.将VueRouter装为项目插件
Vue.use(VueRouter)
// 4.创建实例对象
const router = new VueRouter({// 7. 定义哈希地址与组件的对应关系  { path: '哈希地址#之后的内容', component: 组件名  }routes:[// 重定向的路由规则  在/路径下显示主页{  path: '/', redirect: '/home' },// 路由规则{  path: '/home', component: Home }, // 父级路由规则, Mine页面{  path: '/mine',  //父级地址component: Mine,  //父级组件名// redirect: '/mine/mineabout1',  //可使用路由重定向, 当访问mine时,直接展示MineAbout1上,  也可使用默认子路由children: [  //通过children属性, 嵌套声明子级路由规则 子路由不使用/// 默认子路由: children数组中, 某个路由规则的path为空字符串, 打开时,直接展示该子组件上{ path: 'mineabout1', component: MineAbout1 },{ path: '', component: MineAbout2 }]},	// 动态参数   在World组件中,根据参数值, 展示对应组件    变化部分写 :参数// 方式1  this.$route.params.mid 拿到mid// {  path: '/world/:mid', component: World },	// 方式2  设置 props: true  ,在组件中用props接收{  path: '/world/:mid', component: World , props: true },	{  path: '/main', component: Main }, {  path: '/login', component: Login }, ]
})// 8.为router实例对象, 声明全局前置守卫  发生路由跳转,必然触发beforeEach指定的回调函数  to将要访问的路由信息对象, from将要离开的路由信息对象, next()函数 , 表放行
router.beforeEach( (to, from , next) => {if(to.path === '/main'){  //判断用户将要访问的哈希地址是否为/main  //等于,则需要登录才能访问   获取localStorage中的tokenconst token = localStorage.getItem('token')   //如果在浏览器Application->localStorage中有token,就可访问到mainif(token){  //有token,则放行next()}else{  // 无token, 则强制跳转到/loginnext('/login')}}else{   //访问的不是后台主页,直接放行next() }
})
// 5.向外共享
export default router// 6. main.js中挂载
// 导入路由模块 拿到实例对象
import router from '@/router/index.js' 
new Vue({render: h => h(App2),// Vue中使用路由, 必须将路由实例对象router进行挂载 router,   //router : router  属性名属性值一样,可简写为router
}).$mount('#app')//App.vue组件中    项目中安装和配置了vue-router,就可以使用 <router-view>组件来占位  和 <router-link>替代普通a链接 自动加# --><router-link to="/home">主页</router-link> <router-link to="/mine">我的</router-link> <hr>
//<!-- 动态参数  哈希地址中. /后的参数项,叫路径参数; 在路由参数对象中,用this.$route.params访问路径参数;   ?后的参数项,叫查询参数,用this.$route.query访问;    this.$route中, path只是路径部分 e.g:/world/2,  fullPath是完整路径 e.g: /world/2?name=mm&age=18 --><router-link to="/world/1">W1.vue</router-link><router-link to="/world/2?name=mm&age=18">W2.vue</router-link> <hr><router-view ></router-view>//<!-- 行内使用编程式导航跳转时,省略this,否则报错 --><button @click="$router.back()">back</button><button @click="$router.forward()">forward前进</button>

查看全文

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.dgrt.cn/a/1878998.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章：

65bf2e2c2bc14e229b85ae6f6902751c.png

Vue2-基础知识

目录
一.vue简介
1.概念
2.特性
(1)数据驱动视图
(2)双向数据绑定
3.MVVM
4.基本使用步骤
5.调试工具
二.vue基础
1.指令
(1)内容渲染指令
(2)属性绑定指令
(3)事件绑定指令
(4)双向绑定指令
​编辑(5)条件渲染指令
(6)列表渲染指令
2.过滤器
(1)概念
(2)分……

编程日记2023/3/12 18:17:48

OKHttp原码分析(七)之HttpStream

一，概述
在上篇blog中，讲解了RealConnection类以及重要的方法。当RealConnection类只在httpStream类中被引用。httpStream类是对RealConnection类的封装。
在ConnectInterceptor类中创建了httpStream对象。在CallServerInterceptor类中使用httpstream写……

编程日记2023/3/12 18:17:48

OKHttp原码分析(八)之必须明白的几个问题

一，概述
截止到上一篇blog，OKHttp的源码分析已结束，由于篇幅有限，个人能力不足，分析不够细致，也不够完美，希望小伙们多多指正。
这篇blog以带着问题找答案的方式再次回顾下OKHttp的源码。
首……

编程日记2023/3/12 18:17:47

HttpUrlConnection使用详解

一，HttpURLconnection的介绍
在Android开发中网络请求是最常用的操作之一， Android SDK中对HTTP(超文本传输协议)也提供了很好的支持，这里包括两种接口: 1、标准Java接口(java.NET) —-HttpURLConnection，可以实现简单的基于URL……

编程日记2023/3/12 18:17:46

UrlHttpUtils使用介绍

一，概述
在上一篇blog的末尾讲到了httpURLconnection使用时的缺点，和对httpURLconnection封装的必要性。鄙人不才，对httpURLconnection封装了一个工具类，并分享到了github。这篇blog主要讲解鄙人封装的httpURLconnection的使用方……

编程日记2023/3/12 18:17:46

自定义View(一)之初识自定义View

一，前言
看过我的blog的小伙伴都知道，我的博客的第一条都是概述，这是第一次写前言。此次写前言一方面是为了对自己未来一段时间关于写博客的规划，另外一方法将我的规划告诉志同道合的小伙伴，接下来很长一段时间我们将……

编程日记2023/3/12 18:17:45

自定义View(二)之Paint和Canvas详解

一，概述
在Android中，所有的控件显示本质都是画出来的。所以在学习自定义控件时必须学习使用canvas和paint这个两个类。Paint是指画笔，Canvas是指画布或画板，android中View的绘制类似于美术专业学生的画画，使用带有一……

编程日记2023/3/12 18:17:44

自定义View(三)之View类的onMeasure方法详解

一，概述
在View(一)之初识自定义View中的第五条中已经简单将解过onMeasure方法，我们知道onMeasure方法的作用是测量，测量view的宽高。一般情况下测量的宽高就是实际显示的宽高，但也有特殊情况，特殊情况在ViewGroup的o……

编程日记2023/3/12 18:17:43

自定义View(四)之QuickIndex的实现

一，概述
在APP中，只要有联系人，都肯定有通讯录页面，而且所有的通讯录以页面都很相似，一个列表，列表中的人员按字母排列，而且按字母分组显示，且右侧有快速索引。具体效果如下图&……

编程日记2023/3/12 18:17:42

自定义View(五)之继承ViewGroup

一，概述
在android系统中可以把View分为两大类，一类是View，这类View本身具有展示UI的作用，比如TextView可以展示文本，ImageView可以展示图片，EditText可以编辑文字。另外一类是ViewGroup，即容器……

编程日记2023/3/12 18:17:41

反序列化渗透与攻防(五)之shiro反序列化漏洞

Shiro反序列化漏洞
Shiro介绍
Apache Shiro是一款开源安全框架，提供身份验证、授权、密码学和会话管理。Shiro框架直观、易用，同时也能提供健壮的安全性
Apache Shiro 1.2.4及以前版本中，加密的用户信息序列化后存储在名为remember-me的Cookie中。攻击者可以使用Shiro的默……

编程日记2023/4/16 14:52:13

vue2+vue3

vue2vue3尚硅谷vue2vue2 课程简介【02:24】vue2 Vue简介【17:59】vue2 Vue官网使用指南【14:07】vue2 搭建Vue开发环境【13:54】vue2 Hello小案例【22:25】了解： 不常用常用：id 更常用 简单class差值总结vue 实例vue 模板 ： 先 取 &#xff0……

编程日记2023/4/16 14:52:00

【hello Linux】环境变量

目录 1. 环境变量的概念 2. 常见的环境变量 3. 查看环境变量 4. 和环境变量相关的命令 5. 环境变量的组织方式 6. 通过代码获取环境变量 7. 通过系统调用获取环境变量 Linux🌷 在开始今天的内容之前，先来看一幅图片吧！ 不知道你们是否和我一……

编程日记2023/4/16 14:51:36

【Linux基础】常用命令整理

ls命令
-a选项，可以展示隐藏的文件和文件夹-l选项，以列表形式展示内容-h，需要和-l搭配使用，可以展示文件的大小单位ls -lah等同于la -a -l -h
cd命令（change directory）
语法：cd [Linux路径]……

编程日记2023/4/16 14:51:26

客快物流大数据项目（一百一十二）：初识Spring Cloud

文章目录
初识Spring Cloud
一、Spring Cloud简介
二、SpringCloud 基础架构图…

编程日记2023/4/16 14:51:11

C和C++中的struct有什么区别

区别一： C语言中： Struct是用户自定义数据类型（UDT）。 C语言中： Struct是抽象数据类型（ADT），支持成员函数的定义。
区别二：
C中的struct是没有权限设置的&#xff0c……

编程日记2023/4/16 14:50:59

docker的数据卷详解

数据卷 数据卷是宿主机中的一个目录或文件，当容器目录和数据卷目录绑定后，对方修改会立即同步
一个数据卷可以同时被多个容器同时挂载，一个容器也可以被挂载多个数据卷
数据卷作用：容器数据持久化 /外部机器和容器间接通信 /容器……

编程日记2023/4/16 14:50:50

13、Qt生成dll-QLibrary方式使用

Qt创建dll，使用QLibrary类方式调用dll
一、创建项目
1、新建项目->其他项目->Empty qmake Project->Choose 2、输入项目名，选择项目位置，下一步 3、选择MinGW，下一步 4、完成 5、.pro中添加TEMPLATE subdirs&#xff……

编程日记2023/4/16 14:50:38

基于mapreduce 的 minHash 矩阵压缩

Minhash作用： 对大矩阵进行降维处理，在进行计算俩个用户之间的相似度。
比如： 俩个用户手机下载的APP的相似度，在一个矩阵中会有很多很多的用户要比较没俩个用户之间的相似度是一个很大的计算任务 如果首先对这个矩阵降维处理&am……

编程日记2023/4/16 14:50:37

关于hashmap使用迭代器的问题

keySet获得的只是key值的集合，valueSet获得的是value集合，entryset获得的是键值对的集合。 package com.test2.test;import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import java.util.Map.Entry;public class mapiterator……

编程日记2023/4/16 14:50:37

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注