React中級學習（第二天）

JSX 語法的轉化過程 (了解)

演示 : babel中文網試一試 let h1 =

  • JSX 僅僅是createElement() 方法的語法糖 (簡化語法)
  • JSX 語法 被 @babel/preset-react 插件編譯為 createElement() 方法
  • React 元素：是一個對象，用來描述你希望在屏幕上看到的內容
  • React 元素 最后 被 ReactDOM.render(<Child/>,document.getElementById('root')) 渲染顯示到頁面

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-9hqEG5rw-1596329786917)(C:/Users/wangyu123/Desktop/新建文件夾/面試題/md-imgs/jsx.png)]

  • 演示:
render () {const el = <h1 className='greeting'>Hello JSX</h1>console.log(el);return el
}react更新機制 
簡化 : 虛擬DOM
然后呢?? 
1. jsx => 虛擬DOM  => 真實的DOM
2. jsx數據發生變化 => 新的虛擬DOM
3. 新的虛擬DOM 和 舊的虛擬DOM對比 => 通過Diff算法找到有差異的地方 => 更新1步驟的真實的DOM

組件更新機制

  • setState 的兩個作用
    • 修改state
    • 重新調用render , 更新組件(UI)
  • 過程 : 父組件重新渲染時, 也會重新染當前組件子樹

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-l4SpZboe-1596329786920)(C:/Users/wangyu123/Desktop/新建文件夾/面試題/md-imgs/更新機制.png)]

演示代碼 :

  • App > P1+P2> C1+C2
//2. 類組件
class App extends React.Component {state = {}render() {return (<div style={{ background:'pink', display:'flex' }}><P1></P1><P2></P2></div>)}
}
class P1 extends React.Component {render() {return (<div style={{ background:'red',flex:1 }}><p>P1</p></div>)}
}
class P2 extends React.Component {state = {name :'zs'}render() {return (<div style={{ background: 'skyblue',flex:1 }}><p onClick={this.handle}>P2- { this.state.name }</p><C1></C1><C2></C2></div>)}handle = () => { this.setState({name : 'ls'})}
}
class C1 extends React.Component {render () {console.log('child1 更新了');return (<div style={{background:'yellow' }}><p>child1</p></div>)}
}
class C2 extends React.Component {render () {console.log('child2 更新了');return (<div style={{background:'lime' }}><p>child2</p></div>)}
}
  • 這樣效果是出來了,但是它確實有很嚴重的性能問題, 因為子組件都沒有任何變化,如果重新渲染,那么就會重新調用render() 渲染頁面, 有損性能
  • 所以需要進行處理 組件性能優化

組件性能優化

優化1: 減輕 state

  • 原則 : state 中 只存儲跟組件渲染相關的數據 (比如 : count / 列表數據 等)
  • 不用做渲染的數據 不要放在 state 中, (比如 定時器 id )
// 定時器的 timerId 就 不需要放到state 中,, 只是用來清除 定時器, 和渲染無關componentDidMount() {// timerId存儲到this中，而不是state中this.timerId = setInterval(() => {}, 2000)}componentWillUnmount() {clearInterval(this.timerId) }

優化2 : 避免不必要的重新渲染

  • 組件更新機制 : 父組件更新會引起子組件也被更新
  • 問題 : 子組件沒有任何變化時, 也會重新渲染
  • 如何避免不必要的重新渲染呢 ?
  • 解決方式 : 使用 鉤子函數` shouldComponentUpdate(nextProps, nextState)
    • nextProps : 最新的屬性
    • nextState : 最新的狀態
    • 場景 : 比較更新前后的 state 或者 props 是否相同, 來決定是否 更新組件
  • 作用 : 通過返回值 決定該組件是否需要重新渲染, 返回true ,表示重新渲染, false 表示不重新渲染
  • 觸發時機 : 更新階段的鉤子函數, 組件重新渲染 前 執行
    • 順序 : shouldComponentUpdate() ==> render() ==> componentDidMount()
  • 演示 : 點擊父組件的計算器的數據count
// 演示1 : 子組件里 通過 shouldComponentUpdate()  { return true or false } - true-更新- false-不更新// 演示2 : 獲取 父傳過來的屬性, 奇數更新,偶數不更新,  shouldComponentUpdate(nextProps,nextState)- nextProps : 最新的屬性- nextState : 最新的狀態- if(nextState.count % 2 == 0) {return false    }else { return true}// 演示3 : 就一個組件里有number 值, 點擊產生隨機值, 比較前后生成的隨機值是否一致,不一致就更細, 一致就不需要更新
// count : Math.floor(Math.random()*3)shouldComponentUpdate(nextProps,nextState) {//          上一個的值                  最新的值console.log(this.state.count === nextState.count)// 本次的 nextState.number// 上一次的 this.state.number//  或者 通過 if..else..判斷 return this.state.count !== nextState.count}

優化3 : 純組件 - PureComponent

  • 純組件
  • 作用 : 自動實現了 shouldComponentUpdate() 鉤子函數, 不需要再手動對比更新前后的props 或者 state , 來阻止不必要的更新了
  • 原理 : PureComponent 內部, 會別對比更新前后的props 以及更新前后的state , 只要有一個不同, 就會讓組件更新, 只有在兩者都相同的情況下, 才會阻止組件更新
class Hello extends React.PureComponent {}
// 把那個方法 shouldComponentUpdate() 刪除掉, 已經 PureComponent已經封裝好了

PureComponent 內部原理

參考 : API Reference => React => React.PureComponent

  • PureComponent

  • 說明 : PureComponent 內部會比較更新前后的 props 和 state 分別進行淺對比

  • 對于簡單/值類型來說, 比較兩個值是否相同 (直接賦值即可, 沒有坑)

// 將 React.Component 替換為： React.PureComponent
class Hello extends React.PureComponent {state = {// number 就是一個普通的值類型的數據number: 0}handleClick = () => {const newNumber = Math.floor(Math.random() * 3)console.log(newNum);// 對于 值類型 來說，沒有任何坑，直接使用即可// 更新前的 number：0// 更新后的 number：2// PureComponent 內部會進行如下對比：// 更新前的number === 更新后的number//    如果這兩個值相同，內部，相當于在 shouldComponentUpdate 鉤子函數中返回 false ，阻止組件更新。//    如果這兩個值不同，內部，相當于在 shouldComponentUpdate 鉤子函數中返回 true ，更新組件。this.setState({number: newNumber})}render() {return (<div><h1>隨機數：{this.state.number}</h1><button onClick={this.handleClick}>隨機生成</button></div>)}
}
  • 對于引用類型來說, 只比較對象的引用(地址) 是否相同
    • 造成的結果 : 對象里 的數據變化,不更新
const { obj } = this.statelet newNum = Math.floor(Math.random() * 3)
console.log(newNum);// 雖然value 值 也可以從 react-dev-tools 里調試 value值確實都變了,但是 obj 一直沒有變
obj.value = newNumthis.setState({obj 
})
  • 正確做法 : 根據現有狀態生成一個新對象, 然后再更新狀態
const newObj = {...this.state.obj} // 創建一個新對象
newObj.value = Math.floor(Math.random() * 3)
this.setState({obj: newObj
})
  • 正確做法說明:
    • 在 PureComponent 中 使用引用類型 的狀態時, 應該每次都創建一個新的狀態, 而不是直接修改當前狀態
    • 因為PureComponent 是淺對比, 所以,如果直接修改當前對象中的屬性, 會造成: 對象中的值變了, 但是引用地址沒有改變, 而導致組件不會被更新, 這樣的話就出現bug了
  • 注意 , 在 React 中, ( 不管是PureComponent 還是 Component ) , 都不要直接修改引用類型的狀態值, 而是要創建一個新的狀態, 修改新的狀態,然后再更新

在 React 組件 中更新應用類型的狀態

  • 文檔 : 不可變數據的力量
  • 注意 : 對于引用類型的狀態來說, 應該創建新的狀態, 而不要直接修改當前狀態
  • 原則 : 狀態不可變!!! 數據不要變, 直接創建新的
  • 對象狀態 :
// 對象
state = {obj : {value : 123}
}//ES5
//                            新加     之前的值      修改內容
const newObj = Object.assign( {}, this.state.obj, {value : '新的值'} )
this.setState({obj:newObj
})
// es6 
this.setState({obj : {...this.state.obj, value: '新的值'}
})
  • 數組狀態
// 數組：
state = {list: ['a', 'b']
}// ES5：
this.setState({list: this.state.list.concat([ 'c' ]) // ['a', 'b', 'c']
})// ES6：
this.setState({list: [...this.state.list, 'c']
})// 刪除數組元素：[].filter()

虛擬DOM的真正價值

  • 虛擬 DOM 的真正價值從來都不是性能。
  • 真正的價值：虛擬DOM 能夠讓 React 擺脫瀏覽器的限制（束縛）。也就是，只要能夠運行JS代碼的地方，就能夠運行 React。
  • 跨平臺
    • JSX => 虛擬DOM => react-dom => DOM 元素=> 瀏覽器
    • JSX => 虛擬DOM => React-Native => ios和安卓的元素 => 移動混合開發
    • JSX => 虛擬DOM => 工具 => VR

React 組件

  • (state, props) => UI

路由基礎

路由介紹

  • 路由 : 就是一套映射規則, 是url中 哈希值 與 展示視圖 之間的一種對應關系
  • 為什么要學習路由 ?
    • 現代的前端應用大多都是 SPA（單頁應用程序），也就是只有一個 HTML 頁面的應用程序。
    • 因為它的用戶體驗更好、對服務器的壓力更小，所以更受歡迎。
    • 為了有效的使用單個頁面來管理原來多頁面的功能，前端路由 應運而生。
  • 使用React路由簡單來說，就是配置 路徑 和 組件（配對）
spa缺點1. 學習成本大 學習路由2. 不利于SEO

基本使用

  • 安裝 : yarn add react-router-dom
// 1 導入路由中的三個組件
import { BrowerRouter , Link, Route } from 'react-router-dom'const Hello = () => {// 2 使用 BrowerRouter 組件包裹整個應用（才能使用路由）return (<BrowerRouter><div><h1>React路由的基本使用：</h1>{/* 3 使用 Link 組件，創建一個導航菜單（路由入口） */}<Link to="/first">頁面一</Link>{/* 4 使用 Route 組件，配置路由規則以及要展示的組件（路由出口） */}<Route path="/first" component={First} /></div></BrowerRouter>)
}

常用組件的使用介紹

  • 引入的三個組件
// HashRouter => 哈希模式 => 帶 #  => 修改的是 location.hash
import { HashRouter , Link, Route } from 'react-router-dom'  //帶#
// BrowserRouter => history模式 => 不帶 #  => 修改的是 location.pathname
import { BrowserRouter , Link, Route } from 'react-router-dom'  //不帶#
  • BrowserRouter 組件 : 使用 Router 組件包裹整個應用 (才能使用路由)
  • Link 組件 : 創建一個導航菜單 (路由入口)
    • 最終會生成一個a標簽, 通過 to 屬性指定 pathname（history /） 或 hash（哈希模式 #）
  • Route 組件 : 用來配置路由規則和要展示的組件 (路由出口)
    • path : 配置路由規則
    • component : 指定當前路由 規則匹配時要展示的組件
    • Route 組件放在哪, 組件內容就展示在哪, 并且每一個路由都是一個單獨的Route組件

路由的執行過程

  • 當點擊 Link 的時候，就會修改瀏覽器中的 pathname
  • 只要 瀏覽器地址欄中的 pathname 發生改變，React 路由就會監聽到這個改變
  • React 路由監聽到 pathname 改變后，就會遍歷所有 Route 組件，分別使用 Route 組件中的 path 路由規則，與當前的 瀏覽器地址欄中的pathname進行匹配
  • 只要匹配成功，就會把當前 Route 對應的組件，展示在頁面中
  • 注意：匹配時，不是找到第一個匹配的路由就停下來了。而是： 所有的 Route 都會進行匹配，只要匹配就會展示該組件。
    • 也就是說：在一個頁面中，可以有多個 Route 同時被匹配

使用 Switch 組件 ,匹配一個

{/* Switch 只會讓 組件顯示出來一個 */}
<Switch><Route path="/one" component={One}></Route><Route path="/two" component={Three}></Route><Route path="/two" component={Two}></Route>
</Switch>

編程式導航

  • 改變入口的三種方式 :

  • 手動輸入

  • 聲明式導航 : (html)

    • 編程式導航 : 通過js代碼來實現的跳轉/返回 (js)

  • 編程式導航 :

  • 可以通過props 拿到 跳轉和返回的方法

  • 正常的組件, 打印 props => 默認是 一個空對象 {}

  • 凡是參與路由匹配出來的組件 , 路由都會給他們傳入三個屬性 history, location, match

  • history : (主要用來編程式導航)

    • push() 跳轉到另外一個頁面 push(path,state)
    • goBack() 返回上一個頁面
    • replace() 跳轉到另外一個頁面

  • location : (位置路徑的)

  • pathname : 路徑

    • state : 通過跳轉傳遞的數據

  • match : 獲取參數

    • params : 可以拿到動態路由里的參數 params : {id : 123}
 * - push()  跳轉到另外一個頁面* - goBack() 返回上一個頁面* - replace() 跳轉到另外一個頁面** - push 和 replace 區別* - 	push()    跳轉 - 記錄訪問的歷史  (可逆)* - 	replace() 跳轉 - 不記錄訪問的歷史 (不可逆)* One :  <button onClick={this.jump}>跳轉到two</button> 演示* Two :  <button onClick={this.back}>返回到One</button> 返回

備

HashRouter 傳參的方式和 BrowserRouter 傳參的方式不一樣this.props.history.push({pathname: '/pay',state: {name: 'zs'}})

默認路由 - 根路徑 /

  • 默認路由地址為：/
  • 默認路由在進入頁面的時候，就會自動匹配
{/* / 表示默認路由規則 */}
<Route path="/" component={Home} />

匹配模式

問題：當 Link組件的 to 屬性值為 “/login”時，為什么 默認路由/ 也被匹配成功？

  • 默認情況下，React 路由是: 模糊匹配模式
  • 模糊匹配：只要 pathname 以 path 開頭就會匹配成功
    • path 代表Route組件的path屬性
    • pathname 代表Link組件的to屬性（也就是url中 location.pathname）
  • 精確匹配：只有當 path 和 pathname 完全匹配時才會展示該路由
  • 解決辦法 : 給 Route 組件添加 exact 屬性，讓其變為精確匹配模式
// 添加  exact 之后, 此時，該組件只能匹配 pathname=“/” 這一種情況
<Route exact path="/" component=... />// 再演示 : /one/two/three

重定向

  • 需求 : 使用 重定向 '/' => '/one'
  • 方式1 : render-props
<Route exact path='/'render={ () => {return <Redirect to='/one' />}
}></Route>
  • 方式2 - children
<Route exact path='/'><Redirect to='/one' />
</Route>

路由兩種模式的說明

哈希模式

 1. 訪問路徑 :  http://localhost:8080/#/one http://localhost:8080/#/two2. 服務器接收到的 (服務器是不會 接收 # 后面的內容的)3. 不管訪問的路徑是什么樣的 http://localhost:8080  ==> 服務器返回的默認 的就是  index.html4. 后面的 /one 和 /two 由路由來使用, 根據路由匹配規則找到對應的組件顯示
5. 哈希模式 不管是 開發階段還是發布階段,都是沒有問題的

history 模式

1. 訪問路徑 :  http://localhost:8080/one http://localhost:8080/two2. 服務器接收到的 http://localhost:8080/one  和 http://localhost:8080/two但是，/one 和 /two 這個路徑是不需要服務器端做任何處理的。
3.  http://localhost:8080/getNewshttp://localhost:8080/detail 它們都是 接口地址  , 后面遇到 類似 /one 和 /two 都會以為是接口 是要返回數據的呢?
3. 所以，應該在服務器端添加一個路由配置，直接返回 SPA 的 index.html 頁面就行啦。
4. 類似處理app.get('/getNews', (req,res) => {// 根據 res 返回 對應的數據res.json { .....  }})app.get('/detail', (req,res) => {// 根據 res 返回 對應的數據res.json { .....  }})// 最后 額外再多加一個, 專門用來返回 index.htmlapp.use('*', (req,res) => {res.sendFile('index.html')})

總結 :

history模式 : 
- 開發階段 :  webpack腳手架已經處理好了, 
- 發布階段 : 服務器是公司的服務器, 可能就會報錯
- 我們要做的就是`告訴后臺`,我們使用的 是 history模式,讓他專門處理一下,就可以了
- 如果后臺不給處理,或者處理不好, 我們就使用 `哈希模式`

類似 /one 和 /two 都會以為是接口 是要返回數據的呢?
3. 所以，應該在服務器端添加一個路由配置，直接返回 SPA 的 index.html 頁面就行啦。
4. 類似處理
app.get(’/getNews’, (req,res) => {
// 根據 res 返回 對應的數據
res.json { … }
})
app.get(’/detail’, (req,res) => {
// 根據 res 返回 對應的數據
res.json { … }
})

// 最后 額外再多加一個, 專門用來返回 index.html
app.use('*', (req,res) => {res.sendFile('index.html')
})


#### 總結 : ```js
history模式 : 
- 開發階段 :  webpack腳手架已經處理好了, 
- 發布階段 : 服務器是公司的服務器, 可能就會報錯
- 我們要做的就是`告訴后臺`,我們使用的 是 history模式,讓他專門處理一下,就可以了
- 如果后臺不給處理,或者處理不好, 我們就使用 `哈希模式`

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

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

相關文章

【】MTCNN基于NCNN的測試過程

【】MTCNN基于NCNN的測試過程

前言 操作過程 NCNN: https://github.com/Tencent/ncnn/wiki/how-to-build#build-for-linux-x86; vector初始化&#xff1a;int num[4] { 1, 4, 3, 2 }; int numLength sizeof(num) / sizeof(num[0]); vector<int> nums(num, num numLength); //使用數組初始化向量 Q&…
閱讀更多...
iOS NSTextAttachment - 圖文混排

iOS NSTextAttachment - 圖文混排

蘋果在iOS7中推出了一個新的類NSTextAttachment&#xff0c;它是做圖文混排的利器&#xff0c;本文就是用這個類&#xff0c;只用50行代碼實現文字與表情混排&#xff0c;當然也可以實現段落中的圖文混排。 首先說一下文字和表情的混排&#xff1a; 先來做點兒準備工作&#…
閱讀更多...
vuex的結構有哪些參數？

vuex的結構有哪些參數？

查看參考地址&#xff1a; https://vuex.vuejs.org/zh/ vuex 狀態管理模式&#xff0c;相當于數據的中間商 注意&#xff1a; 為相同 屬性有&#xff1a; 1.State vue中的data —> 存放數據 2.Getter vue中的計算屬性computed —>將已有的數據進行計算再次利用 3.…
閱讀更多...
百煉OJ - 1004 - 財務管理

百煉OJ - 1004 - 財務管理

題目鏈接&#xff1a;http://bailian.openjudge.cn/practice/1004/ 思路 求和取平均。。。 #include <stdio.h>int main() {float sum0,a;for(int i0;i<12;i){scanf("%f",&a);sum a;}printf("$%.2f\n",sum/12);return 0; } 轉載于:https://w…
閱讀更多...
iOS 自定義Cell按鈕的點擊代理事件

iOS 自定義Cell按鈕的點擊代理事件

在實際開發工作中&#xff0c;我們經常會在自定義的Cell中布局一些按鈕&#xff0c;并且很多時候我們會在點擊這個按鈕的時候使我們的UItableviewController跳轉到下一界面&#xff0c;有的可能還要傳值。那么如何使我們的控制器能夠獲知我們按下了cell的按鈕呢&#xff1f;毫無…
閱讀更多...
Google 開源技術protobuf 簡介與樣例

Google 開源技術protobuf 簡介與樣例

今天來介紹一下“Protocol Buffers ”&#xff08;以下簡稱protobuf&#xff09;這個玩意兒。本來俺在構思“生產者/消費者模式 ”系列的下一個帖子&#xff1a;關于生產者和消費者之間的數據傳輸格式。由于里面扯到了protobuf&#xff0c;想想干脆單獨開一個帖子算了。 ★prot…
閱讀更多...
VUE全局導航守衛、 請求、響應攔截器 的設置

VUE全局導航守衛、 請求、響應攔截器 的設置

文件設置參考地址&#xff1a;https://gitee.com/wang_yu5201314/headlines__news/tree/master/%E9%A1%B9%E7%9B%AE%E6%BA%90%E7%A0%81%E6%96%87%E4%BB%B6/src 文件夾 Router 文件夾 index.js 中設置 全局導航守衛 文件 mian.js 中設置 請求、響應攔截器 設置 請求、響應攔截器…
閱讀更多...
JRE System Library和 Referenced Libraries 的區別和來源

JRE System Library和 Referenced Libraries 的區別和來源

JRE System Library 安裝jdk后&#xff0c;會有個目錄叫做jrejre目錄是核心類庫&#xff0c;目錄中裝的是類庫文件jre System Library顧名思義就表示系統類庫文件 Referenced Libraries referenced libraries放的是你引用的jar包&#xff0c;這個不需要自己創建的&#xff0c;你…
閱讀更多...
ByteArray、16進制、字符串之間的轉換

ByteArray、16進制、字符串之間的轉換

ByteArray、16進制、字符串之間的轉換&#xff1a; package fengzi.convert {import flash.utils.ByteArray;public class ByteArrayTranslated{/**** 通過hax數據返回ByteArray* param hax 格式 "AA5A000100FF"***/public static functi…
閱讀更多...
js - （初中級）常見筆試面試題

js - （初中級）常見筆試面試題

1.用 js 實現一個深拷貝 2.用 js 寫一個數組去重 3. 用 js 對字符串進行反轉 4. 用 js 請求范圍內的質數個數 5.用 js 求數組中出現最多的數及其出現次數
閱讀更多...
iOS 支付寶SDK接入詳解

iOS 支付寶SDK接入詳解

一&#xff0c;在支付寶開放平臺下載支付寶SDK&#xff08;https://openhome.alipay.com/platform/document.htm#down&#xff09; https://doc.open.alipay.com/doc2/detail.htm?spma219a.7629140.0.0.HpDuWo&treeId54&articleId104509&docType1 二&#xff0c;添…
閱讀更多...
面試基本知識點

面試基本知識點

文章目錄面-什么是SEO面 - cookie / localstorage / sessionstorage的區別面 - promise面試題面 - 柯里化函數面 - 函數節流面 - 函數防抖HTML / CSS 知識點1、講講盒模型&#xff08;螞蟻金服 2019.03 招行信用卡 2019.04 美團 作業幫&#xff09;2、根據盒模型解釋邊距重疊&a…
閱讀更多...
Redis 熱點key

Redis 熱點key

壓測報redis 熱點問題 熱點問題概述 產生原因 熱點問題產生的原因大致有以下兩種&#xff1a; 用戶消費的數據遠大于生產的數據&#xff08;熱賣商品、熱點新聞、熱點評論、明星直播&#xff09;。 在日常工作生活中一些突發的的事件&#xff0c;例如&#xff1a;雙十一期間某些…
閱讀更多...
移動IM開發那些事：技術選型和常見問題

移動IM開發那些事：技術選型和常見問題

最近在做一個iOS IM SDK&#xff0c;在內部試用的階段&#xff0c;不斷有兄弟部門或者合作伙伴過來問各種技術細節&#xff0c;所以統一寫一篇文章記錄&#xff0c;統一介紹下一個IM APP的方方面面&#xff0c;包括技術選型(包括通訊方式,網絡連接方式,協議選擇)和常見問題。 …
閱讀更多...
webstrom打開通過頂部瀏覽器打開網頁，被跳轉到默認主頁

webstrom打開通過頂部瀏覽器打開網頁，被跳轉到默認主頁

重新開始工作啦&#xff0c;希望以后認真一點&#xff0c;并把遇到的問題都記錄下來&#xff0c;雖然是小小白&#xff0c;但能無意間幫助到別人就更開心了呀 通過webstrom打開本地的文件時&#xff0c;發現跳轉到了默認主頁上&#xff0c;吐槽下&#xff0c;有些主頁真的超級流…
閱讀更多...
mockjs（接口服務代理）

mockjs（接口服務代理）

mock官網&#xff1a;http://mockjs.com/ 一、搭建一個練習項目 1.利用vue的項目腳手架進行搭建 命令&#xff1a; vue create mock-demo 截圖&#xff1a; 2.安裝相關的依賴 命令&#xff1a; #使用 axios 發送 ajax npm install axios --save #使用 mock.js 產生隨機數據…
閱讀更多...
MD5算法原理

MD5算法原理

MD5&#xff08;單向散列算法&#xff09; 的全稱是Message-Digest Algorithm 5&#xff08;信息-摘要算法&#xff09;&#xff0c;經MD2、MD3和MD4發展而來。MD5算法的使用不需要支付任何版權費用。MD5功能&#xff1a;輸入任意長度的信息&#xff0c;經過處理&#xff0c;輸…
閱讀更多...
函數-函數進階-裝飾器流程分析

函數-函數進階-裝飾器流程分析

老王&#xff1a;算了&#xff0c;估計你也想不出來。。。學過嵌套函數沒有&#xff1f; 你&#xff1a;yes&#xff0c;然后呢&#xff1f; 老王&#xff1a;想實現一開始你寫的america login(america)不觸發你函數的執行&#xff0c;只需要在這個login里面再定義一層函數&am…
閱讀更多...
制作手寫簽名

制作手寫簽名

<!DOCTYPE html> <!-- saved from url(0056)http://hao2013.cn/canvas-special-master/brush/index.html --> <html><head><meta http-equiv"Content-Type" content"text/html; charsetUTF-8"><title>簽名板(支持移動…
閱讀更多...
python第五次作業——陳靈院

python第五次作業——陳靈院

習題1&#xff1a;讀入文件pmi_days.csv&#xff0c;完成以下操作&#xff1a;1.統計質量等級對應的天數&#xff0c;例如&#xff1a;優&#xff1a;5天良&#xff1a;3天中度污染&#xff1a;2天2.找出PMI2.5的最大值和最小值&#xff0c;分別指出是哪一天。 import csv impo…
閱讀更多...
最新文章

Copyright @ 2022~2023