Download Laravel App
composer create-project --prefer-dist laravel/laravel my-app
C:\xampp\htdocs\laravel10project>composer create-project laravel/laravel laravel10project
Connecting our Database
open .env file root directory.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel10db
DB_USERNAME=root
DB_PASSWORD=
Database Migration
php artisan migrate
C:\xampp\htdocs\laravel\my-app>php artisan migrate
Migration table created successfully.
check database table
Create Model and Migration
C:\xampp\htdocs\laravel\laravelproject>php artisan make:model Student -m
A new file named Student.php will be created in the app directory and database/migrations directory to generate the table in our database
app/Models/Student.php
//app/Models/Student.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Student extends Model
{
use HasFactory;
protected $fillable = [
'name',
'address',
'phone',
];
}
database\migrations\create_students_table.php
//database\migrations\create_students_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('students', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('address');
$table->string('phone')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('students');
}
};
Database Migration php artisan migrate
C:\xampp\htdocs\laravel\laravel10project>php artisan migrate
Create Controller
php artisan make:controller StudentController
C:\xampp\htdocs\laravel\my-app>php artisan make:controller StudentController --api
app/Http/Controllers/StudentController.php
//app/Http/Controllers/StudentController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Student;
class StudentController extends Controller
{
protected $student;
public function __construct(){
$this->student = new Student();
}
public function index()
{
return $this->student->all();
}
public function store(Request $request)
{
return $this->student->create($request->all());
}
public function show(string $id)
{
$student = $this->student->find($id);
}
public function update(Request $request, string $id)
{
$student = $this->student->find($id);
$student->update($request->all());
return $student;
}
public function destroy(string $id)
{
$student = $this->student->find($id);
return $student->delete();
}
}
Routes routes/api.php
//routes/api.php
<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\StudentController;
/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "api" middleware group. Make something great!
|
*/
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
return $request->user();
});
Route::apiResource('/student', StudentController::class);
Run C:\xampp\htdocs\laravel\my-app>php artisan serve Starting Laravel development server: http://127.0.0.1:8000
Vue using vite install Vue using vite
C:\xampp\htdocs\laravel\my-app> npm create vite@latest
Need to install the following packages:
create-vite@4.4.1
Ok to proceed? (y) y
√ Project name: ... vite-project
√ Select a framework: » Vue
√ Select a variant: » JavaScript
Scaffolding project in C:\xampp\htdocs\laravel\my-app\vite-project...
Done. Now run:
cd vite-project
npm install
npm run dev
PS C:\xampp\htdocs\laravel\my-app> cd vite-project
PS C:\xampp\htdocs\laravel\my-app\vite-project> npm install
PS C:\xampp\htdocs\laravel\my-app\vite-project> npm run dev
Local: http://localhost:5173/
Install axios
https://github.com/axios/axios#axios-api
PS C:\xampp\htdocs\laravel\my-app\vite-project> $ npm install axios
inside Components folder create file Student.vue
vite-project/src/components/Student.vue
//vite-project/src/components/Student.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<h3 class="text-center text-dark mt-2">Laravel 10 Vue JS Vite CRUD ( Create Read Update and Delete)</h3>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card-header">
Add Record
</div>
<div class="card-body">
<form @submit.prevent="save">
<div class="form-group">
<label>Student name</label>
<input type="text" v-model="student.name" class="form-control" placeholder="Student name">
</div>
<div class="form-group">
<label>Student Address</label>
<input type="text" v-model="student.address" class="form-control" placeholder="Student Address">
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" v-model="student.phone" class="form-control" placeholder="Phone">
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
</div>
</div>
<div class="col-md-8">
<h2>Student List</h2>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Student Name</th>
<th scope="col">Address</th>
<th scope="col">Phone</th>
<th scope="col">Option</th>
</tr>
</thead>
<tbody>
<tr v-for="student in result" v-bind:key="student.id">
<td>{{ student.id }}</td>
<td>{{ student.name }}</td>
<td>{{ student.address }}</td>
<td>{{ student.phone }}</td>
<td>
<button type="button" class="btn btn-warning" @click="edit(student)">Edit</button>
<button type="button" class="btn btn-danger" @click="remove(student)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'Student',
data () {
return {
result: {},
student:{
id: '',
name: '',
address: '',
phone: ''
}
}
},
created() {
this.StudentLoad();
},
mounted() {
console.log("mounted() called.......");
},
methods: {
StudentLoad()
{
var page = "http://127.0.0.1:8000/api/student";
axios.get(page)
.then(
({data})=>{
console.log(data);
this.result = data;
}
);
},
save()
{
if(this.student.id == '')
{
this.saveData();
}
else
{
this.updateData();
}
},
saveData()
{
axios.post("http://127.0.0.1:8000/api/student", this.student)
.then(
({data})=>{
alert("saved");
this.StudentLoad();
this.student.name = '';
this.student.address = '',
this.student.phone = ''
this.id = ''
}
)
},
edit(student)
{
this.student = student;
},
updateData()
{
var editrecords = 'http://127.0.0.1:8000/api/student/'+ this.student.id;
axios.put(editrecords, this.student)
.then(
({data})=>{
this.student.name = '';
this.student.address = '',
this.student.phone = ''
this.id = ''
alert("Updated!!!");
this.StudentLoad();
}
);
},
remove(student){
var url = `http://127.0.0.1:8000/api/student/${student.id}`;
// var url = 'http://127.0.0.1:8000/api/student/'+ student.id;
axios.delete(url);
alert("Deleted");
this.StudentLoad();
}
}
}
</script>
update App.vue vite-project/src/App.vue
//vite-project/src/App.vue <script setup> import Student from './components/Student.vue' </script> <template> <Student /> </template>Open index.html and add bootstrap url
vite-project/index.html
//vite-project/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
open vite-project/src/main.js uncomment style.css Run C:\xampp\htdocs\laravel\my-app\vite-project> npm run dev
http://localhost:5173/
