周一：

1.之前換了一個jdk，然后又改了很多東西，很亂，以至于很多項目都不能直接運行了，所以今天就將ideal刪除并且更新版本到2022.3.3，并且重新將ideal里面的配置環境變量，以及jdk下載安裝配置，現在就可以自由切換jdk并且正常運行項目了；

2.背了六級作文的第一段（快考試了，還是抽點時間背作文吧）

周二：

開完例會后，真的意識到了我進度的拉垮，打算重新安排一下時間分配，今天的話先把登陸注冊寫完，然后把一篇剩下的六級作文背熟一下；把首頁的界面畫一下（實際上沒完成）：

今天看見別人有些方法用這個，有些不用，還專門搜了一下

還有就是今天要改一下input的文本顏色，但是一直無效，把它移到修改的最后覆蓋也沒用，原來是谷歌自帶的樣式，然后看這個解決了

修改文本顏色的坑

周三：

響應式布局很重要，所以我把自己的界面改成了響應式布局；

周四：

踩了一個好大的坑：用下拉框的時候沒有生效，搞了都快一天了，試遍了那些方法，終于發現了問題，首先，希望官方大大看見，讓更多和我一樣的孩子看到吧QAQ，對于不太會用bootstrap的人，可以先按照這個來引入使用bootstrap的簡單功能：

但是如果使用向下拉框這樣的有動態特效的，底層的話肯定是又js的，如果只用css是完全不夠的，這時候再在main.js里面引入這個就行了：

import 'bootstrap/dist/js/bootstrap'

完美撒花~~~~~ （詛咒那些新手不會的人都能看到啊啊啊）

學了一下bootstrap的容器：

創建固定寬度的容器，根據界面的大小來適應屏幕，很多容器都是可以根據屏幕寬度來改變大小的，可以按需選取；

還有網格：

可以在容器里面用一個行元素，并讓列作為它的直接節點，然后可以選則不同樣式來選擇列：

<template><div class="container"><div class="row"><div class="col-md-1">1</div><div class="col-md-1">2</div><div class="col-md-1">3</div><div class="col-md-1">4</div><div class="col-md-1">5</div><div class="col-md-1">6</div><div class="col-md-1">7</div><div class="col-md-1">8</div><div class="col-md-1">9</div><div class="col-md-1">10</div><div class="col-md-1">11</div><div class="col-md-1">12</div></div></div>
</template>

然后就直接開始畫界面了，注意，要用里面的img-fluid組件保持它的適應特性，但是它的工作原理是根據父元素的寬度來調整的，但是大小最多是這個張圖片原來的大小，然后就算父元素再次變大，子元素也不會再變大了；

周六：

今天一直在搞自適應屏幕，關于這個的話本來我用的是js控制監聽窗口的大小，但是監聽一直沒起作用，網上說可能是那個函數不太好用，然后看到一個說法說如果使用js控制媒體查詢，會出現加載頁面可能先大后小，因為要將默認樣式和界面先加載出來，然后js代碼可能會沒加載完頁面就展示了，這時候會嚴重影響用戶體驗，這時候可以使用媒體查詢，根據界面的不同設置頁面的根元素大小，因為樣式先加載的，這樣的話就不會有很大的偏差；然后我就加上了這個文件，終于實現了這個界面的自適應：

@charset "utf-8";@media (min-width:640px){ html{font-size:20px;}}
@media (min-width:631px) and (max-width:639px){html{font-size:19.66px;}}
@media (min-width:622px) and (max-width:630px){html{font-size:19.33px;}}
@media (min-width:613px) and (max-width:621px){html{font-size:19px;}}
@media (min-width:604px) and (max-width:612px){html{font-size:18.66px;}}
@media (min-width:595px) and (max-width:603px){html{font-size:17.33px;}}
@media (min-width:586px) and (max-width:594px){html{font-size:17px;}}
@media (min-width:577px) and (max-width:585px){html{font-size:16.66px;}}
@media (min-width:568px) and (max-width:576px){html{font-size:16.33px;}}
@media (min-width:559px) and (max-width:567px){html{font-size:16px;}}
@media (min-width:550px) and (max-width:558px){html{font-size:15.66px;}}
@media (min-width:541px) and (max-width:549px){html{font-size:15.33px;}}
@media (min-width:533px) and (max-width:540px){html{font-size:15px;}}
@media (min-width:524px) and (max-width:532px){html{font-size:14.66px;}}
@media (min-width:515px) and (max-width:523px){html{font-size:14.33px;}}
@media (min-width:506px) and (max-width:514px){html{font-size:14px;}}
@media (min-width:497px) and (max-width:505px){html{font-size:13.66px;}}
@media (min-width:488px) and (max-width:496px){html{font-size:13.33px;}}
@media (min-width:480px) and (max-width:487px){html{font-size:13px;}}
@media (min-width:471px) and (max-width:479px){html{font-size:12.66px;}}
@media (min-width:462px) and (max-width:470px){html{font-size:12.33px;}}
@media (min-width:453px) and (max-width:461px){html{font-size:12px;}}
@media (min-width:444px) and (max-width:452px){html{font-size:11.66px;}}
@media (min-width:435px) and (max-width:443px){html{font-size:11.33px;}}
@media (min-width:426px) and (max-width:434px){html{font-size:11px;}}
@media (min-width:417px) and (max-width:425px){html{font-size:11.66px;}}
@media (min-width:408px) and (max-width:416px){html{font-size:11.33px;}}
@media (min-width:400px) and (max-width:407px){html{font-size:11px;}}
@media (min-width:391px) and (max-width:399px){html{font-size:10.66px;}}
@media (min-width:382px) and (max-width:390px){html{font-size:10.33px;}}
@media (min-width:374px) and (max-width:381px){html{font-size:10px;}}
@media (min-width:365px) and (max-width:373px){html{font-size:9.66px;}}
@media (min-width:356px) and (max-width:364px){html{font-size:9.33px;}}
@media (min-width:347px) and (max-width:355px){html{font-size:9px;}}
@media (min-width:338px) and (max-width:346px){html{font-size:8.66px;}}
@media (min-width:329px) and (max-width:337px){html{font-size:8.44px;}}
@media (max-width:328px){html{font-size:8px;}}

然后上次答辯學姐問我vue2和vue3有什么不同，vue3有什么優點，沒有答得很，所以特此專門復習了一下：（到時候貼上鏈接）

?

還有就是v-if和v-for當時沒怎么聽懂學姐講的，專門去了解了一下：

?

?

然后今天發現每次都會多了很多margin，搞了好久才發現原來是用bootstrap的contianer每個都會自帶，然后我有用他們嵌套，這才導致有很大的padding和margin，雖然發現前面的說法挺有道理，但是我的錯誤沒有出現在這里，我的問題是莫名出現的滾動條擠壓了布局，然后導致布局變形，看網上要么是隱藏要么是創建多一層，反正我是都沒用，但是我把被影響的元素的大小從100vw也就是瀏覽器視口的大小，變成100%body的大小，這樣就解決了！！！響應式布局的行內高度用rem來定義，會跟好的適應一點

?

周日：

今天由于要用的是router組件復用和動態跳轉，所以專門了解了一下router路由的使用，還有一個要提的是，包括之前忘記總結了，span元素禁用無效，但是可以通過它的pointer-events，前端的格式：本來我一直用的默認是json格式，然后接受的是按照form-data來的，所以可以將接受的參resquestBody Map，然后get就能獲得。

?

今天學姐答辯之后我意識到自己前端代碼確實不規范了，打算明天去專門改改代碼。

?

?

?