Vue cli + Element plus的查詢和刪除

編程工具

1. SQL Server2019
2. Visual Studio 2019
3. Visual Studio Code

SQL Server數據

注：這邊我循環添加了幾百條測試數據

Visual Studio 2019

我用vs2019 創建了一個web api的項目用來做數據傳遞

Visual Studio Code

首先創建個vue cli項目

1. 安裝Element Puls包

npm install element-plus --save

2. 安裝Axios包

npm install axios

環境創建完成后進行配置

1. 首先進入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分頁組件顯示英文的問題

2. 進入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>

3. 進入router文件夾下的index.js，路由配置

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

4. 進入App.vue

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

5. 進入vs code控制台，跳轉到項目文件夾下，輸入下面的命令運行

npm run serve

6. 運行效果圖如下
   運行后主頁

點擊查詢按鈕跳轉到此界面

點擊刪除按鈕，彈出確認提示框

點擊取消

點擊刪除

至此，一個vue cli+element plus 的基礎用法就完成了，沖沖沖！！！