《VUE.js 实战》读书笔记

1. 初识vue.js

  • MVVM模式从MVC模式演化而来,但是MVVM模式更多应用在前端,MVC则是前后端共同表现。
  • 传统开发模式:jQuery + RequireJS ( SeaJS ) + artTemplate ( doT ) + Gulp ( Grunt)。
  • vue.js可以直接通过script引入方式开发,也可以通过webpack组织项目开发。

1.1. 使用小技巧

        在Vue项目中,public/index.html 文件是项目构建时的入口模板,最终会被Webpack处理并插入生成的<div id="app"></div>标签。Vue的单页面应用(SPA)的主视图通常会在App.vue组件内定义,并由Vue实例挂载到这个#app元素上。如果你需要修改public/index.html以适应你的Vue页面,你可以直接编辑该文件。

2. 数据绑定和第一个vue应用

        这一章看完后,基本可以下场实战了,起码能看懂代码。

2.1. 实例与数据绑定

<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"><title>Vue 实例</title>
</head>
<body><div id="app">//(3) v-model指令进行数据绑定,绑定data中的name<input type="text" v-model="name" placeholder="你的名字"><h1>你好,{{name}}</h1></div><script src=”https://unpkg.com/vue/dist/vue.min.js ”></script><script>var myData{name: 1}//(1)VUE实例构造函数,创建实例var app = new vue({ //(2) el用于指定一个页面中己存在的DOM元素来挂载Vue实例el = '#app',data:{name : ''}//(5) 也可以这样//data: myData})//(4) 可以这样访问console.log (app.name); </script></body>
</html>
  1. 通过vue构造函数创建实例:
  2. el用于指定一个页面中己存在的DOM元素来挂载Vue实例
  3. v-model指令进行数据绑定
  4. Vue 实例本身也代理了data 对象里的所有属性
  5. 也可以指向一个己有的变量

2.2. 生命周期

var app = new vue({el:'#app',data:{a:2},//钩子,创建是触发created: function(){console.log(this.a);}
})

        Vue 的生命周期钩子比较常用的有:

  • created 实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载, $el 还不可用。
  • mounted el挂载到实例上后调用,一般我们的第一个业务逻辑会在这里开始。
  • beforeDestroy 实例销毁之前调用。主要解绑一些使用addEventListener 监听的事件等。

2.3. 插值与表达式

  • 使用双大括号( Mustache 语法)“{{}}”是最基本的文本插值方法,它会自动将我们双向绑
  • 定的数据实时显示出来。
  • 如果有的时候就是想输出HTML,而不是将数据解释后的纯文本,可以使用v-html。
<span v-html="link"></span>data: {link: '<a href ="#">这是一个连接<a>'
}
  • 如果想显示{{}}标签,而不进行替换, 使用v-pre 即可跳过这个元素和它的子元素的编译过程。

2.4. 过滤器

        支持在{{}}插值的尾部添加一小管道符“|” 对数据进行过滤,经常用于格式化文本,比如字母全部大写、货币千位使用逗号分隔等。过滤器也可以串联,而且可以接收参数。

<div id="app">{{date | formateDate}}
</div><script>var app = new vue({el:'#app',data:{date: new date()},filters:{formateDate: function(value){//这里做过滤的事情,value就是date变量}}})
</script>

2.5. 指令和事件

        指令( Directives )是Vue扣模板中最常用的一项功能,它带有前缀v-,指令的主要职责就是当其表达式的值改变时,相应地将某些行为应用到DOM上。

  • <p v-if = ” show ” >显示这段文本</p>, v-if根据show的布尔值确定是否显示。
  • <a v-bind:href =” url ” >链接 </a>, v-bind 的基本用途是动态更新HTML 元素上的属性,比如id、class 等
  • v-on,它用来绑定事件监听器,这样我们就可以做一些交互了。
<div id = "app"><button v-on:click="doSth" >干点人事</button>
</div><script>var app = new vue({el:"#app",data:{},methods:{doSth:function(){//干点人事}}})
</script>

Vue. 将methods 里的方法也代理了,所以也可以像访问Vue 数据那样来调用方法:this.doSth();

2.6. 语法糖

        语法糖是指在不影响功能的情况下, 添加某种方法实现同样的效果, 从而方便程序开发。

  • v-bind 可以省略v-bind直接写一个冒号“ :”:<a : href= ” url ” >链接</a>
  • v-on 可以直接用“ @ ” 来缩写:<button @click= ” doSth ” >干点人事</ button>

2.7. 实用小技巧

        看完本章后还是有个疑问,用vue-cli建的项目,是怎么把index.html和vue件关联的呢?网上有小伙伴把来龙去脉讲清楚了,可以参考

vue-cli中webpack把js文件引入index.html的过程 - 知乎 (zhihu.com)

3. 计算属性

  • 所有的计算属性都以函数的形式写在Vue 实例内的computed 选项内,最终返回计算后的结果。
  • 在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果就可以。
  • 计算属性还可以依赖多个Vue 实例的数据,只要其中任一数据变化,计算属性就会重新执行,视图也会更新。
  • 当执行app.fullName =’John Doe';时, setter就会被调用,数据firstName和lastName都会相对更新,视图同样也会更新。
  • 计算属性还有两个很实用的小技巧容易被忽略:一是计算属性可以依赖其他计算属性: 二是计算属性不仅可以依赖当前Vue 实例的数据,还可以依赖其他实例的数据。
  • 与method不同,计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时,它才会重新取值。

4. v-bind 与 class 和 css 绑定

4.1. 绑定class 对象语法

  • 给v-bind:class 设置一个对象,可以动态地切换class。
  • 对象中也可以传入多个属性,来动态切换class 。另外,:class 可以与普通class 共存。
  • 当:class 的表达式过长或逻辑复杂时,还可以绑定一个计算属性。
<div id= "app"><div :class="{'active' : isActive }"></div><div class="static": class="{'active':isActive, 'error':isError}"> </div><div :class="classes"></div>
</div<script>var app = new vue({el:'#app',data:{isActive: 'true',isError: 'false'},computed:{classes:funtion(){return{'active': this.isActive && !this.error,'text-fail': this.error && this.error.type === 'fail'}}}})
</script>

4.2. 绑定class 数组语法

  • 当需要应用多个class 时, 可以使用数组语法, 给:class 绑定一个数组,应用一个class 列表。
  • 也可以使用三元表达式来根据条件切换class
  • class 有多个条件时,这样写较为烦琐,可以在数组语法中使用对象语法。
  • 与对象语法一样,也可以使用data 、computed 和methods 三种方法
<div id= "app"><div :class="[activeCls , errorCls]"></div><div :class="[isActive ? activeCls :'', errorCls]" ></ div><div :class="[{'active': isActive } , errorCls ]" ></ div>
</div<script>var app = new vue({el:'#app',data:{isActive: true,activeCls: 'active',errorCls: 'error'}})
</script>

4.3. 绑定style

        使用v-bind:style (即:style ) 可以给元素绑定内联样式,方法与:class 类似,也有对象语法和数组语法,也可以使用data、computed等。

<div :style="{'color': color, 'fontSize' : fontSize +'px'}">文本</ div>

5. 内置指令

5.1. 基本指令

  • v-cloak 不需要表达式,它会在Vue 实例结束编译时从绑定的HTML 元素上移除, 经常和css的display: none;配合使用,说白了就是没用的。
  • v-once 也是一个不需要表达式的指令,作用是定义它的元素或组件只渲染一次,包括元素或组件的所有子节点。

5.2. 条件渲染指令

  • v-if, v-else-if, v-else条件指令可以根据表达式的值在DOM中渲染或销毁元素/组件。
  • Vue 在渲染元素时,出于效率考虑,会尽可能地复用已有的元素而非重新渲染。
  • Vue扣提供的key 属性,它可以让你自己决定是否要复用元素, key 的值必须是唯一的。
  • v-show 的用法与v-if 基本一致,只不过v -show 是改变元素的css 属性di splay 。
  • v-if 更适合条件不经常改变的场景,因为它切换开销相对较大,而v-s how 适用于频繁切换条件。

5.3. 列表渲染指令v-for

  • 将一个数组遍历或枚举一个对象循环显示时,就会用到列表渲染指令v-for 。它的表达式需结合in 来使用,类似ite m in items 的形式。
  • v- for 的表达式支持一个可选参数作为当前项的索引v-for= "(book , index) in books",其中index就是索引项。
  • 与v-if 一样, v-for 也可以用在内置标签<template>上, 将多个元素进行渲染
  • v-for 可以迭代整数:v-for= ” n in 10”
  • Vue 包含了一组观察数组变异的方法,使用它们改变数组也会触发视图更新:push()\pop()\shift()等等
  • 当你不想改变原数组,想通过一个数组的副本来做过滤或排序的显示时,可以使用计算属性来返回过滤或排序后的数组

5.4. 方法与事件

        在@绑定的事件后加小圆点“.”,再跟一个后缀来使用修饰符:top\prevent\capture\self\once

6. 表单与v-model

        感觉这一章的内容比前面简单了只要理解了v-model的用法,剩下的就是控件的表达。

<div id="app"><input type="text" v-model ="message" placeholder="输入..."><p>输入的内容是:{{message}}</p>
</div><script>var app = new vue({el:'#app',data:{message: ''}})
</script>

6.1. 绑定值

        v-model 绑定的值是一个静态字符串或布尔值, 但在业务中,有时需要绑定一个动态的数据, 这时可以用v-bind 来实现。

<input type="radio" v-model="picked" :value="value">
//这里省略了很多代码
data:{picked:false,value:123
}
//在选中时, app.picked === app .value , 值都是123

6.3. 修饰符

        v-model 也有修饰符,用于控制数据同步的时机。

  • 使用修饰符.lazy 会转变为在change 事件中同步。
  • 使用修饰符.number 可以将输入转换为Number 类型。
  • 使用修饰符.number 可以将输入转换为Number 类型。

7. 组件

7.1. 组件的用法

        template的DOM 结构必须被一个元素包含, 如果直接写成“这里是组件的内容”, 不带
“<div></div>”是无法渲染的。

<div id="app"><my-compnent></my-component>
</div><script>var data = {counter:0    };Vue.component('my-component',{//全局组件注册template:'<div>这是组件内容</div>',data:function(){//组件中的data必须使用funciton形式定义return {message:'msg信息',data: data //共享引用};}});var child = {template:'<div>这是局部组件内容</div>'}var app = new vue({el:'#app',components:{//局部组件注册'my-part-component':child}});
</script>

7.2. 使用props传递数据

        父组件要正向地向子组件传递数据或参数,通过props 来实现。

<div id="app"><input type="text" v-model="parentMessage" >//v-bind 会自动把内容识别为对应的类型,否则将只传递字符串<my-compnent v-bind:message="parentMessage"></my-component>//v-bind绑定父组件参数
</div><script>Vue.component('my-component',{props:['message'], //字符串数组template:'<div> {{message}} </div>', //这里就可以取到父组件的message值了});var app = new vue({el:'#app',data:{parentMessage: '父组件消息内容'}});
</script>

        父组件传递初始值进来,子组件将它作为初始值保存起来,在自己的作用域下可以随意使用和修改。这种情况可以在组件data 内再声明一个数据,引用父组件的prop。

        另一种情况就是prop 作为需要被转变的原始值传入。这种情况用计算属性就可以了。

        除了数组外,还可以是对象,当prop 需要验证时,就需要对象写法。

vue.component('my-component',{props:{propsA: Number,propsB: [Number, String],propsC:{type:Boolean,default:true}}
})

7.3. 组件通信

        当子组件需要向父组件传递数据时,就要用到自定义事件。子组件用$emit()来触发事件,父组件用$on()来监昕子组件的事件。

<div id="app"><p>总数:{{total}}</p><my-component @increase="handleGetTotal" @reduce="handleGetTotal"></my-component>
</div><script>vue.compnent('my-component',{template :'\<div>\<button @click= "handleIncrease”> +l </button> \<button @click= "handleReduce”> -l </button> \',date:funciton(){return {counter:0}},method:{handleIncrease:function(){this.counter++;this.$emit('increase', this.counter);},handleReduce: function(){this.counter--;this.$emit('reduce', this.counter);}}});var app = new vue({el: '#app',data:{total: 0},method:{handleGetTotal: function(total){this.total = total ;}}});
</script>

        组件中使用v-model进行双向数据绑定,直接用了v-model的语法糖代表@ input= “ handler”。

<div id="app"><p>总数:{{total}}</p><my-component v-model="total"></my-component> // 语法糖,相当于@input="handleGetTotal"
</div><script>Vue.component('my-component', {template :'<button @click="handleClick" >+ l</button >',data: function(){return{counter : 0}},method: {handleClick: function(){this.counter++;this.$emit('input', this.counter);}}});var app = new vue({el:'#app',data:{total: 0}});
</script>

        非父子组件一般有两种,兄弟组件和跨多级组件。在Vue2 中, 推荐使用一个空的Vue 实例作为中央事件总线(bus)。

<div id = "app">{{message}}<component-a></component-a>
</div><script>bus = new vue();Vue.component('component-a', {template:'<button @click ="handleEvent" >传递事件</button>',methods:{handleEvent: funciton(){bus.emit('on-message', '来自组件component-a的内容');}}});var app = new vue({el:'#app',mounted: function(){var _this = this;bus.$on('on-message', function(msg){_this.message = msg; //监听});}});
</script>

        在子组件中,使用this.$parent 可以直接访问该组件的父实例或组件,父组件也可以通过
this.$children 访问它所有的子组件,而且可以递归向上或向下无线访问, 直到根实例或最内层的组件。

        Vue 提供了子组件索引的方法,用特殊的属性ref来为子组件指定一个索引名称。

<div id = "app"><button @click="handleRef">通过ref 获取子组件实例</button><component-a ref="comA" ></component-a>
</div><script>Vue.component('component-a',{template:'<div>子组件</div>',data: function(){return {message : '子组件内容'}}});var app = new vue({el: '#app',methods: {handleRef:function(){var msg = this.$refs.comA.message; //ref的用法console.log(msg);}}});
</script>

7.4. slot

        其实就把父组件的内容直接显示在子组件内,替换掉子组件的slot那部分。子组件child-component 的模板内定义了一个slot>元素,并且用一个>作为默认的内容,在父组件没有使用slot 时,会渲染这段默认的文本;如果写入了slot, 那就会替换整个<slot> 。

        给<slot> 元素指定一个name 后可以分发多个内容,具名Slot 可以与单个Slot 共存。

<div id = "app"><child-component><h2 slot ="header" >标题</h2><p>分发的内容</p><p>更多分发的内容</p></child-component>
</div><script>Vue.component('child-component',{template : '\<div>\<slot name="header" ></slot>\</div>\<div>\<slot>\<p>如果父组件没有插入内容,我将作为默认出现<p>\</slot>\</div>'});var app = new vue({el:'#app'});
</script>

        在<slot>元素上有一个类似props 传递数据给组件的写法msg=” xxx ”,将数据传到了插槽。父组件中使用了<template>元素,而且拥有一个scope=”props ”的特性,这里的props只是一个临时变量,就像v-for= "item in items",里面的item 一样。template 内可以通过临时变量props访问来自子组件插槽的数据msg 。

        而Vue 扣2.x 提供了用来访问被slot 分发的内容的方法$ slots.

7.5. 其他        

        $nextTick 就是用来知道什么时候DOM 更新完成的

this.$nextTick (function(){var text = document.getElementByid('div').innerHTML;console.log(text);
});

        在一些非常特殊的情况下,我们需要动态地去创建Vue 实例, Vue 提供了Vue.extend 和$mount 两个方法来手动挂载一个实例。

<div id ="mount-div"></div>
<script>var MyComponent =Vue.extend({...});new MyComponent().$mount('#mount-div');
</script>

8. 自定义指令

        自定义指令语法和组件基本一致,只是单词改成了driective。

//全局定义
Vue.directive('test', {...});//局部定义
var app = new vue({el:'#app',directive: {test: {...}}
});

        自定义指令的选项是由几个钩子函数组成的,每个都是可选的。bind, inserted, updated, componentUpdated, unbind。

        每个钩子函数都有几个参数可用

  • el 指令所绑定的元素,可以用来直接操作DOM
  • binding 一个对象
  • vnode Vue 编译生成的虚拟节点
  • oldVnode 上一个虚拟节点仅在update 和componentUpdated 钩子中可用

9. Render函数

        在Vue.js 2 中, Virtual Dom 就是通过一种VNode 类表达的,每个DOM 元素或组件都对应一
个VNode 对象。在多数场景中,我们使用template就足够了,但在一些特定的场景下,使用Virtual Dom 会更简单。

        Render 函数通过crea teElement 参数来创建Virtual Dom。

<div id="app"><anchor :leve="2" title="特性">特性<anchor>
</div><script>Vue.component("anchor", {props:{level:{type: Number,required: true},title:{type: String,defaule: ''}},render: function(createElement){'h' + this.level,[createElement('a',{domProps: {href: '#' + this.title}},this.$slot.default)]}});var app = new vue({el:'#app'})
</script>

        createElement 构成了Vue Virtual Dom 的模板,它有3 个参数:第一个参数必选,可以是一个HTML 标签,也可以是一个组件或函数;第二个是可选参数,数据对象,在template 中使用。第三个是子节点,也是可选参数,用法一致。

        使用Render 函数最不友好的地方就是在模板比较简单时, 写起来也很复杂,而且难以阅读出
DOM 结构, 尤其当子节点嵌套较多时, 嵌套的createElement 就像盖楼一样一层层延伸下去。为了让Render 函数更好地书写和阅读, Vue 扣提供了插件babel-plugin-transform-vue-jsx 来支
持JSX 语法。JSX 是一种看起来像HTML , 但实际是JavaScript 的语法扩展,它用更接近DOM 结构的形式来描述一个组件的U 和状态信息。需要在webpack 里配置插件babel-plugin-transform-vue才SX 编译后才可以运行。

new vue({el:'#app',render(h){<anchor lever={1}> <span>一级</span> 标题 </anchor>}
})

10. 使用Webpack

        在webpack 的世界里, 一张图片、一个css 甚至一个字体,都称为模块( Module),彼此存在依赖关系, webpack 就是来处理模块间的依赖关系的,并把它们进行打包。

        web pack 的主要适用场景是单页面富应用( SPA ) 。SPA 通常是由一个h恤l 文件和一堆按需加载的js 组成,它的html 结构可能会非常简单。只有一个<div>节点,所有的代码都集成在了神奇的ma in 扣文件中,理论上古可以实现像知乎、淘宝这样大型的项目。

        export 和import 是用来导出和导入模块的。一个模块就是一个js 文件,它拥有独立的作用域,里面定义的变量外部是无法获取的。

//Config.jsvar Config ={version : '1.0.0'
};export {Config};//main.jsimport {Config} from "./Config.js"

        如果使用npm 安装了一些库,在webpack 中可以直接导入。归根到底, webpack 就是一个.js 配置文件,你的架构好或差都体现在这个配置里,随着需求的不断出现,工程配置也是逐渐完善的。

        在webpack 的世界里,每个文件都是一个模块,比如css 、.js 、.html 、.jpg 、.less 等。对于不同的模块,需要用不同的加载器( Loaders )来处理,而加载器就是webpack 最重要的功能。        

        webpack 虽然概念比较新,看似复杂,但它只不过是一个js 配置文件,只要搞清楚入口( Entη )、出口( Output )、加载器( Loaders )和插件( Plugins )这4 个概念。

        Vue.js 是一个渐进式的JavaScript 框架,在使用webpack 构建Vue 项目时,可以使用一种新的构建模式: .vue 单文件组件。一个. vue 文件一般包含3 部分,即<template>、<script>和<style>。每个. vue 文件就代表一个组件, 组件之间可以相互依赖。

<template><div> hello {{name}}</div>
</template><script>export default{data (){return {name : 'Vue.js'}}}
</acript><style scoped>div{color: #f60;font-size: 24px;        }
</style>

11. 插件

11.1. 路由

        SPA其实就是在前后端分离的基础上,加一层前端路由。因此, SPA 只有一个ht时,整个网站所有的内容都在这一个html 里,通过JavaScript 来处理。

        每个页面对应一个组件,也就是对应一个.vue 文件。在router 目录下创建views 目录,用于存
放所有的页面。再回到main.js 里,完成路由的剩余配置。创建一个数组来制定路由匹配列表,每一个路由映射一个组件:

const Routers = {{path : "./index",component: (resolve) => require(['./views/index.vue'], resolve)}
}

vue-router 有两种跳转页面的方法,第一种是使用内置的<router-link>组件,它会被渲染为一个
<a>标签。第二种跳转方法,使用router 实例的方法。比如在about.vue 里,通过点击事件跳转。

11.2. 状态管理

        虽然bus 己经可以很好地解决跨组件通信,但它在数据管理、维护、架构设计上还只是一个简单的组件,而Vuex 却能更优雅和高效地完成状态管理。

        Vuex 里的数据都是响应式的,任何组件使用同数据时,只要数据变化,对应的组件也会立即更新。在组件内,数据只能读取,不能手动改变,改变store 中数据的唯一途径就是显式地提交mutations 。

        Vuex 还有其他3 个选项可以使用: ge忧ers 、actions 、modules 。Vuex 很像是一种与开发
者的约定,所以涉及改变数据的,就使用mutations ,存在业务逻辑的,就用actions 。至于将业务
逻辑放在action 里还是Vue 组件里完成,就需要根据实际场景拿捏了。

12. 总结

        这篇博客是一边学习看书一遍写的,每天早上开工前1个小时学习,前后估计写了有1个月时间。说实话,《VUE.js 实战》这本书感觉写的缺了点原理的解释,可能是篇幅的原因。当然也可能是第一次看关于前端的语言书籍,很多前端技术默认的东西没有掌握所以看起来有点吃力。无论如何,算是对vue有了基本的认识,后面项目中遇到了也不会搓手不及了。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux下安装RocketMQ:从零开始的消息中间件之旅

感谢您阅读本文&#xff0c;欢迎“一键三连”。作者定会不负众望&#xff0c;按时按量创作出更优质的内容。 ❤️ 1. 毕业设计专栏&#xff0c;毕业季咱们不慌&#xff0c;上千款毕业设计等你来选。 RocketMQ是一款分布式消息中间件&#xff0c;具有高吞吐量、低延迟、高可用性…

本末倒置!做660+880一定要避免出现这3种情况!

每年都有不少人做过660题&#xff0c;但是做过之后&#xff0c;并没有真正理解其中的题目&#xff0c;所以做过之后效果也不好&#xff01;再去做880题&#xff0c;做的也会比较吃力。 那该怎么办呢&#xff0c;不建议你继续做880题&#xff0c;先把660给吃透再说。 接下来给…

PostgreSQL使用教程

安装 PostgreSQL 您可以从 PostgreSQL 官方网站下载适合您操作系统的安装程序&#xff0c;并按照安装向导进行安装。 启动数据库服务器 安装完成后&#xff0c;根据您的操作系统&#xff0c;通过相应的方式启动数据库服务器。 连接到数据库 可以使用命令行工具&#xff08;如 p…

Objective-C使用块枚举的细节

对元素类型的要求 在 Objective-C 中&#xff0c;NSArray 只能存储对象类型&#xff0c;而不能直接存储基本类型&#xff08;例如 int&#xff09;。但是&#xff0c;可以将基本类型封装在 NSNumber 等对象中&#xff0c;然后将这些对象存储在 NSArray 中。这样&#xff0c;en…

Maven编译打包时报“PKIX path building failed”异常

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 方法11.报错信息2.InstallCert.java3.生成证书文件 jssecacerts4.复制 jssecacerts 文件5. 然后重启Jenkins 或者maven即可 方法21.下载证书2. 导入证书执行keytool…

7.优化算法之分治-快排归并

0.分治 分而治之 1.颜色分类 75. 颜色分类 - 力扣&#xff08;LeetCode&#xff09; 给定一个包含红色、白色和蓝色、共 n 个元素的数组 nums &#xff0c;原地对它们进行排序&#xff0c;使得相同颜色的元素相邻&#xff0c;并按照红色、白色、蓝色顺序排列。 我们使用整数…

Elasticsearch (1):ES基本概念和原理简单介绍

Elasticsearch&#xff08;简称 ES&#xff09;是一款基于 Apache Lucene 的分布式搜索和分析引擎。随着业务的发展&#xff0c;系统中的数据量不断增长&#xff0c;传统的关系型数据库在处理大量模糊查询时效率低下。因此&#xff0c;ES 作为一种高效、灵活和可扩展的全文检索…

PHP爬虫类的使用技巧与注意事项

php爬虫类的使用技巧与注意事项 随着互联网的迅猛发展&#xff0c;大量的数据被不断地生成和更新。为了方便获取和处理这些数据&#xff0c;爬虫技术应运而生。PHP作为一种广泛应用的编程语言&#xff0c;也有许多成熟且强大的爬虫类库可供使用。在本文中&#xff0c;我们将介…

Qt Creator 的设置文件保存位置

在使用 Qt Creator 进行开发时,备份或迁移设置(例如文本编辑器偏好、语法高亮等)是常见需求。了解这些设置文件在不同操作系统中的保存位置,可以简化这个过程。本文将为您详细介绍 Qt Creator 保存设置文件的位置。 默认文件位置 Qt Creator 会创建多个文件和目录来存储其…

springboot系列八: springboot静态资源访问,Rest风格请求处理, 接收参数相关注解

文章目录 WEB开发-静态资源访问官方文档基本介绍快速入门注意事项和细节 Rest风格请求处理基本介绍应用实例注意事项和细节思考题 接收参数相关注解基本介绍应用实例PathVariableRequestHeaderRequestParamCookieValueRequestBodyRequestAttributeSessionAttribute ⬅️ 上一篇…

微服务-网关Gateway

个人对于网关路由的理解&#xff1a; 网关就相当于是一个项目里面的保安&#xff0c;主要作用就是做一个限制项。&#xff08;zuul和gateway两个不同的网关&#xff09; 在路由中进行配置过滤器 过滤器工厂&#xff1a;对请求或响应进行加工 其中filters&#xff1a;过滤器配置…

探索QCS6490目标检测AI应用开发(三):模型推理

作为《探索QCS6490目标检测AI应用开发》文章&#xff0c;紧接上一期&#xff0c;我们介绍如何在应用程序中介绍如何使用解码后的视频帧结合Yolov8n模型推理。 高通 Qualcomm AI Engine Direct 是一套能够针对高通AI应用加速的软件SDK&#xff0c;更多的内容可以访问&#xff1a…

摸鱼大数据——Spark基础——Spark环境安装——PySpark搭建

三、PySpark环境安装 PySpark: 是Python的库, 由Spark官方提供. 专供Python语言使用. 类似Pandas一样,是一个库 Spark: 是一个独立的框架, 包含PySpark的全部功能, 除此之外, Spark框架还包含了对R语言\ Java语言\ Scala语言的支持. 功能更全. 可以认为是通用Spark。 功能 P…

Golang | Leetcode Golang题解之第199题二叉树的右视图

题目&#xff1a; 题解&#xff1a; /** 102. 二叉树的递归遍历*/ func levelOrder(root *TreeNode) [][]int {arr : [][]int{}depth : 0var order func(root *TreeNode, depth int)order func(root *TreeNode, depth int) {if root nil {return}if len(arr) depth {arr a…

线性代数--行列式1

本篇来自对线性代数第一篇的行列式的一个总结。 主要是行列式中有些关键点和注意事项&#xff0c;便于之后的考研复习使用。 首先&#xff0c;对于普通的二阶和三阶行列式&#xff0c;我们可以直接对其进行拆开&#xff0c;展开。 而对于n阶行列式 其行列式的值等于它的任意…

每个架构师都应该读的八本经典书籍

格雷戈尔霍普在本文讨论了8本被视为软件架构师必读的经典书籍。 以下是所提及的关键书籍的摘要&#xff1a; 1、维特鲁威&#xff08;公元前 20 年&#xff09;的《建筑学》&#xff1a; 虽然与软件架构没有直接关系&#xff0c;但这部古代文献被提及&#xff0c;具有历史背景…

C++特殊类设计单例模式...

文章目录 请设计一个类&#xff0c;不能被拷贝请设计一个类&#xff0c;只能在堆上创建对象请设计一个类&#xff0c;只能在栈上创建对象请设计一个类&#xff0c;不能被继承请设计一个类&#xff0c;只能创建一个对象(单例模式)单例模式&#xff1a;饿汉模式&#xff1a;懒汉模…

代发考生战报:6月25号 南宁 HCIP-Transmission传输 H31-341考试884分通过

代发考生战报&#xff1a;6月25号 南宁 HCIP-Transmission传输 H31-341考试884分通过 &#xff0c;今天我和同事两个人去考的&#xff0c;我考试遇到1个新题&#xff0c;他遇到两个新题&#xff0c;客服提供的题库很稳定&#xff0c;全覆盖了&#xff0c;轻松通过&#xff0c;考…

【语言模型】Xinference的部署过程

一、引言 Xinference&#xff0c;也称为Xorbits Inference&#xff0c;是一个性能强大且功能全面的分布式推理框架&#xff0c;专为各种模型的推理而设计。无论是研究者、开发者还是数据科学家&#xff0c;都可以通过Xinference轻松部署自己的模型或内置的前沿开源模型。Xinfe…

pikachu靶场 利用Rce上传一句话木马案例(工具:中国蚁剑)

目录 一、准备靶场&#xff0c;进入RCE 二、测试写入文件 三、使用中国蚁剑 一、准备靶场&#xff0c;进入RCE 我这里用的是pikachu 打开pikachu靶场&#xff0c;选择 RCE > exec "ping" 测试是否存在 Rce 漏洞 因为我们猜测在这个 ping 功能是直接调用系统…