js date.parse_开始使用Parse.js构建博客-CSDN博客

js date.parse

您是否曾经对Web项目的想法感到兴奋，但发现使它在服务器上运行和运行很痛苦？借助Parse.js，任何了解HTML，CSS和JavaScript基础的人都可以轻松创建动态网站和可运行的Web应用程序。

在本教程中，我将引导您完成从头开始使用Parse.js创建博客系统的整个过程。您将利用所有自举工具，并真正实践快速原型制作，重构和MVC框架的想法。在本系列文章的最后，您应该可以自己创建任何CMS网站。

尽管本教程试图尽可能详细，但它确实假设了有关HTML，CSS，JavaScript / jQuery和GitHub的基础知识。如果您不熟悉上述工具，那么您可以在Tuts +上找到很多很棒的教程。

设置开发环境

让我们从设置开发环境开始。您将需要适当的本地测试服务器，Web服务器，数据服务器和版本控制。如前所述，本教程不需要任何有关后端的知识。我将逐步引导您。如果您已经准备好了这些部分，请随时跳过此部分。

步骤1：安装XAMPP

在尝试了几种不同的解决方案之后，XAMPP仍然是设置我发现的本地测试服务器的最简单方法。因此，在本教程中，我将XAMPP用作本地测试服务器。

如果尚未安装，请从此处下载XAMPP 开始。选择适合您的系统的一个并安装它。

我在这里使用Mac，因此从现在开始将以Mac为例。如果使用其他操作系统，则过程应该非常相似。

安装后，启动XAMPP，然后启动“ Apache Web Server ”。

现在，如果您在浏览器中访问http：// localhost / ，则应该看到此默认XAMPP页面。这意味着它已经启动并正在运行！

步骤2：建立新的GitHub页面

继续，让我们在GitHub上创建一个新的git repo。我称它为blog只是为了让我简短明了。为了使其能够用作网络服务器，我们需要将其设置为GitHub Page 。

首先，添加一个新分支gh-pages 。

然后转到设置，将gh-pages设置为默认分支。

大。现在，进入命令行，并将该分支在GitHub上克隆到XAMPP的htdocs文件夹中。

$ cd /Applications/XAMPP/xamppfiles/htdocs
$ git clone https://your-git-HTTPS-clone-URL-here

导航到您刚刚克隆的Git repo文件夹，创建一个简单的index.html文件，然后在其中写入Hello World 。

$ cd blog
$ echo 'hello world' > index.html

检查您的本地主机，并确保其正常运行。

大。然后，将其推送到GitHub。

$ git add index.html
$ git commit -am "Add index.html"
$ git push

转到http://yourusername.github.io/reponame ，花几分钟，您将看到index.html现已启用:)

步骤3：在Parse.com上获取您的帐户

将静态内容托管在GitHub Page上非常容易，但是当涉及到后端时，GitHub Page可能会变得棘手。幸运的是，我们现在有了Parse.js。我们可以将Parse.com用作我们的数据服务器，并与它进行JavaScript通信。这样，我们只需要在GitHub上托管HTML，CSS和JavaScript文件即可。

如果尚未注册，请继续在Parse.com上注册。

现在，您可以将数据服务器存储在云中。

Bootstrap静态HTML模板

现在，让我们准备要制作的博客系统的静态版本。为了向您展示引导过程的速度，我将仅使用Bootstrap中的示例博客模板。同样，如果您已经对Bootstrap非常熟悉，或者您已经设计了一个静态网站，请随时按照自己的方式进行操作。如果您不熟悉Bootstrap，请继续。

步骤1：下载Bootstrap

首先，下载Bootstrap （当前我们正在使用3.2.0版），将其解压缩，然后将其内容放在XAMPP/xamppfiles/htdocs/blog文件夹中。

步骤2：从Bootstrap的基本模板开始

然后，编辑index.html以具有Bootstrap的基本模板。它提供了基本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

请注意，样式尚不正确。这是因为我们需要blog.css ，它是基于引导基本样式构建的特定于博客的样式表。

继续从源代码中找到它： http : //getbootstrap.com/examples/blog/blog.css

复制该文件，然后放入您的blog/css文件夹。

将其链接到 bootstrap.min.css 下面的 index.html 中：

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/blog.css" rel="stylesheet">

现在样式应该正确，并且我们已经准备好静态模板。

设置并连接到解析数据库

为了使我们的静态博客动态化，我们需要首先在Parse.com上设置它自己的数据库。

步骤1：建立新的应用程式

转到Parse.com仪表板，然后单击“ 创建新应用 ”。

现在将其称为Blog 。

创建完成后，请转到“ 快速入门指南-数据-Web-现有项目 ”

步骤2：在index.html中添加Parse.js

按照《快速入门指南》，首先将Parse.js添加到index.html 。但是，您可以将其放在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：测试解析SDK

blog.js ，使用您的应用程序ID和JavaScript密钥以及一些测试代码在blog/js文件夹下创建一个blog.js 它们都可以在《快速入门指南》中找到：

$(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");
	});

});

保存它，并将此JavaScript文件链接到bootstrap.min.js的index.html中。

<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/blog.js"></script>

现在，再次刷新本地主机上的index.html ，您应该能够看到以下警报消息：

这意味着现在您已连接到云中的Blog数据库：）

如果现在在Parse.com上检查“ 数据浏览器 ”，您将看到刚刚创建的TestObject。