SpringBoot结合Vue实现投票系统过程详解

标题：SpringBoot结合Vue实现投票系统过程详解

简介

在这个教程中，我们将介绍如何使用Spring Boot和Vue来构建一个简单的投票系统。我们将使用Spring Boot构建后端API，使用Vue创建UI并前后端相结合。

投票系统架构

我们将采用前后端分离的架构来构建这个投票系统。常见的做法是将前端和后端分别放置在不同的服务器上。在我们的示例中，我们将前端和后端都放在同一个服务器上。

后端API构建

我们将使用以下工具来构建后端API：
- Spring Boot 2.0.4.RELEASE
- Spring Data JPA
- MySQL 5.7.x
- Java 8

创建Spring Boot应用程序

首先，我们需要创建一个Spring Boot应用，可以使用Spring Initializr（https://start.spring.io/）或者使用IDE自带的Spring Boot工具快速创建应用程序。

添加Spring Data JPA依赖

在 pom.xml 中添加下面的依赖：

<!-- Spring Data JPA -->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

<!-- MySQL JDBC Driver -->
<dependency>
  <groupId>mysql</groupId>
  <artifactId>mysql-connector-java</artifactId>
</dependency>

创建实体类

创建一个实体类来表示投票。

@Entity
public class Vote {
  @Id
  @GeneratedValue(strategy = GenerationType.AUTO)
  private Long id;

  @NotNull
  private String name;

  @NotNull
  private int count;

  public Long getId() {
    return id;
  }

  public void setId(Long id) {
    this.id = id;
  }

  public String getName() {
    return name;
  }

  public void setName(String name) {
    this.name = name;
  }

  public int getCount() {
    return count;
  }

  public void setCount(int count) {
    this.count = count;
  }
}

创建DAO层

创建一个DAO接口来操作投票实体。

@Repository
public interface VoteDao extends JpaRepository<Vote, Long> {}

创建Service层

创建一个Service类来处理投票逻辑。

@Service
public class VoteService {
  @Autowired private VoteDao voteDao;

  public List<Vote> getVotes() {
    return voteDao.findAll();
  }

  public Vote getVoteById(Long id) {
    return voteDao.findById(id).orElse(null);
  }

  public void addVote(Vote vote) {
    vote.setCount(0);
    voteDao.save(vote);
  }

  public void deleteVoteById(Long id) {
    voteDao.deleteById(id);
  }

  public void updateVoteCount(Long id) {
    Vote vote = voteDao.findById(id).orElse(null);
    vote.setCount(vote.getCount() + 1);
    voteDao.save(vote);
  }
}

创建控制层

创建一个控制层来处理投票API的请求。

@RestController
public class VoteController {
  @Autowired private VoteService voteService;

  @GetMapping("/votes")
  public List<Vote> getVotes() {
    return voteService.getVotes();
  }

  @GetMapping("/votes/{id}")
  public Vote getVoteById(@PathVariable Long id) {
    return voteService.getVoteById(id);
  }

  @PostMapping("/votes")
  public void addVote(@RequestBody Vote vote) {
    voteService.addVote(vote);
  }

  @DeleteMapping("/votes/{id}")
  public void deleteVoteById(@PathVariable Long id) {
    voteService.deleteVoteById(id);
  }

  @PutMapping("/votes/{id}/count")
  public void updateVoteCount(@PathVariable Long id) {
    voteService.updateVoteCount(id);
  }
}

至此，我们通过Spring Boot创建了后台API，可以通过API来获取、添加、删除和更新投票数据。

前端UI构建

我们将使用Vue创建前端UI。

创建Vue组件

在src/components目录下创建一个名为Vote.vue的Vue组件。

<template>
  <div>
    <h3>{{ title }}</h3>
    <ul>
      <li v-for="vote in votes" :key="vote.id">
        {{ vote.name }}（{{ vote.count }}票）
        <button @click="voteCount(vote.id)">投票</button>
        <button @click="deleteVote(vote.id)">删除</button>
      </li>
    </ul>
    <label>名称</label>
    <input type="text" v-model="name" />
    <button @click="addVote()">添加</button>
  </div>
</template>

<script>
export default {
  name: "Vote",
  data() {
    return {
      title: "投票系统",
      votes: [],
      name: "",
    };
  },
  created() {
    this.getVotes();
  },
  methods: {
    getVotes() {
      fetch("/votes")
        .then((response) => response.json())
        .then((data) => {
          this.votes = data;
        });
    },
    addVote() {
      const vote = { name: this.name };
      fetch("/votes", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(vote),
      })
        .then(() => {
          this.name = "";
          this.getVotes();
        });
    },
    deleteVote(id) {
      fetch(`/votes/${id}`, { method: "DELETE" }).then(() =>
        this.getVotes()
      );
    },
    voteCount(id) {
      fetch(`/votes/${id}/count`, { method: "PUT" }).then(() =>
        this.getVotes()
      );
    },
  },
};
</script>

该组件显示了一个投票列表，其中每个投票都有一个投票和删除按钮。还有一个表单用于添加新的投票。

在App.vue中引用Vote组件

<template>
  <div id="app">
    <Vote />
  </div>
</template>

<script>
import Vote from "./components/Vote.vue";

export default {
  name: "App",
  components: {
    Vote,
  },
};
</script>

运行前端应用

在命令行中进入到前端目录中，然后运行下面的命令来运行Vue应用:

npm install
npm run serve

在浏览器中访问 http://localhost:8080 就可以看到我们的投票系统。

示例1：添加新投票

我们在前端UI的输入框中输入新投票的名称，点击添加按钮，就会向后台API发送POST请求来添加新的投票。投票列表会自动更新，新添加的投票会出现在列表中。

示例2：投票

我们在前端UI的投票按钮中点击一个投票，就会向后台API发送PUT请求来更新投票计数器。投票列表会自动更新，投票的计数器会增加。

至此，我们使用Spring Boot和Vue组合来构建投票系统的教程到这里就结束了。