springboot结合vue实现增删改查及分页查询

下面是Spring Boot结合Vue.js实现增删改查和分页查询的攻略：

1. 准备工作

• 安装Java Development Kit (JDK)及Maven
• 安装Node.js和Vue CLI
• 创建Spring Boot项目

2. 引入前端框架

在Spring Boot项目中的pom.xml文件中添加以下依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.46</version>
</dependency>

使用Vue CLI创建一个新的Vue项目，然后将创建的内容放入到Spring Boot项目的/resources/static目录下。

3. 实现增删改查

在Spring Boot中，我们可以使用@RestController注释来定义控制器。以下是一个示例控制器，用于从前端页面接收数据并将其保存到Java列表中：

@RestController
@RequestMapping("/api")
public class UserController {
    private List<User> userList = new ArrayList<>();

    @GetMapping("/users")
    public List<User> getUsers() {
        return userList;
    }

    @PostMapping("/users")
    public void addUser(@RequestBody User user) {
        userList.add(user);
    }

    @PutMapping("/users")
    public void updateUser(@RequestBody User user) {
        for (int i = 0; i < userList.size(); i++) {
            if (userList.get(i).getId() == user.getId()) {
                userList.set(i, user);
                break;
            }
        }
    }

    @DeleteMapping("/users/{id}")
    public void deleteUser(@PathVariable("id") int id) {
        for (int i = 0; i < userList.size(); i++) {
            if (userList.get(i).getId() == id) {
                userList.remove(i);
                break;
            }
        }
    }
}

4. 实现分页查询

我们可以使用Spring Boot提供的Pageable接口和Page实现类来实现分页查询。以下是一个示例方法，用于从前端页面接收分页参数并根据这些参数来执行分页查询：

@GetMapping("/users")
public Page<User> getUsersByPage(@RequestParam("page") int page,
                                 @RequestParam("size") int size) {
    Page<User> pageUser = new PageImpl<>(userList, PageRequest.of(page, size), userList.size());
    return pageUser;
}

在Vue中，我们可以使用Element-UI来实现分页器。以下是一个示例实现：

<template>
  <el-pagination
    :total="total"
    :page-size="pageSize"
    :current-page.sync="currentPage"
    layout="total,prev, pager, next"
    @current-change="handleCurrentChange"
  ></el-pagination>
</template>

<script>
export default {
  name: "Pagination",
  props: {
    total: {
      type: Number,
      required: true,
    },
    pageSize: {
      type: Number,
      required: true,
    },
    onPageChange: {
      type: Function,
      required: true,
    },
  },
  data() {
    return {
      currentPage: 1,
    };
  },
  methods: {
    handleCurrentChange(page) {
      this.currentPage = page;
      this.onPageChange(page);
    },
  },
};
</script>

在调用分页查询API时，我们可以为其提供当前页和页面尺寸参数。页面加载后，我们可以将其值传递给分页器组件。以下是一个示例Vue组件，用于从后端API检索和显示用户数据：

<template>
  <el-table :data="users" style="width: 100%">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
    <el-table-column label="Action">
      <template slot-scope="scope">
        <el-button
          type="primary"
          size="small"
          @click="edit(scope.row)"
          >Edit</el-button
        >
        <el-button
          type="danger"
          size="small"
          @click="remove(scope.row.id)"
          >Delete</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <pagination
    :total="totalElements"
    :page-size="pageSize"
    :on-page-change="getUsers"
  ></pagination>
</template>

<script>
import Pagination from "@/components/Pagination.vue";
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      users: [],
      totalElements: 0,
      currentPage: 1,
      pageSize: 5,
    };
  },
  mounted() {
    this.getUsers();
  },
  methods: {
    getUsers() {
      axios
        .get(`/api/users?page=${this.currentPage - 1}&size=${this.pageSize}`)
        .then((response) => {
          this.users = response.data.content;
          this.totalElements = response.data.totalElements;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    remove(id) {
      axios
        .delete(`/api/users/${id}`)
        .then(() => {
          this.getUsers();
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

以上是Spring Boot结合Vue.js实现增删改查和分页查询的详细攻略。其中包含了一个控制器、一个分页查询方法和一个Vue组件用于检索和显示数据。