ember.js mysql_在Vagrant中使用Laravel和EmberJS构建一个新应用

Nowadays, everything is turning into a web application. Even simple websites have a mobile app relying on a REST Api. Web applications are accessible everywhere – on a laptop, desktop, tablet, mobile, and recently on wearable devices like smartwatches. Everything is becoming smaller and faster – front ends are becoming separated from back ends, and only communicate with the server through APIs.

如今，一切都变成了Web应用程序。 即使是简单的网站，也都有依赖REST Api的移动应用程序。 Web应用程序可在任何地方访问-在笔记本电脑，台式机，平板电脑，移动设备上，以及最近在可穿戴设备(如智能手表)上。 一切都变得越来越小和越来越快–前端与后端越来越分离，只能通过API与服务器进行通信。

我们将要建设什么？ (What will we be building?)

In this series, we are going to create a photo uploading app. For the front-end, we will use EmberJs and Foundation 5. EmberJs is a front-end framework featuring good integration with REST Apis. Foundation 5 will help us make a fast prototype of our front end. For hosting, we will use Heroku’s free tier (for more information about PHP on Heroku, see here). For the back-end, we will use Laravel. The source code will be available per-part, and in final shape in the final part of this series. You can download the code for part 1 here.

在本系列中，我们将创建一个照片上传应用程序。 对于前端，我们将使用EmberJs和Foundation 5 。 EmberJs是一个前端框架，具有与REST Apis的良好集成。 Foundation 5将帮助我们快速制作前端原型。 对于托管，我们将使用Heroku的免费层(有关Heroku上PHP的更多信息，请参见此处 )。 对于后端，我们将使用Laravel 。 源代码将按部分提供，并在本系列的最后一部分以最终形式提供。 您可以在此处下载第1部分的代码。

让我们开始吧 (Let’s get started)

A good way to start a new project in PHP is using Vagrant. Vagrant gives us the space to experiment a lot from project to project. I can have different PHP versions if I want with Apache for one project, Nginx for another. If something goes bad, I revert all my work and simply vagrant up after that – and I never pollute my host operating system with various other installations.

使用Vagrant启动PHP新项目的一个好方法。 Vagrant为我们提供了从项目到项目进行大量实验的空间。 如果我想将Apache用于一个项目，将Nginx用于另一个项目，则可以有不同PHP版本。 如果出现问题，我将还原所有工作，然后再vagrant up –而且，我绝不会以其他各种安装方式污染主机操作系统。

The easiest way to get started is by following this quick tip, which will take you through a fast installation process and show you a working Laravel app in a matter of minutes so you can start hacking away. If you’re still not convinced why you should use Homestead and Vagrant, see here.

最简单的入门方法是按照此快速提示进行操作 ，该提示将带您完成快速的安装过程，并在几分钟之内向您展示可正常使用的Laravel应用程序，以便您开始******。 如果您仍然不确定为什么要使用Homestead和Vagrant，请参阅此处 。

My Homestead.yaml looks like this.

我的Homestead.yaml看起来像这样。

Now that the box is running we have have to install Laravel. Firstly, lets use ssh to make a connection with the box.

现在盒子已经运行了，我们必须安装Laravel。 首先，让我们使用ssh与盒子建立连接。

vagrant ssh

Then navigate to the folder that will host our app.

然后导航到将托管我们的应用程序的文件夹。

cd Code

Here we need to download Laravel and then install the dependencies with Composer.

在这里，我们需要下载Laravel，然后使用Composer安装依赖项。

git clone https://github.com/laravel/laravel Laravel

cd Laravel

composer install

After Composer has finished installing all the packages, test in the browser by searching for localhost:8000 . If you have done everything right you will see this:

在Composer完成所有软件包的安装之后，通过搜索localhost：8000在浏览器中进行测试。 如果您做对了所有事情，您将看到以下内容：

The files of the sample app are now available both inside the Vagrant VM and in your host operating system for editing with your favorite IDE.

现在可以在Vagrant VM和主机操作系统中使用示例应用程序的文件，以使用自己喜欢的IDE进行编辑。

Heroku (Heroku)

The below actions are all executed inside the VM, while logged in with vagrant ssh unless stated otherwise. For a more detailed overview of Heroku on Vagrant and installing of addons, see this post, otherwise, see below.

除非另有说明，否则以下操作均在VM内部执行，同时使用vagrant ssh登录。 有关Heroku在Vagrant上的详细概述和安装插件的信息，请参阅此文章 ，否则请参见下文。

If you don’t already have an account on Heroku, create one by following this link and download the Heroku Toolbelt. This is a client cli that simplifies our work with Heroku. We can install addons from this cli, create new projects and with the help of git we can also push every change. After creating an account on Heroku and installing Heroku Toolbelt you have to log in to start using it.

如果您在Heroku上还没有帐户，请通过此链接创建一个帐户，然后下载Heroku Toolbelt 。 这是一个客户端cli，简化了我们与Heroku的合作。 我们可以从此cli安装插件 ，创建新项目，借助git我们还可以推动所有更改。 在Heroku上创建帐户并安装Heroku Toolbelt之后，您必须登录才能开始使用它。

heroku login

After executing this command, we have a connection with Heroku. Now we can start creating a new project there.

执行此命令后，我们与Heroku建立了连接。 现在我们可以在那里开始创建一个新项目。

To start using Laravel on Heroku we need to do some small changes. First, create a file and name it Procfile. Add this line inside that file.

要在Heroku上开始使用Laravel，我们需要做一些小的更改。 首先，创建一个文件并将其命名为Procfile 。 在该文件内添加此行。

web: vendor/bin/heroku-php-apache2 public

This is a configuration file. Heroku needs it to know what it is dealing with. With this, we specified PHP and Apache. We can also use python, java, ruby, scala and more . When installing Heroku Toolbelt, Foreman is installed too. It is used for executing Procfiles locally, helping you maintain dev/prod parity. If you are curios as to what else a Procfile can do, follow this link from the official Heroku documentation.

这是一个配置文件。 Heroku需要它知道它正在处理什么。 这样，我们指定了PHP和Apache。 我们还可以使用python，java，ruby，scala等。 在安装Heroku Toolbelt时 ，也会安装Foreman。 它用于本地执行Procfile ，从而帮助您维护dev / prod奇偶校验 。 如果您对Procfile还能做什么感兴趣，请访问Heroku官方文档中的此链接。

If you’d like to use Nginx instead, see this post.

如果您想改用Nginx，请参阅这篇文章 。

Execute these commands one by one in Laravel’s folder

在Laravel的文件夹中一一执行这些命令

git init

git add .

git commit -m "initing"

The second step is to remove the Composer.lock from .gitignore. After we are finished with git, let’s go back to Heroku.

第二步是从.gitignore删除Composer.lock 。 在完成git之后，让我们回到Heroku。

heroku create

This creates a new project on Heroku.

这将在Heroku上创建一个新项目。

git push heroku master

This will push everything to Heroku. Let’s test it. If everything goes well then we will see the Laravel logo we also saw when we tested it on Homestead Improved.

这将把一切推向Heroku。 让我们测试一下。 如果一切顺利，那么我们将在我们在Homestead Improvements上进行测试时看到Laravel徽标。

If you have problems with the rsa keys then read this article. If you want to know more about PHP on Heroku, see here and here.

如果您对rsa键有疑问，请阅读本文 。 如果您想了解有关Heroku上PHP的更多信息，请参见此处和此处 。

安装前端软件包 (Installing front-end packages)

We’ll use Bower for front-end package installation . You are free to use anything you want, even downloading as zip from Github or from official pages. Navigate to the public folder in the Laravel folder.

我们将使用Bower进行前端软件包安装。 您可以随意使用任何内容，甚至可以从Github或从官方页面以zip格式下载。 导航到Laravel文件夹中的公用文件夹。

cd public

There’s no need to install Bower because Homestead comes with nodeJs, npm and Bower pre-installed.

无需安装Bower，因为Homestead预先安装了nodeJs ， npm和Bower 。

bower init

Then install the packages: Foundation 5, EmberJs and Ember Data. Ember data is a library used by Ember and is stand-alone. It will help us with the REST Api as a Rest Adapter.

然后安装软件包：Foundation 5，EmberJs和Ember Data。 Ember数据是Ember使用的库，并且是独立的。 它将帮助我们将REST Api用作Rest适配器。

bower install --save zurb/bower-foundation components/ember components/ember-data

Bower has installed everything for us, including all the dependencies.

Bower已为我们安装了所有内容，包括所有依赖项。

前端骨架 (Front-end skeleton)

Lets start building the fundamentals of our project. Bower has installed the dependencies and put them in bower_components. We also need a folder to put our static files in. Create a folder called static in the public directory. Then create three folders inside: js, css and img. In the js folder create an app.js file and in the css folder, a style.css file.

让我们开始构建我们项目的基础。 Bower已安装依赖项并将其放入bower_components 。 我们还需要一个文件夹来放入我们的静态文件。在公共目录中创建一个名为static的文件夹。 然后在其中创建三个文件夹： js ， css和img 。 在js文件夹中创建一个app.js文件，在css文件夹中创建一个style.css文件。

The first thing I always do when starting a new project with Laravel is to generate a key for secure password hashing.

使用Laravel启动新项目时，我总是做的第一件事是生成用于安全密码哈希的密钥。

php artisan key:generate

Create a new view in app/views. Call it index.php. This will be the landing page. We need to import all the javascript libraries and the styles inside that file.

在app/views创建一个新视图。 称之为index.php 。 这将是登录页面。 我们需要导入该文件中的所有javascript库和样式。

Webapp with EmberJs and Laravel4

A blank app

$(document).foundation();

This is the skeleton of the view – we can build from that. This is an one-page app which makes this file the only view in the entire application. Everything that we are going to build with Ember will be only in this file.

这是视图的骨架–我们可以以此为基础。 这是一个单页应用程序，使该文件成为整个应用程序中的唯一视图。 我们将使用Ember构建的所有内容都仅在此文件中。

To use the index.php view we have also to change the routes.php file located inside the app folder. Change the file to this:

要使用index.php视图，我们还必须更改位于app文件夹内的routes.php文件。 将文件更改为此：

Route::get('/', function()

{

return View::make('index');

});

Test it in your browser. Open localhost:8000. A blank page with a title will appear. If we look at the inspector (ctrl+shift+i), there are no errors. Every file loads without problems. Upload all the changes to Heroku and see if it works there.

在浏览器中对其进行测试。 打开localhost:8000 。 出现一个带有标题的空白页。 如果我们查看检查器(ctrl + shift + i)，则没有错误。 每个文件加载没有问题。 将所有更改上传到Heroku，然后查看是否可以正常运行。

git add .

git commit -m "testing"

git push heroku master

数据库配置 (Database configuration)

Database configuration with Laravel is easy when dealing with different environments. We have to configure it in a way that works both on Homestead and on Heroku. On Heroku, Postgresql is not installed when the app is created, so we have to install it using the toolbelt. This addon does not require you to have a credit card:

使用Laravel在不同环境中进行数据库配置很容易。 我们必须以在Homestead和Heroku上均可使用的方式进行配置。 在Heroku上，创建应用程序时未安装Postgresql ，因此我们必须使用工具带安装它。 此插件不需要您拥有信用卡：

heroku addons:add heroku-postgresql

In /app/config/database.php change the default key to point to postgres.

在/app/config/database.php将默认密钥更改为指向postgres。

'default' => 'pgsql',

Different config values are used for Postgres on Heroku and on Homestead. So how can these values be used in each case? From the original quick tip, we know the default Postgres port is 54320 and the user/pass combination for our development environment is homestead/secret.

Heroku和Homestead上的Postgres使用不同的配置值。 那么如何在每种情况下使用这些值？ 从最初的快速技巧中 ，我们知道默认的Postgres端口为54320，而我们开发环境的用户/密码组合是homestead / secret 。

We have to change the values for the production environment (Heroku, in this case).

我们必须更改生产环境的值(在这种情况下为Heroku)。

Create a new folder called production inside /app/config. Copy the database.php located in /app/config/local and put it in the production config folder. Also put a copy inside the testing folder. When you want to test your application, you have to configure the database for that environment, too. Laravel stores the configurations for Homestead by default in the local/database.php folder.

在/app/config创建一个名为production的新文件夹。 复制位于/app/config/local的database.php并将其放在生产配置文件夹中。 还要将一份副本放入testing文件夹中。 当您想测试您的应用程序时，您也必须为该环境配置数据库。 Laravel默认将Homestead的配置存储在local/database.php文件夹中。

Heroku stores the configuration of postgres as an environment variable. In the end, the file should look something like this.

Heroku将postgres的配置存储为环境变量。 最后，文件应如下所示。

$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',

),

),

);

Now the psql is ready to be filled with data by using migration and seeders. It is easier to maintain the code and make some changes using migration.

现在，可以使用迁移和播种器将psql填充数据了。 使用迁移更容易维护代码和进行一些更改。

php artisan migrate:make create_users_table

A file will be created inside /app/database/migrations. Add this Schema inside the up method:

将在/app/database/migrations内部创建一个文件。 将此模式添加到up方法中：

public function up()

{

Schema::create('users', function($table)

{

$table->increments('id');

$table->string('username');

$table->string('password');

$table->timestamps();

});

}

Also add this line inside the ‘down’ method:

还要在'down'方法内添加以下行：

public function down()

{

Schema::dropIfExists('users');

}

Artisan is a nice tool for cutting down development time. Migrations and seeders are just a bit of artisan magic.

Artisan是减少开发时间的好工具。 移民和播种者只是工匠的魔力。

php artisan migrate

This will execute the up method on every migration file and creates the schema defined inside that method. On the other hand, php artisan migrate:reset will execute the down method and in most cases will revert all the changes that the up method did. If you create a schema with the up method, revert everything in the down method.

这将在每个迁移文件上执行up方法，并创建在该方法内部定义的架构。 另一方面， php artisan migrate:reset将执行down方法，并且在大多数情况下，将还原up方法所做的所有更改。 如果使用up方法创建架构，请还原down方法中的所有内容。

The database now has a table called users with a simple structure. Using the Seeders the database will be filled with data. After all, it’s better to have the data in the database by running one command than doing it manually every time the database changes.

现在，数据库具有一个名为“ users的表，其结构简单。 使用Seeders，数据库将充满数据。 毕竟，最好是通过运行一个命令将数据存储在数据库中，而不是每次数据库更改时都手动进行处理。

Create UserTableSeeder.php inside /app/database/seeds/ folder.

在/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')

));

}

}

A seeder class has to extend the Seeder class. Also, add this code inside /app/database/seed/DatabaseSeeder.php because artisan doesn’t include custom files when running php artisan db:seed. Instead, you have to use php artisan db:seed --class=UserTableSeeder to use that particular class. I prefer to run php artisan db:seed and let the DatabaseSeeder do all the work.

播种器类必须扩展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');

}

}

This only adds one user inside the users table. More users are needed for testing an application. We’ll handle this in part 2.

这样只会在users表中添加一个用户。 需要更多用户来测试应用程序。 我们将在第2部分中对此进行处理。

After inserting this snippet inside DatabaseSeeder.php located in /app/database/seeds, run the following command:

在将此片段插入/app/database/seeds DatabaseSeeder.php内之后，运行以下命令：

php artisan db:seed

A new row with our values has been created inside the users table.

在users表中创建了一个包含我们值的新行。

再次Heroku (Heroku again)

We have a database with a simple table on Homestead. But can these changes be made on Heroku? Use git to push the code online and find out.

我们在Homestead上有一个带有简单表的数据库。 但是可以在Heroku上进行这些更改吗？ 使用git将代码在线推送并查找。

git add .

git commit -m "adding database"

git push heroku master

Afterwards execute artisan on Heroku.

之后在Heroku上执行工匠。

heroku run php artisan migrate

heroku run php artisan db:seed

Put heroku run before any php/artisan command and it will work. Since this environment is in production mode, a question will appear on the screen. Hit enter and the users table will be created and seeded. If you have more seeders and migration files, the question would appear more often.

将heroku run在任何php / artisan命令之前，它将起作用。 由于此环境处于生产模式，因此屏幕上会出现一个问题。 按回车，将创建并播发用户表。 如果您有更多的种子和迁移文件，则该问题会更频繁地出现。

结语 (Wrapping up)

In this article, we’ve built a skeleton for our application. It is now running in our local environment and on Heroku. In a situation where you deal with local development and cloud development, you can spend a significant amount of time dealing with configurations and being on the same page with two different environments. Next, we will finish creating the database. We’ll be creating some seeders with a fake data generator, and we’ll use a filesystem library to deal with local files. Stay tuned!

在本文中，我们为应用程序构建了框架。 现在，它正在我们的本地环境和Heroku中运行。 在处理本地开发和云开发的情况下，您可能会花费大量时间来处理配置并在两个不同环境下处于同一页面上。 接下来，我们将完成数据库的创建。 我们将使用伪造的数据生成器来创建一些播种机，并使用文件系统库来处理本地文件。 敬请关注！

翻译自: https://www.sitepoint.com/build-new-app-laravel-emberjs-vagrant/