- 博客(64)
- 收藏
- 关注
RSS订阅原创 PHP筆記
前言因緣際會下還是開始學習php了。經歷了風風雨雨終於在今年暑假要去加拿大留學了，php會是第二年的其中一門必修課程，加上最近前端也真的蠻心累，也許有一門精進的後端語言，日後轉職會有更寬廣的道路，對自己說加油！一、註冊 API首先創建auth 的controlllerphp artisan make:controller API/AuthController在laravel 中 使用Eloquent ORM 來控制資料庫代碼如下：<?phpnamespace App\Http\Co
2023-10-15 04:09:35
693
原创 關聯式資料庫模型The relational data model
RELATIONAL MODEL關係模型 結構化查詢語言（SQL）基礎foundation of structured query language (SQL) 許多資料庫設計方法的基礎 foundation of many database design methodologies 資料庫研究基礎foundation of database research 關係(Relation)關係是一個有列和行的表格 Relation is a table with c
2023-10-04 05:25:22
143
原创 Vue3 權限路由
最近接觸到關於role 能夠查看相關頁面的功能最初的作法是全部的路由使用動態加載，考慮到 跟權限有關係 ，就有可能各種頁面都需要調用，因此這裡的role狀態會儲存在全局狀態管理中（pinia）1.首先區隔出需要權限才能瀏覽的頁面，命名為dynamicRoutes在首次加載時先判斷動態路由，如果為superuser則加入動態的路由新版本router.addRoutes已废弃：使用 router.addRoute() 代替。
2023-05-24 17:38:36
1304
原创 React Native 初次安裝踩坑
這次終於燃起了學習react的動力，在初步了解後開始進入react native的學習，更早之前其實有玩過expo，不過使用expo也會有些無法使用原生套件的問題，既然要先學習就從扎實的開始吧！安裝react native首先一開始我先安裝了全局後來在跑的時候卻報錯了 typeError: cli.init is not a function搜索了下解決方法是删除全局的react-native-cli隨後再次run了建立的指令，不意外的又報錯了....bundle installYour Ru
2023-01-15 19:36:05
1779
原创 sass/scss 好用的utility筆記
以往的項目大多使用quasasr framwork ，大多時候都有現成的樣式可以套用，而這次接到了一個舊的專案使用bootstrap 才明白現成的樣式有多香，是時候精進自己的css, 在這裡記錄 項目當中很有幫助的各種方法。
2022-12-20 17:27:50
791
原创 【React】來學React18 / Router 6
React Hooks useState申明響應式變量時我們會使用到的hook，這邊使用到 array 的解構語法，也就是將 useState 回傳的 array 中的值個別取出來，counter 為 state 變數，setCounter 則是負責改變 state 變數的函式，一般命名傳統習慣將此函式命名為 set+state 變數名稱，需要特別注意的是更改state一律只能透過set(setCounter)函式更改，useState所帶的參數為這個 state 的初始值，而一個component中
2022-10-23 02:31:57
1206
原创 在vue3使用Pinia
今年到今天已經過了一大半了，又有新的技術需要學習了。這次由於vue3的到來vuex也被官方deprecated , 隨之取代的則是Pina。本篇紀錄學習Pina的相關筆記！
2022-08-31 15:56:54
1977
原创 【Git】Git相關筆記
很開心這次跳槽到了新公司,終於開始學習到系統的團隊相關軟體,在這裡記錄業務上碰到的所有git相關指令,也期許自己的技能能夠不停止的進步下去！強制用遠端代碼覆蓋本地代碼實際情況是在公司的幫助下開始使用Mac電腦 但是回去以後又使用了自己的電腦,而最新進度已經push到遠端分支因此會有需求是要將本地代碼更新至遠端同步（注意這裡是強制覆蓋本地端）1.git fetch --all //從遠程拉取最新的代碼 不合併2.git reset --hard origin/分支名 //使用指定分支代碼 強制覆蓋
2022-04-13 13:09:51
799
原创 【Javascript設計模式】責任鍊模式
使多個對像都有機會處理請求，從而避免請求的發送者和接收者之間的耦合關係，將這些對象連成一條鏈，並沿著這條鏈傳遞該請求，直到有一個對象能處理它為止，傳遞鏈中的這些對象就叫節點。在實際的運用當中，責任鍊模式也常常用在重構繁瑣的if… if else… 中，這和之前學習的策略模式有相似之處，相比策略，責任鍊模式邏輯上更加繁瑣，但是責任鍊模式有著更大的彈性空間。假如上一個環節的結果，是需要交給下一個環節來繼續加工，那麼此時責任鍊模式是更加適合處理的。接下來假設一個需求一個電商網站，用戶交500定金且定.
2022-02-23 17:32:57
1116
原创 【Node - Mongodb 】常用指令
pipeline操作符號幫助你進行複雜的操作，每個符號都會接受documents，並對這些document做些相應的操作，然後再將結果傳至下一個pipeline直到最後結果出現。db.getCollection('sales').insertMany([{ "_id" : 1, "item" : "abc", "price" : 10, "quantity" : 2, "date" : ISODate("2014-03-01T08:00:00Z") },{ "_id" : 2, "item" : "
2022-02-05 12:21:55
1357
原创 【LeetCode】判斷是否為回文Palindrome
這次的題目是剛開始學習程式語言的初學者都學過的邏輯: 回文一樣先來看下題目Given an integer x, return true if x is palindrome integer.An integer is a palindrome when it reads the same backward as forward.For example, 121 is a palindrome while 123 is not.這裡就不翻譯了畢竟題目顯而易見先來看一下我的代碼var isPal
2022-01-27 12:26:35
6003
原创 【LeetCode】獲取相等於某數的數字在數組中的index
最近終於得空，除了學習typescript之餘，基本功跟邏輯思維也得繼續鞏固，因此決定繼續刷起leetcode先來看一下這次的邏輯需求:Given an array of integers nums and an integer target, return indicesof the two numbers such that they add up to target.You may assume that each input would have exactly one soluti
2022-01-27 09:55:57
793
原创 【Javascript 設計模式】 - 策略模式
什麼時候用策略模式？各判断条件下的策略相互独立且可复用 策略内部逻辑相对复杂 策略需要灵活组合使用策略模式的優點：1.使程式碼更加清晰可讀，減少繁多的if-else 2.功能更易拓展，可維護，健壯性缺點1.策略類會增多 2.業務邏輯分散到各個實現類中，而且沒有一個地方可以俯視整個業務邏輯class Product { constructor(name) { this.name = name; }}class Factory { static cre..
2021-12-27 14:57:20
1294
原创 TypeScript 學習筆記
學習動機剛開始本來沒打算學習typescript的畢竟在業界目前找工作也不是必須技能，但是隨著想要繼續專研技能後發現許多項目的源碼是使用typescript來寫的，因此開始了typescript的學習技能，不定時更新!前言Typescript類型和聲明變量typescript裡 需要再變量名稱後 加上 : 表示此變量的類型，增加許多了嚴謹性!Typescript中靜態類型主要分別兩個類型，基礎靜態類型以及對象類型，首先介紹基礎類型↓1. 基礎靜態類型顧名思義即為一些基礎...
2021-12-26 18:14:15
853
原创 使用 arguments 傳入參數
傳統函數使用arguments來得到傳入的資料const countNumber = function () { console.log(arguments); } countNumber(10, 50, 100, 50, 5, 1, 1, 1, 500);箭頭函式箭頭函式裡沒有arguments但是可以利用其餘參數達到相同效果const countNumber = (...arg) => { console.log(arg);}countNumber(...
2021-11-28 13:34:14
786
原创 Linux 指令
mv 移動檔案mv .bashrc / //移動 .bashrc 到根目錄mv /.bashrc . // 加上. 相當於 移動 .bashrc到當前目錄rm -rf 移除目錄包括目錄底下所有檔案rm -rf testrmdir 移除目錄不過，若是欲移除的目錄裡頭有檔案或其他目錄存在，就無法移除，指只有在目錄為空的情況下才能移除rmdir testmkdir 建立新的目錄mkdir testcat 顯示檔案內容(如檔案為文字檔)cat ...
2021-11-28 13:31:15
1124
原创 2021 Vue夏季直播班心得
當初為什麼報名這堂課？ 去年線上報名六角的課程時候，其實已經找到工作，但是我的所有知識都是自學，依此想要系統的學習一次前端，並且更加深入前端 第一週~第八週的學習過程 坦白說雖然有學習到幾個知識點，但是讓我很失望的是裡面並沒有提到太多跟vue3有關係的，而在上課之前課程標榜的是此課程適合中階的前端，但是實際參與課程後對我來說很多知識的是初階的，vue3還有很多好用的API像是...toRefs都沒有介紹到，所以覺得可惜了!而當我詢問助教些問題時候，有些回答看似有回答其實沒有回答到，最後給我總結..
2021-07-19 17:32:47
817
原创 js 刪除數組 delete 和 splic區別
這幾天學習到了delete的用法後發現同樣是對於數組刪除的操作那麼和splic有甚麼區別呢?首先，使用delet的數組，並不會更新數組長度，並且被刪除的index會顯示undefined，也可以想像成只是該元素的值被刪除myArray = ['a', 'b', 'c', 'd']// ["a", "b", "c", "d"]delete myArray[0]// return trueconsole.log(myArray)// return [empty, "b", "c", "d"]co
2021-04-16 16:52:41
819
原创 if…else…的簡寫
範例let strif(5>0){ str = "開始進入敵方" if(6>0){ str = "成功刺入敵方" } }else{ str = "再接再厲" }簡寫:str = (5>0) ? ( 6>0? str='成功刺入敵方' : str='開始進入敵方' ): str = "再接再厲"範例:if (a) { b = 1; c = 1; }else
2021-04-16 15:40:43
986
原创 判斷對象屬性是否存在
身為一個前端，如果從後台接收到的資料為對象，而其中某個欄位可能因為不同情況而不存在，不論是因為改版還是因為後端本身問題，都造成前端很大困擾。舉個例子:假設，我們需要取的值為 checkoutRequestStatus.product.details.options，而實際情況是details欄位和options欄位可能不存在。在js 如果對象獲取的屬性其中一個不存在的話，系統會報錯，並且因為單線呈關係之後的代碼並不會執行，可能造成頁面直接空白。因此最常使用的方法就是先判斷屬性是否存在if(check
2021-04-16 14:43:53
835
原创 學習 選擇set 而不是array 以及 多個箭頭函數
近日在學習如何簡化代碼時，看見一道google面試題題目:對函數傳入一個數組和sum, 函數需要判斷 任兩個數字加起來是否等於sum，如果有返回true，都沒有則返回false思路在遍歷之前聲明一個遍量(searchValues )，用來儲存所有需要匹配的數字差。接著首遍歷每一個數組元素，在計算出該數字需要和哪個數字配對即可等於sum，將該數字差值儲存在searchVal裡 ，用來之後判斷目前的searchValues 中是否存在該值，如果有則返回true 退出循環，如果沒有則將此次計算的差值存入
2021-04-13 17:30:23
111
原创 js 項目筆記紀錄
在此記錄在開發項目時遇到的問題，或是好用的方法~從某個對象中取出某些屬性並創建新的對象這是我在專案中最常碰到的事情，後臺傳來的參數中有很多是前端並不需要的資料，也就是只有幾項欄位需要而已，並且還會對這些參數進行格式化或過濾等等，因此淺拷貝(新建一個獨立的對象)是完全有必要的forEach方法最簡單的方法就是使用forEach了const cloneAndPluck = function(sourceObject, keys) { const newObject = {}; keys
2021-03-26 16:28:12
356
原创 css 項目筆記紀錄
記錄下在專案上遇到的CSS問題跟小技巧，不定時更新讓 radio垂直置中文字 要注意使用label標籤包住input，input才能依照父元素的高度垂直置中<label><input type='radio' name='lang' value='1' checked='checked'></input>aaa<label/>input{ vertical-align:middle;}label{ font-size:28px;}
2021-03-26 16:10:53
141
1
原创 css tranisition animation 過場圓形動畫
今天來學習 利用css 製作的偽過場動畫文章 : Rounded Animated Navigation範例: demo先來看完整的html布局<body> <header> <a class="cd-logo" href="#0"><img src="img/cd-logo.svg" alt="Logo"></a> </header> <nav> <ul class="cd-primary
2021-02-10 00:02:46
155
原创 Axios在vue中切換route時取消所有請求
在網路上看過很多版本的用法，理念都是相同的都是使用axios中的CancelToken方法在攔截器裡面統一在每次發送請求時，將請求加入至要取消地arry中這個arry網上有其他作法是使用vuex來調用，但是對於我的項目來說vuex管理數據已經太龐大，後來又看到更簡單的做法是直接把arry掛在window下window._axiosPromiseArr = [] // 全局聲明 (變數掛在window下) // http request 拦截器axios.interceptors.re
2021-01-21 09:29:19
304
原创 vue3 新增API整理
1. Ref / Reactivea. Ref可以接受 simple 或 Object type，但是不會對物件或陣列內部的屬性變動做監聽。聲明 並傳值 const state = ref ( 10 ) = > 調用 reactive 並創建對象 => 在對象自動聲成 { value : 傳遞的值 }因為這樣的過程，因此需要透過 .value來取值 ，如 state.value。b. Reactive只能接受物件或陣列，可以做深層的監聽。<script&g
2020-12-11 14:28:44
486
2
原创 分析 - 獲取兩數之間隨機數 Getting a random number between two values
以下來講解面對不同需求時，如何獲取某數到某數之間的任一數字首先先來介紹會用到的方法 :使用 Math.random()會隨機產生出0~1之間的小數。包含0，但不包含10 ~ 0.99999假設乘上某數時則範圍為 :0 ~ 1.99999xx // *20 ~ 2.99999xx // *30 ~ 3.99999xx // *40 ~ 4.99999xx // *5顯然整數才是我們需要的結果，這時候會使用到Math.floor，它會返回小於等於所給數字的最大整數Ma
2020-11-30 15:23:50
95
原创 在Vue Cli使用 normalize.css
使用方式安裝 npm install --save normalize.cssmain.js引入 import 'normalize.css/normalize.css'如果引入報錯，可能没有安装css-loader 和style-loader npm install css-loader style-loader
2020-11-29 21:37:02
591
1
原创 搭建Vue Cli / 文件架構
上次在面試時候要用vue cli寫個小練習，因為只有過一個cli專案，之後一直work on專案上於是許久沒有從頭建立vue cli，當時還是面試官幫忙搭了個環境，太尷尬此文章以window環境為範例搭建 Vue Cli1.安裝Vue Cilnpm install -g @vue/cli //全局安裝安裝過程有出現錯誤具體內容是啥忘記了，但是原因是我將npm 全局安裝文件夾給改變了但是設定還沒有，只要將設定改位置即可// 查看全局安装路径 npm root -g // 查看npm的基础
2020-11-29 21:10:07
54
原创 紀錄koa-bodyparser 遇到的坑
剛開始是從express開始入的手，後來想要使用restful api 風格而從express轉到koa，轉換過程中並不是很順利遇到了些坑在此來記錄下。ctx.request.body為undefinedkoa和express如果要接收axios中data的數據(post，put等方法的參數)皆要使用中間件，然後幫忙或取到參數。在koa 中使用的就是 koa-bodyparser中間件來解析參數，使用方法為1. 安裝npm install koa-bodyparser --save2. 引入插件
2020-11-25 13:41:27
603
原创 node 模塊 / 模組 導入導出
經過一年學習終於開始投履歷了，在這期間也不能停止學習，來學習後端的東西，畢竟目標朝著全端發展的!!!來講解node 模組的定義用法node提供了Modules ，方便於我們在別的文件裡調用一個在別的文件裡的參數，也就是說一個文件可以是一個Modules導出//index1.js 文件 function fn(){ console.log('i belong to fn'); } let student={ name:"amy" } module.exports
2020-11-16 22:56:43
80
原创 Vue cli4導入svg
在建立vue cli項目時免不了的需要圖，這裡已導入阿里巴巴圖庫並且在導航內使用圖標為範例。安装 svg-sprite-loader 用來編譯svg的圖片npm install --save-dev vue-svg-sprite-loader在根目錄創建vue.config.js，如果存在就不需要創建，並添加一下配置module.exports = { // eslint-loader 是否在保存的时候检查 lintOnSave: true, chainWebpack: con
2020-11-10 18:18:04
99
原创 axios 管理api方式
從傳統方式來看，是要一個一個調用接口，但是如果有天調用方式(post/get…)改變或是地址改了就會需要一個一個更改，非常沒有效率。此時我們可以將接口抽出來，在需要的時候引用接口，如果更改接口方法等時，只需要更改一個即可。以下為攔截三步驟第一步:調用接口 =>透過import調用<template>//some code</template><script>import { getSms } from '@/api/login'export d
2020-09-25 18:58:54
157
原创 vue.config 配置
這裡記錄下 練習vue時用到的configconst path = require('path')function resolve (dir) { return path.join(__dirname, '.', dir)}module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '' : '/', outputDir: process.env.NODE_ENV === 'production' ?
2020-09-25 14:38:56
841
原创 JavaScript 陣列處理方法map(), every(), some(), reduce() filter(), find(), forEach(),
陣列定義:陣列就是一個「有序」、「有索引」、「有值」的一個「集合」。是由一對中括號 [ ] 組成， [ ] 裡面為陣列元素，每個元素以逗號分開，可以是純數組，或者數組對象。mapmap沒有返回值，適合用在對陣列進行 ‘修改’ 時不影响原有的数组大小；接受一個 callback 函式，callback 可以有三個參數( currentValue, index, array)，currentValue 代表目前處理到的元素的值index 代表目前處理到的元素的索引array 代表陣列本身
2020-08-20 13:52:38
349
原创 解决Vue cli 4.0 自动导入svg的问题
問題 :剛開始學著用vue cli時最常遇到一個問題是，想要修改某個標籤樣式時，老是失效，但是在別的頁面上此標籤正常運作。如果刪掉scope局部作用時，樣式才正常渲染，但是全局樣式同樣帶來很多問題。原因分析 :當時使用的是element ui組件，而在vue cli，此插件在scope作用域因为权重的问题一律被視為子組件。在vue裡，父组件中是不能直接修改子组件的样式的。解決方法 :需要在父组件中使用vue的深度作用选择器 /deep/<style lang="scss" scoped
2020-07-15 21:11:58
307
原创 Vue父子組件
vue 十分注重於解藕(解藕的目的就是让各个组件可以单独使用)，而在有些情況下父子組件需要相互傳遞data父傳子 props :案例假設: 父子組件為一個容器，而子組件遍歷並展示data中的數據。此時，每次如果展示內容龐大，每次子組件都要向後台請求是效率很低的。這個情況下通常是由父組件向後台請求，然後再傳遞給子組件步驟:先在子組件內聲明一個props選項，並為數據命名(此處命名為data，可以任意命名)，還有其他數據添加*export default { name:'navMenu',
2020-07-15 14:14:13
180
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人