freedomSTUDENT

【Vue】文件管理页面制作

第一部分

第一小节

第二小节

第三小节

第二部分

编辑

第一小节

第二小节

第三部分

第一小节

第二小节

第四部分

第一小节

第二小节

第三小节

第四小节

第五小节

第六小节

第七小节

第五部分

第一部分

第一小节

suffix-icon="el-icon-search" 搜索的图标

v-model="name" 表单元素上创建双向数据绑定 ,其属性为name

第二小节

@click="load">搜索
type="primary": 这将按钮的类型设置为“主要”

@click="load": 这是一个 Vue 的事件监听器。当用户点击这个按钮时，它会触发名为 load 的方法或函数。

load 方法如下

load() {
  this.request.get("/file/page", {
    params: {
      pageNum: this.pageNum,
      pageSize: this.pageSize,
      name: this.name,
    }
  }).then(res => {

    this.tableData = res.data.records
    this.total = res.data.total

  })
},

使用get 请求从 / file/page 路径中加载文件数据。

后端方法代码如下：

https://blog.csdn.net/m0_67930426/article/details/135503629?spm=1001.2014.3001.5501https://blog.csdn.net/m0_67930426/article/details/135503629?spm=1001.2014.3001.5501

params: {

pageNum: this.pageNum,

pageSize: this.pageSize,

name: this.name,

}

这个请求带有一些参数，pageNum , pageSize ,name,这些参数分别从组件的 data 属性中获取

.then(res => {

this.tableData = res.data.records

this.total = res.data.total

当 get 请求成功返回后，.then 方法就会被调用，该方法会接收到一个 res 参数，它代表服务器的响应，这里它将响应的 records 设置组件的 tableData 的属性，将 total 设置为组件的 total 属性。

第三小节

@click="reset">重置

  reset() {
      this.name = ""
      this.load()
    },

this.name = "": 这是将this.name设置为空字符串的语句。其中this关键字指向当前对象，所以这行代码的意思是将当前对象的name属性重置为空字符串。

this.load(): 这行代码调用了当前对象的load方法。这意味着，当你调用reset方法时，除了将name属性重置为空字符串外，还会执行load方法。

第二部分

 
      
        上传文件

这一部分代码主要写文件上传

后端代码如下：

https://blog.csdn.net/m0_67930426/article/details/135481660?spm=1001.2014.3001.5501https://blog.csdn.net/m0_67930426/article/details/135481660?spm=1001.2014.3001.5501

: 这是 Element UI 的上传组件。

第一小节

:show-file-list="false",:on-success="handleFileUploadSuccess" style="display: inline-block">

:action="'http://' + serverIp + ':9090/file/upload'": 这是上传文件的 URL。它动态地通过拼接 serverIp（服务器IP地址）和端口号9090来构建。

:show-file-list="false": 这意味着在上传文件后，不会显示已上传的文件列表。

:on-success="handleFileUploadSuccess": 当文件上传成功时，会调用 handleFileUploadSuccess 方法。

 handleFileUploadSuccess(res) {
      console.log(res)
      this.$message.success("上传成功")
      this.load()
    },

定义了一个名为 handleFileUploadSuccess 的函数方法，它接收 res 参数，这个函数主要的作用是处理文件上传成功后的响应。

console.log(res): 使用 console.log 打印传入的响应对象 res。这通常用于调试，以查看服务器返回的具体信息。

this.$message.success("上传成功")，显示上传成功这个消息

this.load() 调用上文的Load 方法重新加载数据

第二小节

上传文件

上传文件按钮

第三部分

 
        批量删除

后端代码如下：

https://blog.csdn.net/m0_67930426/article/details/135490541?spm=1001.2014.3001.5501https://blog.csdn.net/m0_67930426/article/details/135490541?spm=1001.2014.3001.5501

第一小节

 

: 这是 Element UI 的弹出确认框组件

confirm-button-text='确定' 确认按钮的文本设置为确定

cancel-button-text='我再想想': 取消按钮的文本设置为“我再想想”。

icon="el-icon-info": 在弹出框中显示一个信息图标

icon-color="red": 将图标的颜色设置为红色。

title="您确定批量删除这些数据吗？": 弹出框的标题设置为“您确定批量删除这些数据吗？”

@confirm="delBatch": 当用户点击确认按钮时，会触发名为 "delBatch" 的方法。

  delBatch() {
      let ids = this.multipleSelection.map(v => v.id)  
      this.request.post("/file/del/batch", ids).then(res => {
        if (res.code === '200') {
          this.$message.success("批量删除成功")
          this.load()
        } else {
          this.$message.error("批量删除失败")
        }
      })
    },

delBatch() {: 定义了一个名为 delBatch 的方法

let ids = this.multipleSelection.map(v => v.id): 这一行从 this.multipleSelection 数组中提取每个对象的 id 属性，并创建一个新的数组 ids。例如，如果 this.multipleSelection 是 [{id: 1}, {id: 2}, {id: 3}]，那么 ids 将会是 [1, 2, 3]。

this.request.post("/file/del/batch", ids).then(res => {: 使用 this.request.post 方法向服务器发送一个 POST 请求，以删除指定的数据。服务器的URL是 /file/del/batch，并且传递了之前提取的 ids 作为请求的数据。然后，它等待服务器的响应，并在收到响应后执行提供的回调函数。