La Forrit á einni síðu mun leyfa okkur að ljúka lotu af grunnaðgerðum á DB: búa til, lesa, uppfæra og eyða með Vue.js , Vue beinar og Laravel Framework .
Nú á dögum eru vinsælustu JS rammar Angular JS og Vue JS. Angular JS og Vue JS eru mjög notendavænir og vinsælustu JS rammar. Það veitir stjórnun á öllu verkefninu eða forritinu án þess að endurnýja síðuna og öfluga jquery staðfestingu.
Vue kemur forpakkað með Laravel (ásamt Laravel blanda , frábært höfundarverkfæri byggt á vefpakki ) og gerir forriturum kleift að byrja að byggja flókin forrit á einni síðu án þess að hafa áhyggjur af flutningsmiðlum, kóðapakka, frumkortum eða öðrum „óhreinum“ þáttum nútíma framendaþróunar.
7.4 s
Laravel 8.x
MySQL
Fyrst skaltu opna Terminal og keyra eftirfarandi skipun til að búa til nýtt laravel verkefni:
composer create-project --prefer-dist laravel/laravel crud-spa
eða, ef þú settir upp Laravel Installer sem tónskáld á heimsvísu:
laravel new crud-spa
Eftir uppsetningu Farðu í rótarskrá verkefnisins, opnaðu .env skrána og stilltu gagnagrunnsupplýsingarnar sem hér segir:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>
Keyrðu eftirfarandi skipun til að setja upp framhliðarháðirnar:
npm install
Eftir það skaltu setja upp útsýni , vue-beini e vue-axios . Vue-axios verða notuð til að kalla Laravel backend API. Keyrðu eftirfarandi skipun á flugstöðinni:
npm install vue vue-router vue-axios --save
Búðu til flokkasniðmát, flutning og stjórnandi. Keyrðu eftirfarandi skipun fyrir það:
php artisan make:model Category -mcr
-mcr þetta efni mun búa til líkan, flutning og stjórnanda með því að nota eina skipanamyndun.
Opnaðu nú flokkaflutningsskrána frá gagnagrunnar / flutningur og skiptu kóðanum inn í aðgerðina upp() :
public function up()
{
Schema::create('categories', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->text('description');
$table->timestamps();
});
}
Flyttu gagnagrunninn með eftirfarandi skipun:
php artisan migrate
Nú, opnaðu Category.php sniðmátið fráapp/Models
og breyttu kóðanum í skránni model
Flokkur.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'];
}
?>
Eftir það, opnaðu CategoryController.php og bættu kóðanum við í vísitölunni, geymdu, uppfærðu og eyddu aðferðum sem hér segir:
<?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ú defiklára þær routes
í skrám vefur.php e api.php . Farðu í möppu routes
og opnaðu web.php og api.php skrána og uppfærðu eftirfarandi 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']);
Í þessu skrefi, farðu í möppuna auðlind/skoðanir, búðu til skrána app.blade.php og bættu eftirfarandi kóða við 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>
Í þessu skrefi, farðu í möppuna resource/js
, búðu til möppuna components
og búðu til skrárnar sem hér segir:
View app
Welcome.vue
Category/List.vue
Category/Add.vue
Category/Edit.vue
app. vue það er aðalskráin í Vue appinu okkar. Defivið munum klára router-sýn í þeirri skrá. Allar slóðir munu birtast í skránni app. vue .
Opnaðu skrána Welcome.vue
og uppfærðu eftirfarandi kóða í þeirri skrá:
<template>
<div class="container mt-5">
<div class="col-12 text-center">
<h1>Laravel Vuejs CRUD</h1>
</div>
</div>
</template>
Opnaðu App.vue skrána og uppfærðu kóðann sem hér segir:
<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>
Síðan, opnaðu resource / js / components / category / List.vue
og bæta við eftirfarandi kóða í skrána:
<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>
Eftir það, opnaðu resource /js/components/category/Add.vue
og uppfærðu eftirfarandi kóða í skránni:
<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>
Eftir það, opnaðu resource /js/components/category/Edit.vue
og uppfærðu eftirfarandi kóða í skránni:
<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ú, þú verður að defikláraðu Vue routes
, og til að gera þetta skaltu fara í möppuna resource / js
, búðu til skrána route.js
og uppfærðu eftirfarandi kóða í skránni:
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
}
]
Hér höfum við notað íhluti hægur hleðsla. sjá JS stýrir hleðslu íhluta á vissan hátt lazy
með slóðum, þannig að á DOM geturðu aðeins hlaðið íhlutum þegar þeirra er þörf í gegnum slóðir.
Nú þarftu að bæta við öllum slóðum, vue-axios og öðrum ósjálfstæðum.
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();
Opnaðu flugstöðina og keyrðu þessa skipun:
npm run watch
php artisan serve
Apri staðarhús: 8000 í vafranum.
BlogInnovazione.it
Síðasta mánudag tilkynnti Financial Times um samning við OpenAI. FT leyfir heimsklassa blaðamennsku…
Milljónir manna borga fyrir streymisþjónustu og greiða mánaðarlega áskriftargjöld. Það er almenn skoðun að þú…
Coveware frá Veeam mun halda áfram að veita viðbragðsþjónustu fyrir tölvukúgun. Coveware mun bjóða upp á réttar- og úrbótamöguleika ...
Forspárviðhald er að gjörbylta olíu- og gasgeiranum, með nýstárlegri og fyrirbyggjandi nálgun við verksmiðjustjórnun.…