Laravel 11 CRUD:创建、读取、更新、删除的有趣旅程

Laravel 11 已经发布了 今天,我们将从头开始创建一个 CRUD 应用程序 在本文结束时,您将了解如何创建引导表单、处理用户输入、提交表单数据、将数据保存到数据库、更新数据以及从数据库中删除记录。

CRUD 听起来像是床底下的怪物,但它是 Web 应用程序的基础。

我们正在讨论创建、读取、更新和删除功能。 没有它们,我们的应用程序就会像没有音乐的聚会一样空虚。 谁想要那个? 那么,让我们直接进入正题:

这是分步指南:

第 1 步:安装 Laravel 11

要全局安装 Laravel,请使用以下命令:

composer global require laravel/installer

现在,我们将创建一个新的 Laravel 应用程序:

laravel new laravel11crud

安装新的 Laravel项目

安装后,进入项目内部,打开终端,启动开发服务器:

php artisan serve

它将启动一个开发服务器:http://localhost:8000

这是屏幕截图:

Laravel 11.0.7 主屏幕截图

第2步:配置数据库

您需要在 MySQL (phpmyadmin) 中创建一个新数据库:

创建 MySQL 数据库

创建数据库后,您将看到如下内容:

数据库截图

我们的下一步是将 Laravel 应用程序连接到该数据库。

为此,我们需要修改 .env 文件。 转到 Laravel项目的根目录并打开 .env 文件,您将看到如下选项:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=
DB_DATABASE=
DB_USERNAME=
DB_PASSWORD=

您必须根据上面代码片段中的系统配置编写数据库凭据。

确保您拥有正确的端口、数据库、用户名和密码。

第三步:创建数据库表

我们将创建一个包含三列的员工表。

要在 Laravel 中创建表,您必须创建迁移文件。

这是创建迁移的命令:

php artisan make:migration create_employees_table

创建迁移文件的屏幕截图

转到数据库 >> 迁移文件夹以查看 2024_03_20_094408_create_employees_table.php 文件。

在这里,您需要为表添加列:

 public function up(): void
 {
   Schema::create('employees', function (Blueprint $table) {
     $table->id();
     $table->string('name');
     $table->string('position');
     $table->integer('salary');
     $table->timestamps();
   });
 }

在这里,我们添加了三列:

  1. 名称(字符串)
  2. 位置(字符串)
  3. 工资(整数)

现在,您需要运行迁移文件以在数据库中创建一个表。

创建员工表

前往 phpmyadmin 并检查数据库:

MySQL 中的员工表

这也意味着我们成功地将 Laravel 应用程序连接到 MySQL 数据库。

第四步:配置vite

Vite 是一种现代前端构建工具,可提供极快的开发环境并捆绑您的生产代码。

构建 Laravel 应用程序时,您应该使用 Vite 捆绑 CSS 和 JS 文件以获取生产就绪的资源。

要安装 vite 和其他 JavaScript 依赖项,您需要安装 node.js 和 npm 包管理器:

要验证您的计算机上是否安装了 node.js,请使用以下命令:

node -v

npm -v

我已经安装了 Node.js 和 npm,这样它会给我这样的输出:

v21.6.1 (Node.js version)
 
10.5.0 (NPM version)

现在,转到 laravel11crud项目的根目录,打开终端或 cmd,然后键入以下命令来安装依赖项:

npm install

它将安装所有与前端相关的依赖项。

现在,使用以下命令运行脚手架:

npm run dev

第5步:创建资源控制器

Laravel 资源路由使用一行代码将典型的“CRUD”路由分配给控制器。

php artisan make:controller EmployeeController --resource

它将创建一个 EmployeeController.php 文件。

现在,在routes >> web.php 文件中注册这个资源控制器。

要查看资源控制器创建了哪些路由,请转到终端并键入以下命令以查看列表:

php artisan route:list

验证资源路由

第 6 步:创建视图

在 Laravel 中,视图包含应用程序提供的 HTML,并将控制器/应用程序逻辑与表示逻辑分开。 视图存储在 resources/views 目录中。

在views目录中创建一个名为layout.blade.php的新文件并添加以下代码。



 
  
  
  
  Laravel 11 CRUD Tutorial




  
@yield('content')
@vite(['resources/sass/app.scss', 'resources/js/app.js'])

在这里,您可以看到我们添加了 @vite 标签以包含应用程序的 CSS 和 JS 文件。

在 resources >>views 文件夹中再创建以下三个刀片文件。

  1. 创建.blade.php
  2. 编辑.blade.php
  3. 索引.blade.php

创建 3 个新刀片文件

第 7 步:创建 Web 表单

在这里,我们必须创建一个 Web 表单来处理用户输入。

在 create.blade.php 文件中写入以下代码。

@extends('layout')

@section('content')

Adding Employees Data
@if ($errors->any())
    @foreach ($errors->all() as $error)
  • {{ $error }}
  • @endforeach

@endif
@csrf
@endsection

要访问此视图,我们需要从 EmployeeController 的 create() 函数返回此视图

 public function create()
 {
    return view('create');
 }

访问 http://localhost:8000/employees/create,你会看到类似这样的内容:

创建表格

步骤8:添加验证规则并存储数据

顾名思义,我们必须添加表单字段验证规则。

使用以下命令创建一个名为 Employee.php 的模型文件:

php artisan make:model Employee

现在,将 EmployeeController.php 文件中的 Employee.php 模型文件导入。

在 EmployeeController.php 文件的 store() 函数中编写以下代码。

 public function store(Request $request)
 {
   $validatedData = $request->validate([
     'name' => 'required|max:255',
     'position' => 'required',
     'salary' => 'required',
   ]);
  
   Employee::create($validatedData);

   return redirect('/employees')->with('success', 'New Employee has been added');
 }

此代码将在数据库的员工表中创建一条员工记录。

需要注意的一件事是 MassAssignmentException,我们将在 Employee.php 模型文件中处理它。

为了防止 MassAssignmentException,我们必须使用要插入值的列名来填充 $fillable 数组。

前往浏览器并尝试提交表单而不插入任何值:

Laravel 11 表单验证

您可以看到我们收到了验证消息。

现在,填写表单值并提交表单。 您将在数据库中看到员工表只有一行。

phpmyadmin 中的第一条记录第9步:显示数据

我们需要在index.blade.php 文件中编写HTML 代码,以表格格式显示员工的详细信息。

但在此之前,让我们编写 EmployeeController.php 文件的 index() 函数以从数据库获取数据数组。

 public function index()
 {
   $employees = Employee::all();

   return view('index', compact('employees'));
 }

现在,在index.blade.php 文件中写入以下HTML 代码。



@extends('layout')

@section('content')
  
@if(session()->get('success'))
{{ session()->get('success') }}

@endif @foreach($employees as $employee) @endforeach
ID Employee Name Employee Position Employee Salary Action
{{$employee->id}} {{$employee->name}} {{$employee->position}} {{$employee->salary}} id)}}" class="btn btn-primary">Edit
id)}}" method="post"> @csrf @method('DELETE')
@endsection

保存此文件并转到此 URL:http://localhost:8000/employees

您将看到类似以下屏幕截图的内容:

显示数据

是的,我们使用编辑和删除按钮从数据库中获取数据。

第10步:完成更新功能

为了编辑和更新数据,我们需要一个唯一的ID来更新特定的记录。

使用 EmployeeController 的 edit() 方法编写编辑代码。

 public function edit(string $id)
 {
   $employee = Employee::findOrFail($id);

   return view('edit', compact('employee'));
 }

在 edit.blade.php 文件中添加以下代码

@extends('layout')

@section('content')
  
  
Edit Employees Data
@if ($errors->any())
    @foreach ($errors->all() as $error)
  • {{ $error }}
  • @endforeach

@endif
id ) }}"> @csrf @method('PATCH')
@endsection

现在,您已经准备好页面来更新现有记录。

例如,您可以访问此 URL 并获取可更新记录的表单:http://localhost:8000/employees/1/edit

编辑表格

您可以看到编辑表单已填充现有值。 现在,您可以更新值以更新数据库中的值。

我们没有编写任何逻辑来更新记录,但这就是我们接下来要做的

转到 EmployeeController 的 update() 方法并添加以下代码。

public function update(Request $request, string $id)
{
   $validatedData = $request->validate([
     'name' => 'required|max:255',
     'position' => 'required',
     'salary' => 'required'
   ]);

   Employee::whereId($id)->update($validatedData);

   return redirect('/employees')->with('success', 'Employee Data is successfully updated');
 }

进入编辑页面,尝试更新记录。 如果成功,您将被重定向到包含更新记录的索引页面。

更新记录截图

所以,到目前为止,我们已经创建、编辑和更新了记录。

只剩下删除,我们接下来要做的

第 11 步:创建删除功能

我们将使用 EmployeeController 的 destroy() 函数从数据库中删除数据。

 public function destroy(string $id)
 {
   $employee = Employee::findOrFail($id);
   $employee->delete();

   return redirect('/employees')->with('success', 'Employee Data is successfully deleted');
 }

转到索引或列表页面并尝试删除特定记录。 你会看到已经成功了

就是这样。

克鲁纳尔·拉蒂亚克鲁纳尔

Krunal Lathiya 是一位经验丰富的计算机科学专家,在科技行业拥有八年多的经验。 他在数据科学和机器学习方面拥有深厚的知识。 精通 Python、JavaScript、PHP、R 和 Golang。 精通 Angular 和 React 等框架以及 Node.js 等平台。 他的专业知识涵盖前端和后端开发。 他对 Python 语言的熟练程度证明了他的多才多艺和对工艺的承诺。

资讯来源:由0x资讯编译自APPDIVIDEND,版权归作者Krunal所有,未经许可,不得转载
你可能还喜欢