Vue.js Laravel 5.3 + Vue Reddit-like投票系统

在本文中，我们将介绍如何使用Vue.js和Laravel 5.3来创建一个类似Reddit的投票系统。我们将通过这个示例项目来学习和理解如何结合Vue.js和Laravel来构建一个功能强大而且用户友好的投票应用。

1. 准备工作

在开始之前，我们需要确保我们已经安装了最新版本的Node.js和npm。我们还需要确保我们已经安装了Laravel和Vue.js的依赖项。
首先，打开终端并运行以下命令来检查Node.js和npm版本：

node -v
npm -v

确保您的Node.js版本为v10.x.x及更高，npm版本为v6.x.x及更高。

接下来，我们需要安装Composer来管理Laravel的依赖项。在终端中运行以下命令来安装Composer：

curl -sS https://getcomposer.org/installer | php

2. 创建Laravel项目

我们需要创建一个Laravel项目，作为我们Reddit-like投票系统的后端。在终端中，运行以下命令：

composer create-project --prefer-dist laravel/laravel voting-system

这将创建一个名为”voting-system”的Laravel项目。

3. 配置数据库

我们需要配置一个数据库来存储投票系统的数据。打开.env文件并修改以下行：

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_username
DB_PASSWORD=your_password

将your_database_name替换为您要使用的数据库的名称，将your_username和your_password替换为您的数据库用户名和密码。

4. 创建投票模型和控制器

我们需要创建一个投票模型和相应的控制器来处理投票系统的逻辑。

首先，运行以下命令创建一个投票模型：

php artisan make:model Vote -m

这将在app目录中创建一个名为Vote的模型，并在数据库中创建一个名为votes的迁移。

接下来，我们需要在迁移文件中定义投票模型的属性。打开database/migrations/YYYY_MM_DD_HHmmss_create_votes_table.php文件，并将以下代码添加到up方法中：

Schema::create('votes', function (Blueprint table) {table->id();
    table->integer('post_id');table->boolean('upvote');
    $table->timestamps();
});

这将为投票模型定义了3个属性：post_id表示投票所属的帖子ID，upvote表示用户是否点赞该帖子，timestamps表示投票的创建和更新时间。

保存并关闭文件后，运行以下命令来执行迁移并在数据库中创建votes表：

php artisan migrate

接下来，运行以下命令创建一个投票控制器：

php artisan make:controller VoteController

这将在app/Http/Controllers目录中创建一个名为VoteController的控制器。

打开app/Http/Controllers/VoteController.php文件，并添加以下代码到index方法中：

public function index()
{
    votes = Vote::all();

    return response()->json(votes);
}

这个index方法将获取所有投票，并返回一个包含投票数据的JSON响应。

5. 创建前端Vue.js应用

我们将使用Vue.js来创建投票系统的前端部分。打开终端，并进入Laravel项目的根目录。运行以下命令来创建一个新的Vue.js应用：

npm install -g @vue/cli
vue create client

在安装过程中，您可以选择使用默认或自定义的Vue.js配置。完成后，进入client目录：

cd client

运行以下命令来启动Vue.js开发服务器：

npm run serve

您现在可以在浏览器中通过http://localhost:8080访问Vue.js应用。

6. 构建前端组件

在Vue.js应用中，我们将创建一些组件来实现投票系统的不同功能。

首先，我们需要创建一个投票列表组件，用于显示投票的列表。在src/components目录下创建一个名为VoteList.vue的文件，并添加以下代码：

<template>
  <div>
    <h2>投票列表</h2>
    <ul>
      <li v-for="vote in votes" :key="vote.id">
        <p>投票ID: {{ vote.id }}</p>
        <p>帖子ID: {{ vote.post_id }}</p>
        <p>点赞: {{ vote.upvote ? '是' : '否' }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      votes: [],
    };
  },
  created() {
    this.getVotes();
  },
  methods: {
    getVotes() {
      // 使用axios或fetch从后端获取投票数据
      this.votes = [
        { id: 1, post_id: 1, upvote: true },
        { id: 2, post_id: 2, upvote: false },
        { id: 3, post_id: 1, upvote: false },
      ];
    },
  },
};
</script>

这个组件会显示投票列表，并在创建时从后端获取投票数据。您可以使用axios或fetch来实现从后端获取数据的逻辑。

接下来，我们需要创建一个投票表单组件，用于创建新的投票。在src/components目录下创建一个名为VoteForm.vue的文件，并添加以下代码：

<template>
  <div>
    <h2>创建投票</h2>
    <form @submit.prevent="submitForm">
      <div>
        <label for="post">帖子ID:</label>
        <input id="post" v-model="post" type="number" required>
      </div>
      <div>
        <label for="upvote">点赞:</label>
        <input id="upvote" v-model="upvote" type="checkbox">
      </div>
      <div>
        <button type="submit">提交</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      post: null,
      upvote: false,
    };
  },
  methods: {
    submitForm() {
      // 使用axios或fetch将表单数据发送到后端创建新的投票
      console.log('提交表单');
    },
  },
};
</script>

这个组件包含一个用于创建新投票的表单，并在提交时触发submitForm方法。您可以使用axios或fetch来实现将表单数据发送到后端创建新投票的逻辑。

7. 在Vue.js应用中使用组件

现在我们已经创建了投票列表和投票表单组件，我们需要在Vue.js应用中使用它们来实现完整的Reddit-like投票系统。

打开src/components/App.vue文件，并替换以下代码：

<template>
  <div>
    <h1>Reddit-like投票系统</h1>
    <VoteForm />
    <VoteList />
  </div>
</template>

<script>
import VoteForm from "./VoteForm.vue";
import VoteList from "./VoteList.vue";

export default {
  components: {
    VoteForm,
    VoteList,
  },
};
</script>

这个App.vue组件将渲染投票表单和投票列表组件，并将它们作为子组件引入。

8. 集成后端和前端

现在我们需要将后端和前端连接起来，确保它们可以共同工作。

首先，打开client/src/main.js文件，并添加以下代码：

import axios from "axios";

axios.defaults.baseURL = "http://localhost:8000/api";

这将配置axios的默认请求URL为Laravel后端的API URL。

接下来，打开client/vue.config.js文件，并添加以下代码：

module.exports = {
  devServer: {
    proxy: "http://localhost:8000",
  },
};

这个配置将告诉Vue.js开发服务器将所有请求代理到Laravel后端。

然后，打开终端并在client目录下运行以下命令来启动Vue.js开发服务器：

npm run serve

最后，打开另一个终端，并在Laravel项目的根目录中运行以下命令来启动Laravel开发服务器：

php artisan serve

现在，您可以在浏览器中访问http://localhost:8080来查看Reddit-like投票系统的前端应用，并与Laravel后端进行交互。

总结

在本文中，我们探讨了如何使用Vue.js和Laravel 5.3来创建一个Reddit-like投票系统。我们介绍了准备工作、创建Laravel项目、配置数据库、创建投票模型和控制器、创建前端Vue.js应用、构建前端组件、使用组件、以及集成后端和前端的过程。通过这个示例项目，您可以学习到如何使用Vue.js和Laravel来构建一个完整的投票应用，并了解到它们在现代Web开发中的强大潜力。

希望本文对您有所帮助，祝您在使用Vue.js和Laravel构建投票应用时取得成功！