JavaWeb筆記2-JavaScriptVueAjax

1. JavaScript

1.1 基礎介紹

  • JavaScript(簡稱:JS)是一門跨平臺、面向對象的腳本語言,是用來控制網頁行為,實現頁面的交互效果。JavaScript和Java是完全不同的語言,但基本語法類似
  • 組成
    • ECMAScript: 規定了JS基礎語法核心知識,包括變量、數據類型、流程控制、函數、對象等。

    • BOM:瀏覽器對象模型,用于操作瀏覽器本身,如:頁面彈窗、地址欄操作、關閉窗口等。

    • DOM:文檔對象模型,用于操作HTML文檔,如:改變標簽內的內容、改變標簽內字體樣式等。

1.2 引入方式

  • JS有兩種引入方式,分為內部腳本和外部腳本

    • 內部腳本:將JS代碼定義在HTML頁面中
      • JavaScript代碼必須位于<script></script>標簽之間
      • 在HTML文檔中,可以在任意地方,放置任意數量的<script></script>
      • 一般會把腳本置于<body>元素的底部,可改善顯示速度
        • HTML頁面是從上往下解析的,如果JS代碼過多,影響頁面顯示速度
        • JS代碼中,可以操作HTML標簽,如果標簽還沒渲染出來[在JS代碼下面,沒加載出來],就可能會報錯
    • 外部腳本:將JS代碼定義在外部 JS文件中,然后引入到 HTML頁面中
      • 外部JS文件中,只包含JS代碼,不包含<script>標簽
      • ?引入外部js的<script>標簽,必須是雙標簽
        ??

內部腳本引入

<script>

js代碼;

</script>

<body><script>//1.內部腳本alert('Hello,World');</script>
</body>

外部腳本引入

<script src="外部文件路徑"></script>

HTML代碼
<body><script src="hello.js"></script>
</body>
js代碼
alert('外部引入');

  • 細節:?
    • demo.js中只有js代碼,沒有<script>標簽
  • JS書寫規范
    • 結束符:每行js代碼,結尾以分號結尾,而結尾的分號可有可無。(建議在一個項目中保持一致,要么全部都加,要么全部都不加)
    • 注釋:單行注釋,多行注解的寫法, 與java中一致。

1.3?JS基礎語法?

  • 1.31 變量&常量
  • JS中主要通過 let 關鍵字來聲明變量的。( 弱類型語言,變量是可以存放不同類型的值的。)

  • 變量名需要遵循如下規則:
    • 組成字符可以是任何字母、數字、下劃線(_)或美元符號($),且數字不能開頭[與java相同]
    • 變量名嚴格區分大小寫,name和Name是不同的變量
    • 不能使用關鍵字作為變量名,如:let、var、if、for等
  • JS中用 const 關鍵字聲明常量
    • 在早期js中,聲明變量還能用var,但不嚴謹(不推薦)
      • var聲明的變量可以重復聲明
      • var聲明的作用域為全局作用域
  • 一旦聲明,常量的值就不能改變(不能重新賦值)
<body><script>let a=10;a="hello";b=true;alert(a);alert(n);</script>
</body>

  • 拓展[輸出方式]:
    • alert()? ? ? ? ? ? ? ? 彈出警告框
    • console.log()? ? ? 輸出到控制臺
    • document.write() 輸出到body區域,在頁面中顯示(不常用)
1.32 數據類型
  • JavaScript的數據類型分為:基本數據類型和引用數據類型(對象)
  • 基本數據類型
number數字(整數、小數、NaN(not a Number))
boolean

布爾。true,false

null對象為空,JavaScript是大小寫敏感的,因此null、Null、NULL是完全不同的
undefined聲明的變量未初始化時,該變量的默認值是undefined
string字符串、單引號、雙引號、反引號皆可,推薦單引號

數據類型可以用 typeof 去檢測?

示例

<body><script>console.log(typeof 1)console.log(typeof 1.3)console.log(typeof true)console.log(typeof null)console.log(typeof 'asd')console.log(typeof "asd")console.log(typeof `asd`)</script></body>

演示

模板字符串語法[字符串反引號的應用場景]

  • 模板字符串的使用場景:拼接字符串和變量。

  • 模板字符串的語法:

    • `...` :反引號 (英文輸入模式下鍵盤 tab 鍵上方波浪線 ~ 那個鍵)

    • 內容拼接時,使用 ${ } 來引用變量

    <script>let name ='張三';let age = 18;let info = `大家好,我是新入職的${name},今年${age}歲`;let info1 = `大家好,我是新入職的`+name+`,今年`+age+`歲`;console.log(info);console.log(info1);</script>

1.33 函數?
  • 介紹
    • 函數(function)是被設計用來執行特定任務的代碼塊,方便程序的封裝復用。
  • 定義
    • JavaScript中的函數通過function關鍵字進行定義,語法為:
function functionName(參數1,參數2....){執行代碼
}let result = add(10,20);
alert(result);
  • 調用?:函數名稱(實際參數列表)

注:JS為弱類型語言,形參、返回值都不需要指定類型,在調用函數時,實參個數和形參個數可以不一致,但建議一致?

<body><script>function add(a,b){return a+b;}alert(add(20,10));</script>
</body>

1.34 匿名函數
  • 匿名函數是一種沒有名稱的函數,可以通過兩種方式定義:函數表達式和箭頭函數。

函數表達式
let add=function(a,b){retutn a+b;
}箭頭函數
let add =add(a,b) =>{return a+b;
}
  • ?匿名函數定義后,可以通過變量名直接調用

let result = add(10,20);

alert(result);

    <script>let add=function(a,b){return a+b;}let del=(a,b)=>{return a-b;}console.log(add(1,2));console.log(del(1,2));</script>

?1.35 自定義對象
  • 定義格式

let 對象名 ={

? ? ? ? 屬性名1:屬性值1,

? ? ? ? 屬性名2:屬性值2,

? ? ? ? 屬性名3:屬性值3,

? ? ? ? 方法名:function(形參列表){ }

}

    <script>let user={name:'zhangsan',age:18,gender:'男',toString(){return `姓名:${this.name},年齡:${this.age},性別:${this.gender}`}}console.log(user.toString())</script>

細節 :如果使用箭頭函數,this不指向當前對象,指向當前對象的父級【不推薦】

1.36 json
  • 概念:
    • JavaScript Object Notation,JavaScript對象標記法(JS對象標記法書寫的文本)
    • 由于語法簡單,層次結構鮮明,多用于作為數據載體,在網絡中進行數據傳輸。
  • 方法
    • JSON.parse() :將json文本轉換成JS對象
    • JSON.stringify():將JS對象轉換成json文本
    <script>let user={name:'zhangsan',age:18,gender:'男',toString:function(){return `姓名:${this.name},年齡:${this.age},性別:${this.gender}`}}console.log(JSON.stringify(user));let personJson='{"name":"zhangsan","age":18,"gender":"男"}'console.log(JSON.parse(personJson));</script>

?

細節:json格式的文本所有的key必須使用雙引號引起來?

1.4 DOM

  • 1.41 概念
  • DOM:Document Object Model 文檔對象模型。也就是 JavaScript 將 HTML 文檔的各個組成部分封裝為對象。
    • Document:整個文檔對象

    • Element:元素對象? ?[如<html><head>,<body>等]

    • Attribute:屬性對象? ?[如<href>等]

    • Text:文本對象? ?[如<h1>文本</h1>中的文本]

    • Comment:注釋對象? ?[就是注釋]

  • 1.42 操作
    • DOM操作核心思想:
      • 將網頁中所有的元素當作對象來處理(標簽的所有屬性在該對象上都可以找到)
    • 操作步驟:
      • 獲取要操作的DOM元素對象
      • 操作DOM對象的屬性或方法(查文檔或AI)
    • 獲取DOM對象
      • 根據CSS選擇器來獲取DOM元素,獲得匹配到的第一個元素:document.querySelector('選擇器')
      • 根據CSS選擇器來獲取DOM元素,獲得匹配到的所有元素:document.querySelectorAll('選擇器')
        • 注:得到的是一個NodeList節點集合,是一個偽數組(有長度、有索引的數組)
      • 其他方式(了解,已經用的很少了)
        • document.getElementById('id')
        • document.getElementsByTagName('div')
        • document.getElementsByClassName('cls')
<body><h1 id="title">111</h1><h1 id="title1">222</h1><h1 id="title1">333</h1><script>//1.獲取DOM對象let h1=document.querySelector('#title');let h2=document.querySelectorAll('#title1');//2.調用DOM對象中的屬性或方法h1.innerHTML='修改文本';h2[1].innerHTML='修改文本2';</script>
</body>

1.5 事件監聽?

  • 1.51 概念
    • 事件:HTML事件是發生在HTML元素上的"事情"。比如:
      • 按鈕被點擊
      • 鼠標移動到元素上
      • 按下鍵盤按鍵
    • 事件監聽:JavaScript可以在事件觸發時,立即調用一個函數做出相應,也成為事件綁定注冊事件
  • 1.52 事件監聽
    • 語法: 事件源.addEventListener('事件類型’,事件觸發執行的函數);
    • 事件監聽三要素
      • 事件源:哪個dom元素觸發了條件,要獲取dom元素
      • 事件類型:用什么方式觸發,比如:鼠標單擊 click
      • 事件觸發執行的函數:要做什么事
<body><input type="button" id="btn1" value="按鈕1"><input type="button" id="btn2" value="按鈕2"><script>var btn1 =document.querySelector("#btn1").addEventListener("click",function(){console.log("第一個按鈕點擊成功")});</script>
</body>

早期版本寫法(了解):

  • 事件源.on事件 = function() {...}?
  • 缺點:on方式會被覆蓋,addEventListener方式可以綁定多次,擁有更多特性,推薦使用
1.53 常見事件
  • 鼠標事件
    • click:鼠標點擊
    • mouseenter:鼠標移入
    • mouseleave:鼠標移出
  • 鍵盤事件
    • keydown:鍵盤按下觸發
    • keyup:鍵盤抬起觸發
  • 焦點事件
    • focus:獲得焦點觸發
    • blur:失去焦點觸發
  • 表單事件
    • input:用戶輸入時觸發
    • submit:表單提交時觸發

2. Vue

2.1 概述

  • Vue,是一款用于構建用戶界面漸進式的JavaScript框架(官方網站:https://cn.vuejs.org)。

  • 構建用戶界面
    • 構建用戶界面是指,在Vue中,可以基于數據渲染出用戶看到的界面。
  • 漸進式
    • 漸進式中的漸進呢,字面意思就是 "循序漸進"。Vue生態中的語法呢是非常多的,比如聲明式渲染、組件系統、客戶端路由(VueRouter)、狀態管理(Vuex、Pinia)、構建工具(Webpack、Vite)等等。
  • 框架
    • 就是一套完整的項目解決方案,用于快速構建項目。
    • 優點:大大提升前端項目的開發效率
    • 缺點:需要理解記憶框架的使用規則。

2.2 準備工作

  • 準備
    • 引入Vue模塊(官方提供)
    • 創建Vue程序的應用實例,控制視圖的元素
    • 準備元素(div),被Vue控制
<body><div id="app"></div><script type="module">//引用官方模塊import { createApp } from 'https://unpkg.com/vue@3/dist/vue.global.js'//控制視圖元素createApp({}).mount('#app');    //調用mount方法,接管app區域[其實就是CSS選擇器]</script></body>
  • 數據驅動視圖
    • 準備數據
    • 通過插值表達式渲染頁面
<body><div id="app"><!--    通過插值表達式渲染頁面 --><h1>{{msg}}</h1></div><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({//定義方法[準備數據]data(){return{msg:'hello vue'}}}).mount('#app');    </script></body>

細節:?

  • Vue中定義數據,必須通過data方法來定義,data方法返回值是一個對象,在這個對象中定義數據。

  • 插值表達式中編寫的變量,一定是Vue中定義的數據,如果插值表達式中編寫了一個變量,但是在Vue中未定義,將會報錯 。

  • Vue應用實例接管的區域是 '#app',超出這個范圍,就不受Vue控制了,所以vue的插值表達式,一定寫在 <div id="app">...</div> 的里面 。

2.3 常用指令

  • 指令:HTML標簽上帶有 v-前綴的特殊屬性,不同的指令有不同的含義,可以實現不同的功能
  • 常用指令
指令作用
v-for列表渲染,遍歷容器的元素或者對象的屬性
v-bind為HTML標簽綁定屬性值,如設置 href , css樣式等
v-if/v-else-if/v-else條件性的渲染某元素,判定為true時渲染,否則不渲染
v-show根據條件展示某元素,區別在于切換的是display屬性的值
v-model在表單元素上創建雙向數據綁定
v-on為HTML標簽綁定事件
2.31 v-for
  • 作用:列表渲染,遍歷容器的元素或者對象的屬性?

  • 語法:

<tr v-for="(item,index) in items" : keys="item.id"> {{item}}</tr>???????
  • 參數
    • items 為遍歷的數組

    • item 為遍歷出來的元素

    • index 為索引/下標,從0開始 ;可以省略,省略index語法: v-for = "item in items"

  • key:
    • 作用:給元素添加的唯一標識,便于vue進行列表項的正確排序復用,提升渲染性能

    • 推薦使用id作為key(唯一),不推薦使用index作為key(會變化,不對應)

    • 注:遍歷的數組,必須在data中定義; 要想讓哪個標簽循環展示多次,就在哪個標簽上使用 v-for 指令。

2.32 v-bind
  • 動態為HTML標簽綁定屬性值,如設置href,src,style樣式等。
  • 語法:
v-bind:屬性="變量"//簡化版:屬性="變量"<td><img class="avatar" v-bind:src="e.image" alt="令狐沖"></td>
  • 注:v-bind 所綁定的數據,必須在data中定義/或基于data中定義的數據而來。
2.33 v-if & v-show
  • 作用:這兩類指令,都是用來控制元素的顯示與隱藏的
  • v-if:
    • 語法:v-if="表達式",表達式值為 true,顯示;false,隱藏

    • 原理:基于條件判斷,來控制創建或移除元素節點(條件渲染)

    • 場景:要么顯示,要么不顯示,不頻繁切換的場景

    • 其它:可以配合 v-else-if / v-else 進行鏈式調用條件判斷

    • 注意: v-else-if必須出現在v-if之后,可以出現多個;v-else 必須出現在v-if/v-else-if之后

<td><span v-if="e.job==1">班主任</span><span v-else-if="e.job==2">講師</span><span v-else-if="e.job==3">學工主管</span><span v-else-if="e.job==4">教研主管</span><span v-else-if="e.job==5">咨詢師</span><span v-else>其他</span>
</td>
  • v-show:

    • 語法:v-show="表達式",表達式值為 true,顯示;false,隱藏

    • 原理:基于CSS樣式display來控制顯示與隱藏

    • 場景:頻繁切換顯示隱藏的場景

<td><span v-show="e.job == 1">班主任</span><span v-show="e.job == 2">講師</span><span v-show="e.job == 3">學工主管</span><span v-show="e.job == 4">教研主管</span><span v-show="e.job == 5">咨詢師</span>
</td>
v-if 與 v-show的區別?
  • v-if: 條件不成立,直接不渲染這個元素(不頻繁切換的場景)
  • v-show:通過css樣式,來控制元素的展示與隱藏(頻繁切換的場景)
2.34 v-model
  • 作用:在表單元素上使用,雙向數據綁定。可以方便的 獲取設置 表單項數據
  • 語法:v-model="變量名"
  • 這里的雙向數據綁定,是指 Vue中的數據變化,會影響視圖中的數據展示 。?
createApp({data() {return {此處數據searchForm:{name: '',gender: ''job: '',},empList: [...]
}}}.mount(...)

注意:v-model 中綁定的變量,必須在data中定義。?

2.35 v-on?
  • 作用:為html標簽綁定事件(添加時間監聽)
  • 語法:
語法
v-on:時間名="方法名"
簡寫為   @時間名="..."<button type="button" v-on:click="search">查詢</button>
<button type="button" @click="clear">清空</button>
  • 方法需定義,與data平級?

3. Ajax?

  • 介紹: Asynchronous JavaScript And XML,異步?的JavaScript和XML
  • 作用:
    • 數據交換:通過Ajax可以給服務器發送請求,并獲取服務器響應的數據。
    • 異步交互:可以在不重新加載整個頁面的情況下,與服務器交換數據并更新部分網頁的技術,如:搜索聯想、用戶名是否可用的校驗等。

XML:(英語:Extensible Markup Language) 可擴展標記語言,本質是一種數據格式,可以用來存儲復雜的數據結構

3.1 同步與異步

  • 同步請求

瀏覽器頁面在發送請求給服務器,在服務器處理請求的過程中,瀏覽器頁面不能做其他的操作。只能等到服務器響應結束后才能,瀏覽器頁面才能繼續做其他的操 作?

  • 異步請求

瀏覽器頁面發送請求給服務器,在服務器處理請求的過程中,瀏覽器頁面還可以做其他的操作。?

?3.2 Axios

  • 介紹: Axious 是對原生的Ajax進行了封裝,簡化書寫,快速開發。
  • 官網:Axious
  • 步驟:
    • 引入Axious的js文件(參考官網)
    • 使用Axious發送請求,并獲取響應結果
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 axios({url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list',method:'get'}).then(function(res) {console.log(res.data);}).catch(function(err) {console.log(err);})

?method:請求方式 GET/POST

url:請求路徑

data:請求數據(POST)

params:發送請求時攜帶的url參數,如:...?key=val

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/91856.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/91856.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/91856.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

代碼隨想錄刷題Day23

右旋字符串 這道題是比較常規的對字符串的復制操作&#xff0c;找到右旋部分的分界點是關鍵 代碼直接貼出來&#xff1a; #include<stdio.h> #include<string.h> int main(){int k;char s[10000];scanf("%d %s",&k,s);int cnt 0;for(int i str…

機器學習sklearn:編碼、啞變量、二值化和分段

就是轉換為數值類型方便機器學習模型處理一、編碼這里舉例將Survived這一行的數據轉換為編碼&#xff0c;原本是字符串類型2、將標簽編碼并賦值回去from sklearn.preprocessing import LabelEncoder y data.iloc[:, -1] # 最后一列拿出來 print(y) le LabelEncoder() le …

嵌入式八股文總結(ARM篇)

嵌入式開發中使用的通常是ARM芯片&#xff0c;在此總結一些面試常問的問題&#xff0c;希望可以和大家一起進步。&#xff08;持續更新中……&#xff09; 目錄 1. 介紹一下I2C的傳輸時序 2. I2C為什么加上拉電阻&#xff0c;為什么使用開漏輸出 3. I2C能接多少個設備&…

TCL --- 列表_part2

0 回顧 列表part0和part1描述了列表的創建&#xff0c;修改&#xff0c;獲取&#xff0c;搜索等相關命令。接下來這篇文章將介紹列表的排序和拼接。通過這三篇文章的描述&#xff0c;詳細大家對列表具有一個詳細并且系統的認識。 1 排序 排序是一個老生常談的話題。最最最常見的…

Kafka 單機多 Broker 實例集群搭建 | 詳情

全文目錄&#xff1a;開篇語前言1. Kafka 集群架構2. 環境要求2.1 安裝 Java2.2 安裝 Zookeeper3. 安裝 Kafka4. 創建 Topic4.1 查看創建的 Topic5. 測試 Kafka 集群5.1 生產者&#xff08;Producer&#xff09;測試5.2 消費者&#xff08;Consumer&#xff09;測試6. 小結文末…

Ajax——異步前后端交互提升OA系統性能體驗

本文介紹了Ajax中的基礎使用&#xff0c;包括XMLHttpRequest的狀態變化、并使用BMI 場景的示例進行介紹&#xff0c;以及結合 DAO 和 Servlet 處理OA系統復雜業務邏輯和JSON數據的處理等等。 本文目錄一、Ajax 基礎html頁面二、 XMLHttpRequestXMLHttpRequest的狀態變化同步和異…

【最后一個單詞的長度】

思路 逆向遍歷&#xff1a; 從字符串末尾開始向前遍歷&#xff0c;跳過末尾的空格&#xff0c;直到找到非空格字符。 遇到非空格字符時開始計數&#xff0c;直到再次遇到空格或字符串開頭。 狀態標記&#xff1a; 使用 state 標記是否已經進入最后一個單詞的計數階段&#xff1…

OpenCV學習 day3

一、灰度實驗 將彩色圖像轉換為灰度圖像的過程稱為灰度化&#xff0c;這種做法在圖像處理中和計算機視覺領域非常常見 1、灰度圖 灰度圖是一種 單通道圖像&#xff0c;每個像素僅存儲 亮度信息&#xff08;0純黑&#xff0c;255純白&#xff09;&#xff0c;沒有顏色信息&#…

基于單片機一氧化碳CO檢測/煤氣防中毒檢測報警系統

傳送門 &#x1f449;&#x1f449;&#x1f449;&#x1f449;其他作品題目速選一覽表 &#x1f449;&#x1f449;&#x1f449;&#x1f449;其他作品題目功能速覽 概述 基于單片機的CO檢測系統通過傳感器實時監測環境中的一氧化碳濃度&#xff0c;結合信號處理電路與…

前端-移動Web-day3

目錄 1、視口 2、rem體驗 3、rem基本使用 4、媒體查詢 5、rem適配 6、rem布局 7、less-體驗 8、less-注釋 9、less-運算 10、less-嵌套 11、less-變量 12、less-導入 13、less-導出 14、less-禁止導出 15、案例-極速問診 1、視口 <!DOCTYPE html> <htm…

【正點原子K210連載】第二十四章 按鍵輸入實驗 摘自【正點原子】DNK210使用指南-CanMV版指南

第二十四章 按鍵輸入實驗 本章實驗將介紹如何使用CanMV讓Kendryte K210獲取板載按鍵的狀態。通過本章的學習&#xff0c;讀者將學習到在CanMV下讀取Kendryte K210的GPIO上的高低電平狀態。 本章分為如下幾個小節&#xff1a; 14.1 maix.GPIO模塊介紹 14.2 硬件設計 14.3 程序設…

基于springboot/java/VUE的旅游管理系統/旅游網站的設計與實現

用戶&#xff1a;注冊&#xff0c;登錄&#xff0c;旅游景點&#xff0c;酒店信息&#xff0c;旅游線路&#xff0c;公告信息&#xff0c;留言板&#xff0c;后臺管理&#xff0c;個人中心&#xff0c;門票預訂管理&#xff0c;酒店預訂管理管理員&#xff1a;登錄&#xff0c;…

Python Excel 高階教程:使用 Spire.XLS 插入、修改和刪除迷你圖

Python 操作 Word 文檔&#xff1a;主流庫對比與選擇指南 在辦公自動化、報告生成、數據處理等領域&#xff0c;利用 Python 程序化地創建、讀取或修改 Microsoft Word 文檔 (.docx 格式) 是一項非常實用的技能。Python 生態中有多個優秀的庫可以完成這項任務&#xff0c;但它…

WebPages PHP:深入解析PHP在網頁開發中的應用

WebPages PHP&#xff1a;深入解析PHP在網頁開發中的應用 引言 隨著互聯網技術的飛速發展&#xff0c;PHP作為一種開源的腳本語言&#xff0c;已經在網頁開發領域占據了舉足輕重的地位。本文將深入探討PHP在網頁開發中的應用&#xff0c;包括其優勢、常用框架、開發流程以及未來…

【深度學習】【三維重建】windows11環境配置PyTorch3d詳細教程

【深度學習】【三維重建】windows11環境配置PyTorch3d詳細教程 文章目錄【深度學習】【三維重建】windows11環境配置PyTorch3d詳細教程前言確定版本對應關系源碼編譯安裝Pytorch3d總結前言 本人windows11下使用搭建PyTorch3d環境&#xff0c;故此以詳細教程以該算法依賴的環境…

SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分離版:日志管理(四)集成Spring Security

目錄 一、前言 二、后端開發及調整 1.日志管理開發 2.配置調整 3.日志入庫&#xff08;注解、切面&#xff09; 三、前端調整 1.日志管理開發 四、附&#xff1a;源碼 1.源碼下載地址 五、結語 一、前言 此文章在上次調整的基礎上開發后端管理系統的用戶請求日志功能&…

ceph 14.2.22 nautilus Balancer 數據平衡

Ceph Balancer (upmap 模式) 啟用與配置 在 Ceph Nautilus (14.2.22) 版本中啟用和配置 Balancer 的完整步驟 1. 前提檢查 檢查集群的初始狀態和版本。 集群狀態 (ceph -s)cluster:id: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxhealth: HEALTH_OKservices:mon: 3 daemons, quo…

在Linux上對固態硬盤進行分區、格式化和掛載的步驟

在Linux上對固態硬盤進行分區、格式化和掛載的步驟如下&#xff1a; 插入固態硬盤&#xff1a;將固態硬盤插入計算機的SATA或M.2接口。 確認固態硬盤被識別&#xff1a;打開終端&#xff0c;輸入以下命令查看硬盤是否被系統識別 fdisk -l 查找硬盤列表中的固態硬盤&#xf…

用Unity結合VCC更改人物模型出現的BUG

1、上傳模型時出現錯誤經過排查是因為服裝發型預制體放到人物模型上之后&#xff0c;物體上自動多了一個空腳本&#xff0c;懷疑是VRC工具箱自動添加的。解決方法&#xff1a;在上傳前將帶有空腳本的物體上的組件刪除即可2、添加頭發時出現模型碰撞錯誤按照【【VRCHAT】從零開始…

k8s之DevicePlugin

解密 Kubernetes Device Plugin&#xff1a;讓容器輕松駕馭特殊硬件 在容器化技術飛速發展的今天&#xff0c;容器憑借輕量、隔離、可移植的特性成為應用部署的主流選擇。但在實際應用中&#xff0c;當容器需要訪問 GPU、FPGA 等特殊硬件資源時&#xff0c;事情就變得不那么簡單…