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>