SCAU學習筆記 - 自科三面前端方向實戰演示

本來是準備寫完二面直接開始寫算法三面的，maimai那個封面圖我都做好了。但是可惡的出題人說要等我出完解析再針對性避開出題，所以swan決定把那個先擱置，本文我們先以2023年的自科三面前端方向題為例帶各位快速入門前端三件套（因為前端我也不太會所以只能說告訴你有些什么東西）
需要聲明的是，本文僅是拋磚引玉，介紹大部分基礎概念以及開發過程中找bug修bug的流程以及實現思路，具體代碼實現不會在文中有體現，文末會有完整代碼的鏈接，但還是希望各位能借助AI（這點很重要，AI對自學幫助很大的，任何不會的都不要猶豫馬上去問）順著我的思路來獨立的實現
擱置算法題解，我們休息一下，讀個加載進度條吧

原題題面

2023年的CSDN主頁和現在的不太一樣，pdf里面的文件已經失效了，我就懶得去找當時主頁長什么樣子了，直接復刻現在這個吧
20250820CSDN主頁

環境搭建

相信很多小朋友都還是第一次接觸開發，簡單來說，代碼需要用一些程序來編寫和運行，本文使用的是Pycharm，我們的Python專業課用的也是這個IDE來編寫代碼，你可以使用免費版本，對本文內容來說已經夠用了，或者看我這篇文章最前面的部分了解如何申請學生認證以免費使用完全體的Pycharm。
可能就有同學要問了，我們不是寫前端嗎，也沒有使用Python啊，為什么要使用Pycharm呢？因為我這里使用的是Flask架構來方便調試，方便我直觀地看到我網頁寫成了什么樣子。

配置Python

首先我們來到Python的官網，點擊上面導航欄的Download

直接點這個很顯眼的Download下載安裝包就行了，打開安裝包記得先勾上這個

這個選項是把Python加到你系統的環境變量里面的，然后就點Install Now一路下一步就行了

配置Pycharm

Pycharm就沒啥好說的了，在官網下載，然后一路下一步，需要的話記得把安裝目錄改到D盤就行了

新建項目

打開安裝好的Pycharm，注冊登錄之后直接點擊這個顯眼的新建項目
pycharm
選擇左邊的Flask項目，選擇你創建項目的目錄，然后創建即可
pycharm
如果你的電腦沒有安裝Flask則會在第一次創建時自動下載，需要一段時間（或者科學上網），耐心等待即可
好了，我們現在已經成功創建了我們的項目，和學習C語言時一樣，他已經填充了一些代碼，我們先運行一下試試看，點擊左上角的運行按鈕，然后下面會彈出一大堆提示，點擊這個藍色的鏈接就會彈出瀏覽器打開剛剛寫出來的網頁了
pycharm
默認的代碼出來的網頁應該是長這個樣子，需要提一嘴的是這個網頁是跑在你本地端口的，所以不要奢望說別人輸入一樣的網址也能打開這個網頁

框架介紹

雖然我們前面配置Python配了老半天，但是我們還是要回去寫前端三件套的，但是我的文件要去哪里新建？這是個問題，讓我們觀察下左邊的文件結構

現在跟著我的這個模式來新建一些文件，并修改app.py那個python文件里面的代碼（僅有的幾步需要敲python代碼的地方）
change
接下來，我們就可以打開home.html開始編寫我們的網頁代碼了！

開碼部分

打開home.html我們可以直接在兩個body中間的部分寫上我們想要的內容，就會直接顯示在網頁上（記得每次修改之后要重新點運行而不是刷新網頁就有變化）
example

頂部導航欄

我們再嘗試導入一些圖片，我們把CSDN的Logo下載到image目錄下，然后這樣寫
logo
這個效果不太對啊，我需要的是把這個logo和搜索框放在同一行，這個時候就需要寫CSS樣式了，我們還不著急新建文件，我們直接把這兩個元素再用一層包起來

我們可以通過定義style的方式來修改樣式，但是假如style特別多，我們可以類似C語言里面的結構體，把一大堆style封裝在一起起個名字然后調用，寫在最上面，比如說我現在要完善搜索框的格式，就像這樣

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Home</title><style>.search-container {display: flex;align-items: center;justify-content: flex-start;width: 100%;}.search-input {flex: 1;padding: 10px;font-size: 16px;border: 1px solid #ccc;border-radius: 8px 0 0 8px;background-color: #F5F6F7;color: #867888;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);outline: none;}.search-input::placeholder {color: #867888;}.search-button {padding: 10px 20px;font-size: 16px;border: none;border-radius: 0 8px 8px 0;background-color: #FC5531;color: #fff;cursor: pointer;display: flex;align-items: center;justify-content: center;}.search-button:hover {background-color: #e04a28;}.search-button span {margin-left: 5px;}</style>
</head>
<body><div class="search-container"><input type="text" id="search-box" class="search-input" placeholder="輸入到此處搜索"><button class="search-button" onclick="performSearch()">🔍<span>搜索</span></button></div>
</body>
</html>

運行出來的效果就是這樣的了（反正現在帶火都有AI，具體每個參數啥意思就不細講了）
搜索框
但是我的網頁那么多東西，寫在一個文件里面太臃腫了，所以我們解鎖模塊化開發，我們把剛才寫好的頂端部分單獨寫在一個文件里面，之后遇到再調用就行，HTML的調用語法如圖所示，但是css的樣式還是必須寫在home.html里面
html
現在home.html還是很長，所以我們考慮把樣式也壓到一個css文件里面去，我們寫成這樣就可以了
css
然后簡單調整一下（不會就去問AI大人讓他改，只要你認真看了AI的解釋答辯的時候能說清楚怎么實現的就行）
需要你自己解決的問題：

如何保證這個頂部導航欄始終位于頁面頂端
如何保證這個搜索框分為了兩個部分
如何保證搜索框的長度合適并且居中
（附加題）能否實現點擊搜索框跳轉到搜索頁面（不用具體實現）

目標是實現到這樣的效果，左邊那個收起按鈕涉及js，我們留到最后再作為可選項說一嘴
headbar

左側導航欄

左側導航欄就很好寫了，反正我們只需要寫一個殼子，就直接把所有圖標并排擺就行了
leftbar
但是現在發現一個問題注意到沒有，咱們這個第一個選項被headbar蓋住了，我們使用一個簡單粗暴的方法，直接進行一個整體下移就搞定了，然后我們在這一趴在上點小花活，CSDN是有選中對應的圖標的，他是進入對應的頁面圖標才會變色，我們可以把這個素材利用起來，鼠標碰到就變色，這個就屬于頁面的動態效果，需要我們寫js來實現
我們現在html里面給每個圖標兩個狀態屬性，分別為選中和未選中

		<a href="/home" class="nav-item"><img src="{{ url_for('static', filename='image/leftbar/Unselect/home.png') }}"data-unselect="{{ url_for('static', filename='image/leftbar/Unselect/home.png') }}"data-select="{{ url_for('static', filename='image/leftbar/Select/home.png') }}"alt="首頁圖標" class="nav-icon">首頁</a>

然后我們來寫js代碼

document.addEventListener("DOMContentLoaded", () => {// 1. 添加一個事件監聽器，監聽 DOMContentLoaded 事件。//    這個事件會在 HTML 文檔完全加載并解析完成后觸發，//    確保腳本在頁面的 DOM 元素可用時執行。const navItems = document.querySelectorAll(".nav-item");// 2. 使用 querySelectorAll 方法選擇所有帶有類名 "nav-item" 的元素。//    這些元素是導航欄中的每個 <a> 標簽，存儲在 navItems 變量中。//    querySelectorAll 返回的是一個 NodeList（類似數組的對象）。navItems.forEach(item => {// 3. 遍歷 navItems 中的每個導航項（item）。//    forEach 是 NodeList 的方法，用于對每個元素執行回調函數。const img = item.querySelector(".nav-icon");// 4. 在當前導航項中，使用 querySelector 方法選擇類名為 "nav-icon" 的 <img> 標簽。//    這個 <img> 標簽是導航項的圖標，存儲在 img 變量中。const unselectSrc = img.getAttribute("data-unselect");// 5. 使用 getAttribute 方法獲取 <img> 標簽的 "data-unselect" 屬性值。//    這個值是未選中狀態的圖標路徑，存儲在 unselectSrc 變量中。const selectSrc = img.getAttribute("data-select");// 6. 使用 getAttribute 方法獲取 <img> 標簽的 "data-select" 屬性值。//    這個值是選中狀態的圖標路徑，存儲在 selectSrc 變量中。item.addEventListener("mouseenter", () => {// 7. 為當前導航項添加一個 "mouseenter" 事件監聽器。//    當鼠標懸停在導航項上時，會觸發這個事件。img.setAttribute("src", selectSrc);// 8. 在事件觸發時，使用 setAttribute 方法將 <img> 的 "src" 屬性設置為 selectSrc。//    這會將圖標切換為選中狀態的圖標。});item.addEventListener("mouseleave", () => {// 9. 為當前導航項添加一個 "mouseleave" 事件監聽器。//    當鼠標移出導航項時，會觸發這個事件。img.setAttribute("src", unselectSrc);// 10. 在事件觸發時，使用 setAttribute 方法將 <img> 的 "src" 屬性設置為 unselectSrc。//     這會將圖標切換回未選中狀態的圖標。});});// 11. 結束 forEach 循環，確保每個導航項都綁定了鼠標事件監聽器。
});

最后不要忘了在home.html里面引入一下剛寫的這個js文件就大功告成啦~

<script src="{{ url_for('static', filename='js/leftbar.js') }}"></script>

既然學了js，我們現在就可以搞一搞剛才擱置的只顯示左邊欄圖標功能了，類似剛才的寫法，我們給左邊的這個leftbar加一個收起形態的標簽，給收起形態下的文字內容設置為不顯示

.leftbar.collapsed .nav-item span {display: none; /* 隱藏文字 */
}

在這里我們學了一些基礎的動效的相關知識，簡單來說就是css里面打標記，然后js控制什么時候在不同標記之間切換

主體部分

現在來到主體部分，我們從上往下看，首先需要實現的就是原本網頁的標簽頁效果，點擊不同的頁簽就會進入不同的頁面，但是我們的網址沒有改變
原版效果
這同樣也是用我們剛才學習的js實現的，不過我們不妨直接看看題目上附贈的資料里面的標簽頁插件的鏈接，所謂的插件其實就是寫好的一些css和js文件，我們只需要直接調用它們的樣式即可，我們來帶bootstrap的官網下載他的壓縮包，解壓到我們的static文件夾，然后就可以直接引用使用了（甚至可以不下載，我們直接引用在線的庫，然后網頁在加載的時候就會自動下載這些庫進行渲染）

我們按照規則導入這個頁簽的庫并寫幾個頁簽出來，實現了這樣的效果
頁簽演示
但是在測試的過程中，又發現了新的問題

發現了沒有，我們在收縮左邊的leftbar的時候，我們的主體部分沒有跟著移動，所以我們還需要繼續完善我們剛才寫的js文件，不過在此之前，我們要先繼續推進我們代碼的模塊化，我們把整個頁面的主體部分寫到一個html文件里面，然后每個頁簽的內容再分為三個頁簽里面，然后我們就可以給這個主體部分也打一個標記，在leftbar收縮和不收縮的時候修改他的寬度，然后我們再重載一下這個頁簽按鈕的樣式，一通操作猛如虎之后，我們就搞定了
頁簽效果

輪播圖

雖然現在的CSDN沒有輪播圖，但是當年應該是有的，否則也不可能在這個做題要求里面給一個輪播圖的插件鏈接，那么我們就在全部這個頁簽里面加一個輪播圖試一下吧

<div class="carousel-container"><div id="carouselExample" class="carousel slide" data-bs-ride="carousel"><div class="carousel-inner"><div class="carousel-item active"><img src="{{ url_for('static', filename='image/ad/1.jpg') }}" class="d-block w-100" alt="Ad Image 1"></div><div class="carousel-item"><img src="{{ url_for('static', filename='image/ad/2.jpg') }}" class="d-block w-100" alt="Ad Image 2"></div><div class="carousel-item"><img src="{{ url_for('static', filename='image/ad/3.jpg') }}" class="d-block w-100" alt="Ad Image 3"></div><div class="carousel-item"><img src="{{ url_for('static', filename='image/ad/4.jpg') }}" class="d-block w-100" alt="Ad Image 4"></div><div class="carousel-item"><img src="{{ url_for('static', filename='image/ad/5.jpg') }}" class="d-block w-100" alt="Ad Image 5"></div><div class="carousel-item"><img src="{{ url_for('static', filename='image/ad/6.jpg') }}" class="d-block w-100" alt="Ad Image 6"></div></div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button></div>
</div>

于是這個效果我們就完成啦（記得關掉adblock，這個元素可能會被adb干掉）
輪播圖

寫在最后

最后再隨便填充一些東西我們的項目就完成啦！三件套齊活，插件也用上了，最終效果就長這個樣子（當然你覺得空的話還可以繼續加一些信息框啥的，排版你也可以隨便改）

雖然這個題今年肯定不會再出，但是希望你能學習到一些有用的東西，順利進入自科，暴打swan喵~我們就下期算法三面通關筆記再見！
哦對了，還有源代碼倉庫鏈接，在這里