La Ühe lehe rakendus võimaldab meil lõpetada DB põhitoimingute tsükli: loomine, lugemine, värskendamine ja kustutamine Vue.js , Vue ruuterid ja Laraveli raamistik .
Tänapäeval on populaarseimad JS-i raamistikud Angular JS ja Vue JS. Angular JS ja Vue JS on väga kasutajasõbralikud ja kõige populaarsemad JS-i raamistikud. See võimaldab hallata kogu projekti või rakendust ilma lehte värskendamata ja võimsa jquery valideerimiseta.
Vue on eelpakendatud Laraveliga (koos Laraveli segu , suurepärane autoritööriist, mis põhineb veebipakk ) ja võimaldab arendajatel hakata ehitama keerulisi ühelehelisi rakendusi, muretsemata transpilerite, koodipakettide, lähtekoodide kaartide või muude tänapäevase kasutajaliidese arenduse "määrdunud" aspektide pärast.
Php 7.4 XNUMX
Laravel 8.x
MySQL
Esmalt avage terminal ja käivitage uus laraveli projekti loomiseks järgmine käsk:
composer create-project --prefer-dist laravel/laravel crud-spa
või kui installisite Laravel Installeri helilooja globaalse sõltuvusena:
laravel new crud-spa
Pärast installimist minge oma projekti juurkataloogi, avage .env-fail ja määrake andmebaasi üksikasjad järgmiselt.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>
Esiosa sõltuvuste installimiseks käivitage järgmine käsk:
npm install
Pärast seda installige vaade , vue-ruuter e vue-axios . Vue-axiosid kasutatakse Laraveli taustaprogrammi API kutsumiseks. Käivitage terminalis järgmine käsk:
npm install vue vue-router vue-axios --save
Looge kategooria mall, üleviimine ja kontroller. Käivitage selleks järgmine käsk:
php artisan make:model Category -mcr
-mcr see teema loob mudeli, migratsiooni ja kontrolleri, kasutades ühe käsu sünteesi.
Nüüd avage kategooria migratsioonifail andmebaasid / migratsioon ja asendage kood funktsiooniga üles () :
public function up()
{
Schema::create('categories', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->text('description');
$table->timestamps();
});
}
Migreerige andmebaas järgmise käsuga:
php artisan migrate
Nüüd avage mall Category.php saidiltapp/Models
ja redigeerige failis olevat koodi 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'];
}
?>
Pärast seda avage CategoryController.php ja lisage indeksisse kood, salvestage, värskendage ja kustutage meetodeid järgmiselt:
<?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!!'
]);
}
}
Nüüd defilõpeta need routes
failides web.php e api.php . Mine kausta routes
ja avage failid web.php ja api.php ning värskendage järgmist 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']);
Selles etapis minge kataloogi ressurss/vaated, looge fail app.blade.php ja lisage järgmine kood 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>
Selles etapis minge kausta resource/js
, looge kaust components
ja looge failid järgmiselt:
View app
Welcome.vue
Category/List.vue
Category/Add.vue
Category/Edit.vue
rakendus vue see on meie Vue rakenduse põhifail. Defime lõpetame ruuteri vaade selles failis. Kõik teed kuvatakse failis rakendus vue .
Avage fail Welcome.vue
ja värskendage selles failis järgmist koodi:
<template>
<div class="container mt-5">
<div class="col-12 text-center">
<h1>Laravel Vuejs CRUD</h1>
</div>
</div>
</template>
Avage fail App.vue ja värskendage koodi järgmiselt.
<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>
Seejärel avage resource / js / components / category / List.vue
ja lisage faili järgmine kood:
<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>
Pärast seda avage resource /js/components/category/Add.vue
ja värskendage failis järgmist koodi:
<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>
Pärast seda avage resource /js/components/category/Edit.vue
ja värskendage failis järgmist koodi:
<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>
Nüüd sa pead defilõpetage Vue routes
, ja selleks minge kausta resource / js
, looge fail route.js
ja värskendage failis järgmist koodi:
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
}
]
Siin oleme kasutanud komponente aeglane laadimine. vue js haldab teatud viisil komponentide laadimist lazy
teedega, nii et DOM-is saate teede kaudu komponente laadida ainult siis, kui neid vaja on.
Nüüd peate lisama kõik teed, vue-axiod ja muud sõltuvused.
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();
Avage terminal ja käivitage see käsk:
npm run watch
php artisan serve
Aprillil kohalikhost: 8000 brauseris.
BlogInnovazione.it
Veeami Coveware jätkab küberväljapressimise juhtumitele reageerimise teenuste pakkumist. Coveware pakub kohtuekspertiisi ja heastamisvõimalusi…
Ennustav hooldus muudab nafta- ja gaasisektori pöördeliseks uuendusliku ja ennetava lähenemisega tehaste juhtimisele.…
Ühendkuningriigi CMA on väljastanud hoiatuse Big Techi käitumise kohta tehisintellekti turul. Seal…
Euroopa Liidu poolt hoonete energiatõhususe suurendamiseks koostatud roheliste majade dekreet on lõpetanud oma seadusandliku protsessi…