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。
结论
今天,我们已经设置了所需的所有服务器:XAMPP作为本地测试服务器,GitHub Pages作为我们的网络服务器,Parse.com作为我们的数据服务器。 我们还有一个基本的博客模板,现在它已连接到数据库。
在下一节中,我将教您如何从Parse的数据浏览器中添加博客文章,如何使用JavaScript检索博客文章以及如何在前端进行渲染。
检查源文件是否卡住。 如果遇到任何困难,请发表评论。
翻译自: https://code.tutsplus.com/tutorials/get-started-building-your-blog-with-parsejs--cms-21997
js date.parse