<input id="0qass"><u id="0qass"></u></input>
  • <input id="0qass"><u id="0qass"></u></input>
  • <menu id="0qass"><u id="0qass"></u></menu>

    自定義博客皮膚VIP專享

    *博客頭圖:

    格式為PNG、JPG,寬度*高度大于1920*100像素,不超過2MB,主視覺建議放在右側,請參照線上博客頭圖

    請上傳大于1920*100像素的圖片!

    博客底圖:

    圖片格式為PNG、JPG,不超過1MB,可上下左右平鋪至整個背景

    欄目圖:

    圖片格式為PNG、JPG,圖片寬度*高度為300*38像素,不超過0.5MB

    主標題顏色:

    RGB顏色,例如:#AFAFAF

    Hover:

    RGB顏色,例如:#AFAFAF

    副標題顏色:

    RGB顏色,例如:#AFAFAF

    自定義博客皮膚

    -+

    Arrow and Bullet

    希望能夠和大家共享這些,也希望能夠幫助到大家,如果有錯誤希望大家指正!

    • 博客(197)
    • 收藏
    • 關注

    原創 Vue中動態修改路由的params和query

    Vue中動態修改路由的params和query1. 前言? 經常在項目中需要動態的修改路由的 params 和 query,便于更好的傳遞到其它需要使用的頁面。當然可以選擇使用VueX來管理這兩個參數,但是 VueX 所帶來的的負擔已經遠遠高于動態的修改路由了。2. 動態修改? 假設你需要動態修改的 params為 paramsDynamic, 需要動態修改的query 為 queryDynamic。this.$router.push({ params: {...this.$route.

    2021-01-06 11:24:14 85

    原創 JavaScript 操作數組的方法

    操作數組的方法concat()連接兩個或更多的數組,不影響原數組,返回一個新數組const a = [1, 2];const b = [3, 4];console.log(a.concat(b), a, b);// [ 1, 2, 3, 4 ] [ 1, 2 ] [ 3, 4 ]join()把數組的所有元素都放入一個字符串中。元素通過指定的分隔符進行分隔。返回字符串,不影響原數組。const a = [1, 2];console.log(a.join('--'), a);

    2021-01-06 08:25:29 22

    翻譯 尤雨溪自述:打造Vue 3背后的故事

    尤雨溪在今年年初Vue 3正式發布之前撰寫了這篇長文,詳述Vue 3的設計過程。前端之巔將全文翻譯如下,希望能幫助你更好地了解Vue 3背后的故事在過去的一年中,Vue 團隊一直都在開發 Vue.js 的下一個主要版本,我們希望能在今年上半年發布它(本文完成時這項工作尚在進行)。Vue 新版本的理念成型于 2018 年末,當時 Vue 2 的代碼庫已經有兩歲半了。比起通用軟件的生命周期來這好像也沒那么久,但在這段時期,前端世界已經今昔非比了。在我們更新(和重寫)Vue 的主要版本時,主要考慮兩點因素.

    2020-12-23 21:09:40 45

    原創 淺談Web身份識別技術 —— Cookie、Session 和 Token

    文章目錄淺談Cookie、Session 和 Token1. 前言2. 過時的身份識別技術2.1 HTTP 首部2.2 客戶端 IP2.3 用戶登錄2.4 胖 URL3. 常用的身份識別技術3.1 cookie3.2 session3.3 token4. 總結淺談Cookie、Session 和 Token1. 前言由于 HTTP 協議是匿名的、無狀態的協議,所以當服務端需要記錄用戶的狀態時,就需要用某種機制來識別具體的用戶。這就是cookie、session 和 token 出現的原因。在 HTT

    2020-12-20 21:57:33 86

    原創 前端如何獲取到宿主機的環境變量?

    其實很簡單我記錄一下過程,然后再整理獲取系統環境變量env 查看 然后 $ 對應名字即可,比如 $PATHshell 獲取這里關于變量的設置和使用#!/bin/bashpath=$PWD# 使用也很簡單 菜鳥教程sed 文本替換這一步就是關鍵,sed -i "s/arrow/arrow_zb/g" ./master這樣就實現了替換某個文件,自然可以實現,如sed -i "s/arrow/$path/g" ./master意思就是把arrow替換后成我們想要的系統變

    2020-12-04 19:09:10 130

    原創 JavaScript 值得一讀的書籍

    前言個人比較喜歡紙質書, 喜歡翻書的感覺。JavaScript的學習過程需要設計到系統的、橫向工程的、語言細節的以及其他小工具書,在此做一個推薦和記錄。書錄1. 系統學習,構建知識體系《JavaScript高級程序設計(第四版)》——推薦指數: ????????????????????也就是常說的紅寶書,較于第三版,第四版新增了非常多的內容,構建JavaScript知識體系,這一本書必備《現代JavaScript教程》—— 推薦指數: ????????????(點擊查看電子書)這是一本電子

    2020-11-14 13:37:46 96

    原創 MAC chrome 谷歌瀏覽器全屏顯示——隱藏菜單欄

    直接按shift + command + f 即可全屏顯示,隱藏菜單欄

    2020-11-01 19:52:40 667

    原創 20201024——記錄一下自己的前端工程師之路

    1. 前言主要是想記錄一下自己是怎么進入,怎么從小白到以為不是小白再到小白的過程,同時也記錄一下自己是如何學習的,計劃如何學習的,如何走向下一步的。2. 入坑程序呢,自己也算是接觸過很多很早了,vb, c, java, php, js,但是都沒有特別深入。直到2017年六月份,導師給了這樣一個機會,我和另一名同學就去學習了,然后就開始了學習之旅,萬萬沒想到成為了自己的職業。也是緣分,也是自己導致的,其實不知道怎么說,自己并不是想要特別走這一條路,本來希望自己能夠走算法,機器學習的,不知道怎么就到這條路

    2020-10-24 19:40:59 2273 22

    原創 如何搭建自己的前端腳手架——詳細步驟和依賴解析

    1. 簡述做為程序員,就是把復雜的事情簡單化,越簡單約好,越一鍵化越完美,開發實際業務時我們都需要先搭建一套運行環境,安裝相關依賴,搭建相關的基礎架構和封裝一些方法以及構建項目等,不然每次都需要自己手動搭建,而且這個過程繁雜還重復,因此,最好是能夠一鍵化搭建自己的開發環境,相信所有的開發人員都是這樣,在前端而言,搭建腳手架CLI就是必經之路。講講搭建腳手架的好處:一鍵化搭建項目結構規范項目結構封裝最佳實踐因此,博主在這里詳細的介紹如何搭建前端的腳手架。2. 開始搭建2.1 介紹必要依賴

    2020-10-24 19:14:18 859 3

    原創 設置遠程免密登錄服務器

    1. 生成自己的公鑰ssh-keygen -t rsa 生成本機的公鑰生成的地址在生成的過程中可以看到找到生成的公鑰位置,其中的id_rsa.pub就是公鑰,復制2. 將公鑰部署到服務器進入自己的服務器進入目錄cd ~/.ssh/vi authorized_keys將復制的公鑰拷貝到authorized_keys下,即完成...

    2020-10-23 10:30:27 2386 8

    原創 基于verdaccio搭建私有npm倉庫方案

    目錄基于verdaccio搭建私有npm倉庫方案1. 前言2. 私有倉庫搭建方案選擇3. 搭建步驟(非docker)4. 基于docker搭建5. 上傳packages基于verdaccio搭建私有npm倉庫方案1. 前言前端的生態已經十分繁榮了,隨著需求越來越復雜,前端的應用也越來越大了,為了更好地服務解耦、團隊協作等原因,一般大型前端應用,都會將項目分成幾個服務來維護,而在這些服務中,一般都會存在大量相同組件,特別是UI部分的組件,很顯然這些組件我們不應該在每個服務都copy一份,這樣如果我要增加

    2020-09-27 15:09:30 334

    原創 PUT和POST方法的區別-比較POST和PUT方法

    文章目錄PUT vs POST - Comparing HTTP MethodsPUT vs POST2. PUT方法做了什么?3. POST方法做了什么?4. 何時使用?PUT vs POST - Comparing HTTP MethodsPUT vs POST存在各種各樣的HTTP方法,每個方法用于不同的目的。最常用的HTTP方法是GET方法,用于從web服務器檢索數據。例如,如果要從特定網站加載圖像,瀏覽器將使用以下命令向web服務器發出請求:GET https://website.com/

    2020-09-25 11:02:41 184

    原創 什么是向前兼容和向后兼容?

    1 簡述博主的書簽頁一直留著一個問題,軟件的向前兼容和向后兼容,以前一直被這個問題所困擾,今天來記錄2 向前兼容和向后兼容從軟件行業的起源理解這兩個概念就不會很難,軟件起源于國外(個人理解),因此,理解這兩個詞最好也是按照英語的習慣來;forward compatibility (向前兼容) = upward compatibility (向上兼容) 也就是向未來兼容,即現在設計的軟件要考慮未來還能不能用。向前兼容:Windows 3.1要能運行為Windows 10開發的程序backward

    2020-07-20 19:17:00 316

    原創 JS獲取當前時間戳的兩種方法

    1. 簡述經常使用 vue 和 react 的小伙伴就知道,很多時間我們需要使用當前時間戳來作為列表的 id;當然平時的獲取也是可以的;博主就經常用到,經常忘記。2. JS獲取當前時間戳2.1 Date.now()Date.now()最簡單最有效2.2 new Date().getTime()new Date().getTime()...

    2020-07-17 20:08:38 118

    轉載 什么是撥測?

    這里僅從互聯網服務的角度來理解??偨Y:撥測是一種網絡鏈路質量的測試手段。撥測,非常類似于爬蟲,更準確地講,非常類似于黑客控制“肉雞”發起DDos攻擊。這里的“肉雞”,就是某個互聯網服務的客戶端,比如PC端、手機端。目的:探測各地區用戶到各個服務接入點的鏈路狀況,這樣,服務調度系統就可以根據探測結果為用戶提供最佳的接入點。注意:撥測會占用網絡資源,應該選擇在空閑時間段進行;撥測也會消耗“肉雞”的網絡流量,不過一般有限制,比如手機端限制在幾百KB,以免被用戶發現。...

    2020-07-14 09:46:36 372

    原創 Property or method “xxxx“ is not defined on the instance but referenced during render. Vue報錯

    1. Property or method “xxxx” is not defined on the instance but referenced during render有時候在寫 vue 時突然就報這個錯誤了,Property or method “xxxx” is not defined on the instance but referenced during render,報錯錯誤理解:屬性或者方法 XXX 沒有立即定義但是卻在渲染時被引用。報錯信息已經十分明顯了, XXX屬性或方法沒

    2020-07-03 09:15:24 504 1

    原創 nginx: [error] invalid PID number 解決辦法,親自測試有效??!

    1. nginx: [error] invalid PID number有時候博主在運行 nginx 的時候就會報這個錯誤,網上找了很多辦法,但是幾乎都是解決了一個,另一個就出來了,基本就在輪回了。因此,博主想了很久,終于想出下面這個辦法,不論是從實踐還是理論上,方法絕對有效2. 解決辦法具體為什么會出現這樣的情況還不是很明白原因,但是 nginx 肯定是沒問題的,因此,目前解決的辦法是直接關閉nginx進程,然后再重新啟動nginx查看nginx的進程號:ps -ef | grep ngi

    2020-07-02 21:06:33 406

    原創 Git cherry-pick 是什么,如何使用?

    1. 簡述git 是我們每天都會用到的,分支相信大家也非常熟悉,本文給大家介紹一個十分好用的git命令。2. git cherry-pick假設以下場景:9點從test分支切出了sprint-9分支,但是10點我在test分支上提交了需要sprint-8的代碼(臨時增加的需求)因此這時候test分支和sprint-9分支的代碼就不一致了。當然,如果10點在test分支上修改的代碼 sprint-9 不會涉及到,那么在之后合并的時候自然不會沖突,那么也沒什么關系。但是,為了以防萬一,誰都無

    2020-07-01 20:33:33 384

    原創 深度解析為什么vue組件中添加scoped后某些樣式不生效?給出解決辦法
    原力計劃

    目錄1 簡述2 深度解析2.1 不添加 scoped2.2 添加 scoped3 解決辦法3.1 官方解決辦法3.2 博主選擇的解決辦法1 簡述博主近期使用 vue 時寫發現某些樣式不生效,怎么都不生效, 不過將style 中的 scoped 去掉后,居然生效了,那么出現樣式不生效的原因肯定就是 scoped 搗的鬼,在仔細研究過后得出了一些結論,包括為什么會出現這種情況和解決辦法,在此分享。2 深度解析為了便于展示和理解,博主在這里選擇了一父組件和一子組件,父組件: 首先,父組件引入子組件Tes

    2020-07-01 15:01:46 1436 8

    原創 Error: read ECONNRESET at TCP.onStreamRead (internal/stream_base_commons.js:111:27) npm run錯誤

    1 前言博主在使用乾坤時將微應用都部署好了后,準備在主應用中啟動時,npm run start時報了如下錯誤:Error: read ECONNRESET at TCP.onStreamRead (internal/stream_base_commons.js:111:27)經過查閱資料后發現,這與node的版本有關系,當然,博主在這里聲明,node并不是根本原因,但是經過博主測試后更改node的版本是可以解決問題的。2 解決辦法首先,博主查看了自己的node版本node -v# v10.15

    2020-06-11 11:09:34 4817 1

    原創 支持向量機

    1. 概述寫這篇文章主要是為了理解支持向量機,2. SVM2.1 什么是支持向量機支持向量機(Support Vector Machines,SVM)是我們用于分類的一種算法,有些人認為,SVM是最好的現成的分類器,這里說的“現成”指的是分類器不加修改即可直接使用。同時,這就意味著在數據上應用基本形式的SVM能夠對訓練集之外的數據點做出很好的分類決策。這里轉載一個小故事來開啟我們的SVM...

    2020-06-11 10:52:56 121

    原創 用牛頓迭代法求根,方程ax^3 + bx^2 + cx + d =0;系數a,b,c,d的值依次為1,2,3,4由主函數輸入——C語言

    1 概述用牛頓迭代法求根,方程ax^3 + bx^2 + cx + d =0;系數a,b,c,d的值依次為1,2,3,4由主函數輸入。1.1 牛頓迭代法2 解法//C程序設計第五版(譚浩強)//章節:第七章 用函數實現模塊化程序設計 //練習7.12 用牛頓迭代法求根,方程ax^3 + bx^2 + cx + d =0;系數a,b,c,d的值依次為1,2,3,4由主函數輸入。// 求...

    2020-06-11 10:51:41 992

    原創 使用迭代法求解方程式

    使用迭代法求解方程式#include <stdio.h>#include <stdlib.h>int n = 3;//3階行列式double sum(int i,int a[3][3],double x0[3]){ double result = 0.0; for(int j = 0 ; j < n ; j++){ if( j != i){ result += a[i][j] * x0[j]; }

    2020-06-10 14:03:58 208

    原創 in-browser 和 built-time modules模塊的區別

    1 前言博主最近在學習Single SPA,首先需要理解的是什么是 in-browser modules和 built-time modules2 概述直接的理解,in-browser modules 指在瀏覽器的模塊, built-time modules指構建時的模塊,其實大概也能理解一些,具體的解釋如下:in-browser modules 在運行時向瀏覽器請求的模塊,如下面代碼中的import Vue from “vue”;在構建時不會向項目請求,而是運行時built-time modu

    2020-06-10 12:41:24 124

    原創 Vue項目如何獲取Docker的環境變量——最小完整實踐
    原力計劃

    1 前言上一周的工作中,有這樣一個需求,在不同的環境下(dev, test, beta, release)傳入不同的值,首先是以業務為首要目標,因此,博主最初的做法是通過判斷不同的hostname來傳入不同的值,這種做法簡單快捷,但是存在以下兩個缺點:1)hostname更改時需要修改代碼,當多個服務均存在這種需求時,工作量就出來了2)服務不解耦,需要手動調整3)略顯low,并且代碼看著感覺很不舒服因此,博主今天決定做優化改善,通過獲取 docker 的環境變量來獲取當前的運行環境,一勞永逸,博主

    2020-06-10 09:25:16 1168

    原創 禁止輸入兩個小數點——js 正則實現

    如何禁止輸入兩個小數點利用正則,匹配到小數點,然后直接替換掉即可,詳細的可見下面代碼,如有不明白可評論或私信input 框禁止輸入非數字和小數點以外的字符(兩種思路和方法)這是博主的另一篇文章,與本文密不可分<body> <div> <input type="text" oninput="inputNumber(this)"> </div> <script> function inputNum

    2020-05-27 11:12:59 304 1

    原創 input 框禁止輸入非數字和小數點以外的字符(兩種思路和方法)

    要實現 input 框禁止輸入非數字和小數點以外的字符,一共有兩種思路:利用input事件和正則,輸入非數字和小數點以外的字符時,直接替換為空利用keydown事件和阻止默認事件,輸入非數字和小數點以外的字符時,直接禁止輸入下面就來實現上述兩種方法,為了讓更多的同學能夠明白,看懂,因此我這里沒有使用框架,直接采用原生的 js(好久沒寫,生疏了)input事件和正則<body> <div> <input type="text" oninput="

    2020-05-27 10:35:33 1216

    原創 什么是代理、網關、隧道?

    目錄1. 概述2. 代理3. 網關4. 隧道1. 概述HTTP通信時,除客戶端和服務器以外,還有一些用于通信數據轉發的應用程序,例如代理、網關和隧道。它們可以配合服務器工作。這些應用程序和服務器可以將請求轉發給通信線路上的下一站服務器,并且能接收從那臺服務器發送的響應再轉發給客戶端。代理代理是一種有轉發功能的應用程序,它扮演了位于服務器和客戶端“中間人”的角色,接收由客戶端發送的請求并轉發給服務器,同時也接收服務器返回的響應并轉發給客戶端。網關網關是轉發其他服務器通信數據的服務器,接收從客戶

    2020-05-25 14:31:48 195

    原創 CSS優美的工程化——掌握SASS這四大特性便足矣
    原力計劃

    文章目錄1. 看似天仙,實則被貶2. sass 特性一:嵌套寫法3. sass 特性二:變量 "出場"4. sass 特性三:文件模塊化5. sass 特性四:復用 ‘混合指令’1. 看似天仙,實則被貶簡單的HTML語言,html + css 就能展現出漂亮的靜態web網頁了,使用起來也十分簡單,就是寫一些屬性以及屬性值。但是,隨著項目復雜度增加以及代碼體量的增大,用起來簡單的 css 卻出現了大量的缺陷。無法模塊化無法模塊化將會導致非常多的問題,如(1)命名依賴,想盡一切辦法避免同名;

    2020-05-14 16:00:39 228

    原創 Linux 常用命令詳解——目錄大全

    目錄大全幫助命令文件和目錄操作命令查看文件及內容處理命令系統信息顯示命令用戶管理命令關機/重啟/注銷和查看系統信息的命令幫助命令命令詳解help查詢內置命令info查詢更加詳細的命令文件和目錄操作命令命令詳解ls全拼list,列出當前目錄的所有內容及其內容屬性信息。示例:ls -f ——顯示目錄中的文件 ls -l ——顯示文件和目錄的詳細資料 ls -a ——顯示隱藏文件 ls -lSr ——以尺寸大小排列文件和目錄cd全拼chang

    2020-05-13 16:31:34 166

    原創 Linux 刪除文件和文件夾 命令

    命令詳解rm全拼remove,其功能是刪除一個或多個文件或目錄。示例:rm file1 ——刪除file1文件rm -r dir1 —— 刪除文件夾dir(其中 -r 就是向下遞歸,不管有多少級目錄,一并刪除)rm -rf dir1 強行刪除文件夾dir1(-f 就是直接強行刪除,不作任何提示的意思)...

    2020-05-13 15:17:17 124

    原創 MIME到底是什么?那些重要?

    1 概述經常會看到MIME類型,那么到底MIME是什么呢?MIME是一種媒體類型( Multipurpose Internet Mail Extensions 或 MIME 類型 ),MIME是一種標準,是用來表示文檔、文件或字節流的性質和格式,也就是告訴瀏覽器等這個文件的類型,目的跟文件擴展名類似,但是更加具體和重要。重要:瀏覽器通常使用MIME類型(而不是文件擴展名)來確定如何處理URL...

    2020-04-29 11:51:46 226

    原創 vue 事件修飾符 .passive 最通俗的理解

    1 概述vue中的事件修飾符中有一個十分特別的修飾符,vue官方文檔是這樣介紹的: .passive 會告訴瀏覽器你不想阻止事件的默認行為。不阻止默認行為,普通思維很難理解,不阻止,那么我不preventDefault不就行了嗎?顯然,不是這樣的,不然vue也不會出這樣一個事件修飾符。2 理解 .passive在vue中,不阻止默認事件,真正的目的是告訴瀏覽器,你可以不用去查詢程序有沒有阻...

    2020-04-23 15:44:16 333

    原創 不使用循環語句(包括map、forEach方法)實現一個100長度的數組,索引值和值相同的數組[0,1,2,3,4,5........99]

    1 概述一般情況下,通過循環語句給數組賦值,是非常簡單的,那么如果不適用循環語句呢?2 代碼var arr = new Array(100);//方法1[...arr.keys()];//方法二Array.from(arr.keys());//方法三 借助stringvar arr1 = new Array(101);var str = arr1.join('1,');st...

    2019-11-01 14:07:46 1345

    原創 JS 計算1-10000中出現的 0 的次數 (經典地使用了ES6中 map, filter, reduce)

    1 概述利用JS 計算1-10000中出現的 0 的次數2 示例let res = new Array(10000).fill('').map((_, index) => index + 1) .filter(item => /0/.test(item)) // 返回包含零的 .reduce((count, item) => { // ...

    2019-11-01 11:27:22 798

    原創 常見的HTTP狀態碼詳解

    1 概述當瀏覽者訪問一個網頁時,瀏覽者的瀏覽器會向網頁所在服務器發出請求。當瀏覽器接收并顯示網頁前,此網頁所在的服務器會返回一個包含HTTP狀態碼的信息頭(server header)用以響應瀏覽器的請求。HTTP狀態碼的英文為HTTP Status Code。下面是常見的HTTP狀態碼:200 - 請求成功301 - 資源(網頁等)被永久轉移到其它URL404 - 請求的資源(網頁...

    2019-11-01 09:44:02 142

    原創 實現原生Ajax的過程和代碼

    1 概述Ajax是前端中發送請求最最基礎的方法,在jq中已經封裝好了,在axios中更是多次封裝,那Ajax的實現原理到底是怎樣的呢?本博文就原生Ajax進行解析和代碼展示,2 Ajax創建XMLHttpRequest對象; 注意兼容注冊回調函數,在XMLHttpRequest中設置要發送的請求,利用的是open(first,second,third)方法1)param first:...

    2019-10-26 11:33:50 631

    原創 JS 如何阻止冒泡事件和默認事件

    1 概述阻止冒泡和默認事件都是js中非常重要的,其實很簡單,只需要一到兩句語法即可,關鍵在于需要做兼容!2 阻止冒泡事件function stopBubble(e) { if(e && e.stopPropagation){ e.stopPropagation(); } else { window.event.cancelBubbl...

    2019-10-26 11:27:09 164

    原創 JS浮點數計算誤差解釋及解決方案

    1 概述浮點數指的是帶有小數的數值,浮點運算即是小數的四則運算,常用來測量電腦運算速度。大部份計算機采用二進制(b=2)的表示方法。位(bit)是衡量浮點數所需存儲空間的單位,通常為32位或64位,分別被叫作單精度和雙精度。2 誤差現象console.log(0.1+0.2); // 輸出 0.30000000000000004console.log(0.15+0.15); // ...

    2019-10-26 11:17:08 421 1

    原創 <img>元素底部為何有空白?

    1 概述現代瀏覽器中,<img>元素默認情況下底部會有空白,那么這個空白到底是從哪里來的?有什么比較好的方法可以去掉這個空白?2 為什么會有這個空白要理解這個問題,首先要弄明白CSS對于 display: inline 元素的 vertical-align 各個值的含義。vertical-align 的默認值是 baseline,這是一個西文排版才有的概念:可以看到,出現在...

    2019-10-26 10:46:07 198

    空空如也

    空空如也

    空空如也

    TA創建的收藏夾 TA關注的收藏夾

    TA關注的人 TA的粉絲

    提示
    確定要刪除當前文章?
    取消 刪除
    多乐彩