如今,一切都变成了Web应用程序。 即使是简单的网站,也都有依赖REST Api的移动应用程序。 Web应用程序可在任何地方访问-在笔记本电脑,台式机,平板电脑,移动设备上,以及最近在可穿戴设备(如智能手表)上。 一切都变得越来越小和越来越快–前端与后端越来越分离,只能通过API与服务器进行通信。
我们将要建设什么?
在本系列中,我们将创建一个照片上传应用程序。 对于前端,我们将使用EmberJs和Foundation 5 。 EmberJs是一个前端框架,具有与REST Apis的良好集成。 Foundation 5将帮助我们快速制作前端原型。 对于托管,我们将使用Heroku的免费层(有关Heroku上PHP的更多信息,请参见此处 )。 对于后端,我们将使用Laravel 。 源代码将按部分提供,并且在本系列的最后一部分以最终形式提供。 您可以在此处下载第1部分的代码。
让我们开始吧
使用Vagrant启动PHP新项目的一个好方法。 Vagrant为我们提供了从项目到项目进行大量实验的空间。 如果我想将Apache用于一个项目,将Nginx用于另一个项目,则可以有不同的PHP版本。 如果出现问题,我将恢复所有工作,然后只是vagrant up
–而且,我绝不会以其他各种安装方式污染主机操作系统。
最简单的入门方法是按照此快速提示进行操作 ,该提示将带您快速完成安装过程,并在几分钟之内向您展示可正常使用的Laravel应用程序,以便您开始黑客入侵。 如果您仍然不确定为什么要使用Homestead和Vagrant,请参阅此处 。
我的Homestead.yaml看起来像这样。
现在盒子开始运行了,我们必须安装Laravel。 首先,让我们使用ssh与盒子建立连接。
vagrant ssh
然后导航到将托管我们的应用程序的文件夹。
cd Code
在这里,我们需要下载Laravel,然后使用Composer安装依赖项。
git clone https://github.com/laravel/laravel Laravel
cd Laravel
composer install
在Composer完成所有软件包的安装之后,通过搜索localhost:8000在浏览器中进行测试。 如果您已正确完成所有操作,则将看到以下内容:
现在可以在Vagrant VM和主机操作系统中使用示例应用程序的文件,以使用自己喜欢的IDE进行编辑。
Heroku
除非另有说明,否则以下操作都是在VM内部执行的,同时使用vagrant ssh
登录。 有关Heroku在Vagrant上的详细概述和安装插件的信息,请参阅此文章 ,否则请参见下文。
如果您还没有Heroku帐户,请通过此链接创建一个帐户,然后下载Heroku Toolbelt 。 这是一个客户端cli,简化了我们与Heroku的合作。 我们可以从此cli安装插件 ,创建新项目,借助git我们还可以推动所有更改。 在Heroku上创建帐户并安装Heroku Toolbelt之后,您必须登录才能开始使用它。
heroku login
执行此命令后,我们与Heroku建立了连接。 现在我们可以在那里开始创建一个新项目。
要在Heroku上开始使用Laravel,我们需要做一些小的更改。 首先,创建一个文件并将其命名为Procfile
。 在该文件中添加此行。
web: vendor/bin/heroku-php-apache2 public
这是一个配置文件。 Heroku需要它知道它正在处理什么。 这样,我们指定了PHP和Apache。 我们还可以使用python,java,ruby,scala等。 安装Heroku Toolbelt时 ,也会安装Foreman。 它用于本地执行Procfile ,从而帮助您维护dev / prod奇偶校验 。 如果您对Procfile还能做什么感兴趣,请访问Heroku官方文档中的此链接。
如果您想改用Nginx,请参阅这篇文章 。
在Laravel的文件夹中一一执行这些命令
git init
git add .
git commit -m "initing"
第二步是从.gitignore
删除Composer.lock
。 在完成git之后,让我们回到Heroku。
heroku create
这将在Heroku上创建一个新项目。
git push heroku master
这将把一切推向Heroku。 让我们测试一下。 如果一切顺利的话,我们将看到Laravel徽标,我们在Homestead Improvementd上测试时也看到了。
如果您对rsa键有疑问,请阅读本文 。 如果您想了解有关Heroku上PHP的更多信息,请参见此处和此处 。
安装前端软件包
我们将使用Bower进行前端软件包安装。 您可以随意使用任何内容,甚至可以从Github或官方页面以zip格式下载。 导航到Laravel文件夹中的公用文件夹。
cd public
无需安装Bower,因为Homestead预先安装了nodeJs , npm和Bower 。
bower init
然后安装软件包:Foundation 5,EmberJs和Ember Data。 Ember数据是Ember使用的库,并且是独立的。 它将帮助我们将REST Api用作Rest适配器。
bower install --save zurb/bower-foundation components/ember components/ember-data
Bower已为我们安装了所有内容,包括所有依赖项。
前端骨架
让我们开始构建项目的基础。 Bower已安装依赖项并将其放入bower_components
。 我们还需要一个文件夹来放入我们的静态文件。在公共目录中创建一个名为static
的文件夹。 然后在其中创建三个文件夹: js
, css
和img
。 在js
文件夹中创建一个app.js
文件,在css
文件夹中创建一个style.css
文件。
使用Laravel启动新项目时,我总是做的第一件事是生成用于安全密码哈希的密钥。
php artisan key:generate
在app/views
创建一个新视图。 称之为index.php
。 这将是登录页面。 我们需要导入该文件中的所有javascript库和样式。
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webapp with EmberJs and Laravel4</title>
<link rel="stylesheet" href="/bower_components/foundation/css/foundation.css" />
<link rel="stylesheet" href="/static/css/style.css" />
</head>
<body>
<h1>A blank app</h1>
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/foundation/js/foundation.min.js"></script>
<script src="/bower_components/handlebars/handlebars.js"></script>
<script src="/bower_components/ember/ember.js"></script>
<script src="/static/js/app.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
这是视图的骨架–我们可以以此为基础。 这是一个一页的应用程序,使该文件成为整个应用程序中的唯一视图。 我们将使用Ember构建的所有内容都仅在此文件中。
要使用index.php
视图,我们还必须更改位于app
文件夹内的routes.php
文件。 将文件更改为此:
Route::get('/', function()
{
return View::make('index');
});
在浏览器中对其进行测试。 打开localhost:8000
。 出现一个带有标题的空白页。 如果查看检查器(ctrl + shift + i),则没有错误。 每个文件加载没有问题。 将所有更改上传到Heroku,然后查看是否可以正常运行。
git add .
git commit -m "testing"
git push heroku master
数据库配置
使用Laravel在不同环境中进行数据库配置很容易。 我们必须以在Homestead和Heroku上均可使用的方式进行配置。 在Heroku上,在创建应用程序时未安装Postgresql ,因此我们必须使用工具带进行安装。 此插件不需要您拥有信用卡:
heroku addons:add heroku-postgresql
在/app/config/database.php
将默认密钥更改为指向postgres。
'default' => 'pgsql',
Heroku和Homestead上的Postgres使用不同的配置值。 那么如何在每种情况下使用这些值? 从最初的快速技巧中 ,我们知道默认的Postgres端口是54320,而我们开发环境的用户/密码组合是homestead
/ secret
。
我们必须更改生产环境的值(在这种情况下为Heroku)。
在/app/config
创建一个名为production
的新文件夹。 复制位于/app/config/local
的database.php
并将其放在生产配置文件夹中。 还要将一份副本放入testing
文件夹中。 当您要测试应用程序时,还必须为该环境配置数据库。 Laravel默认将Homestead的配置存储在local/database.php
文件夹中。
Heroku将postgres的配置存储为环境变量。 最后,文件应如下所示。
<?php
$url = parse_url(getenv("DATABASE_URL")); // Get the environment variable
// and return it as an array
return array(
'connections' => array(
'mysql' => array(
'driver' => 'mysql',
'host' => 'localhost',
'database' => 'homestead',
'username' => 'homestead',
'password' => 'secret',
'charset' => 'utf8',
'collation' => 'utf8_unicode_ci',
'prefix' => '',
),
'pgsql' => array(
'driver' => 'pgsql',
'host' => $url["host"],
'database' => substr($url["path"], 1),
'username' => $url["user"],
'password' => $url["pass"],
'charset' => 'utf8',
'prefix' => '',
'schema' => 'public',
),
),
);
现在,可以使用迁移和播种器将psql填充数据。 使用迁移更容易维护代码和进行一些更改。
php artisan migrate:make create_users_table
将在/app/database/migrations
内部创建一个文件。 将此模式添加到up
方法中:
public function up()
{
Schema::create('users', function($table)
{
$table->increments('id');
$table->string('username');
$table->string('password');
$table->timestamps();
});
}
还要在'down'方法内添加以下行:
public function down()
{
Schema::dropIfExists('users');
}
Artisan是减少开发时间的好工具。 移民和播种者只是工匠的魔力。
php artisan migrate
这将在每个迁移文件上执行up
方法,并创建在该方法内部定义的架构。 另一方面, php artisan migrate:reset
将执行down
方法,并且在大多数情况下,将还原up
方法所做的所有更改。 如果使用up
方法创建架构,请还原down
方法中的所有内容。
现在,数据库具有一个名为“ users
的表,其结构简单。 使用Seeders,数据库将充满数据。 毕竟,最好是通过运行一个命令将数据存储在数据库中,而不是每次数据库更改时都手动进行处理。
在/app/database/seeds/
文件夹中创建UserTableSeeder.php
。
/* /app/database/seeds/UserTableSeeder.php */
class UserTableSeeder extends Seeder {
public function run()
{
Eloquent::unguard();
DB::table('users')->delete();
User::create(array(
'username' => 'foo',
'password' => Hash::make('password')
));
}
}
播种器类必须扩展Seeder
类。 另外,将此代码添加到/app/database/seed/DatabaseSeeder.php
因为在运行php artisan db:seed
时artisan不包括自定义文件。 相反,您必须使用php artisan db:seed --class=UserTableSeeder
来使用该特定类。 我更喜欢运行php artisan db:seed
并让DatabaseSeeder
完成所有工作。
/* /app/database/seeds/DatabaseSeeder.php */
class DatabaseSeeder extends Seeder {
public function run()
{
$this->call('UserTableSeeder');
}
}
这只会在users
表中添加一个用户。 需要更多用户来测试应用程序。 我们将在第2部分中对此进行处理。
在将此片段插入/app/database/seeds
DatabaseSeeder.php
内之后,运行以下命令:
php artisan db:seed
在users
表中创建了一个包含我们值的新行。
再次Heroku
我们在Homestead上有一个带有简单表的数据库。 但是可以在Heroku上进行这些更改吗? 使用git将代码在线推送并查找。
git add .
git commit -m "adding database"
git push heroku master
之后在Heroku上执行工匠。
heroku run php artisan migrate
heroku run php artisan db:seed
将heroku run
在任何php / artisan命令之前,它将起作用。 由于此环境处于生产模式,因此屏幕上会出现一个问题。 按回车键,将创建并播发用户表。 如果您有更多的种子和迁移文件,则该问题会更频繁地出现。
包起来
在本文中,我们为应用程序构建了框架。 它现在在我们的本地环境和Heroku中运行。 在处理本地开发和云开发的情况下,您可能会花费大量时间来处理配置并在两个不同环境下处于同一页面上。 接下来,我们将完成数据库的创建。 我们将使用伪造的数据生成器创建一些播种机,并使用文件系统库来处理本地文件。 敬请关注!
From: https://www.sitepoint.com/build-new-app-laravel-emberjs-vagrant/