Vue cli + Element plus的查询和删除

编程工具

SQL Server2019
Visual Studio 2019
Visual Studio Code

SQL Server数据

在这里插入图片描述
注：这边我循环添加了几百条测试数据

Visual Studio 2019

我用vs2019 创建了一个web api的项目用来做数据传递

在这里插入图片描述

Visual Studio Code

首先创建个vue cli项目

安装Element Puls包

npm install element-plus --save

安装Axios包

npm install axios

环境创建完成后进行配置

首先进入main.js，将这些加上

import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import locale from 'element-plus/lib/locale/lang/zh-cn'

createApp(App).use(router).use(ElementPlus,{locale}).mount('#app')

注意 import locale from 'element-plus/lib/locale/lang/zh-cn' 这是解决之后用element plus分页组件显示英文的问题

进入views文件夹，创建一个PaperInquire.vue的文件

<template>
  <div>
    <el-table :data="papersData.slice((currentPage - 1) * pagesize, currentPage * pagesize)" stripe border style="width: 100%">
      <el-table-column prop="PaperID" label="编号"> </el-table-column>
      <el-table-column prop="PaperName" label="试卷名"> </el-table-column>
      <el-table-column prop="PaperExplain" label="试卷描述"> </el-table-column>
      <el-table-column prop="PaperTime" label="考试时长"> </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            type="danger"
            size="small"
            @click="findDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pagesize"
        layout="total,  prev, pager, next, jumper"
        :total="papersData.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "PaperInquire",
  data() {
    return {
      papersData: [],
      currentPage: 1, // 初始页
      pagesize: 10, // 每页数据
    };
  },
  methods: {
    // 分页
    handleSizeChange(val) {
      this.pagesize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(`当前页: ${val}`);
    },

    // 查询
    findAll() {
      axios.get("http://localhost:8913/api/papers").then((res) => {
        this.papersData = res.data;
      });
    },

    // 删除
    findDelete(index, row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios
            .delete("http://localhost:8913/api/papers/" + row.PaperID)
            .then((res) => {
              this.$message.success("删除成功！");
              this.findAll();
            })
            .catch((res) => {
              this.$message.console.error("删除失败！");
            });
        })
        .catch(() => {
          this.$message.info("已取消操作！");
        });
    },
  },
  created() {
    this.findAll();
  },
};
</script>

进入router文件夹下的index.js，路由配置

{
  path: '/PaperInquire',
  name: 'PaperInquire',
  component: () => import('../views/PaperInquire'),
}

进入App.vue

<template>
  <div id="nav">
    <router-link to="/">主页</router-link> |
    <router-link to="PaperInquire">查询</router-link> |
  </div>
  <router-view/>
</template>