La Taupānga Wharangi Kotahi ka tuku tatou ki te whakaoti i te huringa o nga mahi taketake i runga i te DB: hanga, panui, whakahou me te muku me Tuhinga.js , Vue Router me Anga Laravel .
I enei wa, ko nga anga JS tino rongonui ko Angular JS me Vue JS. Ko te Angular JS me te Vue JS he tino hoa-kaiwhakamahi me te tino rongonui nga anga JS. Ka whakarato i te whakahaeretanga o te kaupapa katoa, tono ranei me te kore e whakahou i te whaarangi me te whakamana jquery kaha.
Ka tae mai a Vue ki mua i te kete me Laravel (me Raravel Mix , he taputapu tuhi pai i runga kete tukutuku ) me te tuku i nga kaiwhakawhanake ki te timata ki te hanga i nga tono wharangi kotahi uaua me te kore e awangawanga mo nga kaiwhakawhitiwhiti, kohinga waehere, mapi puna me etahi atu waahanga "paru" o te whanaketanga o mua.
Php7.4
Laravel 8.x
MySQL
Tuatahi, whakatuwherahia te Terminal ka whakahaere i te whakahau e whai ake nei hei hanga kaupapa laravel hou:
composer create-project --prefer-dist laravel/laravel crud-sparanei, ki te whakauruhia e koe a Laravel Installer hei kaitito ti'aturi i te ao:
laravel new crud-spaI muri i te whakaurunga Haere ki to whaiaronga pakiaka kaupapa, whakatuwhera i te konae .env ka tautuhi i nga korero korero e whai ake nei:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>Whakahaerehia te whakahau e whai ake nei hei whakauru i nga whakawhirinaki o mua:
npm installI muri i tera, tāuta Tiro , vue-pouara e vue-axios . Ka whakamahia nga Vue-axios ki te karanga i te API o muri o Laravel. Whakahaerehia te whakahau e whai ake nei i runga i te tauranga:
npm install vue vue-router vue-axios --saveWaihangatia he tauira kāwai, hekenga me te kaiwhakahaere. Whakahaerehia te whakahau e whai ake nei mo tera:
php artisan make:model Category -mcr-mcr ma tenei kaupapa ka hanga Tauira, Hekenga me te Kaiwhakahaere ma te whakamahi i te whakahiato whakahau kotahi.
Na, whakatuwheratia te kōnae hekenga kāwai mai pātengi raraunga / hekenga me te whakakapi i te waehere ki te mahi ki runga() :
public function up()
{
Schema::create('categories', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->text('description');
$table->timestamps();
});
}Heke te pātengi raraunga mā te whakamahi i te whakahau e whai ake nei:
php artisan migrateNa, whakatuwheratia te tauira Category.php maiapp/Models me te whakatika i te waehere i roto i te konae model Kāwai.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'];
}
?>I muri i tera, tuwhera CategoryController.php me te taapiri i te waehere ki roto i te taurangi, rokiroki, whakahou me te whakakore i nga tikanga penei:
<?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 defiwhakaoti ratou routes i roto i nga kōnae tukutuku.php e api.php . Haere ki te kōpaki routes ka whakatuwheratia te kōnae web.php me te api.php me te whakahou i nga mea e whai ake nei 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']);I tenei taahiraa, haere ki te whaiaronga rauemi/tirohanga, hanga te kōnae app.blade.php me te taapiri i te waehere e whai ake nei ki 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>I tenei taahiraa, haere ki te kōpaki resource/js, hangahia te kōpaki components me te hanga i nga konae penei:
View appWelcome.vueCategory/List.vueCategory/Add.vueCategory/Edit.vuetaupānga Koia te konae matua o ta maatau taupānga Vue. Defika mutu tatou pouara-tirohanga i roto i taua kōnae. Ka puta nga ara katoa ki te konae taupānga .
Whakatuwheratia te kōnae Welcome.vue me te whakahou i te waehere e whai ake nei i roto i taua konae:
<template>
<div class="container mt-5">
<div class="col-12 text-center">
<h1>Laravel Vuejs CRUD</h1>
</div>
</div>
</template>
Whakatuwheratia te konae App.vue ka whakahou i te waehere penei:
<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>Na, tuwhera resource / js / components / category / List.vue me te taapiri i te waehere e whai ake nei ki te konae:
<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>I muri i tera, tuwhera resource /js/components/category/Add.vue me te whakahou i te waehere e whai ake nei i roto i te konae:
<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>I muri i tera, tuwhera resource /js/components/category/Edit.vue me te whakahou i te waehere e whai ake nei i roto i te konae:
<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>Inaianei, me mahi koe defimutu te Vue routes, a ki te mahi i tenei haere ki te kōpaki resource / js , hanga te kōnae route.js me te whakahou i te waehere e whai ake nei i roto i te konae:
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
}
]I konei kua whakamahia e matou nga waahanga puhoi te uta. Tuhinga o mua te whakahaere i te utaina o nga waahanga i tetahi huarahi lazy me nga huarahi, na i runga i te DOM ka taea e koe te uta i nga waahanga ina hiahiatia ana ma nga huarahi.
Inaianei me taapiri koe i nga huarahi katoa, vue-axios me etahi atu whakawhirinaki.
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();
Whakatuwherahia te tauranga ka whakahaere i tenei whakahau:
npm run watchphp artisan servePaenga-whāwhā rohe-a-rohe: 8000 i roto i te pūtirotiro.
BlogInnovazione.it
I te Mane kua hipa, i panuitia e te Financial Times tetahi mahi me OpenAI. Ka raihana a FT i tana kairipoata o te ao…
E hia miriona nga taangata e utu ana mo nga ratonga rerema, e utu ana i nga utu ohaurunga ia marama. Ko te whakaaro noa ko koe…
Ka whakarato tonu a Coveware na Veeam i nga ratonga whakautu mai i nga aitua. Ka tukuna e Coveware nga mahi whakawai me te whakatikatika…
Ko te tiaki matapae kei te huri haere i te waahanga hinu me te hau, me te huarahi auaha me te kaha ki te whakahaere tipu.…