La Jednostránková aplikace nám umožní dokončit cyklus základních operací na DB: vytvářet, číst, aktualizovat a mazat pomocí Vue.js , routery Vue a Laravelův rámec .
V současné době jsou nejpopulárnější JS frameworky Angular JS a Vue JS. Angular JS a Vue JS jsou uživatelsky velmi přívětivé a nejoblíbenější JS frameworky. Poskytuje správu celého projektu nebo aplikace bez obnovování stránky a výkonné ověřování jquery.
Vue je dodáván v balení s Laravelem (spolu s Laravel Mix , vynikající nástroj pro tvorbu založený na webový balíček ) a umožňuje vývojářům začít budovat komplexní jednostránkové aplikace, aniž by se museli starat o transpilery, balíčky kódu, zdrojové mapy nebo jiné „špinavé“ aspekty vývoje moderního frontendu.
Php 7.4 XNUMX XNUMX
Laravel 8.x.
MySQL
Nejprve otevřete Terminál a spusťte následující příkaz k vytvoření nového projektu laravel:
composer create-project --prefer-dist laravel/laravel crud-spa
nebo pokud jste nainstalovali Laravel Installer jako globální závislost skladatele:
laravel new crud-spa
Po instalaci Přejděte do kořenového adresáře projektu, otevřete soubor .env a nastavte podrobnosti databáze následovně:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>
Spusťte následující příkaz k instalaci front-endových závislostí:
npm install
Poté nainstalujte vyhlídka , vue-router e vue-axios . Vue-axios bude použit k volání rozhraní API Laravel. Spusťte na terminálu následující příkaz:
npm install vue vue-router vue-axios --save
Vytvořte šablonu kategorie, migraci a řadič. K tomu spusťte následující příkaz:
php artisan make:model Category -mcr
-mcr toto téma vytvoří model, migraci a řadič pomocí syntézy jediného příkazu.
Nyní otevřete soubor migrace kategorií z databáze / migrace a nahraďte kód do funkce nahoru() :
public function up()
{
Schema::create('categories', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->text('description');
$table->timestamps();
});
}
Proveďte migraci databáze pomocí následujícího příkazu:
php artisan migrate
Nyní otevřete šablonu Category.php zapp/Models
a upravte kód v souboru model
Category.php:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Category extends Model {
use HasFactory;
protected $fillable = ['title','description'];
}
?>
Poté otevřete CategoryController.php a přidejte kód do metod indexování, ukládání, aktualizace a odstraňování takto:
<?php
namespace App\Http\Controllers;
use App\Models\Category;
use Illuminate\Http\Request;
class CategoryController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$categories = Category::all(['id','title','description']);
return response()->json($categories);
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$category = Category::create($request->post());
return response()->json([
'message'=>'Category Created Successfully!!',
'category'=>$category
]);
}
/**
* Display the specified resource.
*
* @param \App\Models\Category $category
* @return \Illuminate\Http\Response
*/
public function show(Category $category)
{
return response()->json($category);
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param \App\Models\Category $category
* @return \Illuminate\Http\Response
*/
public function update(Request $request, Category $category)
{
$category->fill($request->post())->save();
return response()->json([
'message'=>'Category Updated Successfully!!',
'category'=>$category
]);
}
/**
* Remove the specified resource from storage.
*
* @param \App\Models\Category $category
* @return \Illuminate\Http\Response
*/
public function destroy(Category $category)
{
$category->delete();
return response()->json([
'message'=>'Category Deleted Successfully!!'
]);
}
}
Ora defidokončit je routes
v souborech web.php e api.php . Přejděte do složky routes
a otevřete soubor web.php a api.php a aktualizujte následující routes
:
routes/web.php
<?php
Route::get('{any}', function () {
return view('app');
})->where('any', '.*');
routes/api.php
<?php
Route::resource('category',App\Http\Controllers\CategoryController::class)->only(['index','store','show','update','destroy']);
V tomto kroku přejděte do adresáře zdroj/zobrazení, vytvořte soubor app.blade.php a přidejte následující kód app.blade.php:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" value="{{ csrf_token() }}"/>
<title>Laravel Vue CRUD App</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="app">
</div>
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>
V tomto kroku přejděte do složky resource/js
, vytvořte složku components
a vytvořte soubory následovně:
View app
Welcome.vue
Category/List.vue
Category/Add.vue
Category/Edit.vue
aplikace vue je to hlavní soubor naší aplikace Vue. Defiskončíme router-view v tom souboru. Všechny cesty se zobrazí v souboru aplikace vue .
Otevřete soubor Welcome.vue
a aktualizujte následující kód v tomto souboru:
<template>
<div class="container mt-5">
<div class="col-12 text-center">
<h1>Laravel Vuejs CRUD</h1>
</div>
</div>
</template>
Otevřete soubor App.vue a aktualizujte kód následovně:
<template>
<main>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<router-link to="/" class="navbar-brand" href="#">Laravel Vue Crud App</router-link>
<div class="collapse navbar-collapse">
<div class="navbar-nav">
<router-link exact-active-class="active" to="/" class="nav-item nav-link">Home</router-link>
<router-link exact-active-class="active" to="/category" class="nav-item nav-link">Category</router-link>
</div>
</div>
</div>
</nav>
<div class="container mt-5">
<router-view></router-view>
</div>
</main>
</template>
<script>
export default {}
</script>
Poté otevřete resource / js / components / category / List.vue
a do souboru přidejte následující kód:
<template>
<div class="row">
<div class="col-12 mb-2 text-end">
<router-link :to='{name:"categoryAdd"}' class="btn btn-primary">Create</router-link>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
<h4>Category</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody v-if="categories.length > 0">
<tr v-for="(category,key) in categories" :key="key">
<td>{{ category.id }}</td>
<td>{{ category.title }}</td>
<td>{{ category.description }}</td>
<td>
<router-link :to='{name:"categoryEdit",params:{id:category.id}}' class="btn btn-success">Edit</router-link>
<button type="button" @click="deleteCategory(category.id)" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
<tbody v-else>
<tr>
<td colspan="4" align="center">No Categories Found.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:"categories",
data(){
return {
categories:[]
}
},
mounted(){
this.getCategories()
},
methods:{
async getCategories(){
await this.axios.get('/api/category').then(response=>{
this.categories = response.data
}).catch(error=>{
console.log(error)
this.categories = []
})
},
deleteCategory(id){
if(confirm("Are you sure to delete this category ?")){
this.axios.delete(`/api/category/${id}`).then(response=>{
this.getCategories()
}).catch(error=>{
console.log(error)
})
}
}
}
}
</script>
Poté otevřete resource /js/components/category/Add.vue
a aktualizujte následující kód v souboru:
<template>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4>Add Category</h4>
</div>
<div class="card-body">
<form @submit.prevent="create">
<div class="row">
<div class="col-12 mb-2">
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" v-model="category.title">
</div>
</div>
<div class="col-12 mb-2">
<div class="form-group">
<label>Description</label>
<input type="text" class="form-control" v-model="category.description">
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:"add-category",
data(){
return {
category:{
title:"",
description:""
}
}
},
methods:{
async create(){
await this.axios.post('/api/category',this.category).then(response=>{
this.$router.push({name:"categoryList"})
}).catch(error=>{
console.log(error)
})
}
}
}
</script>
Poté otevřete resource /js/components/category/Edit.vue
a aktualizujte následující kód v souboru:
<template>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4>Update Category</h4>
</div>
<div class="card-body">
<form @submit.prevent="update">
<div class="row">
<div class="col-12 mb-2">
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" v-model="category.title">
</div>
</div>
<div class="col-12 mb-2">
<div class="form-group">
<label>Description</label>
<input type="text" class="form-control" v-model="category.description">
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Update</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:"update-category",
data(){
return {
category:{
title:"",
description:"",
_method:"patch"
}
}
},
mounted(){
this.showCategory()
},
methods:{
async showCategory(){
await this.axios.get(`/api/category/${this.$route.params.id}`).then(response=>{
const { title, description } = response.data
this.category.title = title
this.category.description = description
}).catch(error=>{
console.log(error)
})
},
async update(){
await this.axios.post(`/api/category/${this.$route.params.id}`,this.category).then(response=>{
this.$router.push({name:"categoryList"})
}).catch(error=>{
console.log(error)
})
}
}
}
</script>
Teď musíte defidokončit Vue routes
a přejděte do složky resource / js
, vytvořte soubor route.js
a aktualizujte následující kód v souboru:
const Welcome = () => import('./components/Welcome.vue' /* webpackChunkName: "resource/js/components/welcome" */)
const CategoryList = () => import('./components/category/List.vue' /* webpackChunkName: "resource/js/components/category/list" */)
const CategoryCreate = () => import('./components/category/Add.vue' /* webpackChunkName: "resource/js/components/category/add" */)
const CategoryEdit = () => import('./components/category/Edit.vue' /* webpackChunkName: "resource/js/components/category/edit" */)
export const routes = [
{
name: 'home',
path: '/',
component: Welcome
},
{
name: 'categoryList',
path: '/category',
component: CategoryList
},
{
name: 'categoryEdit',
path: '/category/:id/edit',
component: CategoryEdit
},
{
name: 'categoryAdd',
path: '/category/add',
component: CategoryCreate
}
]
Zde jsme použili komponenty pomalé načítání. vue JS řídí načítání komponent způsobem lazy
s cestami, takže na DOM můžete načíst komponenty pouze tehdy, když jsou potřeba přes cesty.
Nyní musíte přidat všechny cesty, vue-axios a další závislosti.
resource / js / app.js
require('./bootstrap');
import vue from 'vue'
window.Vue = vue;
import App from './components/App.vue';
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';
import {routes} from './routes';
Vue.use(VueRouter);
Vue.use(VueAxios, axios);
const router = new VueRouter({
mode: 'history',
routes: routes
});
const app = new Vue({
el: '#app',
router: router,
render: h => h(App),
});
webpack.mix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]).vue();
Otevřete terminál a spusťte tento příkaz:
npm run watch
php artisan serve
APRI localhost:8000 v prohlížeči.
BlogInnovazione.it
Rozvíjení jemné motoriky prostřednictvím vybarvování připravuje děti na složitější dovednosti, jako je psaní. Barvit…
Námořní sektor je skutečnou globální ekonomickou velmocí, která se dostala na 150miliardový trh...
Minulé pondělí Financial Times oznámily dohodu s OpenAI. FT licencuje svou prvotřídní žurnalistiku…
Miliony lidí platí za streamovací služby a platí měsíční předplatné. Je obecný názor, že jste…