页面生成一个删除全部数据的按钮 Java代码和vue代码实现

Java代码实现：

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.sql.Statement;

public class DeleteAllData {
    public static void main(String[] args) throws SQLException {
        Connection conn = null;
        Statement stmt = null;

        try {
            // 加载驱动类
            Class.forName("com.mysql.cj.jdbc.Driver");
            // 建立数据库连接
            conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=UTC",
                    "root", "123456");
            // 创建Statement对象
            stmt = conn.createStatement();
            // 删除数据
            int result = stmt.executeUpdate("DELETE FROM user_info");
            if (result > 0) {
                System.out.println("删除成功！");
            } else {
                System.out.println("删除失败！");
            }
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            // 关闭Statement对象
            if (stmt != null) {
                stmt.close();
            }
            // 关闭数据库连接
            if (conn != null) {
                conn.close();
            }
        }
    }
}

Vue代码实现：

<template>
  <div>
    <button @click="deleteData">删除全部数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    deleteData() {
      this.$confirm("确定要删除全部数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 发送删除数据的请求
          this.$http.post("/deleteAllData").then(response => {
            if (response.data.code === 200) {
              this.$message.success("删除成功！");
            } else {
              this.$message.error("删除失败！");
            }
          });
        })
        .catch(() => {});
    }
  }
};
</script>

在Vue代码中，我们使用了Element UI组件库中的MessageBox和Message组件，以实现删除数据时的提示和结果展示。同时，我们还使用了Vue Resource插件，以发送删除数据的请求。需要在main.js中导入Vue Resource插件：

import VueResource from "vue-resource";
Vue.use(VueResource);