首页 专区 文章 专题 AI工具 学习 编程手册

PHP MySQL jquery HTML CSS
首页 > web前端 > Vue.js

手把手带你使用Vue + Laravel开发一个简单的 CRUD 应用

青灯夜游

青灯夜游

2022-04-15

4183人浏览

转载

本篇文章给大家分享一个vue+laravel开发教程，介绍一下怎么使用 vue.js 和 laravel 共建一个简单的 crud 应用，希望对大家有所帮助！

CURD （增删改查）是数据存储的基本操作，也是你作为 Laravel  开发人员首先要学习的内容之一

但是，如果要结合以 Vue.js 作为前端的应用程序该注意哪些问题呢？首先，因为现在的操作不刷新页面，所以你需要异步 CURD 。因此，你需要确保数据在前后端的一致性。（学习视频分享：vuejs教程）

在本教程中，我会演示如何开发完整的 Laravel&Vue.js 应用程序和每个 CURD 的例子。 AJAX 是连接前后端的关键，所以，我会使用 Axios 作为 HTTP 客户端。我还将向您展示一些处理这种体系结构的用户体验方面缺陷的方法。

你可以在  GitHub 中查看完整的项目。https://github.com/anthonygore/vue-laravel-crud

演示 app

这是一个让使用者创建一个 “Cruds“ 的全栈应用，当我进入这个应用时，它会创造很多不可思议的东西。外星人独特的名称和可以在红色，绿色和黑色的自由转换。

Cruds 应用展示在主页，你可以通过 add 按钮添加 Cruds ， delete 按钮删除它们，或者更新它们的颜色。

file

Laravel 后端的 CRUD

我们将使用 Laravel 后端开始本教程，来完成 CRUD 操作。我将保持这一部分简短，因为 Laravel 的 CRUD 是其他地方广泛涉及的主题.

总之，我们完成以下操作

  • 设置数据库
  • 通过资源控制器来编写一个 RESTful API 的路由
  • 在控制器中定义方法，来完成 CRUD 操作

Database

首先是迁移，我们的 Cruds 有两个属性：名称和颜色，我们将其设置为 text 类型

2018_02_02_081739_create_cruds_table.php

<?php ...

class CreateCrudsTable extends Migration
{
  public function up()
  {
    Schema::create(&#39;cruds&#39;, function (Blueprint $table) {
      $table->increments('id');
      $table->text('name');
      $table->text('color');
      $table->timestamps();
    });
  }

  ...
}
...

API

现在我们来设置 RESTful API 路由. 这个 resource 方法将自动创建我们所需要的所有操作. 但是, 我们不需要 edit, show 和 store 这几个路由,因此我们需要排除它们.

routes/api.php

<?php Route::resource(&#39;/cruds&#39;, &#39;CrudsController&#39;, [
  &#39;except&#39; => ['edit', 'show', 'store']
]);

有了这些, 我们现在可以在API中使用以下路由:

HTTP 方法 地址 方法 路由名
GET /api/cruds index cruds.index
GET /api/cruds/create create cruds.create
PUT /api/cruds/{id} update cruds.update
DELETE /api/cruds/{id} destroy cruds.destroy

控制器

我们现在需要在控制器中实现这些操作：

app/Http/Controllers/CrudsController.php

<?php namespace App\Http\Controllers;

use App\Crud;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Faker\Generator;

class CrudsController extends Controller
{
  // Methods
}

我们先简要概述下每种方法：

create 方法。我们使用 Laravel 附带的 Faker 包，为 Crud 随机生成名称和颜色字段 。随后，我们将新生成的数据作为 JSON 返回。

<?php ...

public function create(Generator $faker)
{
  $crud = new Crud();
  $crud->name = $faker->lexify('????????');
  $crud->color = $faker->boolean ? 'red' : 'green';
  $crud->save();

  return response($crud->jsonSerialize(), Response::HTTP_CREATED);
}

index方法。我们使用 index 方法返回 Cruds 的全部数据。在一个更严肃的应用中，我们会使用分页，但是现在我们尽量保持简洁。

<?php ...

public function index()
{
  return response(Crud::all()->jsonSerialize(), Response::HTTP_OK);
}

update。此方法允许客户端更改 Crud 的颜色。

<?php ...

public function update(Request $request, $id)
{
  $crud = Crud::findOrFail($id);
  $crud->color = $request->color;
  $crud->save();

  return response(null, Response::HTTP_OK);
}

destroy。 删除 Cruds 的方法。

<?php ...

public function destroy($id)
{
  Crud::destroy($id);

  return response(null, Response::HTTP_OK);
}

Vue.js 应用

现在开始处理 Vue 页面展示部分。先来创建一个组件 ---  CrudComponent.vue，用来展示 Cruds 的内容。

file

这个组件主要是展示的功能，没有太多的业务逻辑。主要有以下几个重点：

  • 展示一张图片，图片的颜色取决于 Crud 的颜色（ 也就是展示 red.png 还是 green.png)
  • 有一个删除按钮，当点击时会触发 del 方法，继而触发一个 delete 事件，并携带当前 Crud 的 ID 作为参数
  • 有一个 HTML 选择器 ( 用来选择颜色 )，当发生选择时，会触发 update 方法，继而触发一个 update 事件，并携带当前 Crud 的 ID 和新选择的颜色作为参数

resources/assets/js/components/CrudComponent.vue

<template>
  <p>
    </p>
<p>
      @@##@@
    </p>
    <p>
      </p>
<h3>Name: {{ name | properCase }}</h3>
      <select>
        <option>{{ col | properCase }}</option>
      </select>
      <button>Delete</button>
    
  
</template><script>
  export default {
    computed: {
      image() {
        return `/images/${this.color}.png`;
      }
    },
    methods: {
      update(val) {
        this.$emit(&#39;update&#39;, this.id, val.target.selectedOptions[0].value);
      },
      del() {
        this.$emit(&#39;delete&#39;, this.id);
      }
    },
    props: [&#39;id&#39;, &#39;color&#39;, &#39;name&#39;],
    filters: {
      properCase(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
      }
    }
  }
</script><style>...</style>

在这个项目中还有一个组件 App.vue。它在整个项目中的地位非常重要，所有主要的逻辑都写在这里。下面就来逐步分析这个文件。

先从 template 标签开始,  它主要处理了下面这些业务：

  • 为我们上面提到的 crud-component 组件占位
  • 遍历包含 Crud 对象的数组（也就是 cruds 数组 )，数组中的每个元素都对应着一个 crud-component 组件。我们以 props 的形式把每个 Crud 的属性传递给这个组件，并且监听来自这个组件的 update 和 delete 事件
  • 设置一个 Add 按钮，当点击时，会触发 create 方法，从而创建新的 Cruds

resources/assets/js/components/App.vue

Laravel 13.2.0
Laravel 13.2.0

PHP中文网提供Laravel 13.2.0版本下载，Laravel框架 是基于 PHP 8.3+ 的高性能框架，官方推荐通过 Composer 安装。它内置 AI SDK、JSON:API Resources 及原生向量搜索，支持属性驱动开发与队列路由，大幅提升开发效率。相比旧版，13.2.0 优化了缓存 TTL 管理与实时通信，无需 Redis 即可横向扩展。作为现代 Web 开发首选，它兼顾安全与极速体验，助您快速构建企业级应用。

下载 
<template>
  <p>
    </p>
<p>
      </p>
<h1>Cruds</h1>
    
    <crud-component></crud-component>
    <p>
      <button>Add</button>
    </p>
  
</template>

下面来看 App.js 文件的 script 部分:

  • 首先通过 Crud 函数创建用于展示 Cruds 的对象, 包括 ID, 颜色和姓名
  • 然后， 引入  CrudComponent 组件
  • 组件的 cruds 数组作为 data 的属性。 关于对 CRUD 的增删改查的具体操作， 会在下一步展开说明。

resources/assets/js/components/App.vue

<template>...</template><script>
  function Crud({ id, color, name}) {
    this.id = id;
    this.color = color;
    this.name = name;
  }

  import CrudComponent from &#39;./CrudComponent.vue&#39;;

  export default {
    data() {
      return {
        cruds: []
      }
    },
    methods: {
      create() {
        // 待完善
      },
      read() {
        // 待完善
      },
      update(id, color) {
        // 待完善
      },
      del(id) {
        // 待完善
      }
    },
    components: {
      CrudComponent
    }
  }
</script>

前端通过 AJAX 触发 CURD

在一个完整的项目中，所有的 CRUD 操作都是在后端完成的，因为数据库是跟后端交互的。然而，触发 CRUD 的操作几乎都是在前端完成的。

因此，一个 HTTP 客户端（也就是负责在前后端之间交互数据的桥梁）的作用是非常重要的。被 Laravel 前端默认封装的 Axios， 就是一个非常好用的 HTTP 客户端。

再来看下资源表，每个 AJAX 请求都需要有一个明确的 API 接口：

Verb Path Action Route Name
GET /api/cruds index cruds.index
GET /api/cruds/create create cruds.create
PUT /api/cruds/{id} update cruds.update
DELETE /api/cruds/{id} destroy cruds.destroy

Read

首先来看 read 方法。这个方法是负责在前端发起 Cruds 请求的，对应后端的处理在是控制器里的 index 方法，因此使用 GET 请求 /api/cruds。

由于 Laravel 前端默认把 Axios 设置为 window 的一个属性， 因此我们可以使用  window.axios.get 来发起一个 GET 请求。

对于像 get, post 等 Axios 方法的返回结果，我们可以再继续链式调用 then 方法，在 then 方法里可以获取到 AJAX 响应数据的主体  data 属性。

resources/assets/js/components/App.vue

...

methods() {
  read() {
    window.axios.get('/api/cruds').then(({ data }) => {
      // console.log(data)
    });
  },
  ...
}

/*
Sample response:

[
  {
    "id": 0,
    "name": "ijjpfodc",
    "color": "green",
    "created_at": "2018-02-02 09:15:24",
    "updated_at": "2018-02-02 09:24:12"
  },
  {
    "id": 1,
    "name": "wjwxecrf",
    "color": "red",
    "created_at": "2018-02-03 09:26:31",
    "updated_at": "2018-02-03 09:26:31"
  }
]
*/

从上面的返回结果可以看出，返回的结果是 JSON 数组。Axios 会自动将其解析并转成 JavaScript 对象返给我们。这样方便我们在回调函数里对结果进行遍历，并通过  Crud 工厂方法创建新的 Cruds，并存到 data 属性的 cruds 数组中，例如  this.cruds.push(...)。

resources/assets/js/components/App.vue

...

methods() {
  read() {
    window.axios.get('/api/cruds').then(({ data }) => {
      data.forEach(crud => {
        this.cruds.push(new Crud(crud));
      });
    });
  },
},
...
created() {
  this.read();
}

注意：我们通过 created 方法，可以使程序在刚一加载时就触发  read 方法，但这并非最佳实践。最好方案应该是直接去掉 read 方法，当程序第一次加载的时候，就把应用的初始状态都包含在文档投中。

通过上面的步骤，我们就能看到 Cruds 展示在界面上了：

更新 (以及状态同步)

执行 update 方法需要发送表单数据，比如 color，这样控制器才知道要更新哪些数据。Crud 的 ID 是从服务端获取的。

还记得我在本文开篇就提到关于前后端数据一致的问题，这里就是一个很好的例子。

当需要执行 update 方法时，我们可以不用等待服务器返回结果，就在前端更新 Crud 对象，因为我们很清楚更新后应该是什么状态。

但是，我们不应该这么做。为什么？因为有很多原因可能会导致更新数据的请求失败，比如网络突然中断，或者更新的值被数据库拒绝等。

所以等待服务器返回更新成功的信息后，再刷新前端的状态是非常重要的，这样我们才能确保前后端数据的一致。

resources/assets/js/components/App.vue

methods: {
  read() {
    ...
  },
  update(id, color) {
    window.axios.put(`/api/cruds/${id}`, { color }).then(() => {
      // 一旦请求成功，就更新 Crud 的颜色
      this.cruds.find(crud => crud.id === id).color = color;
    });
  },
  ...
}

你可能会说这样非必要的等待会影响用户体验，但是我想说，我们在不确定的情况下更新状态，误导用户，这应该会造成更差的用户体验。

创建和删除

现在你已经明白整个架构的关键点了，剩下两个方法，不需要我解释，你也应该能够理解其中的逻辑了：

resources/assets/js/components/App.vue

methods: {
  read() {
    ...
  },
  update(id, color) {
    ...
  },
  create() {
    window.axios.get('/api/cruds/create').then(({ data }) => {
      this.cruds.push(new Crud(data));
    });
  },
  del(id) {
    window.axios.delete(`/api/cruds/${id}`).then(() => {
      let index = this.cruds.findIndex(crud => crud.id === id);
      this.cruds.splice(index, 1);
    });
  }
}

加载界面 和 禁止互动

你应该知道，我们这个项目VUE前端的CRUD操作都是异步方式的，所以前端AJAX请求服务器并等待服务器响应返回响应，总会有一点延迟。因为用户不知道网站在做什么，此空档期用户的体验不是很好，这学问关联到UX。

为了改善这UX问题，因此最好添加上一些加载界面并在等待当前操作解决时禁用任何交互。这可以让用户知道网站在做了什么，而且可以确保数据的状态。

Vuejs有很多很好的插件能完成这个功能，但是在此为了让学者更好的理解，做一些简单的快速的逻辑来完成这个功能，我将创建一个半透明的p，在AJAX操作过程中覆盖整个屏幕，这个逻辑能完成两个功能：加载界面和禁止互动。一石两鸟，完美~

resources/views/index.blade.php

<p></p>
<p></p>
<script></script>

当进行 AJAX 请求的时候，就把 mute 的值从 false 改为 true,  通过这个值的变化，控制半透明 p 的显示或隐藏。

resources/assets/js/components/App.vue

export default {
  data() {
    return {
      cruds: [],
      mute: false
    }
  },
  ...
}

下面就是在 update 方法中切换 mute 值的过程。当执行 update 方法时，mute 值被设为 true。当请求成功，再把 mute 值设为 false, 这样用户就可以继续操作应用了。

resources/assets/js/components/App.vue

update(id, color) {
  this.mute = true;
  window.axios.put(`/api/cruds/${id}`, { color }).then(() => {
    this.cruds.find(crud => crud.id === id).color = color;
    this.mute = false;
  });
},

在 CRUDE 的每个方法里都要有这样的操作，在此，为了节约篇幅，我就不一一写明了。

为了保证大家不会忘记这个重要的操作，我们直接在 <p id="app"></p> 元素上方增加了  <p id="mute"></p> 元素。

从下面的代码可以看到，当 <p id="mute"></p> 元素被加上 class  on  后，它将以灰色调完全覆盖整个应用，并阻止所有的点击事件：

resources/views/index.blade.php

nbsp;html>
getLocale() }}">

  <meta>
  <meta>
  <meta>
  <meta>
  <title>Cruds</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;,
      height: 100%;
      width: 100%;
      background-color: #d1d1d1
    }
    #mute {
      position: absolute;
    }
    #mute.on {
      opacity: 0.7;
      z-index: 1000;
      background: white;
      height: 100%;
      width: 100%;
    }
  </style><p></p>
<p></p>
<script></script>

最后一个问题是对于 on class 的管理，我们可以在  mute 的值上加一个 watch，每当 mute 的值发生改变的时候，就加上或删除  on class：

export default {
  ...
  watch: {
    mute(val) {
      document.getElementById('mute').className = val ? "on" : "";
    }
  }
}

完成上面所有的步骤，你就可以拥有一个带有加载指示器的全栈Vue / Laravel CRUD 的应用程序了。再来看下完整效果吧：

file

你可以从 GitHub 获取代码，如果有任何问题或者想法，欢迎给我留言！

英文原文地址：https://vuejsdevelopers.com/2018/02/05/vue-laravel-crud/

译文地址：https://learnku.com/vuejs/t/24724

（学习视频分享：web前端开发、编程入门）

file

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！

相关文章

laravel怎么安装inertia vue3的版本

node和laravel项目中预渲染vue.js应用程序
PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习？PHP怎么入门？PHP在哪学？PHP怎么学才快？不用担心，这里为大家提供了PHP速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载

相关标签:

laravel vue

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：了解vue中的单项数据流和双向数据绑定，两种冲突吗？

下一篇：总结分享Vue中实现组件间通讯的多种方式，再也不怕面试了！

作者最新文章

聊聊vue3中watch和computed的使用方法

浅析vue3中setup()和reactive()函数的使用

【整理总结】11种Vue组件的通信方式

详解用Vue怎么实现数据的双向绑定

聊聊Vue怎么用extend动态创建组件

vue3组件间怎么通信？通信方式浅析

一文详解Vue 3中的的插件

一步步带你分析vue文件中的ts代码

探讨如何在Vue3中编写单元测试

一文讨论Vue2中key和Vue3中key的区别

热门AI工具

更多
DeepSeek

DeepSeek

 豆包大模型

豆包大模型

 WorkBuddy

WorkBuddy

 通义千问

通义千问

 Claude

Claude

 Cursor

Cursor

 Hermes Agent

Hermes Agent

 即梦AI

即梦AI

相关专题

更多
墨刀AI提示词教学
墨刀AI提示词教学

本合集由PHP中文网精心整理，为您提供全面的墨刀AI提示词教学。内容涵盖高质量原型撰写公式与实操窍门，助您轻松掌握AI设计工具。无论是零基础入门还是进阶技巧，都能让您快速上手，大幅提升产品设计与协作效率。

2026.08.04

10

21

墨刀AI完整入门
墨刀AI完整入门

PHP中文网为您倾力打造墨刀AI保姆级入门指南完整版！本合集从零基础讲起，涵盖AI生成原型、提示词优化、图片转原型及多轮对话等核心功能。无论您是新手还是进阶用户，都能轻松掌握产品设计全流程。快来PHP中文网，一键解锁高效设计技巧，让想法即刻成型！

2026.08.04

8

20

墨刀AI进阶技巧
墨刀AI进阶技巧

本合集由PHP中文网精心整理，为您提供墨刀AI核心进阶策略指南。内容涵盖高效提示词写作、原型智能生成与微调、结构化导图制作及行业分析报告输出等实战技巧。助您轻松掌握AI设计工具，大幅提升产品设计与团队协作效率。

2026.08.04

10

14

火山引擎实名认证失败怎么办
火山引擎实名认证失败怎么办

火山引擎实名认证失败可能与证件信息填写错误、姓名或企业信息不一致、证件照片不清晰、营业执照状态异常、手机号验证失败或审核资料不完整有关。本专题整理个人认证、企业认证、资料上传、审核退回、重新提交和认证不通过的常见处理方法。

2026.08.04

5

10

火山引擎域名备案流程详解
火山引擎域名备案流程详解

火山引擎域名备案适合需要在火山引擎云服务器、对象存储、CDN或网站服务上绑定域名的用户参考。本专题整理备案入口、账号实名认证、备案类型选择、主体信息填写、网站信息提交、资料上传、初审核验、管局审核和备案失败排查，帮助用户完成网站上线前的备案流程。

2026.08.04

1

10

火山引擎DNS解析配置步骤
火山引擎DNS解析配置步骤

使用火山引擎DNS解析网站域名时，需要确认域名已完成管理接入，并正确配置服务器IP、CNAME地址或验证记录。本专题整理域名添加、记录类型选择、TTL设置、解析状态检查、备案和访问测试等流程，适合新手搭建网站时参考。

2026.08.04

3

10

火山引擎对象存储使用教程
火山引擎对象存储使用教程

火山引擎对象存储适合用于网站图片、视频文件、备份数据、静态资源和应用附件管理。本专题整理TOS控制台入口、存储桶创建、地域选择、权限设置、文件上传、访问链接生成、CDN加速、费用查看和常见上传或访问失败问题，帮助用户快速掌握对象存储基础操作。

2026.08.04

1

10

火山引擎云服务器使用教程
火山引擎云服务器使用教程

火山引擎云服务器使用教程适合第一次购买、部署和管理云服务器的用户参考。本专题整理控制台入口、实例创建、地域和配置选择、系统镜像设置、安全组放行、远程连接、网站部署、续费计费和常见连接失败问题，帮助用户快速完成云服务器基础使用流程。

2026.08.04

5

10

火山引擎API Key绑定大模型教程
火山引擎API Key绑定大模型教程

火山引擎API Key怎么绑定大模型适合需要在火山方舟、应用后台、脚本工具或AI编程软件中调用模型的开发者参考。本专题整理控制台服务开通、API Key创建、模型权限检查、模型ID选择、Base URL填写、调用测试和鉴权失败排查，帮助用户完成从密钥到模型调用的配置流程。

2026.08.04

2

10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多
易答题php+mysql医院排队预约与核销系统1.0
PHP生成pdf格式准考证带照片完整示范20231121
php+txt 2级联动通用查询系统2023
悟空CRM PHP版11.0
php+mysql简易口罩限量领取系统1.0
企业进销存PHP管理系统
自制php框架源码

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 15.5万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.2万人学习

最新文章

更多
Vue Router 路由管理怎么使用路由组件传参 props 简化组件逻辑
Vue 响应式侦听怎么在 watchEffect 中同步网络连接断开与重连的提示
Vue TypeScript 开发怎么为 Vue Router 的路由参数与查询字符串定义类型
Vue Pinia 状态管理怎么在组合式 API 中定义 Setup 式 Store
Vue 计算属性怎么处理多个响应式依赖项交叉组合的复杂计算逻辑
Vue Axios 网络请求怎么配置多环境代理解决开发环境跨域问题
Vue基础语法怎么使用修饰符 .once 确保事件绑定只触发一次
Vue Options API怎么使用 methods 选项编写组件的事件处理函数
Vue Router 路由管理怎么使用 scrollBehavior 实现页面滚动记忆
Vue 数据监听怎么在路由切换时监听参数变化重新加载页面数据