Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

使用Parse.js搭建自己的博客

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Building Your Blog with Parse.js.
Get Started Building Your Blog with Parse.js: Working with Data

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

Final product image
What You'll Be Creating

你是否曾经为自己绝妙的网站创意而感到兴奋不已,却发现将它部署到服务器并让它运行起来的过程苦不堪言?在Parse.js的帮助下,任何懂一点HTML,CSS和JavaScript的人都可以很容易地创建一个动态网站或是Web应用。

这个教程将会教你从零开始使用Parse.js搭建一个博客系统。你将会使用到各种各样的Bootstrap工具,并在整个过程中将快速迭代原型、重构以及MVC框架的思想付诸实践。完成这一系列的教程之后,你应该可以能够独立搭建任何类型的CMS(内容管理系统)。

尽管我们将尽可能详细地阐述各个步骤与可能遇到的问题,这篇教程假定读者对于HTML、CSS、JavaScript/jQuery和GitHub有基本的了解。如果你对于上述工具不熟悉,可以查阅Tuts+上的相关教程。

设置开发环境

我们将从设置开发环境开始。你将需要一个本地测试服务器、一个Web服务器、一个数据服务器和版本控制工具。如前文所述,这篇教程不需要读者了解后端架构。我们将一步一步地教你来完成整个网站。如果你已经有了上述工具,可以跳过这一部分。

第1步 安装XMAPP

在试用了几种不同的解决方案之后,我发现用XAMPP来搭建本地测试服务器是最方便的,因此这篇教程中我将使用XAMPP作为本地测试服务器。

如果你还没有XAMPP,可以根据你的操作系统从这里下载相应版本并完成安装。

XAMPP website

我使用的是Mac OS,所以从现在起我将用它来演示。如果你使用的是其他操作系统,过程应该是相似的。

安装完成后,启动XAMPP,启动"Apache Web Server".

XAMPP - Manage Servers - Start Apache Web Server

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

Localhost when XAMPP is running

第2步 创建一个新的GitHub Page

现在让我们在GitHub创建一个新的版本库(repo)。为了简洁好记,我把它命名为blog。为了让它能够成为Web服务器,我们需要把它设置为一个GitHub Page

首先,添加一个叫gh-pages的新分支。

Add a new branch gh-pages

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

Set gh-pages as the default branch

好的,然后我们打开终端,使用命令行将GitHub上的分支复制到XAMPP的htdocs文件夹中。

打开刚才你复制了Git版本库进去的文件夹,创建一个index.html,然后在里面写入Hello World

访问你的localhost,确认网页能够正常显示。

Localhost - hello world

现在我们把它推送到GitHub上。

几分钟后,访问http://yourusername.github.io/reponame你将可以看到你的index.html出现在了上面:)

GitHub Page - hello world

第3步 注册Parse.js账户

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

G如果你没有Parse.com账号,请注册一个。

Parsecom website

现在,你已经在云端拥有了自己的数据服务器。

Bootstrap静态HTML模板

现在,让我们为要做的博客系统准备一个静态网页的版本。为了让大家能够更轻松地完成整个教程,我直接使用了Bootstrap提供的博客模板。如果你对于Bootstrap相当熟悉,或是已经有了一个设计完成的静态网页,你可以按照你自己的方式完成这一部分。如果你对于Bootstrap并不熟悉,可以按着教程继续往下做。

第1步 下载Bootstrap

首先,下载Bootstrap(我们目前使用的版本是3.2.0),解压后放到XAMPP/xamppfiles/htdocs/blog文件夹下。

Put Bootstrap in blog folder

第2步 从Bootstrap基础模板开始

将下面给出的Bootstrap基础模板复制到index.html,这个模板包含了基本的HTML结构,并且引用了bootstrap.min.cssbootstrap.min.jsjquery.min.js。从这样的一个模板开始可以节约不少时间。

刷新并确认网页能够正常显示。

Add Bootstrap basic template

第3步 复制博客模板示例

打开Bootstrap提供的博客示范:http://getbootstrap.com/examples/blog/

在网页上点击右键,选择"查看网页源代码". 我们需要将<body>里面的所有内容复制到我们的index.html来替换掉基础模板中的<h1>Hello, world!</h1>

请不要复制<script>标签里的内容,因为我们已经有了我们所需要用到的所有JavaScript文件。

现在,你的页面应当是这样的:

Add example blog template

第4步 复制示例博客的样式并加入到index.html中

你可能已经注意到页面的样式还没有完全正确,那是因为我们还需要一个基于bootstrap基础样式编写的样式表blog.css

你可以在源代码里找到它:http://getbootstrap.com/examples/blog/blog.css

把文件复制到你的blog/css文件夹下。

index.htmlbootstrap.min.css下面引用这个css:

在样式应该已经完全正确了。就此我们得到了我们所需要的静态模板。

Static template

设置并连接到Parse数据库

为了使我们的静态博客动态化,我们首先需要在Parse.com上为它建立一个数据库。

第1步 创建一个新应用

打开Parse.com仪表面板,点击"Create New App"(创建新应用)。

我们现在把它取名为Blog

Create a blog app on Parsecom

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

Parse Quickstart Guide

第2步 在index.html中引用Parse.js

根据速成指南,首先需要在你的index.html中引用Parse.js。不过你可以把它放在jQuery下面而不是<head>里面:

第3步 测试Parse SDK

随后,根据你的Application ID和JavaScript Key在你的blog/js文件夹下创建一个blog.js并填入一些测试代码。你可以在速成指南中找到Application ID、JavaScript Key和测试代码:

保存文件,然后在index.htmlbootstrap.min.js下方引用这一JavaScript文件。

再次在你的localhost中刷新index.html,这时你应该能够看到这条弹框消息:

Success alert message

这代表你已经成功连接到了你在云端的数据库:)

这时如果你去查看Parse.com上你的"Data Browser"(数据浏览器)时,你可以看到你刚才创建的测试对象。

Parse Data Browser

小结

到目前为止,我们搭建起了所需要的全部服务器:XAMPP作为本地测试服务器,GitHub Pages作为Web服务器,Parse.com作为数据服务器。此外,我们创建了一个基本的博客模板,并且创建了与数据库之间的连接。

在接下去的章节中,我们将会教你如何通过Parse提供的数据浏览器添加新文章,用JavaScript获取这些数据并在前端完成渲染和展示。

如果你不知道如何往下,可以查看源文件。如果你在跟着教程完成的过程中遇到了困难,请给我留言。

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.