编程工具

sql rver2019visual studio 2019visual studio code

sql rver数据

注：这边我循环添加了几百条测试数据

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).u(router).u(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"       初中生早恋怎么办 :tot古风游戏名字al="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)            .t猜猜她是谁优秀作文400字hen((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>

进入vs code控制台，跳转到项目文件夹下，输入下面的命令运行

npm run rve

运行效果图如下
运行后主页

点击查询按钮跳转到此界面

点击删除按钮，弹出确认提示框

点击取消

点击删除

至此，一个vue cli+element plus 的基础用法就完成了，冲冲冲！！！