Chinese (Simplified) (中文(简体)) translation by Quill Qian (you can also view the original English article)

你是否曾经为自己绝妙的网站创意而感到兴奋不已,却发现将它部署到服务器并让它运行起来的过程苦不堪言?在Parse.js的帮助下,任何懂一点HTML,CSS和JavaScript的人都可以很容易地创建一个动态网站或是Web应用。
这个教程将会教你从零开始使用Parse.js搭建一个博客系统。你将会使用到各种各样的Bootstrap工具,并在整个过程中将快速迭代原型、重构以及MVC框架的思想付诸实践。完成这一系列的教程之后,你应该可以能够独立搭建任何类型的CMS(内容管理系统)。
尽管我们将尽可能详细地阐述各个步骤与可能遇到的问题,这篇教程假定读者对于HTML、CSS、JavaScript/jQuery和GitHub有基本的了解。如果你对于上述工具不熟悉,可以查阅Tuts+上的相关教程。
设置开发环境
我们将从设置开发环境开始。你将需要一个本地测试服务器、一个Web服务器、一个数据服务器和版本控制工具。如前文所述,这篇教程不需要读者了解后端架构。我们将一步一步地教你来完成整个网站。如果你已经有了上述工具,可以跳过这一部分。
第1步 安装XMAPP
在试用了几种不同的解决方案之后,我发现用XAMPP来搭建本地测试服务器是最方便的,因此这篇教程中我将使用XAMPP作为本地测试服务器。
如果你还没有XAMPP,可以根据你的操作系统从这里下载相应版本并完成安装。
我使用的是Mac OS,所以从现在起我将用它来演示。如果你使用的是其他操作系统,过程应该是相似的。
安装完成后,启动XAMPP,启动"Apache Web Server".

现在如果你在浏览器中访问http://localhost/的话你可以看到XAMPP的默认页,这代表XMAPP已经成功启动运行。

第2步 创建一个新的GitHub Page
现在让我们在GitHub创建一个新的版本库(repo)。为了简洁好记,我把它命名为blog
。为了让它能够成为Web服务器,我们需要把它设置为一个GitHub Page。
首先,添加一个叫gh-pages
的新分支。

然后进入设置面板,将gh-pages
设为默认分支。

好的,然后我们打开终端,使用命令行将GitHub上的分支复制到XAMPP的htdocs
文件夹中。
$ cd /Applications/XAMPP/xamppfiles/htdocs $ git clone https://your-git-HTTPS-clone-URL-here
打开刚才你复制了Git版本库进去的文件夹,创建一个index.html
,然后在里面写入Hello World
。
$ cd blog $ echo 'hello world' > index.html
访问你的localhost,确认网页能够正常显示。

现在我们把它推送到GitHub上。
$ git add index.html $ git commit -am "Add index.html" $ git push
几分钟后,访问http://yourusername.github.io/reponame你将可以看到你的index.html
出现在了上面:)

第3步 注册Parse.js账户
GitHub Page能够托管静态页面,但是并不能实现后端动态生成页面。幸运的是,我们现在有了Parse.js。我们可以使用Parse.com作为我们的数据服务器,并使用JavaScript与它进行通信。由此,我们只需要在GitHub上托管HTML,CSS和JavaScript文件。
G如果你没有Parse.com账号,请注册一个。

现在,你已经在云端拥有了自己的数据服务器。
Bootstrap静态HTML模板
现在,让我们为要做的博客系统准备一个静态网页的版本。为了让大家能够更轻松地完成整个教程,我直接使用了Bootstrap提供的博客模板。如果你对于Bootstrap相当熟悉,或是已经有了一个设计完成的静态网页,你可以按照你自己的方式完成这一部分。如果你对于Bootstrap并不熟悉,可以按着教程继续往下做。
第1步 下载Bootstrap
首先,下载Bootstrap(我们目前使用的版本是3.2.0),解压后放到XAMPP/xamppfiles/htdocs/blog
文件夹下。

第2步 从Bootstrap基础模板开始
将下面给出的Bootstrap基础模板复制到index.html
,这个模板包含了基本的HTML结构,并且引用了bootstrap.min.css
,bootstrap.min.js
和jquery.min.js
。从这样的一个模板开始可以节约不少时间。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
刷新并确认网页能够正常显示。

第3步 复制博客模板示例
打开Bootstrap提供的博客示范:http://getbootstrap.com/examples/blog/
在网页上点击右键,选择"查看网页源代码". 我们需要将<body>
里面的所有内容复制到我们的index.html
来替换掉基础模板中的<h1>Hello, world!</h1>
。
请不要复制<script>
标签里的内容,因为我们已经有了我们所需要用到的所有JavaScript文件。
现在,你的页面应当是这样的:

第4步 复制示例博客的样式并加入到index.html中
你可能已经注意到页面的样式还没有完全正确,那是因为我们还需要一个基于bootstrap基础样式编写的样式表blog.css
。
你可以在源代码里找到它:http://getbootstrap.com/examples/blog/blog.css
把文件复制到你的blog/css
文件夹下。
在index.html
中bootstrap.min.css
下面引用这个css:
<!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/blog.css" rel="stylesheet">
在样式应该已经完全正确了。就此我们得到了我们所需要的静态模板。

设置并连接到Parse数据库
为了使我们的静态博客动态化,我们首先需要在Parse.com上为它建立一个数据库。
第1步 创建一个新应用
打开Parse.com仪表面板,点击"Create New App"(创建新应用)。
我们现在把它取名为Blog
。

创建完成之后,点选"Quickstart Guide - Data - Web - Existing project"。

第2步 在index.html中引用Parse.js
根据速成指南,首先需要在你的index.html
中引用Parse.js
。不过你可以把它放在jQuery下面而不是<head>
里面:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Parse.js --> <script src="//www.parsecdn.com/js/parse-1.2.19.min.js"></script>
第3步 测试Parse SDK
随后,根据你的Application ID和JavaScript Key在你的blog/js
文件夹下创建一个blog.js
并填入一些测试代码。你可以在速成指南中找到Application ID、JavaScript Key和测试代码:
$(function() { Parse.$ = jQuery; // Replace this line with the one on your Quickstart Guide Page Parse.initialize("W8vTW6MTre3g0ScTeyPzqc6Uzj2KZoQ6GBv0j6ZC", "VVayP3EdZ6QH0QMttzpWgeJ2if4f2m8QjA10SaFQ"); var TestObject = Parse.Object.extend("TestObject"); var testObject = new TestObject(); testObject.save({foo: "bar"}).then(function(object) { alert("yay! it worked"); }); });
保存文件,然后在index.html
里bootstrap.min.js
下方引用这一JavaScript文件。
<!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <script src="js/blog.js"></script>
再次在你的localhost中刷新index.html
,这时你应该能够看到这条弹框消息:

这代表你已经成功连接到了你在云端的数据库:)
这时如果你去查看Parse.com上你的"Data Browser"(数据浏览器)时,你可以看到你刚才创建的测试对象。

小结
到目前为止,我们搭建起了所需要的全部服务器:XAMPP作为本地测试服务器,GitHub Pages作为Web服务器,Parse.com作为数据服务器。此外,我们创建了一个基本的博客模板,并且创建了与数据库之间的连接。
在接下去的章节中,我们将会教你如何通过Parse提供的数据浏览器添加新文章,用JavaScript获取这些数据并在前端完成渲染和展示。
如果你不知道如何往下,可以查看源文件。如果你在跟着教程完成的过程中遇到了困难,请给我留言。
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post