La Aplikasi Kaca Tunggal bakal ngidini kita ngrampungake siklus operasi dhasar ing DB: nggawe, maca, nganyari lan mbusak karo Vue.js , Vue Router lan Framework Laravel .
Saiki, kerangka JS sing paling populer yaiku Angular JS lan Vue JS. Angular JS lan Vue JS banget pangguna-loropaken lan paling populer frameworks JS. Nyedhiyakake manajemen kabeh proyek utawa aplikasi tanpa refresh kaca lan validasi jquery sing kuat.
Vue wis dikemas karo Laravel (bebarengan karo Laravel Mix Kab , alat authoring banget adhedhasar paket web ) lan ngidini pangembang miwiti mbangun aplikasi kaca siji sing rumit tanpa kuwatir babagan transpiler, paket kode, peta sumber utawa aspek "kotor" liyane saka pangembangan frontend modern.
Php 7.4
Laravel 8.x
MySQL
Pisanan, bukak Terminal lan jalanake perintah ing ngisor iki kanggo nggawe proyek laravel anyar:
composer create-project --prefer-dist laravel/laravel crud-spa
utawa, yen sampeyan nginstal Laravel Installer minangka ketergantungan global komposer:
laravel new crud-spa
Sawise instalasi Pindhah menyang direktori root project, bukak file .env lan setel rincian database kaya ing ngisor iki:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>
Jalanake printah ing ngisor iki kanggo nginstal dependensi ngarep:
npm install
Sawise iku, nginstal tampilan , vue-router e vue-axios . Vue-axios bakal digunakake kanggo nelpon API backend Laravel. Jalanake printah ing ngisor iki ing terminal:
npm install vue vue-router vue-axios --save
Gawe template kategori, migrasi, lan pengontrol. Jalanake perintah ing ngisor iki kanggo:
php artisan make:model Category -mcr
-mcr topik iki bakal nggawe Model, Migration lan Controller nggunakake sintesis printah siji.
Saiki, bukak file migrasi kategori saka database / migrasi lan ngganti kode menyang fungsi munggah() :
public function up()
{
Schema::create('categories', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->text('description');
$table->timestamps();
});
}
Migrasi database nggunakake printah ing ngisor iki:
php artisan migrate
Saiki, bukak template Category.php sakaapp/Models
lan ngowahi kode ing file model
Kategori.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'];
}
?>
Sawise iku, mbukak CategoryController.php lan nambah kode ing indeks, nyimpen, nganyari lan mbusak cara minangka nderek:
<?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 defirampung wong-wong mau routes
ing file web.php e api.php . Pindhah menyang folder routes
lan mbukak file web.php lan api.php lan nganyari ing ngisor iki 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']);
Ing langkah iki, pindhah menyang direktori sumber daya / views, nggawe file app.blade.php lan nambah kode ing ngisor iki kanggo 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>
Ing langkah iki, pindhah menyang folder resource/js
, nggawe folder components
lan nggawe file kaya ing ngisor iki:
View app
Welcome.vue
Category/List.vue
Category/Add.vue
Category/Edit.vue
aplikasi. vue iku file utama app Vue kita. Defikita bakal rampung tampilan router ing file kasebut. Kabeh path bakal katon ing file aplikasi. vue .
Bukak file kasebut Welcome.vue
lan nganyari kode ing ngisor iki ing file kasebut:
<template>
<div class="container mt-5">
<div class="col-12 text-center">
<h1>Laravel Vuejs CRUD</h1>
</div>
</div>
</template>
Bukak file App.vue lan nganyari kode kaya ing ngisor iki:
<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>
Banjur, mbukak resource / js / components / category / List.vue
lan tambahake kode ing ngisor iki ing file:
<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>
Sawise iku, mbukak resource /js/components/category/Add.vue
lan nganyari kode ing ngisor iki ing file:
<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>
Sawise iku, mbukak resource /js/components/category/Edit.vue
lan nganyari kode ing ngisor iki ing file:
<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>
Saiki, sampeyan kudu defirampung ing Vue routes
, lan kanggo nindakake iki pindhah menyang folder resource / js
, nggawe file route.js
lan nganyari kode ing ngisor iki ing file:
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
}
]
Ing kene kita wis nggunakake komponen loading alon. iki JS ngatur loading komponen ing cara lazy
karo path, supaya ing DOM sampeyan bisa mbukak komponen mung nalika padha needed liwat dalan.
Saiki sampeyan kudu nambah kabeh path, vue-axios lan dependensi liyane.
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();
Bukak terminal lan jalanake printah iki:
npm run watch
php artisan serve
April host lokal: 8000 ing browser.
BlogInnovazione.it
Operasi ophthalmoplasty nggunakake penampil komersial Apple Vision Pro ditindakake ing Poliklinik Catania…
Ngembangake katrampilan motorik sing apik liwat pewarnaan nyiapake bocah kanggo katrampilan sing luwih rumit kaya nulis. Kanggo mewarnai…
Sektor angkatan laut minangka kekuwatan ekonomi global sing sejatine, sing wis ngarahake pasar 150 milyar ...
Senin kepungkur, Financial Times ngumumake kesepakatan karo OpenAI. FT menehi lisensi jurnalisme kelas donya…