前端(五)-Vue簡單基礎

来源:https://www.cnblogs.com/xiaoqigui/archive/2022/07/27/16524260.html
-Advertisement-
Play Games

1、 Vue概述 Vue (讀音/vju/, 類似於view)是一套用於構建用戶界面的漸進式框架,發佈於2014年2月。 與其它大型框架不同的是,Vue被設計為可以自底向上逐層應用。 Vue的核心庫只關註視圖層,不僅易於上手,還便於與第三方庫(如: vue-router: 跳轉,vue-resour ...


1、 Vue概述

  • Vue (讀音/vju/, 類似於view)是一套用於構建用戶界面的漸進式框架,發佈於2014年2月。
  • 與其它大型框架不同的是,Vue被設計為可以自底向上逐層應用。
  • Vue的核心庫只關註視圖層,不僅易於上手,還便於與第三方庫(如: vue-router: 跳轉,vue-resource: 通信,vuex:管理)或既有項目整合。
  • 官網:https://cn.vuejs.org/

  • Soc原則:關註點分離原則
  • Vue 的核心庫只關註視圖層,方便與第三方庫或既有項目整合。
  • HTML + CSS + JS : 視圖 : 給用戶看,刷新後臺給的數據
  • 網路通信 : axios
  • 頁面跳轉 : vue-router
  • 狀態管理:vuex
  • Vue-UI : ICE , Element UI

2、第一個Vue程式

  • CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!-- view 層 模板 -->
<div id="app">
    {{message}}  <!-- 通過瀏覽器控制台可以控制數據實時更新 vm.message = "text" -->
</div>
<!-- 導入Vue.js  -->
<!--    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        //model:數據
        data:{
            message: "hello,vue!"
        }
    });
</script>
</body>
</html>

3、Vue基本語法

3.1 if else if else

<body>
<!-- view 層 模板 -->
<div id="app">
   <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else-if="type==='C'">C</h1>
    <h1 v-else>D</h1>
</div>
<!-- 導入Vue.js  -->
<!--    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            type: 'A'
        }
    });
</script>
</body>

3.2 for

<body>
<!-- view 層 模板 -->
<div id="app">
    <li v-for="(item,index) in items">
        {{item.message}} --- {{index}}
    </li>
</div>
<!-- 導入Vue.js  -->
<!--    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
           items: [
               {message: '狂神說Java'},
               {message: '狂神說前端'},
               {message: '狂神說運維'}
           ]
        }
    });
</script>
</body>

3.3 v-on 監聽事件

<body>
    <!-- view 層 模板 -->
    <div id="app">
        <button v-on:click="sayHi">click Me</button>
    </div>


    <!-- 導入Vue.js  -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data: { message: "狂神說 Java"

                  },
            methods:{  //方法必須定義再Vue的Method對象中
                sayHi:function(event){
                    alert(this.message);
                }
            },

        });
    </script>
</body>

3.4 v-test,v-html

3.4.1 v-text

  • {{xxx}}取值有個弊端,當網速很慢或javascript出錯時,會在頁面顯示{{xxx}},Vue提供的v-text可以解決這個問題。
<body>
<!-- view層 模板 -->
<div id="app">
    <p>{{hello}}</p>
    <!-- 和下麵的一樣 -->
    <p v-text = 'hello'></p>
</div>

<!-- 1.導入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

<script>
    new Vue({
        el:'#app',
        data:{
            hello:'<span>hello world</span>'
        }
    })
</script>
</body>

3.4.2 v-html

  • 用於輸出html代碼。
<body>
<!-- view層 模板 -->
<div id="app">
    <p v-html="hello"></p>
</div>

<!-- 1.導入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

<script>
    new Vue({
        el:'#app',
        data:{
            hello:'<span>hello world</span>'
        }
    })
</script>
</body>

4、Vue雙向綁定

你可以用v-model指令在表單、及元素上創建雙向數據綁定。它會根據控制項類型自動選取正確的方法來更新元素。儘管有些神奇, 但v-model本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據,並對一些極端場景進行一些特殊處理。
  註意:v-model會忽略所有表單元素的valuecheckedselected特性的初始值而總是將Vue實例的數據作為數據來源。你應該通過JavaScript在組件的data選項中聲明初始值!

4.1 單行文本多行文本

<body>
    <!-- view 層 模板 -->
    <div id="app">
        <!-- 當行文本 -->
        輸入的文本:<input type="text" v-model="message"/> {{message}} <br/>
        <!-- 多行文本框 -->
        <textarea name="" id="" cols="30" rows="10" v-model="message2"> </textarea>{{message2}}
    </div>
    <!-- 導入Vue.js  -->
    <!--    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data: { message: "123",
                   message2: "2456" 
                  }
        });
    </script>
</body>

4.2 單選框 和多選框

單選框

<body>
    <!-- view 層 模板 -->
    <div id="app">
        性別:
        <input type="radio" id="nan" name="sex" value="男" v-model="sex"> <label for="nan">男</label>
        <input type="radio" id="nv" name="sex" value="女" v-model="sex">  <label for="nv">女</label>

        <p>
            您的性別是:{{sex}}
        </p>
    </div>
    <!-- 導入Vue.js  -->
    <!--    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data: {
                sex: ''
            }
        });
    </script>
</body>

多選框

<body>
<!-- view層 模板 -->
<div id="app">

    多覆選框:
    <input type="checkbox" id="jack" value="Jack" v-model="message">
    &nbsp;&nbsp;
    <label for="jack">Jack</label>
    <input type="checkbox" id="join" value="Join" v-model="message">
    &nbsp;&nbsp;
    <label for="join">Same</label>
    <input type="checkbox" id="mike" value="Mike" v-model="message">
    &nbsp;&nbsp;
    <label for="mike">Mike</label>
    <span>選中的值:{{message}}</span>
</div>

<!-- 1.導入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message: []
        }
    })
</script>
</body>

4.3 下拉框

<body>
    <!-- view 層 模板 -->
    <div id="app">
        下拉框:
        <select  v-model="info">
            <option value="" disabled>---請選擇---</option>
            <option value="AA">A</option> <!-- 有value就綁定value的值 -->
            <option value="BB">B</option>
            <option >C</option> <!-- 有value就 綁定標簽內的內容 -->
        </select>

        <span>value:{{info}}</span>

    </div>
    <!-- 導入Vue.js  -->
    <!--  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data: {
                info: "",
                //info名字隨便取
            }
        });
    </script>
</body>

5、Vue組件

5.1什麼是Vue組件

  • 組件是可復用的Vue實例, 說白了就是一組可以重覆使用的模板, 跟JSTL的自定義標簽、Thymelealth:fragment等框架有著異曲同工之妙,通常一個應用會以一棵嵌套的組件樹的形式來組織:

在這裡插入圖片描述

  • 例如,你可能會有頁頭、側邊欄、內容區等組件,每個組件又包含了其它的像導航鏈接、博文之類的組件。
<body>
    <!-- view 層 模板 -->
    <div id="app">
        <!-- 組件:傳遞給組件中的值:props  v-bind:info="item"  參數綁定-->
        <comp1 v-for="item in items" v-bind:info="item"></comp1>

    </div>
    <!-- 導入Vue.js  -->
    <!--    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script>

        //定義一個vue組件
        Vue.component("comp1",{
            props: ['info'], // props參數  info參數名
            template: '<li>{{info}}<li>'
        });

        var vm = new Vue({
            el:"#app",
            data: {
                items: ["Java","Linux","前端"]
            }
        });
    </script>
</body>

6、Axios

6.1 什麼是Axios

Axios是一個開源的可以用在瀏覽器端和Node JS的非同步通信框架, 它的主要作用就是實現AJAX非同步通信,其功能特點如下:

  • 從瀏覽器中創建 XMLHttpRequests
  • 從 node.js 創建 http 請求
  • 支持 Promise API
  • 攔截請求和響應
  • 轉換請求數據和響應數據
  • 取消請求
  • 自動轉換 JSON 數據
  • 客戶端支持防禦 XSRF(跨站請求偽造)

GitHub:https://github.com/axios/axios

中文文檔:http://www.axios-js.com/

為什麼要使用Axios

由於Vue.js是一個視圖層框架並且作者(尤雨溪) 嚴格準守SoC(關註度分離原則)所以Vue.js並不包含AJAX的通信功能, 為瞭解決通信問題, 作者單獨開發了一個名為vue-resource的插件, 不過在進入2.0版本以後停止了對該插件的維護並推薦了Axios框架。少用jQuery, 因為它操作Dom太頻繁!

6.2 第一個Axios應用程式

日常開發的介面大部分都是採用JSON格式, 可以先在項目里模擬一段JSON數據, 數據內容如下:

  • 創建一個名為data.json的文件並填入上面的內容, 放在項目的根目錄下
{
  "name": "subeiLY",
  "url": "https://www.cnblogs.com/gh110/",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "萬柏林",
    "city": "山西太原",
    "country": "中國"
  },
  "links": [
    {
      "name": "語雀",
      "url": "https://www.yuque.com/nizhegechouloudetuboshu/library"
    },
    {
      "name": "subeiLY",
      "url": "https://blog.csdn.net/m0_46153949"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios</title>
	 <style>
	        <!-- v-cloak 解決閃爍問題 讓那個元素不顯示 -->
	        [v-cloak]{
	            display: none;
	        }
	    </style>
	</head>
	<body>
	
	<div id="app">
	    <div>姓名:{{info.name}}</div>
	    <div>地址:{{info.address.country}}--{{info.address.city}}--{{info.address.street}}</div>
	    <div>鏈接:<a v-bind:href="info.url" target="_blank">{{info.url}}</a></div>
	</div>
	
	<!-- 引入JS文件 -->
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	
	<script>
	    var vm = new Vue({
	        el:"#app",
			
			//data方法,接收axios返回的數據
			data(){
				return{
					// 請求的返回參數格式,必須和json字元串一樣,可以少些,但是不可以寫錯
					//參數沒有數據,這裡只是擺格式
					info:{
						name: null, 
						address: {
							street: null,
							city: null,
							country: null
						},
						links: []
					}
				}
			},
			mounted(){ //鉤子函數,鏈式編程 ES6新特性
				axios.get('data.json').then(response=>(this.info=response.data));
			}
	    })
	</script>
	</body>
</html>

6.3 生命周期

Vue的生命周期

7、計算屬性,插槽,自定義事件

7.1 計算屬性

什麼是計算屬性:

計算屬性的重點突出在屬性兩個字上(屬性是名詞),首先它是個屬性其次這個屬性有計算的能力(計算是動詞),這裡的計算就是個函數:簡單點說,它就是一個能夠將計算結果緩存起來的屬性(將行為轉化成了靜態的屬性),僅此而已;可以想象為緩存!

<body>
    <div id="app">
        <p>currentTime: {{currentime1()}}</p>
        <p>currentTime: {{currentime2}}</p>
    </div>

    <!-- 引入JS文件 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                message: "hello,kuangshen"
            },
            methods:{
                currentime1:function(){
                    return Date.now(); //返回一個時間戳
                }
            },
            computed:{ //計算屬性:methods,computed 方法名不能重名,重名,只會調用methods的方法
                //計算屬性是一個屬性
                currentime2:function(){
                    this.message;   //只有中間的數據發生改變,計算屬性的值才會改變,類似於緩存
                    return Date.now(); //返回一個時間戳
                }
            }
        });
    </script>
</body>

計算屬性的特點

特點:計算屬性的主要特性就是為了將不經常變化的計算結果進行緩存,以節約我們的系統開銷;

7.2 插槽

Vue.js中我們使用<slot>元素作為承載分發內容的出口,作者稱其為插槽,可以應用在組合組件的場景中;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<div id="app">
		 <!--  <ul>
		       <li>JAVA</li>
		       <li>linux</li>
		       <li>PYTHON</li>
		   </ul> -->
	   <todo>
		   <todo-title slot="todo-title" :title="title" ></todo-title>
		   <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
	   </todo>
		   
	</div>
	
	<!-- 引入JS文件 -->
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	
	<script>
		
		//slot:插槽
		Vue.component("todo",{
		    template: '<div>\
		                    <slot name="todo-title"></slot>\
		                    <ul>\
		                        <slot name="todo-items"></slot>\
		                    </ul>\
		               </div>'
		});
		
		Vue.component("todo-title",{
			props: ['title'],
		    template: '<div>{{title}}</div>'
		 });
		 
		 
		 //v-on 簡寫 @
		 Vue.component("todo-items",{
			 props: ['item'],
		     template:'<li>{{item}}</li>'
		 });
		
	    var vm = new Vue({
	        el:"#app",
			data: {
				title: "秦老師列表",
				todoItems: ['狂神說Java','狂神說前端','狂神說Linux'],
				stuList:"學生列表",
				students: ['小松','小妤','化羽']
			}
	    });
	</script>
	</body>
</html>

插槽命名註意點

camelCase vs. kebab-case HTML 特性是不區分大小寫的。所以,當使用的不是字元串模版,camelCased (駝峰式) 命名的 prop 需要轉換為相對應的kebab-case(短橫線隔開式) 命名: 如果你使用字元串模版,則沒有這些限制。

7.3 自定義事件內容分發

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<div id="app">
		 <!--  <ul>
		       <li>JAVA</li>
		       <li>linux</li>
		       <li>PYTHON</li>
		   </ul> -->
	   <todo>
		   <todo-title slot="todo-title" :title="title" ></todo-title>
		   <todo-items slot="todo-items" v-for="(item,index) in todoItems" 
		   :item="item" v-bind:index="index" v-on:remove="removeItems(index)"></todo-items>
	   </todo>
		   
	</div>
	
	<!-- 引入JS文件 -->
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	
	<script>
		
		//slot:插槽
		Vue.component("todo",{
		    template: '<div>\
		                    <slot name="todo-title"></slot>\
		                    <ul>\
		                        <slot name="todo-items"></slot>\
		                    </ul>\
		               </div>'
		});
		
		Vue.component("todo-title",{
			props: ['title'],
		    template: '<div>{{title}}</div>'
		 });
		 
		 
		 //v-on 簡寫 @
		 Vue.component("todo-items",{
			 props: ['item','index'],
			 //只能綁定當前組件的方法
		     template:'<li>{{index}}-----{{item}}  <button @click="myremove">刪除</button></li>',
			 methods: {
				 myremove:function(index){
					 //自定義事件分發,可以調取到 v-on:remove="removeItems(index)" 方法
					 this.$emit('remove',index);
				 }
			 }
		 });
		
	    var vm = new Vue({
	        el:"#app",
			data: {
				title: "秦老師列表",
				todoItems: ['狂神說Java','狂神說前端','狂神說Linux']
			},
			methods:{
				removeItems:function(index){ //指定下標
					console.log("刪除了"+this.todoItems[index]+"OK");
					this.todoItems.splice(index,1); //splice(index,1) 指定下標一次刪除一個元素
				}
			}
	    });
	</script>
	</body>
</html>

測試自定義方法removeItems(index)

刪除自身測試

刪除前:

刪除後:

this.$emit('remove',index);的理解

在這裡插入圖片描述

8、小結

Vue入門示例

Vue對象元素分析 :

元素/方法 說明
el:"#app" el屬性:把當前Vue對象掛載到 div標簽上,#app是id選擇器
data data: 是Vue對象中綁定的數據
data(){} 接收axios返回的數據
mounted(){} 鉤子函數,自定義函數或 axios.get('data.json').then(response=>(this.info=response.data));
內部命令
v-if
v-else-if
v-for
v-show
操作 說明
v-on 綁定事件(方法)簡寫@
v-model 數據雙向綁定
v-bind 給組件綁定參數,簡寫 :

9、第一個vue-cli項目

1.什麼是vue-cli

  • vue-cli官方提供的一個腳手架,用於快速生成一個vue的項目模板。
  • 預先定義好的目錄結構及基礎代碼,就好比咱們在創建Maven項目時可以選擇創建一個骨架項目,這個估計項目就是腳手架,我們的開發更加的快速。

主要的功能

  • 統一的目錄結構
  • 本地調試
  • 熱部署
  • 單元測試
  • 集成打包上線

後面部分,有寫過一次,不過再次重新寫的時候出了一些問題,下次補上;

筆記視頻來源->【狂神說Java】Vue最新快速上手教程通俗易

筆記參考部分->狂神說筆記——Vue 快速入門19


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 實戰案例 1.搭建mysql服務 下載mysql [[email protected] ~]# wget http://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm [[email protected] ~]# rpm -Uvh my ...
  • 四大組件 Activity 實現步驟 繼承 Activity 或其子類,實現以下方法: //第一次創建時回調 protected void onCreate(Bundle savedInstanceState); //啟動時回調 protected void onStart(); //再次啟動時回調 ...
  • 前言: ​ 從64位開始,iOS引入了Tagged Pointer技術,用於優化NSNumber、NSDate、NSString等小對象的存儲。 Tagged Pointer主要為瞭解決兩個問題: 記憶體資源浪費,堆區需要額外的開闢空間 訪問效率,每次set/get都需要訪問堆區,浪費時間, 而且需要 ...
  • HMS Core音頻編輯服務(Audio Editor Kit)6.6.0版本上線,新增歌聲合成能力。通過歌詞和曲調,結合不同的曲風讓機器也能生成真實度極高的歌聲。支持字級別輸入歌詞進行音素轉換,生成對應歌詞的歌聲,可靈活調整音高、滑音、呼吸音、顫音等細節參數,讓歌聲更真實。 歌聲合成服務可廣泛應用 ...
  • HTML 一、認識HTML 什麼是HTML? HTML 是用來描述網頁的一種語言 HTML 指的是超文本標記語言: HyperText Markup Language HTML 不是一種編程語言,而是一種標記語言 標記語言是一套標記標簽 (markup tag) HTML 使用標記標簽來描述網頁 H ...
  • 本文摘要:主要通過實操講解運用Webpack 5 CSS常用配置的方法步驟 前文已談到可以通過配置 css-loader 和 style-loader,使 webpack5 具有處理 CSS 資源的能力。css-loader 首先會分析出各個 CSS文件之間的關係,把各個CSS文件合併為一大段 CS ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 前言 技術棧是 Vue 的同學,在面試中難免會被問到 Vue2 和 Vue3 的相關知識點的實現原理和比較,面試官是步步緊逼,一環扣一環。 Vue2 的響應式原理是怎麼樣的? Vue3 的響應式原理又是怎麼樣的? Vue2 中是怎麼監測數 ...
  • 本文將介紹用於佈局的容器組件,使用 `Flexbox` 功能將其所控制區域設定為特定的佈局,方便快速搭建頁面的基本結構。 ...
一周排行
    -Advertisement-
    Play Games
  • Github / Gitee QQ群(1群) : 813100564 / QQ群(2群) : 579033769 視頻教學 介紹 MiniWord .NET Word模板引擎,藉由Word模板和數據簡單、快速生成文件。 Getting Started 安裝 nuget link : https:// ...
  • Array.Sort Array類中相當實用的我認為是Sort方法,相比起冗長的冒泡排序,它的出現讓排序更加的簡化 結果如下: 還可以聲明一個靜態方法用來專門調用指定數組排序,從名為 array 的一維數組中 a 索引處開始,到 b 元素 從小到大排序。 註意: a + b 不能大於 array 的 ...
  • 前言 在上一篇文章CLR類型系統概述里提到,當運行時掛起時, 垃圾回收會執行堆棧遍歷器(stack walker)去拿到堆棧上值類型的大小和堆棧根。這裡我們來翻譯BotR里一篇專門介紹Stackwalking的文章,希望能加深理解。 順便說一句,StackWalker在中文里似乎還沒有統一的翻譯,J ...
  • 使用過 nginx 的小伙伴應該都知道,這個中間件是可以設置跨域的,作為今天的主角,同樣的 反向代理中間件的 YARP 毫無意外也支持了跨域請求設置。 有些小伙伴可能會問了,怎樣才算是跨域呢? 在 HTML 中,一些標簽,例如 img、a 等,還有我們非常熟悉的 Ajax,都是可以指向非本站的資源的 ...
  • 什麼是Git Git 是一個開源的分散式版本控制系統,用於敏捷高效地處理任何或小或大的項目。 Git 是 Linus Torvalds 為了幫助管理 Linux 內核開發而開發的一個開放源碼的版本控制軟體。 Git 與常用的版本控制工具 CVS, Subversion 等不同,它採用了分散式版本庫的 ...
  • 首先CR3是什麼,CR3是一個寄存器,該寄存器內保存有頁目錄表物理地址(PDBR地址),其實CR3內部存放的就是頁目錄表的記憶體基地址,運用CR3切換可實現對特定進程記憶體地址的強制讀寫操作,此類讀寫屬於有痕讀寫,多數驅動保護都會將這個地址改為無效,此時CR3讀寫就失效了,當然如果能找到CR3的正確地址... ...
  • 說明 onlyoffice為一款開源的office線上編輯組件,提供word/excel/ppt編輯保存操作 以下操作均基於centos8系統,officeonly鏡像版本7.1.2.23 鏡像下載地址:https://yunpan.360.cn/surl_y87CKKcPdY4 (提取碼:1f92 ...
  • 二叉樹查找指定的節點 前序查找的思路 1.先判斷當前節點的no是否等於要查找的 2.如果是相等,則返回當前節點 3.如果不等,則判斷當前節點的左子節點是否為空,如果不為空,則遞歸前序查找 4.如果左遞歸前序查找,找到節點,則返回,否繼續判斷,當前的節點的右子節點是否為空,如果不為空,則繼續向右遞歸前 ...
  • ##Invalid bound statement (not found)出現原因和解決方法 ###前言: 想必各位小伙伴在碼路上經常會碰到奇奇怪怪的事情,比如出現Invalid bound statement (not found),那今天我就來分析以下出現此問題的原因。 其實出現這個問題實質就是 ...
  • ###一、背景知識 爬蟲的本質就是一個socket客戶端與服務端的通信過程,如果我們有多個url待爬取,只用一個線程且採用串列的方式執行,那隻能等待爬取一個結束後才能繼續下一個,效率會非常低。 需要強調的是:對於單線程下串列N個任務,並不完全等同於低效,如果這N個任務都是純計算的任務,那麼該線程對c ...