Xây dựng Blog của bạn với Parse.js: Làm việc với Dữ liệu

Lần trước, bạn đã thiết lập một máy chủ cục bộ (XAMPP), một máy chủ web (GitHub Page), và một máy chủ cơ sở dữ liệu (Parse.com). Bạn cũng khởi tạo HTML của một trang blog và nhúng code Parse.js cơ bản để liên kết đến cơ sở dữ liệu. Trong phần này, tôi sẽ hướng dẫn bạn cách tạo, truy xuất và kết xuất đối tượng đầu tiên của bạn.

Nếu bạn có thể tiếp tục sử dụng Parse.com như là bảng quản trị của bạn, thì bạn có thể dễ dàng tạo ra các danh mục, các blog, các trang landing page, vân vân, cho chính bạn sau khi học phần này.

Khái niệm về Lớp và Đối tượng

Trước khi chúng ta đi sâu vào code cơ bản và biến nó thành hiện thực, hãy để tôi chắc chắn rằng bạn đã quen với các lớp và đối tượng. Một lần nữa, bạn có thể bỏ qua bước này nếu bạn đã quen thuộc với những khái niệm đó.

Theo Wikipedia:

Một lớp là "một mẫu-code-chương trình có thể được mở rộng để tạo ra các đối tượng, cung cấp các giá trị ban đầu cho trạng thái (các biến thành viên) và cài đặt các hành vi (hàm thành viên, phương thức);" và "khi một đối tượng được tạo ra bởi một hàm xây dựng của lớp, thì kết quả tạo ra được gọi là một đối tượng của lớp ".

Nếu những định nghĩa đó là quá trừu tượng đối với bạn, hãy đặt chúng trong bối cảnh của một blog.

Một lớp Blog

Hãy nghĩ về các thành phần chung của tất cả các blog. Chúng hầu như đều có một tiêu đề, một tác giả, một trang nội dung, thời điểm mà chúng được tạo ra, vân vân. Những thuộc tính được chia sẻ đó sẽ tạo ra một mẫu chung cho tất cả các blog mà chúng ta có, và đó là lớp Blog:

Một đối tượng Blog

Và khi chúng ta có lớp Blog, mỗi blog cụ thể phù hợp với mẫu này sẽ là một đối tượng của lớp Blog:

Để giúp xác định khi nào chúng ta đang đề cập đến lớp Blog và khi nào chúng ta đang đề cập đến một blog cụ thể, thì chúng ta luôn luôn viết hoa chữ đầu tiên của một lớp. Vì vậy, "Blog" đối với lớp và "blog" đối với một đối tượng của Blog. Quy tắt này áp dụng cho cả bài hướng dẫn này và cả code JavaScript bạn sẽ viết.

Đồng thời, bạn sẽ thấy rằng trên Parse.com, bạn sẽ thấy chữ "object (đối tượng)" rất nhiều. Trong ngữ cảnh này, chúng ta sẽ sử dụng quy tắc viết hoa chữ cái đầu tiên và sử dụng từ "object" cho đối tượng và "Object" cho lớp. Bạn sẽ sớm được sử dụng nó.

Bảng Blog

Bởi vì một lớp định nghĩa tất cả các thuộc tính mà đối tượng của nó có, nên thật dễ dàng để lưu trữ tất cả các đối tượng của một lớp nhất định trong một bảng: mỗi thuộc tính sẽ là một cột, và mỗi đối tượng sẽ là một hàng:

Và đây chính xác là cách bạn sẽ lưu trữ dữ liệu trên Parse.com

Tạo lớp Blog

Bây giờ hãy đi đến và tạo ra nó trên Parse.com.

Bước 1: Thêm một lớp Blog

Đầu tiên, vào bảng điều khiển trên Parse.com, tìm dự án của bạn và đi đến "Core" - "Data" (trước đây là Data Browser). Sau đó, bấm vào nút "Add Class."

Như bạn có thể thấy trong ảnh chụp màn hình, bạn cần phải tạo một lớp tùy biến cho blog của bạn. Hãy đặt tên cho nó Blog. Bạn luôn muốn tên các lớp của bạn để được rõ ràng và nói lên những gì chúng lưu trữ.

Và như bạn thấy, bây giờ bạn có một lớp tùy biến rỗng trên Parse.com:

Mỗi lớp tùy biến sẽ có bốn thuộc tính hệ thống:

• objectId - một định danh duy nhất tự động được tạo ra bởi Parse khi một đối tượng mới được tạo ra. Bằng cách đó, chương trình luôn luôn biết đối tượng mà bạn đang đề cập đến. (Như bạn có thể thấy, ở đây đối tượng có nghĩa là một thể hiện.)
• createdAt - một mốc thời gian tự động được tạo ra bởi Parse khi bạn lần đầu tiên tạo ra một đối tượng.
• updatedAt - một mốc thời gian tự động được tạo và cập nhật bởi Parse mỗi khi bạn cập nhật đối tượng đó.
• ACL - một danh sách điều khiển truy cập cấp độ đối tượng xác định những người có thể đọc và ghi vào đối tượng đó. Nếu không xác định, nó mặc định kiểm soát truy cập cấp độ lớp. Chúng ta sẽ thảo luận về nó trong phần sau. Bây giờ bạn chỉ cần để nó trống.

Bước 2: Thêm cột vào lớp Blog

Tiếp theo, hãy chuyển đến và tạo ra các cột cho các thuộc tính định nghĩa một blog. Để giữ cho nó càng đơn giản càng tốt, chúng ta chỉ cần tạo hai cái: title và content.

Nhấn vào nút "+ Col" để tạo một cột mới. Thiết lập type thành "String" và đặt tên nó là title.

Lặp lại quá trình tương tự và tạo ra một cột content, cũng thiết lập kiểu là "String".

Bước 3: Thêm một số Blog

Đã đến lúc để thêm một số blog! Nhấn vào nút "+ Row" và nhấp đúp vào các ô title và content để thêm một số nội dung:

Lưu ý rằng bạn cũng có thể đặt cú pháp HTML trong cột content. Trong thực tế, tất cả các cột String có thể lưu trữ một cách chính xác cú pháp HTML. Tuy nhiên, hãy nhớ đừng quá lạm dụng nó. Trong trường hợp này, cột title có lẽ không nên chứa cú pháp HTML.

Như tôi đã đề cập từ trước, vì Parse.com cho phép bạn thao tác cơ sở dữ liệu của bạn như thế này, nên bạn hoàn toàn có thể sử dụng nó như là bảng quản trị của bạn nếu bạn không muốn phải viết của riêng bạn. Và một khi bạn tìm hiểu cách để tạo dữ liệu trên trang web của bạn, bạn có thể dễ dàng tạo ra một blog hoặc danh mục động của riêng bạn. Chuyển sang phần tiếp theo, tôi sẽ cho bạn thấy cách để làm điều đó.

Truy vấn dữ liệu Blog

Quay trở lại tập blog.js của bạn. Đã đến lúc để đưa ra các code kiểm tra và truy vấn những dữ liệu blog từ Parse.com về trang web của bạn!

Đầu tiên, mở rộng một lớp JavaScript từ lớp Blog trên Parse.com:

1

var Blog = Parse.Object.extend("Blog");

Hãy nghĩ về một trang chủ blog, bạn có thể muốn có được một danh sách các blog cùng một lúc. Danh sách các đối tượng của cùng một lớp đó được gọi là một collection của Parse. Chúng ta đồng thời định nghĩa rằng:

1

var Blogs = Parse.Collection.extend({

2

    model: Blog

3

});

Chú ý rằng cả Blog và Blogs là các lớp. Chúng là những template trừu tượng cho các blog và các phân loại của blog. Bạn có thể có khác, các blog cụ thể, và collection của các blog. Đó là những đối tượng của chúng.

Vì vậy, bây giờ, để có một collection thực sự của tất cả các blog mà bạn đã thêm vào Parse.com, bạn cần phải tạo ra một đối tượng mới của collection Blogs (chú ý rằng các chữ cái đầu tiên không được viết hoa ở đây):

1

var blogs = new Blogs();

Nếu chúng ta không chỉ định bất cứ điều gì và chỉ cần lấy collection mới đó cùng với dữ liệu, nó sẽ nhận được tất cả các hàng trong bảng Blog theo mặc định.

Hãy lấy và log nó vào giao diện dòng lệnh:

1

blogs.fetch({

2

  success: function(blogs) {

3

		console.log(blogs);

4

	},

5

	error: function(blogs, error) {

6

		console.log(error);

7

	}

8

});

Tải trang web trên máy chủ cục bộ của bạn một lần nữa, và kiểm tra giao diện dòng lệnh của bạn trong developer tools, bạn sẽ có thể thấy điều này:

Bây giờ bạn có dữ liệu!

Hiển thị dữ liệu trên trang

Trước khi chúng ta hiển thị dữ liệu blog trên trang, chúng ta cần phải chuẩn bị một template HTML cho điều đó.

Bước 1: Làm sạch HTML

Làm sạch tất cả mọi thứ trong .blog-main và thay thế cho điều đó bằng một container đơn giản:

1

<div class="col-sm-8 blog-main">

2

	<div class="main-container"></div>

3

</div>

Sau đó, nếu bạn nhìn vào template blog ban đầu, bạn sẽ thấy cấu trúc HTML của một bài duy nhất có thể được đơn giản hóa như thế này:

1

<div class="blog-post">

2

    <h2 class="blog-post-title"><a href="#">A title</a></h2>

3

	<p class="blog-post-meta">At time by an author</p>

4

	<div>Some content</div>

5

</div>

Tất cả những gì chúng ta muốn là thay thế các văn bản với các dữ liệu của mỗi blog mà chúng ta có trên Parse.com.

Bước 2: Chuẩn bị Template Blog

Để làm điều đó, đầu tiên chúng ta cần phải thay đổi HTML thành một template, trong đó có một đối tượng dữ liệu và thay đổi nó thành một chuỗi của HTML.

Chúng ta muốn template lấy một mảng của các blog:

1

[{

2

    title: 'Hello World',

3

	content: 'The first blog post!'

4

}, {

5

	title: 'Second Blog',

6

	content: '<p>You can put HTML in content, too.</p>'

7

}, ...]

Và kết xuất nó như là HTML giống thế này:

1

<div class="blog-post">

2

    <h2 class="blog-post-title"><a href="#">Hello World</a></h2>

3

	<p class="blog-post-meta">At time by an author</p>

4

	<div>The first blog post!</div>

5

</div>

6

<div class="blog-post">

7

	<h2 class="blog-post-title"><a href="#">Second Blog</a></h2>

8

	<p class="blog-post-meta">At time by an author</p>

9

	<div><p>You can put HTML in content, too.</p></div>

10

</div>

Tôi sẽ cho bạn thấy cách làm thế nào để sử dụng handlebars.js để làm điều đó trong hướng dẫn này, nhưng bạn cũng có thể sử dụng underscore.js, mustache, hay các template khác mà bạn thích.

Để sử dụng handlebars.js, trước tiên hãy thêm nó vào index.html dưới parse.js:

1

<!-- Handlebars.js -->

2

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>

Sau đó, chúng ta hãy làm sạch HTML của một bài post và đặt nó trong một thẻ <script> đặc biệt cho handlebars ở bên trên thẻ <script> cho các tập tin JavaScript. Đồng thời hãy cung cấp cho nó id #blogs-tpl. Bằng cách này, handlebars sẽ biết rằng đó là một template, và bạn sẽ có một cách để tham chiếu đến nó:

1

<script id="blogs-tpl" type="text/x-handlebars-template">

2

    <div class="blog-post">

3

		<h2 class="blog-post-title"><a href="#">A title</a></h2>

4

		<p class="blog-post-meta">At time by an author</p>

5

		<div>Some content</div>

6

	</div>

7

</script>

Tiếp theo, để cho handlebars biết rằng nơi để đặt title và content, bạn cần phải thay đổi "A title" thành {{title}} và "Some content" thành {{{content}}}. Handlebars.js xác định nội dung trong "hai cặp dấu ngoặc nhọn" {{}} như là các biến.

1

<script id="blogs-tpl" type="text/x-handlebars-template">

2

    <div class="blog-post">

3

		<h2 class="blog-post-title"><a href="#">{{title}}</a></h2>

4

		<p class="blog-post-meta">At time by an author</p>

5

		<div>{{{content}}}</div>

6

	</div>

7

</script>

Lưu ý đối với nội dung, chúng ta sử dụng {{{}}} thay vì {{}}. Đó là bởi vì handlebars.js HTML-bỏ qua các giá trị mặc định. Sử dụng "ba cặp dấu ngoặc nhọn" {{{}}} giữ tất cả các cú pháp HTML trong nội dung.

Thay đổi cuối cùng mà bạn cần thực hiện đới với #blogs-tpl là bọc template blog trong {{#each blog}} {{/each}}, để nó lấy một mảng của các đối tượng và kết xuất chúng từng cái một:

1

<script id="blogs-tpl" type="text/x-handlebars-template">

2

    {{#each blog}}

3

	<div class="blog-post">

4

		<h2 class="blog-post-title"><a href="#">{{title}}</a></h2>

5

		<p class="blog-post-meta">At time by an author</p>

6

		<div>{{{content}}}</div>

7

	</div>

8

	{{/each}}

9

</script>

Bước 3: Kết xuất Blog

Bây giờ chúng ta có một template, chúng ta hãy quay trở lại blog.js và kết xuất các blog trên trang.

Để làm điều đó, bạn sẽ tạo ra một View collection blog. Khái niệm về một View là từ kiến trúc MVC (model-view-controller), và Parse thực hiện theo khuôn mẫu đó. Tôi sẽ không đi sâu vào MVC ở đây. Chỉ cần biết rằng một đối tượng view cho một collection blog tạo ra HTML cho nó và xử lý tất cả các sự kiện của nó. Và một lớp View là template trừu tượng cho đối tượng đó.

Nó có thể gây nhầm lẫn trong lúc này, nhưng nó sẽ rõ ràng hơn khi chúng ta viết code. Hãy viết một lớp BlogsView:

1

var BlogsView =  Parse.View.extend({

2

    template: Handlebars.compile($('#blogs-tpl').html()),

3

	render: function(){ 

4

		var collection = { blog: this.collection.toJSON() };

5

		this.$el.html(this.template(collection));

6

	}

7

});

Cũng giống như cách chúng ta thừa kế lớp Blog từ Parse.Object và lớp Blogs từ Parse.Collection, bạn có thể chỉ cần thừa kế một lớp View mới từ Parse.View để nó có tất cả các giá trị và hàm được định trước từ Parse.

Ở đây, biến template lấy template mà chúng ta đã chuẩn bị trước. Sau đó, hàm render() lấy dữ liệu trong this.collection, chuyển đổi nó sang định dạng JSON, kết xuất nó với template handlebars, và gán nó vào this.$el.

Tiếp theo, hãy thay đổi hàm callback success của blogs.fetch() để tạo ra một đối tượng mới của BlogsView, kết xuất đối tượng mới, và đặt nó trong $('.main-container') trên trang.

1

success: function(blogs) {

2

    var blogsView = new BlogsView({ collection: blogs });

3

	blogsView.render();

4

	$('.main-container').html(blogsView.el);

5

}

Lưu ý khi bạn tạo ra một đối tượng mới của BlogsView, bạn truyền vào blogs dữ liệu các blog mà bạn nhận được từ máy chủ Parse, giá trị đó trở thành this.collection cho hàm render(). Và khi bạn đặt HTML trong $('.main-container'), bạn sử dụng giá trị của blogsView.el, đó là nội dung của this.$el, được tạo ra bởi các hàm render(). (Ở đây blogsView.$el = $(blogsView.el)) Đó là cách mà lớp View và đối tượng view hoạt động.

Bây giờ hãy làm mới trang: http://localhost/blog/

Và nó hoạt động! Bây giờ bạn chỉ cần đẩy nó lên GitHub Page của bạn và có một trang web với nội dung động! Nếu bạn dành một chút thời gian để thay đổi template blog và thay đổi một ít code, thì bạn có thể dễ dàng tạo ra trang danh mục và các trang web với nội dung khác.

Tổng kết

Hôm nay, bạn đã tạo ra lớp đầu tiên của bạn trên Parse.com. Bạn cũng đã biết cách làm thế nào để thêm nội dung vào trong lớp đó trên Parse.com và cách để kết xuất nó vào trang web của bạn. Có thể có một vài khái niệm mới đối với bạn, nhưng tôi chắc chắn bạn sẽ làm quen với chúng sớm thôi.

Trong phần tiếp theo, chúng ta sẽ bắt đầu xây dựng trang quản trị cho hệ thống blog. Bạn sẽ tạo ra lớp thứ hai của bạn - lớp User. Bạn cũng sẽ tìm hiểu cách để xử lý người dùng đăng nhập, và tạo ra hai view mới: view đăng nhập và view chào đón. Vì vậy hãy tiếp tục theo dõi, rất nhiều kỹ năng tốt sẽ đến với bạn.

Tôi nghĩ các bạn có thể có rất nhiều niềm vui với những gì bạn đã học được trong phần này. Hãy cho tôi biết hướng dẫn này có giúp bạn tạo ra bất cứ điều gì hay không. Và như mọi khi, hãy kiểm tra tập tin mã nguồn nếu bạn đã bị vướn và để lại một bình luận nếu bạn gặp bất kỳ khó khăn nào.