La Бір бет қосымшасы бізге ДҚ-дағы негізгі операциялар циклін аяқтауға мүмкіндік береді: көмегімен жасау, оқу, жаңарту және жою Vue.js , Vue маршрутизаторлары және Laravel Framework .
Қазіргі уақытта ең танымал JS фреймворктері Angular JS және Vue JS болып табылады. Angular JS және Vue JS өте ыңғайлы және ең танымал JS фреймворктері. Ол бүкіл жобаны немесе қолданбаны бетті жаңартусыз және күшті jQuery тексеруінсіз басқаруды қамтамасыз етеді.
Vue Ларавелмен алдын ала оралған ( Ларавел Микс , негізіндегі тамаша авторлық құрал веб-пакет ) және әзірлеушілерге транспилерлер, код пакеттері, бастапқы карталар немесе қазіргі заманғы интерфейсті әзірлеудің басқа «лас» аспектілері туралы алаңдамай, күрделі бір беттік қолданбаларды құруды бастауға мүмкіндік береді.
Php 7.4
Ларавел 8.х
MySQL
Алдымен, Терминалды ашыңыз және жаңа laravel жобасын жасау үшін келесі пәрменді іске қосыңыз:
composer create-project --prefer-dist laravel/laravel crud-spa
немесе, егер сіз Laravel Installer бағдарламасын композиторлық жаһандық тәуелділік ретінде орнатқан болсаңыз:
laravel new crud-spa
Орнатқаннан кейін жобаның түбірлік каталогына өтіңіз, .env файлын ашыңыз және дерекқор мәліметтерін төмендегідей орнатыңыз:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>
Фронттік тәуелділіктерді орнату үшін келесі пәрменді іске қосыңыз:
npm install
Осыдан кейін орнатыңыз көрініс , Vue-роутер e vue-axios . Vue-axios Laravel серверлік API интерфейсін шақыру үшін пайдаланылады. Терминалда келесі пәрменді іске қосыңыз:
npm install vue vue-router vue-axios --save
Санат үлгісін, тасымалдауды және контроллерді жасаңыз. Ол үшін келесі пәрменді іске қосыңыз:
php artisan make:model Category -mcr
-mcr бұл тақырып бір пәрмен синтезін пайдаланып Үлгіні, тасымалдауды және контроллерді жасайды.
Енді санатты тасымалдау файлын ашыңыз дерекқорлар/көшіру және кодты функцияға ауыстырыңыз жоғары() :
public function up()
{
Schema::create('categories', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->text('description');
$table->timestamps();
});
}
Келесі пәрменді пайдаланып дерекқорды тасымалдаңыз:
php artisan migrate
Енді мына жерден Category.php үлгісін ашыңызapp/Models
және файлдағы кодты өңдеңіз 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'];
}
?>
Осыдан кейін ашыңыз CategoryController.php және келесідей әдістерді индекске қосыңыз, сақтаңыз, жаңартыңыз және жойыңыз:
<?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 defiоларды аяқтаңыз routes
файлдарда web.php e api.php . Қалтаға өтіңіз routes
және web.php және api.php файлын ашып, келесіні жаңартыңыз 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']);
Бұл қадамда каталогқа өтіңіз ресурс/көріністер, файлды жасаңыз app.blade.php және келесі кодты қосыңыз 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>
Бұл қадамда қалтаға өтіңіз resource/js
, қалтаны жасаңыз components
және файлдарды келесідей жасаңыз:
View app
Welcome.vue
Category/List.vue
Category/Add.vue
Category/Edit.vue
vue қолданбасы бұл біздің Vue қолданбасының негізгі файлы. Defiаяқтаймыз маршрутизатор көрінісі сол файлда. Барлық жолдар файлда пайда болады vue қолданбасы .
Файлды ашыңыз Welcome.vue
және сол файлдағы келесі кодты жаңартыңыз:
<template>
<div class="container mt-5">
<div class="col-12 text-center">
<h1>Laravel Vuejs CRUD</h1>
</div>
</div>
</template>
App.vue файлын ашып, кодты келесідей жаңартыңыз:
<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>
Содан кейін ашыңыз resource / js / components / category / List.vue
және файлға келесі кодты қосыңыз:
<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>
Осыдан кейін ашыңыз resource /js/components/category/Add.vue
және файлдағы келесі кодты жаңартыңыз:
<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>
Осыдан кейін ашыңыз resource /js/components/category/Edit.vue
және файлдағы келесі кодты жаңартыңыз:
<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>
Енді керек defiаяқтаңыз Vue routes
, және мұны істеу үшін қалтаға өтіңіз resource / js
, файлды жасаңыз route.js
және файлдағы келесі кодты жаңартыңыз:
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
}
]
Мұнда біз компоненттерді қолдандық баяу жүктеу. vue JS құрамдас бөліктердің жүктелуін басқарады lazy
жолдармен, сондықтан DOM жүйесінде құрамдастарды жолдар арқылы қажет болғанда ғана жүктей аласыз.
Енді барлық жолдарды, vue-аксиоларды және басқа тәуелділіктерді қосу керек.
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();
Терминалды ашыңыз және мына пәрменді орындаңыз:
npm run watch
php artisan serve
Сәуір жергілікті мекен: 8000 браузерде.
BlogInnovazione.it
Smart Lock Market термині өндірісті, таратуды және пайдалануды қоршаған өнеркәсіп пен экожүйені білдіреді ...
Бағдарламалық жасақтама инженериясында дизайн үлгілері бағдарламалық жасақтаманы жобалауда жиі кездесетін мәселелердің оңтайлы шешімі болып табылады. мен сияқтымын…
Өнеркәсіптік таңбалау - бұл бетінде тұрақты белгілерді жасау үшін қолданылатын бірнеше әдістерді қамтитын кең термин ...
Келесі қарапайым Excel макрос мысалдары VBA Estimated оқу уақыты арқылы жазылған: 3 минут Мысал…