杩?濂???9+1缃?绔?浠ｇ??澶у?ㄢ????互??椤甸?㈠???芥????涔?绫诲父?ㄦā??锛????ㄤ?濂?缁?涓????版????ュ?ｇ害瀹???瀹?浠????璧锋?ワ?瀵艰????㈠??灞???杞?????︾?瑰?俱???＄????琛ㄣ????绱??绛???????椤点??璇︽??椤点??琛ㄥ???￠????诲??舵????绀恒????璇??绌烘?版????绀猴??????村??涓哄????ㄧ??椤甸?㈤??躲??寮????跺??纭??姣?涓?ā????杈??ュ??杈??猴?渚?濡???琛ㄧ?浠舵?ユ? items??loading??error??page??pageSize锛???绱㈢?浠跺???璐ｆ??浜ゅ?抽?????绛????′欢锛??垮?????ュ?ｈ?姹???椤甸?㈠?绀哄??涓??″?ゆ???ㄩ?ㄥ???ㄥ??涓?涓??芥?伴????杩??锋?村????挎?㈡?版???锛?涔?渚夸?瀹?浣????ュ?ｈ???寮?甯歌????浠舵覆???????
?ュ?ｅ?寤鸿???涓??瑁?璇锋??板????璇锋??规??????板???????寮?甯稿???锛???涓????ㄦ?涓?〉?㈡?ｈ?借??ㄣ????琛ㄦ?ュ?ｉ??甯搁??瑕?绾﹀??抽???????绫汇??椤电????姣?椤垫?℃?扮????帮?骞剁?涓?杩????版???扮????绘?℃?板??蹇?瑕????舵??淇℃???璇︽???ュ?ｅ????绋冲???涓??℃??璇?璇诲?????¤?褰???椤甸?㈠??璧疯?姹????剧ず??杞界?舵??锛???????妫??ヨ???缁?????娓叉??锛?澶辫触?跺?绀哄????瑙ｇ????绀哄苟??渚???璇??ュ?ｏ???绱㈡?′欢?????堕??缃?〉??锛?杩?缁???ュ?????????叉??锛??垮??浜х??澶ч????澶?璇锋???娑???璺ㄥ?????存????????瀵??ユ?讹?搴??辨???＄?浠ｇ??????绔??ュ?ｅ???锛?涓?瑕???绉?瀵??????杩???绔?唬????
?村?????????????卞?灞???妯″??缁?浠垛???ュ?ｆ???♀??椤甸?㈢?瑁?????灞??藉?帮???缁?涓?瀵艰????椤佃?????磋???绉诲?ㄧ????癸???涓轰?绫绘ā??绾﹀?涓??寸???藉???????版?煎???绌虹?舵??锛??????遍〉?㈢???缁?浠讹?骞朵???杩??ュ?ｆ???¤???????浜ゆ?版????琛ㄥ????浜ゅ????舵??ュ?濉?」???煎??????＄?杩???缁???锛??????ㄦ??浜ゆ???寸??????????缁??烘??纭???棣?锛??诲??稿?虫ā?????哄?????诲????诲?涓???宸茬?诲??舵??锛??????ゆ????藉???璧???绔???????????抽????浣?浠?椤荤?辨???＄??￠???娴?璇??惰?冲?瑕???绌哄??琛ㄣ???ュ?ｈ??躲??????????????杈??ュ??绐?灞?甯?灞?锛?纭??杩?濂?浠ｇ??涓?浠??藉?绀烘?甯告?版???涔??藉???甯歌?杈圭?????点??
9+1缃?绔?浠ｇ??澶у?ㄥ??互????9绫诲?虹?妯″??+1濂?椤甸?㈡?村???规????ユ?寸??锛???????缓??瀹瑰?绀恒??浜у???????杞婚??淇℃?????瀹?涓????涓???琛?涓?????锛?涔?涓?浠ｈ〃??涓??版??骞冲?扮??涓????ュ?ｏ?涓??㈢??浠ｇ?????????璋??寸?????ㄨ捣?广??绀轰?涓????ュ?ｅ?板?????版???????涓虹害瀹?锛??ュ?ュ??绔??堕??涓?瀹??????′???涓??淬??
??纭??椤甸?㈢???锛???琛ラ?甯哥?ㄦā??
浠ｇ??澶??ㄧ???抽??????????????藉?杩?涓?涓???浠讹??????椤甸?㈢??????峰????版???姹?????杈圭????涓??㈡??椤甸???澶??板?????轰?绫诲父?ㄦā??锛????? HTML ?惧?ラ〉?㈡ā?裤??CSS ?惧?ユ?峰???浠躲??JavaScript ?惧?ユā????浠躲??浠ｇ????娈靛?绀烘?稿???娉?锛?澶??舵?跺???椤圭?????????寤烘?瑰?璋??淬??
1. 璇????椤甸?㈤???/h3>
?ㄩ〉????涓诲??瀹瑰??椤佃??琛ㄨ揪椤甸?㈠?绾э??㈡?逛究缁存?わ?涔?渚夸?杈??╂?????????瀹瑰?哄????
<header class="site-header">
<h1>绔??瑰??绉?lt;/h1>
</header>
<main id="main-content">
<section aria-labelledby="list-title">
<h2 id="list-title">??瀹瑰??琛?lt;/h2>
<div id="item-list"></div>
</section>
</main>
<footer>????淇℃??lt;/footer>2. ??搴?寮???瀹瑰???/h3>
璁剧疆??澶у?搴﹀????杈硅?锛??垮??瀹藉???瀹硅??ｃ??灏?灞??虹?版í??婊??ㄣ??
.container {
width: min(100% - 32px, 1120px);
margin-inline: auto;
}
.item-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
@media (max-width: 720px) {
.item-grid { grid-template-columns: 1fr; }
}3. 瀵艰???哄??
瀵艰??」搴???????瀹?椤甸?㈡??椤甸?㈠???哄????椤圭???ラ???ㄥ??绔?矾?憋?搴?浣跨?ㄦ??舵??渚???璺??辩?浠舵?夸唬?????炬?ャ??
<nav aria-label="涓诲???>
<ul>
<li><a href="/list">??瀹瑰??琛?lt;/a></li>
<li><a href="/about">?充????</a></li>
</ul>
</nav>4. ????ㄥ??瀹瑰?＄??
?＄??璐?璐ｅ?绀哄???¤?褰?锛??版???娈靛?涓??ュ?ｈ?????瀹瑰?搴?锛?涓?瑕???瀹????＄?涓?瀹???渚???害瀹???瀛?娈点??
<article class="item-card">
<h3>?＄????棰?</h3>
<p>?＄???浠?</p>
<small>?存?版?堕?达?2025-01-01</small>
</article>5. ??绱㈣〃??
琛ㄥ????浜ゆ?跺???￠?杈??ワ??????ヨ??′欢浜ょ??版?????涓??㈠???绀洪〉?㈢???锛??蜂?绛???瑙????变骇????姹??冲???
<form id="search-form">
<label for="keyword">?抽???</label>
<input id="keyword" name="keyword" type="search"
maxlength="80" required>
<button type="submit">?ヨ?</button>
</form>6. ??椤靛????/h3>
??绔???甯搁??瑕?褰???椤靛??姣?椤垫?℃?帮??婚〉?板???辨???＄?杩??????昏?褰??拌?绠???椤电?????淬??绌哄??琛ㄥ??????涓?椤电??澶???瑕?缁?涓???
const page = 1;
const pageSize = 20;
const params = new URLSearchParams({
page: String(page),
pageSize: String(pageSize)
});7. GET ??琛ㄦ?ュ??/h3>
?ュ?ｅ?绾﹀?????璇锋??规??????板????搴?缁?????杩???绾﹀??ュ?ｈ??? items ?扮??? total ?板?锛??ュ??绔????涓???锛?????姝ヤ慨?硅В??浠ｇ??锛???涓????存?ュ??ㄣ??
async function loadItems(page = 1) {
const params = new URLSearchParams({
page: String(page),
pageSize: "20"
});
const response = await fetch(`/api/items?${params}`);
if (!response.ok) {
throw new Error(`璇锋?澶辫触锛?${response.status}`);
}
const data = await response.json();
if (!Array.isArray(data.items) ||
typeof data.total !== "number") {
throw new Error("?ュ?ｅ??搴??煎?涓?绗﹀??绾﹀?");
}
return data;
}8. POST ??浜ゆ?ュ??/h3>
??寤烘????浜ゆ?版???讹?????绔??绾﹀?瀛?娈靛??绉般??蹇?濉?」????????搴?????璇??煎???绀轰?涓??? /api/items ????浣?璺??锛?骞堕????涓??版??缃?绔???渚????ュ?ｃ??
async function createItem(payload) {
const response = await fetch("/api/items", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload)
});
if (!response.ok) {
throw new Error(`??浜ゅけ璐ワ?${response.status}`);
}
return response.json();
}9. ??杞戒???璇??舵??
璇锋?涓???璇锋?澶辫触??娌℃???版????????舵??锛?搴???????哄??棣???娓叉???ュ?ｅ??瀹规?朵???浣跨? textContent锛?涓?瑕??????澶??????ㄦ?疯??ユ?兼?? HTML??
const list = document.querySelector("#item-list");
list.textContent = "??杞戒腑??;
try {
const data = await loadItems();
list.replaceChildren();
for (const item of data.items) {
const row = document.createElement("p");
row.textContent = item.title ?? "???藉???＄??;
list.append(row);
}
if (data.items.length === 0) {
list.textContent = "??????瀹?;
}
} catch (error) {
list.textContent = "??杞藉け璐ワ?璇风?????璇?";
}+1锛???妯″??缁???????淮?ょ??椤甸??/h2>
?村???讹?椤甸?㈡ā?垮?????缁???锛??峰???涓????锛??版???姹?灏?瑁??ㄧ????芥?颁腑??椤甸?㈠??濮?????璋??ㄥ??琛ㄦ?ュ?ｏ???????搴?缁???娓叉???＄??锛???绱㈠????椤靛???存?版?ヨ????板苟澶??ㄥ??涓?涓???杞藉?芥?般??杩??凤??ュ?ｈ??存?朵富瑕?淇??规?版???锛?甯?灞??????跺??涓?蹇?????璇锋??昏???
寮???????????涓?浠界????ュ?ｇ害瀹?锛?璺??涓??规????ヨ????般??璇锋?浣?瀛?娈点????????搴?绀轰?????璇??舵????锛?浠ュ??绌烘?版???剁??杩????瑰???娴?瑙??ㄧ???蹇?濉??￠????芥?瑰??浜や?锛?涓??戒唬?挎???＄??￠?锛????????版?????村??杈??ュ??娉??т?椤荤?卞??绔??璇???涓?绾垮????妫??ョЩ?ㄧ?甯?灞????ュ?ｅ?甯告??绀恒????????浣????у?跺?伴??璇??纭??杩?濂???9+1??浠ｇ???介????瀹???椤圭?????涓??????ㄩ????绀轰?涓???绔???
