La Tək Səhifə Tətbiqi bizə DB-də əsas əməliyyatlar dövrünü tamamlamağa imkan verəcək: yaratmaq, oxumaq, yeniləmək və silmək Vue.js , Vue Routers və Laravel Çərçivəsi .
Hal-hazırda ən populyar JS çərçivələri Angular JS və Vue JS-dir. Angular JS və Vue JS çox istifadəçi dostu və ən populyar JS çərçivələridir. Səhifəni yeniləmədən və güclü jQuery yoxlamadan bütün layihə və ya proqramın idarə edilməsini təmin edir.
Vue Laravel ilə əvvəlcədən qablaşdırılır ( Laravel Qarışığı , əsasında əla müəllif aləti veb-paket ) və tərtibatçılara ötürücülər, kod paketləri, mənbə xəritələri və ya müasir cəbhə inkişafının digər "çirkli" aspektləri barədə narahat olmadan mürəkkəb tək səhifəli proqramlar qurmağa başlamağa imkan verir.
Php 7.4
Laravel 8.x
MySQL
Əvvəlcə Terminalı açın və yeni laravel layihəsi yaratmaq üçün aşağıdakı əmri işlədin:
composer create-project --prefer-dist laravel/laravel crud-spa
və ya, əgər siz Laravel Installer proqramını bəstəkar qlobal asılılıq kimi quraşdırdınızsa:
laravel new crud-spa
Quraşdırıldıqdan sonra layihənin kök kataloquna gedin, .env faylını açın və verilənlər bazası təfərrüatlarını aşağıdakı kimi qurun:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>
Front-end asılılıqlarını quraşdırmaq üçün aşağıdakı əmri yerinə yetirin:
npm install
Bundan sonra quraşdırın vue , vue-router e vue-axios . Vue-axios Laravel backend API-yə zəng etmək üçün istifadə olunacaq. Terminalda aşağıdakı əmri yerinə yetirin:
npm install vue vue-router vue-axios --save
Kateqoriya şablonu, köçürmə və nəzarətçi yaradın. Bunun üçün aşağıdakı əmri yerinə yetirin:
php artisan make:model Category -mcr
-mcr bu mövzu tək komanda sintezindən istifadə edərək Model, Miqrasiya və Nəzarətçi yaradacaq.
İndi kateqoriya miqrasiya faylını açın verilənlər bazası / miqrasiya və kodu funksiyaya əvəz edin yuxarı() :
public function up()
{
Schema::create('categories', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->text('description');
$table->timestamps();
});
}
Aşağıdakı əmrdən istifadə edərək verilənlər bazasını köçürün:
php artisan migrate
İndi buradan Category.php şablonunu açınapp/Models
və fayldakı kodu redaktə edin 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'];
}
?>
Bundan sonra açın CategoryController.php və kodu indeksə əlavə edin, saxlayın, yeniləyin və aşağıdakı üsulları silin:
<?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!!'
]);
}
}
Indi defionları bitir routes
fayllarda web.php e api.php . Qovluğa keçin routes
və web.php və api.php faylını açın və aşağıdakıları yeniləyin 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']);
Bu addımda kataloqa keçin resurs/baxışlar, faylı yaradın app.blade.php və aşağıdakı kodu əlavə edin 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>
Bu addımda qovluğa keçin resource/js
, qovluğu yaradın components
və faylları aşağıdakı kimi yaradın:
View app
Welcome.vue
Category/List.vue
Category/Add.vue
Category/Edit.vue
proqram vue bu Vue tətbiqimizin əsas faylıdır. Defibitirəcəyik marşrutlaşdırıcı görünüşü həmin faylda. Bütün yollar faylda görünəcək proqram vue .
Faylı açın Welcome.vue
və həmin faylda aşağıdakı kodu yeniləyin:
<template>
<div class="container mt-5">
<div class="col-12 text-center">
<h1>Laravel Vuejs CRUD</h1>
</div>
</div>
</template>
App.vue faylını açın və kodu aşağıdakı kimi yeniləyin:
<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>
Sonra açın resource / js / components / category / List.vue
və fayla aşağıdakı kodu əlavə edin:
<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>
Bundan sonra açın resource /js/components/category/Add.vue
və faylda aşağıdakı kodu yeniləyin:
<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>
Bundan sonra açın resource /js/components/category/Edit.vue
və faylda aşağıdakı kodu yeniləyin:
<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>
İndi etməlisən defibitir Vue routes
, və bunu etmək üçün qovluğa keçin resource / js
, faylı yaradın route.js
və faylda aşağıdakı kodu yeniləyin:
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
}
]
Burada komponentlərdən istifadə etdik yavaş yükləmə. vue JS bir şəkildə komponentlərin yüklənməsini idarə edir lazy
yollarla, buna görə də DOM-da komponentləri yalnız yollar vasitəsilə lazım olduqda yükləyə bilərsiniz.
İndi bütün yolları, vue-axiosları və digər asılılıqları əlavə etməlisiniz.
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();
Terminalı açın və bu əmri yerinə yetirin:
npm run watch
php artisan serve
Aprel yerli host: 8000 brauzerdə.
BlogInnovazione.it
Smart Lock Market termini istehsal, paylama və istifadəni əhatə edən sənaye və ekosistemə aiddir ...
Proqram mühəndisliyində dizayn nümunələri proqram dizaynında tez-tez baş verən problemlərin optimal həllidir. mən kimiyəm...
Sənaye markalanması, səthində daimi işarələr yaratmaq üçün istifadə olunan bir neçə texnikanı əhatə edən geniş bir termindir ...
Aşağıdakı sadə Excel makro nümunələri VBA Təxmini oxuma müddətindən istifadə etməklə yazılmışdır: 3 dəqiqə Nümunə...