我的Spring Boot 之旅——Day11-12（vue项目）

最新推荐文章于 2024-07-23 21:45:00 发布

Joie_Z

最新推荐文章于 2024-07-23 21:45:00 发布

阅读量321

点赞数

本文链接：https://blog.csdn.net/Joie_Z/article/details/103657698

版权

本文记录了Spring Boot项目中使用Vue进行axios接口调用，实现表格展示、数据删除、分页及新增、编辑功能。通过学习axios的基本用法，结合Element UI组件库，完成了表格的生成、数据获取与删除，同时探讨了Vue中事件绑定和模态框的使用。此外，文章还涵盖了Vue中分页功能的实现和样式设置。

摘要由CSDN通过智能技术生成

day11 学习vue（二）

条件渲染和事件绑定day10已经学习了，今天主要学习如何使用axios访问后台接口，生成表格以及对表格内数据写一个的删除操作。在此之前先保证能正常运行jar包并且打开swagger。

一、关于axios

下载axios和element-ui
在终端中使用以下命令下载：
yarn add axios
yarn add qs
yarn add element-ui
axios的使用
导入：import axios from ‘axios’;
设置基础路径：axios.defaults.baseURL=“http://127.0.0.1:8899” //此路径为swagger网页的地址。
使用：axios.get(’’,{params:参数对象}).then((res)=>{}).catch(()=>{})
注意： axios默认post形式发送的json格式的数据，所以一般都需要把JSON字符串转换成JS字符串。如何转换？使用qs：
首先安装 yarn add qs
再引入 import qs from ‘qs’;
使用qs转为查询字符串的数据,qs.stringify(obj)

二、生成表格

到element-ui官网找组件，把找到的组件复制到.vue文件里面，还要修改一下标签里面的属性。以下是所找到的table组件代码：

  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>

我们要把里面的prop、label改成对应我们数据的信息。
除此之外我们还要加上一列操作列：

    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>

添加、获取城市数据
添加城市数据：
在data层里面新建：cityData:[], ，这里要设置为数组来存放从接口获取到的城市相关数据。
获取城市数据：
在methods里面添加init()方法，用来获取所有城市的数据。这里就需要用到axios，所以得先import axios from “axios”。
打开swagger找到路径和方法。已知是get方法，因为上面设置了基础路径，所以这里get里面的路径为 ‘/City/findAll’ 即可。在这个init方法里面使用的axios方法里还使用一个遍历方法来获取有城市的信息。最终代码如下：

          axios.get('/City/findAll').then((res)=>{
   
            //   console.log(res.data.data);
            //遍历所有的城市对象，通过省份id给每个对象里添加省份名字。
            let temp = res.data.data;
            this.cityData = temp;
            temp.forEach(item=>{
   
                let id = item.provinceId;
                axios.get('/Province/findById',{
   params:{
   id}})
                .then((res)=>{
   
                    // console.log(res.data.data.name);
                    item.pName = res.data.data.name;
                })
                .catch((error)=>{
   console.log(error)})
            });
            // this.cityData = res.data.data;
            // this.cityData = temp;

            //超时调用
            setTimeout(()=>{
   
                this.cityData = temp;
            },2000);

              }).catch((error)=>{
   
              console.log(error)});
      },

代码里面还写了一个setTimeout方法来设置数据显示的延时时间。
设置完init()之后，我们要在created（生命周期钩子函数，组件创建完毕后可以访问一切this上带的东西）里面加上 this.init(); 。
正确完成以上操作，便可在网页的表格上看到所获取城市的数据

三、删除

绑定事件
在删除按钮的标签里面加上 @click=“toDelete(scope.row)” 给按钮绑定事件。
写toDelete(row)
该方法需要有一个row参数来获取当前行的数据，然后根据id来删除这行城市数据。同样，使用axios。但这里使用axios有一点不同，因为会对城市数据进行相关操作，但这里操作的数据是JSON字符串类型，而操作的时候系统只能识别js字符串，所以要转换一下字符串类型，即使用到第一大点里面提到的qs。所以得导入qs：import qs from “qs”; 。
3.最终代码：

//删除
      toDelete(row){
   
          //row代表当前要删除的city对象
          let id = row.id;
          axios.post('/City/deleteById',qs.stringify({
   id}))
          .then((res)=>{
   
                this.$notify({
   
                     title: '成功',
                     message: '这是一条成功的提示消息',
                     type: 'success'
                });
                this.init();})
          .catch((error)=>{
   
              this.$notify({
   
          title: '警告',
          message: '这是一条警告的提示消息',
          type: 'warning'
        });
          });
      },

补充：

代码里面删除成功的弹框也是在element-ui组件里面找的，里面有很多好看的，大家以后可以去官网里面看看。

为了巩固练习，以下是在复习完跟着老师敲的代码后自己写的关于另一个接口的vue的运行结果截图和文档代码，除了今天教的删除操作还加了新增和修改功能，但是不够完善，还请多指教：

在这里插入图片描述

<template>
  <div>
      {
   {
   Welfare}}
      <br />
    <span>{
   {
   Welfare.length}}</span>
    <el-table :data="Welfare" stripe style="width: 50%">
      <el-table-column prop="id" label="id" width="180"></el-table-column>
      <el-table-column prop="name" label="名称" width="180"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column label="操作" width="100">
            <template slot-scope="scope">
                <el-button @click="toDelete(scope.row)" type="text" size="small">删除</el-button>
                <el-button @click="toEdit" type="text" size="small" ><a href="#edit">编辑</a></el-button>