mảnh dẻ là cái mới nhất mà tôi gọi là khung ứng dụng thế hệ tiếp theo. Tất nhiên, nó tạo ra một ứng dụng cho bạn, với khả năng định tuyến, triển khai và hiển thị phía máy chủ dựa trên tệp mà Next đã thực hiện mãi mãi. Nhưng SvelteKit cũng hỗ trợ các bố cục lồng nhau, các đột biến máy chủ đồng bộ hóa dữ liệu trên trang của bạn và một số tính năng thú vị khác mà chúng tôi sẽ đề cập.
Bài đăng này có nghĩa là một phần giới thiệu cấp cao để hy vọng tạo ra sự phấn khích cho bất kỳ ai chưa bao giờ sử dụng SvelteKit. Đó sẽ là một chuyến du lịch thoải mái. Nếu bạn thích những gì bạn nhìn thấy, tài liệu đầy đủ ở đây.
Theo một số cách, đây là một bài đầy thách thức để viết. SvelteKit là một khung ứng dụng. Nó tồn tại để giúp bạn xây dựng… tốt, các ứng dụng. Điều đó gây khó khăn cho việc demo. Không thể xây dựng toàn bộ ứng dụng trong một bài đăng trên blog. Vì vậy, thay vào đó, chúng ta sẽ sử dụng trí tưởng tượng của mình một chút. Chúng tôi sẽ xây dựng khung của ứng dụng, có một số trình giữ chỗ giao diện người dùng trống và dữ liệu tĩnh được mã hóa cứng. Mục tiêu không phải là xây dựng một ứng dụng thực tế, mà thay vào đó là để cho bạn thấy các phần chuyển động của SvelteKit hoạt động như thế nào để bạn có thể xây dựng một ứng dụng của riêng mình.
Để đạt được mục tiêu đó, chúng tôi sẽ xây dựng ứng dụng Việc cần làm đã được thử nghiệm và thực sự làm ví dụ. Nhưng đừng lo lắng, điều này sẽ quan trọng hơn nhiều so với việc xem cách SvelteKit hoạt động hơn là tạo một ứng dụng Việc cần làm khác.
Mã cho mọi thứ trong bài viết này là có sẵn tại GitHub. Dự án này cũng triển khai trên Vercel cho một bản demo trực tiếp.
Tạo dự án của bạn
Tạo một dự án SvelteKit mới đủ đơn giản. Chạy npm create your-app-name
trong thiết bị đầu cuối và trả lời các lời nhắc câu hỏi. Đảm bảo chọn “Skeleton Project” nhưng nếu không thì hãy thực hiện bất kỳ lựa chọn nào bạn muốn cho TypeScript, ESLint, v.v.
Khi dự án được tạo, hãy chạy npm i
và npm run dev
và một máy chủ dev sẽ bắt đầu chạy. Giận dữ localhost:5173
trong trình duyệt và bạn sẽ nhận được trang giữ chỗ cho ứng dụng bộ xương.
Định tuyến cơ bản
Chú ý routes
thư mục dưới src
. Điều đó giữ mã cho tất cả các tuyến đường của chúng tôi. đã có một +page.svelte
tập tin trong đó với nội dung cho thư mục gốc /
tuyến đường. Bất kể bạn đang ở đâu trong hệ thống phân cấp tệp, trang thực tế cho đường dẫn đó luôn có tên +page.svelte
. Với ý nghĩ đó, hãy tạo các trang cho /list
, /details
, /admin/user-settings
và admin/paid-status
, đồng thời thêm một số chỗ dành sẵn cho văn bản cho mỗi trang.
Bố cục tệp của bạn sẽ trông giống như thế này:
Bạn sẽ có thể điều hướng xung quanh bằng cách thay đổi đường dẫn URL trong thanh địa chỉ của trình duyệt.
Layouts
Chúng tôi sẽ muốn các liên kết điều hướng trong ứng dụng của mình, nhưng chúng tôi chắc chắn không muốn sao chép đánh dấu cho chúng trên mỗi trang chúng tôi tạo. Vì vậy, hãy tạo một +layout.svelte
tập tin trong thư mục gốc của chúng tôi routes
thư mục mà SvelteKit sẽ coi là mẫu chung cho tất cả các trang. Hãy và thêm một số nội dung vào nó:
<nav> <ul> <li> <a href="/vi/">Home</a> </li> <li> <a href="/vi/list">To-Do list</a> </li> <li> <a href="/vi/admin/paid-status">Account status</a> </li> <li> <a href="/vi/admin/user-settings">User settings</a> </li> </ul>
</nav> <slot /> <style> nav { background-color: beige; } nav ul { display: flex; } li { list-style: none; margin: 15px; } a { text-decoration: none; color: black; }
</style>
Một số điều hướng thô sơ với một số phong cách cơ bản. Đặc biệt quan trọng là <slot />
nhãn. Đây là không vị trí bạn sử dụng với các thành phần web và DOM bóng, mà đúng hơn là một tính năng Svelte cho biết nơi đặt nội dung của chúng tôi. Khi một trang hiển thị, nội dung trang sẽ trượt vào vị trí của vị trí.
Và bây giờ chúng tôi có một số điều hướng! Chúng tôi sẽ không giành chiến thắng trong bất kỳ cuộc thi thiết kế nào, nhưng chúng tôi không cố gắng.
Bố cục lồng nhau
Điều gì sẽ xảy ra nếu chúng tôi muốn tất cả các trang quản trị kế thừa bố cục bình thường mà chúng tôi vừa tạo nhưng cũng chia sẻ một số điểm chung cho tất cả các trang quản trị (nhưng chỉ các trang quản trị)? Không có vấn đề, chúng tôi thêm một +layout.svelte
tập tin trong thư mục gốc của chúng tôi admin
thư mục sẽ được kế thừa bởi mọi thứ bên dưới nó. Hãy làm điều đó và thêm nội dung này:
<div>This is an admin page</div> <slot /> <style> div { padding: 15px; margin: 10px 0; background-color: red; color: white; }
</style>
Chúng tôi thêm một biểu ngữ màu đỏ cho biết đây là trang quản trị và sau đó, giống như trước đây, một <slot />
biểu thị nơi chúng tôi muốn nội dung trang của chúng tôi đi.
Bố cục gốc của chúng tôi từ trước khi kết xuất. Bên trong bố cục gốc là một <slot />
nhãn. Nội dung của bố cục lồng nhau đi vào bố cục gốc <slot />
. Và cuối cùng, bố cục lồng nhau xác định bố cục của chính nó <slot />
, nơi nội dung trang hiển thị.
Nếu bạn điều hướng đến các trang quản trị, bạn sẽ thấy biểu ngữ màu đỏ mới:
Xác định dữ liệu của chúng tôi
OK, hãy hiển thị một số dữ liệu thực tế — hoặc ít nhất, hãy xem cách chúng tôi có thể hiển thị một số dữ liệu thực tế. Có hàng trăm cách để tạo và kết nối với cơ sở dữ liệu. Tuy nhiên, bài đăng này là về SvelteKit, không quản lý DynamoDB, vì vậy, thay vào đó, chúng tôi sẽ “tải” một số dữ liệu tĩnh. Tuy nhiên, chúng tôi sẽ sử dụng tất cả các máy móc tương tự để đọc và cập nhật nó mà bạn sẽ sử dụng cho dữ liệu thực. Đối với một ứng dụng web thực, hãy tráo đổi các hàm trả về dữ liệu tĩnh bằng các hàm kết nối và truy vấn tới bất kỳ cơ sở dữ liệu nào bạn tình cờ sử dụng.
Hãy tạo một mô-đun đơn giản trong lib/data/todoData.ts
trả về một số dữ liệu tĩnh cùng với độ trễ nhân tạo để mô phỏng các truy vấn thực. Bạn sẽ thấy điều này lib
thư mục được nhập ở nơi khác thông qua $lib
. Đây là một tính năng của SvelteKit dành cho thư mục cụ thể đó và thậm chí bạn có thể thêm bí danh của riêng bạn.
let todos = [ { id: 1, title: "Write SvelteKit intro blog post", assigned: "Adam", tags: [1] }, { id: 2, title: "Write SvelteKit advanced data loading blog post", assigned: "Adam", tags: [1] }, { id: 3, title: "Prepare RenderATL talk", assigned: "Adam", tags: [2] }, { id: 4, title: "Fix all SvelteKit bugs", assigned: "Rich", tags: [3] }, { id: 5, title: "Edit Adam's blog posts", assigned: "Geoff", tags: [4] },
]; let tags = [ { id: 1, name: "SvelteKit Content", color: "ded" }, { id: 2, name: "Conferences", color: "purple" }, { id: 3, name: "SvelteKit Development", color: "pink" }, { id: 4, name: "CSS-Tricks Admin", color: "blue" },
]; export const wait = async amount => new Promise(res => setTimeout(res, amount ?? 100)); export async function getTodos() { await wait(); return todos;
} export async function getTags() { await wait(); return tags.reduce((lookup, tag) => { lookup[tag.id] = tag; return lookup; }, {});
} export async function getTodo(id) { return todos.find(t => t.id == id);
}
Hàm trả về một mảng phẳng gồm các mục việc cần làm, tra cứu thẻ của chúng tôi và hàm tìm nạp một việc cần làm duy nhất (chúng tôi sẽ sử dụng mục cuối cùng đó trong trang Chi tiết của chúng tôi).
Đang tải dữ liệu của chúng tôi
Làm cách nào để đưa dữ liệu đó vào các trang Svelte của chúng tôi? Có một số cách, nhưng bây giờ, hãy tạo một +page.server.js
tập tin trong của chúng tôi list
thư mục và đặt nội dung này vào đó:
import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); const tags = getTags(); return { todos, tags, };
}
Chúng tôi đã xác định một load()
chức năng lấy dữ liệu cần thiết cho trang. Lưu ý rằng chúng ta không await
-ing cuộc gọi đến của chúng tôi getTodos
và getTags
chức năng không đồng bộ. Làm như vậy sẽ tạo ra một thác nước tải dữ liệu khi chúng tôi đợi các mục việc cần làm của mình xuất hiện trước khi tải các thẻ của chúng tôi. Thay vào đó, chúng tôi trả lại những lời hứa thô từ load
và SvelteKit thực hiện công việc cần thiết để await
Chúng.
Vì vậy, làm cách nào để chúng tôi truy cập dữ liệu này từ thành phần trang của chúng tôi? SvelteKit cung cấp một data
prop cho thành phần của chúng tôi với dữ liệu trên đó. Chúng tôi sẽ truy cập các mục công việc và thẻ từ nó bằng cách sử dụng chuyển nhượng phản ứng.
Thành phần trang Danh sách của chúng tôi bây giờ trông như thế này.
<script> export let data; $: ({ todo, tags } = data);
</script> <table cellspacing="10" cellpadding="10"> <thead> <tr> <th>Task</th> <th>Tags</th> <th>Assigned</th> </tr> </thead> <tbody> {#each todos as t} <tr> <td>{t.title}</td> <td>{t.tags.map((id) => tags[id].name).join(', ')}</td> <td>{t.assigned}</td> </tr> {/each} </tbody>
</table> <style> th { text-align: left; }
</style>
Và điều này sẽ hiển thị các mục việc cần làm của chúng tôi!
Nhóm bố cục
Trước khi chúng tôi chuyển sang trang Chi tiết và thay đổi dữ liệu, hãy xem qua một tính năng SvelteKit thực sự gọn gàng: nhóm bố trí. Chúng ta đã thấy các bố cục lồng nhau cho tất cả các trang quản trị, nhưng nếu chúng ta muốn chia sẻ bố cục giữa các trang tùy ý ở cùng cấp độ trong hệ thống tệp của mình thì sao? Đặc biệt, nếu chúng ta muốn chia sẻ bố cục chỉ giữa trang Danh sách và trang Chi tiết thì sao? Chúng tôi đã có một bố cục toàn cầu ở cấp độ đó. Thay vào đó, chúng ta có thể tạo một thư mục mới, nhưng với tên nằm trong ngoặc đơn, như sau:
Bây giờ chúng tôi có một nhóm bố cục bao gồm các trang Danh sách và Chi tiết của chúng tôi. tôi đặt tên cho nó (todo-management)
nhưng bạn có thể đặt tên cho nó bất cứ điều gì bạn thích. Để rõ ràng, tên này sẽ không ảnh hưởng đến URL của các trang bên trong nhóm bố cục. Các URL sẽ vẫn như cũ; các nhóm bố cục cho phép bạn thêm các bố cục được chia sẻ vào các trang mà không cần tất cả chúng bao gồm toàn bộ thư mục trong routes
.
We có thể thêm một +layout.svelte
tập tin và một số ngớ ngẩn <div>
biểu ngữ có nội dung: “Này, chúng tôi đang quản lý việc cần làm”. Nhưng hãy làm điều gì đó thú vị hơn. Bố cục có thể xác định load()
chức năng để cung cấp dữ liệu cho tất cả các tuyến bên dưới chúng. Hãy sử dụng chức năng này để tải các thẻ của chúng tôi — vì chúng tôi sẽ sử dụng các thẻ của mình trong details
trang - ngoài các list
trang chúng tôi đã có.
Trên thực tế, việc buộc một nhóm bố cục chỉ cung cấp một phần dữ liệu gần như chắc chắn là không đáng; tốt hơn là sao chép dữ liệu đó trong load()
chức năng cho mỗi trang. Nhưng đối với bài đăng này, nó sẽ cung cấp lý do chúng ta cần xem một tính năng mới của SvelteKit!
Đầu tiên, chúng ta hãy đi vào của chúng tôi list
trang của +page.server.js
tập tin và loại bỏ các thẻ từ nó.
import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); return { todos, };
}
Trang Danh sách của chúng tôi bây giờ sẽ tạo ra lỗi vì không có tags
mục tiêu. Hãy khắc phục điều này bằng cách thêm một +layout.server.js
tệp trong nhóm bố cục của chúng tôi, sau đó xác định một load()
chức năng tải các thẻ của chúng tôi.
import { getTags } from "$lib/data/todoData"; export function load() { const tags = getTags(); return { tags, };
}
Và cứ như vậy, trang Danh sách của chúng tôi sẽ hiển thị lại!
Chúng tôi đang tải dữ liệu từ nhiều vị trí
Hãy đặt một điểm tốt về những gì đang xảy ra ở đây:
- Chúng tôi đã xác định một
load()
chức năng cho nhóm bố trí của chúng tôi, mà chúng tôi đưa vào+layout.server.js
. - Điều này cung cấp dữ liệu cho tất cả các của các trang mà bố cục phục vụ — trong trường hợp này có nghĩa là các trang Danh sách và Chi tiết của chúng tôi.
- Trang Danh sách của chúng tôi cũng xác định một
load()
chức năng đi trong nó+page.server.js
tập tin. - SvelteKit thực hiện công việc khó khăn là lấy kết quả của các nguồn dữ liệu này, hợp nhất chúng lại với nhau và cung cấp cả hai trong
data
.
Trang chi tiết của chúng tôi
Chúng tôi sẽ sử dụng trang Chi tiết để chỉnh sửa mục công việc. Trước tiên, hãy thêm một cột vào bảng trong trang Danh sách của chúng ta để liên kết đến trang Chi tiết với ID của mục việc cần làm trong chuỗi truy vấn.
<td><a href="/vi/details?id={t.id}">Edit</a></td>
Bây giờ, hãy xây dựng trang Chi tiết của chúng tôi. Đầu tiên, chúng tôi sẽ thêm một trình tải để lấy mục việc cần làm mà chúng tôi đang chỉnh sửa. Tạo một +page.server.js
in /details
, với nội dung này:
import { getTodo, updateTodo, wait } from "$lib/data/todoData"; export function load({ url }) { const id = url.searchParams.get("id"); console.log(id); const todo = getTodo(id); return { todo, };
}
Bộ tải của chúng tôi đi kèm với một url
thuộc tính mà từ đó chúng ta có thể lấy các giá trị chuỗi truy vấn. Điều này giúp dễ dàng tra cứu mục việc cần làm mà chúng tôi đang chỉnh sửa. Hãy kết xuất việc cần làm đó, cùng với chức năng chỉnh sửa nó.
SvelteKit có các khả năng đột biến tích hợp tuyệt vời, miễn là bạn sử dụng các biểu mẫu. Ghi nhớ các hình thức? Đây là trang Chi tiết của chúng tôi. Tôi đã bỏ qua các phong cách cho ngắn gọn.
<script> import { enhance } from "$app/forms"; export let data; $: ({ todo, tags } = data); $: currentTags = todo.tags.map(id => tags[id]);
</script> <form use:enhance method="post" action="?/editTodo"> <input name="id" type="hidden" value="{todo.id}" /> <input name="title" value="{todo.title}" /> <div> {#each currentTags as tag} <span style="{`color:" ${tag.color};`}>{tag.name}</span> {/each} </div> <button>Save</button>
</form>
Chúng tôi đang lấy các thẻ như trước đây từ trình tải của nhóm bố cục và mục việc cần làm từ trình tải của trang của chúng tôi. Chúng tôi đang lấy thực tế tag
các đối tượng từ danh sách ID thẻ của việc cần làm và sau đó hiển thị mọi thứ. Chúng tôi tạo một biểu mẫu có đầu vào ẩn cho ID và đầu vào thực cho tiêu đề. Chúng tôi hiển thị các thẻ và sau đó cung cấp một nút để gửi biểu mẫu.
Nếu bạn nhận thấy use:enhance
, điều đó chỉ đơn giản yêu cầu SvelteKit sử dụng tính năng nâng cao lũy tiến và Ajax để gửi biểu mẫu của chúng tôi. Bạn có thể sẽ luôn sử dụng nó.
Làm cách nào để chúng tôi lưu các chỉnh sửa của mình?
Chú ý action="?/editTodo"
thuộc tính trên chính biểu mẫu? Điều này cho chúng tôi biết nơi chúng tôi muốn gửi dữ liệu đã chỉnh sửa của mình. Đối với trường hợp của chúng tôi, chúng tôi muốn gửi đến một editTodo
"hoạt động."
Hãy tạo nó bằng cách thêm phần sau vào +page.server.js
tệp chúng tôi đã có để biết Chi tiết (hiện có tệp load()
chức năng, để lấy việc cần làm của chúng tôi):
import { redirect } from "@sveltejs/kit"; // ... export const actions = { async editTodo({ request }) { const formData = await request.formData(); const id = formData.get("id"); const newTitle = formData.get("title"); await wait(250); updateTodo(id, newTitle); throw redirect(303, "/list"); },
};
Hành động biểu mẫu cung cấp cho chúng tôi một request
đối tượng, cung cấp quyền truy cập vào của chúng tôi formData
, trong đó có một get
phương thức cho các trường biểu mẫu khác nhau của chúng tôi. Chúng tôi đã thêm đầu vào ẩn đó cho giá trị ID để chúng tôi có thể lấy nó ở đây để tra cứu mục việc cần làm mà chúng tôi đang chỉnh sửa. Chúng tôi mô phỏng sự chậm trễ, gọi một sự chậm trễ mới updateTodo()
phương pháp, sau đó chuyển hướng người dùng trở lại /list
trang. Các updateTodo()
phương pháp chỉ cập nhật dữ liệu tĩnh của chúng tôi; trong cuộc sống thực, bạn sẽ chạy một số loại cập nhật trong bất kỳ kho dữ liệu nào bạn đang sử dụng.
export async function updateTodo(id, newTitle) { const todo = todos.find(t => t.id == id); Object.assign(todo, { title: newTitle });
}
Hãy thử nó ra. Trước tiên, chúng tôi sẽ chuyển đến trang Danh sách:
Bây giờ, hãy nhấp vào nút Chỉnh sửa cho một trong các mục công việc để hiển thị trang chỉnh sửa trong /details
.
Chúng tôi sẽ thêm một tiêu đề mới:
Bây giờ, hãy nhấp vào Lưu. Điều đó sẽ đưa chúng ta trở lại /list
trang, với tiêu đề việc cần làm mới được áp dụng.
Làm thế nào mà tiêu đề mới hiển thị như vậy? Nó là tự động. Khi chúng tôi chuyển hướng đến /list
trang, SvelteKit sẽ tự động chạy lại tất cả các trình tải của chúng tôi giống như bất kể điều gì đã xảy ra. Đây là tiến bộ quan trọng mà các khung ứng dụng thế hệ tiếp theo, như SvelteKit, Remixvà 13 tiếp theo cung cấp. Thay vì cung cấp cho bạn một cách thuận tiện để hiển thị các trang, sau đó chúc bạn may mắn khi tìm nạp bất kỳ điểm cuối nào mà bạn có thể phải cập nhật dữ liệu, chúng tích hợp tính năng đột biến dữ liệu cùng với việc tải dữ liệu, cho phép cả hai hoạt động song song.
Một số điều bạn có thể thắc mắc…
Bản cập nhật đột biến này có vẻ không quá ấn tượng. Trình tải sẽ chạy lại bất cứ khi nào bạn điều hướng. Điều gì sẽ xảy ra nếu chúng tôi chưa thêm chuyển hướng trong hành động biểu mẫu của mình nhưng vẫn ở trên trang hiện tại? SvelteKit sẽ thực hiện cập nhật trong hành động biểu mẫu, giống như trước đây, nhưng sẽ vẫn còn chạy lại tất cả các trình tải cho trang hiện tại, bao gồm các trình tải trong (các) bố cục trang.
Chúng tôi có thể có nhiều phương tiện được nhắm mục tiêu hơn để làm mất hiệu lực dữ liệu của mình không? Ví dụ: các thẻ của chúng tôi không được chỉnh sửa, vì vậy trong cuộc sống thực, chúng tôi sẽ không muốn truy vấn lại chúng. Vâng, những gì tôi đã chỉ cho bạn chỉ là hành vi biểu mẫu mặc định trong SvelteKit. Bạn có thể tắt hành vi mặc định bằng cách cung cấp một cuộc gọi lại để use:enhance
. Sau đó, SvelteKit cung cấp hướng dẫn sử dụng chức năng vô hiệu.
Tải dữ liệu trên mọi điều hướng có khả năng tốn kém và không cần thiết. Tôi có thể lưu trữ dữ liệu này vào bộ đệm giống như tôi làm với các công cụ như react-query
? Vâng, chỉ là khác nhau. SvelteKit cho phép bạn đặt (và sau đó tôn trọng) các tiêu đề kiểm soát bộ đệm mà web đã cung cấp. Và tôi sẽ đề cập đến các cơ chế vô hiệu hóa bộ đệm trong bài đăng tiếp theo.
Mọi thứ chúng tôi đã thực hiện trong suốt bài viết này đều sử dụng dữ liệu tĩnh và sửa đổi các giá trị trong bộ nhớ. Nếu bạn cần hoàn nguyên mọi thứ và bắt đầu lại, hãy dừng và khởi động lại npm run dev
Quá trình nút.
Kết thúc
Chúng tôi hầu như chưa tìm hiểu sơ qua về SvelteKit, nhưng hy vọng rằng bạn đã thấy đủ để hào hứng với nó. Tôi không thể nhớ lần cuối cùng tôi thấy việc phát triển web thú vị như thế này là khi nào. Với những thứ như đóng gói, định tuyến, SSR và triển khai đều được xử lý ngay lập tức, tôi sẽ dành nhiều thời gian viết mã hơn là định cấu hình.
Dưới đây là một số tài nguyên khác mà bạn có thể sử dụng cho các bước học SvelteKit tiếp theo:
- Phân phối nội dung và PR được hỗ trợ bởi SEO. Được khuếch đại ngay hôm nay.
- Platoblockchain. Web3 Metaverse Intelligence. Khuếch đại kiến thức. Truy cập Tại đây.
- nguồn: https://css-tricks.com/getting-started-with-sveltekit/
- 1
- 10
- 100
- 11
- 7
- 9
- 98
- a
- Có khả năng
- Giới thiệu
- về nó
- truy cập
- Tài khoản
- Hoạt động
- hành động
- Adam
- thêm
- Ngoài ra
- địa chỉ
- quản trị viên
- tiên tiến
- ảnh hưởng đến
- Tất cả
- Cho phép
- bên cạnh
- Đã
- luôn luôn
- số lượng
- và
- Một
- trả lời
- bất kỳ ai
- ứng dụng
- Các Ứng Dụng
- các ứng dụng
- áp dụng
- xung quanh
- Mảng
- bài viết
- nhân tạo
- giao
- Tự động
- tự động
- có sẵn
- chờ đợi
- trở lại
- lý lịch
- cờ
- thanh
- cơ bản
- trước
- BEST
- Hơn
- giữa
- Một chút
- Đen
- Blog
- Blog Posts
- Màu xanh da trời
- Hộp
- mang lại
- trình duyệt
- lỗi
- xây dựng
- xây dựng
- được xây dựng trong
- nút
- Bộ nhớ cache
- cuộc gọi
- Cuộc gọi
- khả năng
- trường hợp
- chắc chắn
- thách thức
- thay đổi
- trong sáng
- mã
- Lập trình
- màu sắc
- Cột
- Đến
- Chung
- Cuộc thi
- thành phần
- các thành phần
- hội nghị
- Kết nối
- Kết nối
- An ủi
- nội dung
- Tiện lợi
- có thể
- Khóa học
- bao gồm
- Covers
- tạo
- tạo ra
- Tạo
- Current
- Hiện nay
- dữ liệu
- Cơ sở dữ liệu
- Mặc định
- Xác định
- chậm trễ
- sự chậm trễ
- triển khai
- Thiết kế
- chi tiết
- Dev
- Phát triển
- ĐÃ LÀM
- Giao diện
- Không
- làm
- dont
- mỗi
- nơi khác
- đủ
- Toàn bộ
- toàn bộ
- lôi
- vv
- Ngay cả
- Mỗi
- tất cả mọi thứ
- ví dụ
- kích thích
- Sự phấn khích
- tồn tại
- đắt tiền
- xuất khẩu
- khả thi
- Đặc tính
- vài
- Lĩnh vực
- Tập tin
- Các tập tin
- Cuối cùng
- cuối
- Lửa
- Tên
- Sửa chữa
- bằng phẳng
- tiếp theo
- mãi mãi
- hình thức
- định dạng
- các hình thức
- tìm thấy
- khung
- từ
- Full
- vui vẻ
- chức năng
- chức năng
- chức năng
- được
- nhận được
- Cho
- Cho
- Toàn cầu
- Go
- mục tiêu
- Đi
- đi
- lấy
- Nhóm
- Các nhóm
- xảy ra
- Cứng
- tiêu đề
- giúp đỡ
- tại đây
- Thành viên ẩn danh
- hệ thống cấp bậc
- cấp độ cao
- giữ
- Hy vọng
- Ngang
- Độ đáng tin của
- HTML
- HTTPS
- TÔI SẼ
- trí tưởng tượng
- nhập khẩu
- tầm quan trọng
- ấn tượng
- in
- Bao gồm
- ban đầu
- đầu vào
- thay vì
- tích hợp
- thú vị
- Giới thiệu
- IT
- mặt hàng
- chính nó
- JavaScript
- Key
- Họ
- mới nhất
- Bố trí
- học tập
- cho phép
- Cấp
- Li
- Cuộc sống
- ánh sáng
- Có khả năng
- liên kết
- Danh sách
- sống
- tải
- loader
- tải
- tải
- dài
- Xem
- NHÌN
- tra cứu
- may mắn
- máy móc thiết bị
- làm cho
- LÀM CHO
- Làm
- quản lý
- nhãn hiệu
- Lợi nhuận
- chất
- có nghĩa
- Bộ nhớ
- chỉ đơn thuần là
- sáp nhập
- phương pháp
- Might
- tâm
- Mô-đun
- chi tiết
- di chuyển
- di chuyển
- nhiều
- tên
- Được đặt theo tên
- nav
- Điều hướng
- THÔNG TIN
- cần thiết
- Cần
- Mới
- tiếp theo
- nút
- bình thường
- con số
- vật
- đối tượng
- ONE
- gọi món
- Nền tảng khác
- nếu không thì
- riêng
- riêng
- con đường
- Thực hiện
- chọn
- mảnh
- miếng
- giữ chỗ
- plato
- Thông tin dữ liệu Plato
- PlatoDữ liệu
- Điểm
- Bài đăng
- bài viết
- có khả năng
- Chuẩn bị
- Vấn đề
- quá trình
- sản xuất
- tiến bộ
- dự án
- Hứa hẹn
- tài sản
- bảo vệ
- cho
- cung cấp
- Kéo
- đặt
- câu hỏi
- Nguyên
- Đọc
- thực
- đời thực
- Thực tế
- đỏ
- chuyển hướng
- Bất kể
- vẫn
- nhớ
- tẩy
- vẽ
- Trình bày
- yêu cầu
- Thông tin
- Kết quả
- trở lại
- trở về
- Trả về
- trở lại
- Giàu
- nguồn gốc
- Route
- tuyến đường
- chạy
- chạy
- tương tự
- Lưu
- nhìn thấy
- phục vụ
- định
- Bóng tối
- Chia sẻ
- chia sẻ
- nên
- hiển thị
- Đơn giản
- đơn giản
- kể từ khi
- duy nhất
- Trượt
- So
- một số
- một cái gì đó
- nguồn
- tiêu
- Bắt đầu
- bắt đầu
- ở lại
- Các bước
- Dừng
- trình
- Hỗ trợ
- Bề mặt
- hệ thống
- bàn
- TAG
- Hãy
- dùng
- Thảo luận
- Tandem
- nhắm mục tiêu
- nói
- mẫu
- Thiết bị đầu cuối
- Sản phẩm
- điều
- khắp
- thời gian
- Yêu sách
- đến
- bên nhau
- quá
- công cụ
- Chuyến du lịch
- điều trị
- đúng
- XOAY
- Bản đánh máy
- ui
- Dưới
- Cập nhật
- Cập nhật
- URL
- us
- sử dụng
- người sử dang
- giá trị
- Các giá trị
- khác nhau
- thông qua
- Xem
- chờ đợi
- muốn
- cách
- web
- thành phần web
- phát triển web
- Điều gì
- cái nào
- trắng
- sẽ
- giành chiến thắng
- không có
- quá tuyệt vời
- Công việc
- công trinh
- giá trị
- sẽ
- viết
- Bạn
- trên màn hình
- zephyrnet