文科少女學程式

上禮拜意外獲得一個實作的機會，
雖然在拿到這份作業時，心中忐忑不安，
因為除了串API是自己確定自己有做過的內容外，
其他部分對我而言都是沒碰過的東西。
不過想著「當工程師就該有解決問題的能力」這點，我還是勇敢接招了XD
(其實OS是老娘就跟你拚了~~~~)
搶先看完成的畫面
GitHub連結在這裡
實作需求內容
1. 用GitHub API串接自己的repo資料到頁面上，並顯示標題、敘述、URL。
2. 用無限滾動(infinite scroll)的技術讀取repo資料。
需求解法相關資料收集
首先，我先透過收集資料去尋找可以完成需求內容的靈感。
主要就分以下兩個方向下去收集資料。
1. 看API使用相關的資料
- 了解到API串接只需要透過GitHub產出自己的token再帶入header就可以了
- 確認到自己要用哪條API下去拿我要的資料
- 用POSTMAN先模擬是否能正常取得資料，以及會取得那些資料
2. 查無限滾動相關的資料
- 了解到大概念是要偵測捲軸是否移動到整個頁面的底部，讀到底部再讀取一次資料
- 需要透過clientHeight、scrollY、scrollHeight去做計算是否已經滑到底部
實作過程(包含發生問題處及解法)
1. 查完資料後，我先設定一個vue專案，進行版面的切版。
(想讓自己多刻意練習一些過去用過的東西切版內容，所以雖然需求沒有要做RWD，
我還是加了這部分的內容)。
2. 切完版之後，我就使用Axios串接API拿自己的repo資料，並透過v-for進行渲染。
串API時出現的問題
在用POSTMAN模擬API串接時，有遇到跨網域存取被拒絕(CORS)的問題，但是這次使用的是public API，
並沒有一位負責製作API的夥伴可以協助從後端解決這個問題，所以就上網查詢如何透過前端解決這樣的狀況。
有查到可以利用cors-anywhere這個API，可透過另一個管道幫我們處理CORS的問題，在要串接的API前面，
再加上cors-anywhere API所提供的網址，最後順利拉取到資料。

3. 確定能夠正確的渲染到頁面後，接著實作infinite scroll的部分，這個部分的實作又拆解成以下幾個步驟。
(1) 進入頁面時，不會將所有資料一次渲染，只會渲染特定筆數的資料
=> 為了讓資料不要一次顯示，除了在Vue data中宣告透過API fetch到的所有repo的資料陣列外，
又宣告了另一個空陣列，好讓頁面上要渲染資料可以依照有無滑到頁面底部而增加。

=>接著讓第一次進入頁面時，currentRenderRepos就能被放入10筆資料。
(這次實作，我想讓每次載入資料時，最多都載入10筆資料)
所以在created的fetch資料動作中，除了拉取API資料外，
還必須讓前10筆資料塞入渲染用的陣列。
我的想法是利用slice去把myTotalRepos的前10筆資料取出，
並且push到渲染用陣列。

(繼續閱讀...)

文章標籤

文科少女寫程式 發表在 痞客邦 留言(0) 人氣(431)

今天心血來潮(?)，來研究了每次看到都很想要知道怎麼實作的輪播圖功能。
上網查了一下實作方法不外乎就是CSS、JavaScript、使用套件。
不過這次我想要先挑戰用CSS來呈現這個功能，
接下來就稍微整理一下這次實作的概念。
*最近太愛逛網拍了，所以借用網拍網站上的圖片來實作XD
實作的大方向
1. 用HTML呈現橫向擺放的多張圖片(如圖下所示)

2. 隱藏超過框框外的圖片

3. 讓多張圖片組合的一大張圖片每一個關鍵影格就移動一張圖片的寬度
需要用到的重點CSS屬性
- @keyframes：設定動畫的關鍵影格
- animation: 將動畫設置在想讓它動起來的地方
- display, overflow: 將多張圖片排成一列，並且隱藏超出框框的圖片
細部的實作內容
1. 首先我先以ul、li來呈現HTML的內容，這部分記得要用CSS把ul、li的預設樣式重置。

2. 再來設定外框的寬及高，我是設定成900px X 500px
3. 圖片部分則透過flex讓它們能以一列的方向排列，再到外框處透過overflow把超出範圍的圖片隱藏。
4. 透過@keyframes設定關鍵影格，以translateX控制圖片列往左移動。

*以一張圖片寬(900px)為基準，往上增加。
*每一次移動中間都有空出間格(ex: 20% => 25%)，這個間隔式圖片轉換的時間，0%~20%則是圖片持續顯示的時間。
5. 用animation把設定好的關鍵影格套用在ul上，控制每個li的顯示。

缺點部分
雖然這樣可以讓圖片自動輪播，但是在最後一張跳到第一張時，
沒辦法以滑動的方式轉過去，實際呈現會閃跳一下，
這部分我還在想要怎麼解決QQ
另外也想要再研究一下用JavaScript要怎麼呈現，
呈現方式應該會更靈活。
最後附上這次實作的codepen連結
https://codepen.io/pinkymini/pen/dyXJErZ
打完收工~掰餔

(繼續閱讀...)

文章標籤

文科少女寫程式 發表在 痞客邦 留言(0) 人氣(446)

這次想用部落格整理一下之前學Vue時，手寫的筆記。
一方面也當作是一個複習~
對Vue有興趣的人，也許也可以跟著我這次複習的腳步，
稍微認識一下Vue這個框架怎麼使用。
另外，因為內容很多，所以這次的Vue學習筆記預計會分多個篇文章進行整理 : )
什麼是Vue？

(繼續閱讀...)

文章標籤

文科少女寫程式 發表在 痞客邦 留言(1) 人氣(435)

這次是找出醜陋數的題目
題目需求：
若質因數為2、3、5，則此數字為質因數，如果可以被其他數字整除，則不為醜陋數，但是1為醜陋數(回傳true或false)。
解題過程：
1. 先排除小於1的數字，因為負數和0都不為我們所說的醜陋數。
2. 接著因為1為true，所以也把1的判斷獨立寫出來。
2. 分三個區塊確認，用%分別針對2、3、5取餘數，如果不等於0就一定是false。(迴圈條件設定大於2、3、5的數字)
=>由於分三個部分，用迴圈檢查，當可以被3除，但卻不能被2除的數字出來的話，會直接顯示false，
所以這裡只需要確認是否可以被這三個數字整除就好，每一個數字的餘數確認都不用馬上回傳false，
而是用break跳出迴圈進行下一個數字的餘數檢查。
3. 如果第一次可以被整除，不代表一定可以繼續被整除下去，所以進行除2、3、5的動作，直到數字被除到變最小
4. 不管在取餘數階段就被判斷不是醜陋數而被用break強制跳出迴圈的數字，還是被除到最小後結束迴圈的數字，
都會在最後面再透過%檢查一次，結果的true&false會從這個部分判斷並傳出
程式碼內容：

(繼續閱讀...)

文章標籤

文科少女寫程式 發表在 痞客邦 留言(0) 人氣(147)

這次打算寫自己的LeetCode刷題記錄，主要是為了要留下自己的解題過程，
因為文科少女除了是文科腦以外，還是金魚腦XDD
不過由於只是自己的解題過程紀錄，所以不會是最高超的解題方式，
反而會偏向於比較容易懂的方式！
這次先來記錄一下，自己最不擅長的數學題QQ

題目需求：
n為任意數字，判斷n是否為2的次方(回傳true或false)。
解題過程：
1. 先排除小於1的數字，因為負數和0都不等於2的2次方。
2. 1雖然用2除不盡，但是2的0次方為1，所以如果n等於1，一定會先回傳true。
3. 接著讓我們從2開始判斷，把不是2的次方數的數字都挑出來，並回傳false。
4. 2一定是2的次方，所以在條件設定上，直接用n>2下去設定。
5. 在大於2的數字中，如果無法被2除盡，一定就不是2的次方數，所以一定要被挑出來回傳false。
=>看是否能被2除盡的部分利用算術運算子%，若n%2 不等於0，就代表除不盡。
6. 有些數字則是在第一次除以2時，可以被除盡，但是第二次開始就無法被2除盡，
代表這個數字不是純粹被2組成的數字a。
=>這種數字也就不是2的次方。
7.數字第一次用%看是否可以被除盡後，若可以除盡，再除2一次，看被除2後，是否還可以被2整除，以確認這個數字不是真的是2的次元。
8. 最終被這個過程過濾掉的數字，就會是2的次方。
程式碼內容：

完成！！
 

(繼續閱讀...)

文章標籤

文科少女寫程式 發表在 痞客邦 留言(0) 人氣(178)

我們在了解HTTP是什麼的時候，有提到HTTP的特性是無狀態，
所以沒辦法紀錄資料。
今天要來看的就是，可以改善無法紀錄資料這部分的好幫手。
廢話不多說，讓我們直接看下去！！！
什麼是Cookie？
Cookie由伺服器產生，產生後會儲存在瀏覽器上，
每次進入產生這個Cookie的伺服器時，都會帶著這組Cookie。
上面的這句話，是不是有點難懂呢？
其實這個狀況其實可以用一個生活情境來比喻~
這個情境中，有間店家會開放顧客成為會員，一旦加入會員，
店家就會給予成為會員的顧客確認會員身分的會員卡，
每次到店家消費時，就必須帶著這個會員卡，
才可以享有會員優惠資格。
=>店家在這裡就等於伺服器，變成會員的顧客則是瀏覽器，而會員卡就是Cookie，
可以辨認會員身分的相關資料都儲存在這張會員卡裡面。
Cookie產生的流程
再來簡單看一下伺服器和瀏覽器溝通往來時產生Cookie的流程
1. 瀏覽器向伺服器發出request
2. 伺服器在response時，傳遞Cookie給瀏覽器
3. 瀏覽器將Cookie儲存起來
4. 再次向相同伺服器發出request時，回傳這組Cookie給伺服器

(繼續閱讀...)

文章標籤

文科少女寫程式 發表在 痞客邦 留言(0) 人氣(394)

我想大家都知道網址前總是會帶著HTTP這四個字母，
但是HTTP到底是什麼？跟HTTPS又有什麼關係呢？
一起來了解一下吧！GO！
什麼是HTTP？
HTTP全名是超文本傳輸協定( HyperText Transfer Protocol)，以字面上來看，
就是把可以顯示在電腦螢幕或電子裝置的文字，也就是超文本傳輸到瀏覽器的傳輸協定。
所以主要用途也就是讓瀏覽器和伺服器進行溝通，以請求(request)、回應(response)這兩個動作為主。
=>網站上的內容都是透過請求、回應這樣一來一往傳輸後，才顯示出來。
另外，HTTP是一種無狀態的協定，所以伺服器上並不會保存請求時的資料及記錄，
也就是說當瀏覽器和伺服器在溝通時，一來一往的完整流程結束後，
伺服器就忘記剛剛做了些什麼了，彷彿腦海中有橡皮擦一樣，
不會留下任何記憶＠＠。
用聊天室對話呈現情境的話，大概就會像是這樣的情況XDD

　　
無狀態的溝通流程，看起來好像沒什麼大問題，
因為我們還是可以看到瀏覽器上顯示我們要看的頁面內容。
但是若是必須登入的網頁，或是想到先把喜歡的商品加到購物車裡的習慣，
單純以這種無狀態的模式來進行一來一往的溝通，
對使用者來說就會是一個非常不便利的模式。
也因為這樣，而必須搭配一些可以另外儲存資料的方式。
這個部分可以參考以下這篇文章
前端儲存資料好幫手！Web Storage & Cookie差異是什麼？

(繼續閱讀...)

文章標籤

文科少女寫程式 發表在 痞客邦 留言(0) 人氣(225)

文科少女寫程式 發表在 痞客邦 留言(0) 人氣(603)

這次是人生第一次進行多人協作專案
其實在課程一開始，就非常期待這個協作的環節
除了期待外，還很害怕成為團隊裡的大雷包！！
而且我們又是唯一一組用前後端分離方式開發的小組，
這真的讓人感到很抖抖呀~
究竟～～文科我有沒有成為雷包呢？
就讓我們繼續看下去～～～～
小組成員
首先介紹我的們小組成員！
除了我以外，還有兩位非常優秀的全端組同學Yi、Ezra
不得不說他們兩位真的很強大，才能讓文科我專心切版

(繼續閱讀...)

文章標籤

文科少女寫程式 發表在 痞客邦 留言(0) 人氣(193)

哈囉！大家好嗎～
我是近期不斷爆炸的文科少女XD
今天有一點點的空閒時間，想說來更新一下工作況。
至於為什麼會爆炸連連？
以下就讓我娓娓道(ㄅㄠˋ)來(ㄩㄢˋ)
目前實際的進展
這部分其實應該是不太能說，但只是想講出來讓大家知道，
這樣的進度到底有多麼的～神奇！
所以就輕描淡寫帶過一下囉！

(繼續閱讀...)

文章標籤

文科少女寫程式 發表在 痞客邦 留言(0) 人氣(85)