La Single Page Applikaasje sil tastean ús te foltôgjen in syklus fan basis operaasjes op DB: meitsje, lêze, update en wiskje mei Vue.js , Vue Router en Laravel Framework .
Tsjintwurdich binne de populêrste JS-frames Angular JS en Vue JS. Angular JS en Vue JS binne heul brûkerfreonlike en populêrste JS-ramten. It soarget foar behear fan it hiele projekt of applikaasje sûnder de side te ferfarskjen en krêftige jquery-validaasje.
Vue komt pre-ferpakt mei Laravel (tegearre mei Laravel Mix , in poerbêste skriuwersark basearre op webpack ) en lit ûntwikkelders begjinne mei it bouwen fan komplekse applikaasjes op ien side sûnder soargen te meitsjen oer transpilers, koadepakketten, boarnekaarten of oare "smoarge" aspekten fan moderne frontendûntwikkeling.
Php 7.4
Laravel 8.x
MySQL
Iepenje earst Terminal en fier it folgjende kommando út om in nij laravel-projekt te meitsjen:
composer create-project --prefer-dist laravel/laravel crud-spa
of, as jo Laravel Installer ynstallearre hawwe as komponist globale ôfhinklikens:
laravel new crud-spa
Nei ynstallaasje Gean nei jo projektrootmap, iepenje it .env-bestân en set de databankdetails as folget yn:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>
Rin it folgjende kommando út om de ôfhinklikens fan 'e front-end te ynstallearjen:
npm install
Dêrnei, ynstallearje view , vue-router e vue-axios . Vue-axio's sille wurde brûkt om de Laravel-backend API te neamen. Laad it folgjende kommando op 'e terminal:
npm install vue vue-router vue-axios --save
Meitsje in kategorysjabloan, migraasje en kontrôler. Rinne dêrfoar it folgjende kommando út:
php artisan make:model Category -mcr
-mcr dit ûnderwerp sil meitsje Model, Migraasje en Controller mei help fan ien kommando synteze.
Iepenje no it kategory migraasjebestân fan databases / migraasje en ferfange de koade yn 'e funksje op() :
public function up()
{
Schema::create('categories', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->text('description');
$table->timestamps();
});
}
Migrearje de databank mei it folgjende kommando:
php artisan migrate
No, iepenje de Category.php-sjabloan fanapp/Models
en bewurkje de koade yn it bestân 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'];
}
?>
Dêrnei, iepen CategoryController.php en foegje de koade ta yn 'e yndeks, bewarje, aktualisearje en wiskje metoaden as folget:
<?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 defiôfmeitsje harren routes
yn triemmen web.php e api.php . Gean nei map routes
en iepenje it bestân web.php en api.php en aktualisearje de folgjende 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']);
Gean yn dizze stap nei de map boarne / views, meitsje de triem app.blade.php en heakje de folgjende koade ta 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>
Gean yn dizze stap nei de map resource/js
, meitsje de map components
en meitsje de bestannen as folget:
View app
Welcome.vue
Category/List.vue
Category/Add.vue
Category/Edit.vue
app. vue it is it haadbestân fan ús Vue-app. Defiwy sille finish router-werjefte yn dat bestân. Alle paden sille ferskine yn it bestân app. vue .
Iepenje de triem Welcome.vue
en bywurkje de folgjende koade yn dat bestân:
<template>
<div class="container mt-5">
<div class="col-12 text-center">
<h1>Laravel Vuejs CRUD</h1>
</div>
</div>
</template>
Iepenje de App.vue-bestân en bywurkje de koade as folget:
<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>
Dan, iepen resource / js / components / category / List.vue
en foegje de folgjende koade ta yn it bestân:
<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>
Dêrnei, iepen resource /js/components/category/Add.vue
en bywurkje de folgjende koade yn it bestân:
<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>
Dêrnei, iepen resource /js/components/category/Edit.vue
en bywurkje de folgjende koade yn it bestân:
<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>
No, jo moatte defifinish de Vue routes
, en om dit te dwaan gean nei de map resource / js
, meitsje de triem route.js
en bywurkje de folgjende koade yn it bestân:
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
}
]
Hjir hawwe wy komponinten brûkt trage laden. Sjoch JS beheart it laden fan komponinten op in manier lazy
mei paden, dus op 'e DOM kinne jo allinich komponinten lade as se nedich binne troch paden.
No moatte jo alle paden, vue-aksio's en oare ôfhinklikens taheakje.
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();
Iepenje terminal en útfiere dit kommando:
npm run watch
php artisan serve
april lokale host: 8000 yn 'e browser.
BlogInnovazione.it
In ophthalmoplasty-operaasje mei de Apple Vision Pro kommersjele werjouwer waard útfierd by de Catania Polyclinic ...
It ûntwikkeljen fan fynmotoryske feardigens troch kleurjen taret bern op mear komplekse feardigens lykas skriuwen. Kleurje...
De marinesektor is in wiere wrâldwide ekonomyske macht, dy't navigearre is nei in merk fan 150 miljard ...
Ofrûne moandei kundige de Financial Times in deal oan mei OpenAI. FT lisinsje har sjoernalistyk fan wrâldklasse ...