教程：从零开始学习 Laravel 和 VueJS 的 CRUD 操作

在此教程中，我们将探讨使用 Laravel 和 VueJS 构建 CRUD (Create, Read, Update, Delete) 操作的基础知识。此外，我们还涵盖了与此操作相关的重要概念。

简介

Laravel 是一个基于 PHP 的免费且开放源代码的 web 应用程序框架。该框架采用了 MVC 模式，其具有优雅的语法和强大的功能。VueJS 是一种前端 JavaScript 框架，也是一个流行的 UI 库，用于创建快速的单页应用程序。

准备工作

在开始学习 Laravel 和 VueJS 的 CRUD 操作之前，您需要具备以下技能:

• PHP 编程经验
• 基础的 VueJS 知识
• 能够使用基本的 CLI 工具

如果您还没有 Laravel 和 VueJS 的开发环境，您需要先安装它们。建议您使用 Composer 和 npm 安装它们。

安装 Laravel

您可以使用以下命令安装 Laravel:

composer global require laravel/installer

之后，您可以使用以下命令创建新的 Laravel 应用程序：

laravel new my-app

安装 VueJS

您可以使用以下命令安装 VueJS：

npm install vue

这将安装 VueJS 的最新版本。此外，您可能还需要安装其他 VueJS 相关的包，如 vue-router、vuex 等。

创建数据库

在开始创建 Laravel 和 VueJS 的 CRUD 操作之前，您需要先创建一个数据库，并设置好应用程序的数据库连接。Laravel 使用 .env 文件来存储配置信息。您可以在该文件中配置您的数据库连接。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=my_app
DB_USERNAME=root
DB_PASSWORD=

您需要更改其中的 DB_DATABASE、DB_USERNAME 和 DB_PASSWORD。这些设置将根据您的情况而有所不同。

创建模型

在 Laravel 中，模型是一种用于与数据库交互的类。您可以使用以下命令创建一个新的模型：

php artisan make:model Task

此命令将创建一个名为 Task 的模型。

创建迁移

迁移（Migration）是 Laravel 中的一种机制，用于自动创建和修改数据库表。您可以使用以下命令生成新的迁移：

php artisan make:migration create_tasks_table

此命令将创建一个文件，其中包含关于创建 Task 数据库表的迁移指令。

Schema::create('tasks', function (Blueprint $table) {
  $table->id();
  $table->string('title');
  $table->text('description');
  $table->timestamps();
});

然后您可以使用以下命令运行迁移：

php artisan migrate

创建控制器

在 Laravel 中，控制器是用于处理 HTTP 请求的类。您可以使用以下命令创建一个新的控制器：

php artisan make:controller TaskController

此命令将创建一个名为 TaskController 的控制器。

创建路由

在 Laravel 中，路由是定义路由处理程序（Controller）的机制。您可以使用以下命令定义路由：

Route::get('/tasks', [TaskController::class, 'index']);
Route::post('/tasks', [TaskController::class, 'store']);
Route::get('/tasks/{task}', [TaskController::class, 'show']);
Route::put('/tasks/{task}', [TaskController::class, 'update']);
Route::delete('/tasks/{task}', [TaskController::class, 'destroy']);

创建视图

在 VueJS 中，视图是指用户界面。您可以使用以下命令创建一个新的视图：

mkdir -p resources/js/components/Task
touch resources/js/components/Task/Index.vue
touch resources/js/components/Task/Create.vue
touch resources/js/components/Task/Edit.vue
touch resources/js/components/Task/Show.vue

在 /resources/js/components/Task/Index.vue 中添加以下代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Title</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="task in tasks" :key="task.id">
          <td>{{ task.title }}</td>
          <td>{{ task.description }}</td>
        </tr>
      </tbody>
    </table>
    <router-link to="/create">Create task</router-link>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  mounted() {
    this.fetchTasks()
  },
  computed: {
    ...mapGetters(['tasks'])
  },
  methods: {
    fetchTasks() {
      this.$store.dispatch('fetchTasks')
    }
  }
}
</script>

<style scoped>
table {
  border-collapse: collapse;
  width: 100%;
}
table td, table th {
  border: 1px solid #ddd;
  padding: 8px;
}
table th {
  text-align: left;
  background-color: #f2f2f2;
}
</style>

在 /resources/js/components/Task/Create.vue 中添加以下代码：

<template>
  <form @submit.prevent="createTask">
    <div>
      <label>Title:</label>
      <input type="text" v-model="title">
    </div>
    <div>
      <label>Description:</label>
      <textarea v-model="description"></textarea>
    </div>
    <button type="submit">Create task</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      description: ''
    }
  },
  methods: {
    createTask() {
      this.$store.dispatch('createTask', {
        title: this.title,
        description: this.description
      }).then(() => {
        this.$router.push('/tasks')
      })
    }
  }
}
</script>

在 /resources/js/components/Task/Edit.vue 中添加以下代码：

<template>
  <form @submit.prevent="updateTask">
    <div>
      <label>Title:</label>
      <input type="text" v-model="title">
    </div>
    <div>
      <label>Description:</label>
      <textarea v-model="description"></textarea>
    </div>
    <button type="submit">Update task</button>
  </form>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  mounted() {
    this.fetchTask()
  },
  computed: {
    ...mapGetters(['task'])
  },
  data() {
    return {
      title: '',
      description: ''
    }
  },
  methods: {
    fetchTask() {
      this.$store.dispatch('fetchTask', this.$route.params.id)
    },
    updateTask() {
      this.$store.dispatch('updateTask', {
        id: this.$route.params.id,
        title: this.title,
        description: this.description
      }).then(() => {
        this.$router.push('/tasks')
      })
    }
  }
}
</script>

在 /resources/js/components/Task/Show.vue 中添加以下代码：

<template>
  <div>
    <h1>{{ task.title }}</h1>
    <p>{{ task.description }}</p>
    <router-link to="/tasks">Back to tasks</router-link>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  mounted() {
    this.fetchTask()
  },
  computed: {
    ...mapGetters(['task'])
  },
  methods: {
    fetchTask() {
      this.$store.dispatch('fetchTask', this.$route.params.id)
    }
  }
}
</script>

创建 VueX Store

VueX 是一个状态管理库。您可以使用以下命令创建 VueX Store：

mkdir -p resources/js/store/modules
touch resources/js/store/modules/tasks.js
touch resources/js/store/index.js

在 /resources/js/store/modules/tasks.js 中添加以下代码：

const state = {
  tasks: [],
  task: {}
}

const getters = {
  tasks: state => state.tasks,
  task: state => state.task
}

const mutations = {
  SET_TASKS(state, tasks) {
    state.tasks = tasks
  },
  SET_TASK(state, task) {
    state.task = task
  }
}

const actions = {
  fetchTasks({ commit }) {
    axios.get('/api/tasks')
      .then(response => {
        commit('SET_TASKS', response.data)
      })
  },
  fetchTask({ commit }, id) {
    axios.get('/api/tasks/' + id)
      .then(response => {
        commit('SET_TASK', response.data)
      })
  },
  createTask({ commit }, data) {
    return new Promise((resolve, reject) => {
      axios.post('/api/tasks', data)
        .then(response => {
          resolve(response)
        })
        .catch(error => {
          reject(error)
        })
    })
  },
  updateTask({ commit }, data) {
    return new Promise((resolve, reject) => {
      axios.put('/api/tasks/' + data.id, data)
        .then(response => {
          resolve(response)
        })
        .catch(error => {
          reject(error)
        })
    })
  },
  deleteTask({ commit }, id) {
    return new Promise((resolve, reject) => {
      axios.delete('/api/tasks/' + id)
        .then(response => {
          resolve(response)
        })
        .catch(error => {
          reject(error)
        })
    })
  }
}

export default {
  state,
  getters,
  mutations,
  actions
}

在 /resources/js/store/index.js 中添加以下代码：

import Vue from 'vue'
import Vuex from 'vuex'
import tasks from './modules/tasks'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    tasks
  }
})

创建 API 路由

在 Laravel 中，API 路由用于定义 RESTful API。您可以使用以下代码创建 API 路由：

Route::middleware('api')->group(function () {
    Route::get('/tasks', [TaskController::class, 'index']);
    Route::post('/tasks', [TaskController::class, 'store']);
    Route::get('/tasks/{task}', [TaskController::class, 'show']);
    Route::put('/tasks/{task}', [TaskController::class, 'update']);
    Route::delete('/tasks/{task}', [TaskController::class, 'destroy']);
});

创建控制器方法

在 Laravel 中，控制器方法是处理 HTTP 请求的函数。您可以使用以下代码创建控制器方法：

public function index()
{
    return Task::all();
}

public function store(Request $request)
{
    $validatedData = $request->validate([
        'title' => 'required|max:255',
        'description' => 'required',
    ]);

    $task = Task::create($validatedData);

    return response()->json($task, 201);
}

public function show(Task $task)
{
    return $task;
}

public function update(Request $request, Task $task)
{
    $validatedData = $request->validate([
        'title' => 'required|max:255',
        'description' => 'required',
    ]);

    $task->update($validatedData);

    return response()->json($task, 200);
}

public function destroy(Task $task)
{
    $task->delete();

    return response()->json(null, 204);
}

运行应用程序

您可以使用以下命令运行应用程序：

npm run dev

此命令将为您启动 Laravel 和 VueJS 服务。访问 127.0.0.1:8000 即可查看您的应用程序。

结论

在本教程中，我们了解了如何使用 Laravel 和 VueJS 构建 CRUD 操作。我们涵盖了多种主题，如模型、迁移、控制器、路由、视图和状态管理。

您现在已经掌握了基本的 Laravel 和 VueJS 技能，可以在自己的项目中使用它们了。祝您好运！