Skip to content

Commit

Permalink
initial Vue Lumen Tutorial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
aibim committed Apr 10, 2019
0 parents commit 42f5494
Show file tree
Hide file tree
Showing 107 changed files with 18,976 additions and 0 deletions.
19 changes: 19 additions & 0 deletions .env.example
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
APP_NAME=Lumen
APP_ENV=local
APP_KEY=base64:VvFAt2v+2dKJsXAc9+JsC7k3NuMo2dAsViUZpqlI18A=
APP_DEBUG=false
APP_URL=http://localhost/
APP_TIMEZONE=UTC

LOG_CHANNEL=stack
LOG_SLACK_WEBHOOK_URL=

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=
DB_USERNAME=
DB_PASSWORD=

CACHE_DRIVER=file
QUEUE_CONNECTION=sync
8 changes: 8 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/node_modules
/vendor
.idea
package-lock.json
.DS_Store
Homestead.json
Homestead.yaml
.env
108 changes: 108 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
# Setup und Entwicklung

Um das vue-laravel Tutorial aufrufen zu können, sind folgende Schritte nötig.

1. Backend-Abhängigkeiten installieren und Datenbankschema initialisieren

Für die Backend-Abhängigkeiten wird [Composer](https://getcomposer.org) benötigt. Danach können die Abhängigkeiten installiert werden
```
composer install
```
Um die Datenbank zu konfigurieren, wird eine `.env`-Datei benötigt. Ist diese noch nicht vorhanden, kann folgender Befehl ausgeführt werden:
```
composer run-script post-root-package-install
```
Danach lassen sich die Datenbankmigrationen und die dazugehörige Befüllung mit Daten ausführen, sofern in der Datei `.env` die Datenbank korrekt hinterlegt wurde.
```
php artisan migrate
php artisan db:seed
```

2. PHP Server für die API starten

Für die API wird ein PHP-Server benötigt.
```
php -S localhost:80 -t public
```

3. Frontend-Abhängigkeiten installieren

Für die Frontend-Abhängigkeiten verwenden wir den [Node Package Manager](https://nodejs.org/en/download/).
```
npm install
```

4. webpack-dev-server starten.

Für die Entwicklung wird ein lokaler webpack-dev-server eingesetzt.
```
npm run dev
```

5. Nun kann die Anwendung aufgerufen werden.

```
http://localhost:8080
```

# Frontend // Webanwendung

Das Frontend besteht aus einer vue.js-App, die die Daten der Backend-API abruft und entsprechende dynamische Webseiten generiert. Die Dokumentation des Frameworks findet sich auf der [vue.js Website](https://vuejs.org/v2/guide).

Zum Abruf der Daten wird [Axios](https://github.com/axios/axios ) verwendet. Für die Authentifizierung wird ein entsprechender Token mitgesendet, sofern dieser im Local Storage gefunden werden kann. Das State Handling übernimmt dabei [Vuex](https://github.com/vuejs/vuex). Alle Funktionen bezüglich der Authentifizierung befinden sich unter ``public/src/js/store.js``.

## Routing

Zum Routing wird [vue-router](https://github.com/vuejs/vue-router/) genutzt. Alle Routen finden sich in ``public/src/js/router.js``. Auch wird hier vor jedem Routenaufruf geprüft, ob der Nutzer diese sehen darf und wenn nicht wird er zum Login weitergeleitet.

## Material Design mit vuetify

Um im Frontend Material Design Komponenten einsetzen zu können, wird [vuetify](https://vuetifyjs.com/en/getting-started/quick-start) eingesetzt. Dieses bindet die Material Design Icons ein. Es wird dabei 'A-la-carte' genutzt, damit nur diejenigen Komponenten gebundled werden, die auch tatsächlich im Einsatz sind. Die Styles sind als Stylus-Dateien eingebunden und können in de vue-Komponenten per SCSS überschrieben werden. Zum Beispiel:

Es gibt folgende Elemente im Frontend:

* Produkte
* Firmen
* Kontaktformular
* Login
* Adminbereich

# Backend // API

Das Backend besteht aus einer Lumen-API, die alle Daten entsprechend aufbereitet aus der MySQL-Datenbank ausgibt. Die Dokumentation des Frameworks findet sich auf der [Lumen Website](https://lumen.laravel.com/docs).

## Routen

Das Routing befindet sich in der ``routes/web.php``. Momentan gibt es folgende Endpunkte:

* ``/products`` liefert alle Produkte
* ``/products/{id}`` liefert spezifisches Produkt
* ``/companies`` liefert alle Firmen
* ``/companies/{id}`` liefert spezifische Firma incl. deren Produkte
* ``/contacts`` überträgt eine eingetragene Kontaktanfrage
* ``/private/contacts`` liefert alle eingetragenen Kontaktanfragen (zugangsgeschützt)

## Basisklassen

Die Basisklassen liegen unter ``/app`` und definieren die Entitäten und deren [Relationen](https://laravel.com/docs/5.7/eloquent-relationships).
Momentan existieren die Basisklassen für Firmen und Produkte.

## Controller

Die Controller liegen unter ``/app/Http/Controllers``. Die in den Controllern befindlichen Funktionen werden vom Routing aufgerufen
und liefern entsprechende JSON-Objekte zurück. Dabei wird sich sogenannter Ressourcen bedient, die [Collections](https://laravel.com/docs/5.7/eloquent-collections) von Entitäten zurückgeben.
Momentan existieren Controller für Produkte und für Firmen.

## Ressourcen

Die Ressourcen liegen unter ``app/Http/Resources`` und kapseln die Ausgabe der Entitäten.
In [Ressourcen](https://laravel.com/docs/5.7/eloquent-resources) wird somit definiert, welche tatsächlichen Eigenschaften der Entitäten an der Schnittstelle verfügbar sind.
Momentan existieren Resourcen für Firmen und Produkte. Die Produkte werden auch von den Firmen gewrapped.

# Release

Da im ``production``-Mode kein webpack-dev-server benutzt wird und entsprechend kein Hot Module Replacement stattfindet, müssen hier die Quellen statisch kompiliert und hinterlegt werden. Dazu folgenden Befehl aufrufen:

```
npm run build
```
33 changes: 33 additions & 0 deletions app/Company.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Company extends Model
{

/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'name', 'description'
];

/**
* The attributes excluded from the model's JSON form.
*
* @var array
*/
protected $hidden = [];

/**
* Get the products for the company.
*/
public function products()
{
return $this->hasMany('App\Product');
}
}
Empty file added app/Console/Commands/.gitkeep
Empty file.
29 changes: 29 additions & 0 deletions app/Console/Kernel.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<?php

namespace App\Console;

use Illuminate\Console\Scheduling\Schedule;
use Laravel\Lumen\Console\Kernel as ConsoleKernel;

class Kernel extends ConsoleKernel
{
/**
* The Artisan commands provided by your application.
*
* @var array
*/
protected $commands = [
//
];

/**
* Define the application's command schedule.
*
* @param \Illuminate\Console\Scheduling\Schedule $schedule
* @return void
*/
protected function schedule(Schedule $schedule)
{
//
}
}
24 changes: 24 additions & 0 deletions app/Contact.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Contact extends Model
{
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'product', 'email', 'message'
];

/**
* The attributes excluded from the model's JSON form.
*
* @var array
*/
protected $hidden = [];
}
10 changes: 10 additions & 0 deletions app/Events/Event.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<?php

namespace App\Events;

use Illuminate\Queue\SerializesModels;

abstract class Event
{
use SerializesModels;
}
16 changes: 16 additions & 0 deletions app/Events/ExampleEvent.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<?php

namespace App\Events;

class ExampleEvent extends Event
{
/**
* Create a new event instance.
*
* @return void
*/
public function __construct()
{
//
}
}
66 changes: 66 additions & 0 deletions app/Exceptions/Handler.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<?php

namespace App\Exceptions;

use Exception;
use Illuminate\Validation\ValidationException;
use Illuminate\Auth\Access\AuthorizationException;
use Illuminate\Auth\AuthenticationException;
use Illuminate\Database\Eloquent\ModelNotFoundException;
use Illuminate\Http\Response;
use Laravel\Lumen\Exceptions\Handler as ExceptionHandler;
use Symfony\Component\HttpKernel\Exception\HttpException;
use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
use Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException;

class Handler extends ExceptionHandler
{
/**
* A list of the exception types that should not be reported.
*
* @var array
*/
protected $dontReport = [
AuthorizationException::class,
HttpException::class,
ModelNotFoundException::class,
ValidationException::class,
];

/**
* Report or log an exception.
*
* This is a great spot to send exceptions to Sentry, Bugsnag, etc.
*
* @param \Exception $exception
* @return void
*/
public function report(Exception $exception)
{
parent::report($exception);
}

/**
* Render an exception into an HTTP response.
*
* @param \Illuminate\Http\Request $request
* @param \Exception $exception
* @return \Illuminate\Http\Response
*/
public function render($request, Exception $exception)
{
if (!env('APP_DEBUG')) {
if ($exception instanceof NotFoundHttpException) {
return response()->json(['error' => 'Not found.'], Response::HTTP_NOT_FOUND);
}
if ($exception instanceof MethodNotAllowedHttpException) {
return response()->json(['error' => 'Method not allowed.'], Response::HTTP_METHOD_NOT_ALLOWED);
}
if ($exception instanceof AuthenticationException) {
return response()->json(['error' => 'Unauthenticated.'], Response::HTTP_UNAUTHORIZED);
}
}

return parent::render($request, $exception);
}
}
29 changes: 29 additions & 0 deletions app/Http/Controllers/CompanyController.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<?php

namespace App\Http\Controllers;

use App\Company;
use App\Http\Resources\Company as CompanyResource;

class CompanyController extends Controller
{

/**
* Show all companies
* @return \Illuminate\Http\JsonResponse
*/
public function showAll()
{
return response()->json(Company::all());
}

/**
* Show specific company
* @param $id ID of the company
* @return \Illuminate\Http\JsonResponse
*/
public function showOne($id)
{
return response()->json(new CompanyResource(Company::find($id)));
}
}
37 changes: 37 additions & 0 deletions app/Http/Controllers/ContactController.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<?php

namespace App\Http\Controllers;

use App\Contact;
use Illuminate\Http\Request;

class ContactController extends Controller
{

/**
* Show all Contact Form entries
* @return \Illuminate\Http\JsonResponse
*/
public function showAll()
{
return response()->json(Contact::all());
}

/**
* Create new contact form request entry in datanbase and send mail
*
* @param Request $request
* @return \Illuminate\Http\JsonResponse
* @throws \Illuminate\Validation\ValidationException
*/
public function create(Request $request)
{
$this->validate($request, [
'email' => 'required|email|max:255',
'message' => 'required',
]);
$contact = Contact::create($request->all());

return response()->json($request, 201);
}
}
Loading

0 comments on commit 42f5494

Please sign in to comment.