【Vue】文件管理页面制作

<template>
  <div>
    <div style="margin: 10px 0">
      <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="name"></el-input>
      <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>
    <div style="margin: 10px 0">
      <el-upload :action="'http://' + serverIp + ':9090/file/upload'" :show-file-list="false"
                 :on-success="handleFileUploadSuccess" style="display: inline-block">
        <el-button type="primary" class="ml-5">上传文件 <i class="el-icon-top"></i></el-button>
      </el-upload>
      <el-popconfirm
          class="ml-5"
          confirm-button-text='确定'
          cancel-button-text='我再想想'
          icon="el-icon-info"
          icon-color="red"
          title="您确定批量删除这些数据吗？"
          @confirm="delBatch"
      >
        <el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>
      </el-popconfirm>

    </div>
    <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="name" label="文件名称"></el-table-column>
      <el-table-column prop="type" label="文件类型"></el-table-column>
      <el-table-column prop="size" label="文件大小(kb)"></el-table-column>
      <el-table-column label="预览">
        <template slot-scope="scope">
          <el-button type="primary" @click="preview(scope.row.url)">预览</el-button>
        </template>
      </el-table-column>
      <el-table-column label="下载">
        <template slot-scope="scope">
          <el-button type="primary" @click="download(scope.row.url)">下载</el-button>
        </template>
      </el-table-column>
      <el-table-column label="启用">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.enable" active-color="#13ce66" inactive-color="#ccc"
                     @change="changeEnable(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="del(scope.row.id)"
          >
            <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import {serverIp} from "../../public/config";

export default {
  name: "File",
  data() {
    return {
      serverIp: serverIp,
      tableData: [],
      name: '',
      multipleSelection: [],
      pageNum: 1,
      pageSize: 10,
      total: 0
    }
  },
  created() {
    this.load()
  },
  methods: {
    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

      })
    },
    changeEnable(row) {
      this.request.post("/file/update", row).then(res => {
        if (res.code === '200') {
          this.$message.success("操作成功")
        }
      })
    },
    del(id) {
      this.request.delete("/file/" + id).then(res => {
        if (res.code === '200') {
          this.$message.success("删除成功")
          this.load()
        } else {
          this.$message.error("删除失败")
        }
      })
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    delBatch() {
      let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
      this.request.post("/file/del/batch", ids).then(res => {
        if (res.code === '200') {
          this.$message.success("批量删除成功")
          this.load()
        } else {
          this.$message.error("批量删除失败")
        }
      })
    },
    reset() {
      this.name = ""
      this.load()
    },
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()
    },
    handleFileUploadSuccess(res) {
      console.log(res)
      this.$message.success("上传成功")
      this.load()
    },
    download(url) {
      window.open(url)
    },
    preview(url) {
      window.open('https://file.keking.cn/onlinePreview?url=' + encodeURIComponent(window.btoa((url))))
    },
  }
}
</script>

<style scoped>

</style>

目录

第一部分

第一小节 

第二小节 

 第三小节

第二部分

​编辑

第一小节

第二小节

第三部分

第一小节

第二小节

 第四部分

第一小节

第二小节

 第三小节

第四小节

第五小节

 第六小节

第七小节

 第五部分

第一部分

 <div style="margin: 10px 0">
      <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="name"></el-input>
      <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>

第一小节 

<el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="name"></el-input>

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

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

第二小节 

<el-button class="ml-5" type="primary" @click="load">搜索</el-button>

 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.5501icon-default.png?t=N7T8https://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 属性。

 第三小节

   <el-button type="warning" @click="reset">重置</el-button>

  reset() {
      this.name = ""
      this.load()
    },
  1. this.name = "": 这是将this.name设置为空字符串的语句。其中this关键字指向当前对象，所以这行代码的意思是将当前对象的name属性重置为空字符串。
  2. this.load(): 这行代码调用了当前对象的load方法。这意味着，当你调用reset方法时，除了将name属性重置为空字符串外，还会执行load方法。

第二部分

 <div style="margin: 10px 0">
      <el-upload :action="'http://' + serverIp + ':9090/file/upload'" :show-file-list="false"
                 :on-success="handleFileUploadSuccess" style="display: inline-block">
        <el-button type="primary" class="ml-5">上传文件 <i class="el-icon-top"></i></el-button>
      </el-upload>

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

后端代码如下：

 https://blog.csdn.net/m0_67930426/article/details/135481660?spm=1001.2014.3001.5501icon-default.png?t=N7T8https://blog.csdn.net/m0_67930426/article/details/135481660?spm=1001.2014.3001.5501

 <el-upload ...>: 这是 Element UI 的上传组件。

第一小节

<el-upload :action="'http://' + serverIp + ':9090/file/upload'" :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 参数，这个函数主要的作用是处理文件上传成功后的响应。

  1. console.log(res): 使用 console.log 打印传入的响应对象 res。这通常用于调试，以查看服务器返回的具体信息。
  2. this.$message.success("上传成功")，显示上传成功这个消息
  3.   this.load()  调用上文的Load 方法重新加载数据
        

第二小节

 <el-button type="primary" class="ml-5">上传文件 <i class="el-icon-top"></i></el-button>

 上传文件按钮

第三部分

 <el-popconfirm
          class="ml-5"
          confirm-button-text='确定'
          cancel-button-text='我再想想'
          icon="el-icon-info"
          icon-color="red"
          title="您确定批量删除这些数据吗？"
          @confirm="delBatch"
      >
        <el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>
      </el-popconfirm>

后端代码如下：

 https://blog.csdn.net/m0_67930426/article/details/135490541?spm=1001.2014.3001.5501icon-default.png?t=N7T8https://blog.csdn.net/m0_67930426/article/details/135490541?spm=1001.2014.3001.5501

第一小节

<el-popconfirm
    class="ml-5"
    confirm-button-text='确定'
    cancel-button-text='我再想想'
    icon="el-icon-info"
    icon-color="red"
    title="您确定批量删除这些数据吗？"
    @confirm="delBatch"
>

<el-popconfirm ...>: 这是 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 作为请求的数据。然后，它等待服务器的响应，并在收到响应后执行提供的回调函数。

if (res.code === '200') {: 检查服务器响应中的 code 是否为 '200'。在 HTTP 协议中，'200' 表示请求成功。

this.$message.success("批量删除成功"): 如果服务器响应表示成功，则显示一个成功的消息，告诉用户“批量删除成功”。

this.load(): 调用当前对象的 load 方法。这可能是重新加载数据、重新渲染组件或其他与加载相关的操作。

第二小节

   <el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>

type="danger": 这设置了按钮的类型为 "danger"。在许多 UI 框架中，不同的按钮类型有不同的颜色和样式，通常 "danger" 类型的按钮会有一种红色或深色的外观，表示这是一个警告或危险的按钮。

 第四部分

 <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="name" label="文件名称"></el-table-column>
      <el-table-column prop="type" label="文件类型"></el-table-column>
      <el-table-column prop="size" label="文件大小(kb)"></el-table-column>
      <el-table-column label="预览">
        <template slot-scope="scope">
          <el-button type="primary" @click="preview(scope.row.url)">预览</el-button>
        </template>
      </el-table-column>
      <el-table-column label="下载">
        <template slot-scope="scope">
          <el-button type="primary" @click="download(scope.row.url)">下载</el-button>
        </template>
      </el-table-column>
      <el-table-column label="启用">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.enable" active-color="#13ce66" inactive-color="#ccc"
                     @change="changeEnable(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="del(scope.row.id)"
          >
            <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

第一小节

 <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"
              @selection-change="handleSelectionChange">

:data="tableData": 绑定表格的数据源到 tableData 属性。这意味着你想使用 Vue 实例中的 tableData 数据来填充表格。

:header-cell-class-name="'headerBg'": 使用动态属性绑定将表头的单元格类名设置为 headerBg。这意味着你希望自定义表头的样式，并可能已经在 CSS 中定义了 .headerBg 这个类。

@selection-change="handleSelectionChange": 这是一个事件监听器，监听表格的选择变化。当用户选择或取消选择某个行时，会触发 handleSelectionChange 方法。

第二小节

  <el-table-column type="selection" width="55"></el-table-column>

type="selection": 这个属性设置列的类型为选择列。选择列通常用于全选或反选表格中的行。

 第三小节

<el-table-column prop="id" label="ID" width="80"></el-table-column>
<el-table-column prop="name" label="文件名称"></el-table-column>
<el-table-column prop="type" label="文件类型"></el-table-column>
<el-table-column prop="size" label="文件大小(kb)"></el-table-column>

第四小节

<el-table-column label="预览">
  <template slot-scope="scope">
    <el-button type="primary" @click="preview(scope.row.url)">预览</el-button>
  </template>
</el-table-column>

<template slot-scope="scope">: 使用 <template> 标签和 slot-scope 属性来定义一个具名插槽。具名插槽允许你在插槽内容中使用作用域变量。在这里，scope 是传递给该插槽的作用域变量。

@click="preview(scope.row.url)": 监听按钮的点击事件，当按钮被点击时，调用名为 preview 的方法，并传递 scope.row.url 作为参数。

 preview(url) {
      window.open('https://file.keking.cn/onlinePreview?url=' + encodeURIComponent(window.btoa((url))))
    },

  1. preview(url) {: 定义了一个名为 preview 的方法，该方法接受一个参数 url。

  2. window.open('https://file.keking.cn/onlinePreview?url=' + encodeURIComponent(window.btoa((url)))): 这行代码执行以下操作：

    • window.open: 用于打开一个新的浏览器窗口或标签页。
    • 'https://file.keking.cn/onlinePreview?url=': 这是要打开的链接的基础部分，它指向一个在线预览服务。
    • encodeURIComponent: 对后面的URL参数进行编码，确保特殊字符被正确处理。
    • window.btoa((url)): 使用 btoa 方法对 url 进行Base64编码。这通常用于在URL中传递二进制数据。

第五小节

<el-table-column label="下载">
  <template slot-scope="scope">
    <el-button type="primary" @click="download(scope.row.url)">下载</el-button>
  </template>
</el-table-column>

  download(url) {
      window.open(url)
    },

 第六小节

<el-table-column label="启用">
  <template slot-scope="scope">
    <el-switch v-model="scope.row.enable" active-color="#13ce66" inactive-color="#ccc"
               @change="changeEnable(scope.row)"></el-switch>
  </template>
</el-table-column>

v-model="scope.row.enable": 使用 Vue 的双向数据绑定将开关的状态绑定到当前行的 enable 属性。

active-color="#13ce66" 和 inactive-color="#ccc": 分别设置开关的激活颜色和未激活颜色。

@change="changeEnable(scope.row)": 当开关状态发生变化时，调用名为 changeEnable 的方法，并传递当前行的对象作为参数。

changeEnable(row) {
      this.request.post("/file/update", row).then(res => {
        if (res.code === '200') {
          this.$message.success("操作成功")
        }
      })
    },

这一段代码定义了一个名为changeEnable 的方法，它接收一个参数 row

使用 this.request.post 方法发送一个post请求到服务器的 "/file/update" 路径，并将 row 作为请求的数据。

if (res.code === '200') {: 检查响应（来自服务器的响应）中的 code 是否为 '200'。在 HTTP 协议中，'200' 通常表示请求成功。

this.$message.success("操作成功"): 

第七小节

<el-table-column label="操作" width="200" align="center">
  <template slot-scope="scope">
    <el-popconfirm
        class="ml-5"
        confirm-button-text='确定'
        cancel-button-text='我再想想'
        icon="el-icon-info"
        icon-color="red"
        title="您确定删除吗？"
        @confirm="del(scope.row.id)"
    >
      <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
    </el-popconfirm>
  </template>
</el-table-column>

参考第三部分

del(id) {
      this.request.delete("/file/{id}" + id).then(res => {
        if (res.code === '200') {
          this.$message.success("删除成功")
          this.load()
        } else {
          this.$message.error("删除失败")
        }
      })
    },

 第五部分

<div style="padding: 10px 0">
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[2, 5, 10, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
  </el-pagination>
</div>

 <el-pagination ... > ... </el-pagination>: 这是 Element UI 的分页组件，用于实现分页功能。

@size-change="handleSizeChange": 当每页显示的数量发生变化时，触发 handleSizeChange 方法。

@current-change="handleCurrentChange": 当当前页码发生变化时，触发 handleCurrentChange 方法。

 handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()
    },
  1. handleCurrentChange(pageNum) {: 定义了一个名为 handleCurrentChange 的方法，该方法接受一个参数 pageNum。
  2. console.log(pageNum): 在控制台输出当前页码。这通常用于调试目的，以便了解 pageNum 的值。
  3. this.pageNum = pageNum: 将当前页码的值赋给组件的 pageNum 数据属性。这里使用 this 关键字来访问组件实例。
  4. this.load(): 调用组件的 load 方法。重新加载数据。

:current-page="pageNum": 使用 Vue 的数据绑定将当前页码绑定到 pageNum 数据属性上。

 :page-sizes="[2, 5, 10, 20]": 设置每页显示数量的选项为2、5、10和20。

:page-size="pageSize": 使用 Vue 的数据绑定将每页显示的数量绑定到 pageSize 数据属性上。

layout="total, sizes, prev, pager, next, jumper": 定义分页组件的布局，包括总页数、每页显示数量的选择、上一页、页码、下一页和跳转至特定页的输入框。

:total="total": 使用 Vue 的数据绑定将总页数绑定到 total 数据属性上。

 </el-pagination>: 结束 <el-pagination> 组件标签

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/308783.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

VBA_NZ系列工具NZ11:VBA光标跟随策略

VBA_NZ系列工具NZ11:VBA光标跟随策略

我的教程一共九套及VBA汉英手册一部&#xff0c;分为初级、中级、高级三大部分。是对VBA的系统讲解&#xff0c;从简单的入门&#xff0c;到数据库&#xff0c;到字典&#xff0c;到高级的网抓及类的应用。大家在学习的过程中可能会存在困惑&#xff0c;这么多知识点该如何组织…
阅读更多...
python_数据可视化_pandas_导入CSV数据

python_数据可视化_pandas_导入CSV数据

目录 1.导入库 2.导入CSV文件 3.指定分隔符 4.指定读取行数 4.指定读取列数 5.读取文件或文件的路径中有中文 1.导入库 import pandas as pd 2.导入CSV文件 导入时要指定编码格式 data pd.read_csv(D:/desktop/TestCSV.csv,encodinggbk)print(data) 3.指定分隔符 默认…
阅读更多...
Mybatis——多表查询

Mybatis——多表查询

目录 一、简介 二、业务环境的准备 2.1、准备工作&#xff1a; 2.2、SQL 三、一对一和一对多 Sql语句&#xff1a; POJO OrderMapper OrderMapper.xml Test测试类 运行结果 一、简介 MyBatis 是一个优秀的持久层框架&#xff0c;它提供了强大的支持来执行数据库操作&am…
阅读更多...
概述：利用大模型 (LLMs) 解决信息抽取任务

概述：利用大模型 (LLMs) 解决信息抽取任务

论文标题&#xff1a;Large Language Models for Generative Information Extraction: A Survey 论文链接&#xff1a;https://arxiv.org/pdf/2312.17617.pdf 论文主要探讨了大型语言模型&#xff08;LLMs&#xff09;在生成式信息抽取&#xff08;IE&#xff09;任务中的应用…
阅读更多...
Scala入门到放弃—04—集合

Scala入门到放弃—04—集合

文章目录 集合数组ListSetMapTuple其他 集合 数组 可变数组 package org.example object ArrayApp extends App{//继承App后直接直接调用函数&#xff0c;不需要main//println("hello")val a new Array[String](5)a(0)"hello"println(a(0))val b Array…
阅读更多...
Linux C/C++ 显示NIC流量统计信息

Linux C/C++ 显示NIC流量统计信息

NIC流量统计信息是由操作系统维护的。当数据包通过NIC传输时&#xff0c;操作系统会更新相关的计数器。这些计数器记录了数据包的发送和接收数量、字节数等。通过读取这些计数器&#xff0c;我们可以获得关于网络流量的信息。 为什么需要这些信息? 可以使用这些信息来监控网络…
阅读更多...
怎么投稿各大媒体网站？

怎么投稿各大媒体网站？

怎么投稿各大媒体网站&#xff1f;这是很多写作者及自媒体从业者经常面临的问题。在信息爆炸的时代&#xff0c;如何将自己的文章推送到广大读者面前&#xff0c;成为了一个不可避免的挑战。本文将为大家介绍一种简单有效的投稿方法——媒介库发稿平台发稿&#xff0c;帮助大家…
阅读更多...
不知道题目是啥

不知道题目是啥

本题是学校的集训里的题&#xff0c;所有不知道题目名字是啥&#xff0c;直接看题目就好 解题思路&#xff1a;因为字符串只含有小写字母&#xff0c;所以可以创建两个数组分别来存s和t的每个字母出现次数&#xff0c;然后遍历数组&#xff0c;如果s字符串中的某个字母比t的小&…
阅读更多...
Python GIL 一文全知道！

Python GIL 一文全知道！

GIL 作为 Python 开发者心中永远的痛&#xff0c;在最近即将到来的更新中&#xff0c;终于要彻底解决了&#xff0c;整个 Python 社群都沸腾了 什么是GIL&#xff1f; GIL是英文学名global interpreter lock的缩写&#xff0c;中文翻译成全局解释器锁。GIL需要解决的是线程竞…
阅读更多...
云卷云舒：kubernetes简介

云卷云舒：kubernetes简介

Kubernetes是由google公司在2014年发布的一款开源的容器编排引擎&#xff0c;用于容器化应用程序的自动化部署、扩展与管理。它能够编排多种容器任务&#xff0c;涵盖虚拟机集群管理、负载均衡以及网络流量分配等等。2017年&#xff0c;aws、微软云、阿里云等等著名的云计算公司…
阅读更多...
文献阅读1

文献阅读1

A Hierarchical Representation Network for Accurate and Detailed Face Reconstruction from In-The-Wild Images 会议/期刊&#xff1a;CVPR 2023&#xff1b;阿里达摩院&#xff1b;Biwen Lei 概述&#xff1a;这是一篇单张图片三维人脸重建的论文&#xff0c;这篇论文的…
阅读更多...
26、web攻防——通用漏洞SQL注入SqlmapOracleMongodbDB2

26、web攻防——通用漏洞SQL注入SqlmapOracleMongodbDB2

文章目录 OracleMongoDBsqlmap SQL注入课程体系&#xff1b; 数据库注入&#xff1a;access、mysql、mssql、oracle、mongodb、postgresql等数据类型注入&#xff1a;数字型、字符型、搜索型、加密型&#xff08;base63 json&#xff09;等提交方式注入&#xff1a;get、post、…
阅读更多...
ChatGPT提示词大赏：GPT Prompts Hub 2024年最新ChatGPT提示词项目

ChatGPT提示词大赏：GPT Prompts Hub 2024年最新ChatGPT提示词项目

&#x1f31f; GPT Prompts Hub &#x1f31f; English | 简体中文 Security Prompts | GPTS Prompts 欢迎来到 “GPT Prompts Hub” 存储库&#xff01;&#x1f31f; 探索并分享高质量的 ChatGPT 提示词。培养创新性内容&#xff0c;提升对话体验&#xff0c;激发创造力。…
阅读更多...
创建型模式 | 建造者模式

创建型模式 | 建造者模式

一、建造者模式 1、原理 建造者模式又叫生成器模式&#xff0c;是一种对象的构建模式。它可以将复杂对象的建造过程抽象出来&#xff0c;使这个抽象过程的不同实现方法可以构造出不同表现&#xff08;属性&#xff09;的对象。创建者模式是一步一步创建一个复杂的对象&#xf…
阅读更多...
在App Store Connect上编辑多个用户的访问权限

在App Store Connect上编辑多个用户的访问权限

作为一名编程新手&#xff0c;在App Store Connect中管理用户权限可能初听起来有些复杂&#xff0c;但实际上它是一个相对直接的过程。这里是一个步骤清晰的指南来帮助您在App Store Connect上编辑多个用户的访问权限。 App Store Connect 简介 在开始之前&#xff0c;让我们先…
阅读更多...
Linux权限2

Linux权限2

相关命令 chown [用户名] [文件]​ 更改文件拥有者&#xff08;加sudo强制更改&#xff09; chown [拥有者]:[所属组] [文件] 更改文件拥有者和所属组&#xff08;root权限下&#xff09; chgrp [用户名] [文件] 更改文件所属组 文件类型 输入ls或ll显示的文件&#xff…
阅读更多...
网络协议攻击与模拟_02ARP协议

网络协议攻击与模拟_02ARP协议

一、arp协议简介 一个工作在二层的三层协议&#xff0c;事一个2.5层协议 ARP协议地址解析协议&#xff0c;将一个已知的Ip地址解析为MAC地址&#xff0c;从而进行二层数据交互 二、工作流程 1、两个阶段 ARP请求ARP响应 两台主机IP地址主机A和主机B&#xff0c;IP地址和MAC…
阅读更多...
Ubuntu 实时查看显存调用命令 free 及命令详解与原理说明（全）

Ubuntu 实时查看显存调用命令 free 及命令详解与原理说明（全）

Ubuntu 实时查看显存调用命令 free 及详解 文章目录 Ubuntu 实时查看显存调用命令 free 及详解1 free 作用1.1 语法&#xff1a;1.2 单独显示例子1.3 组合显示例子 2 输出介绍3 原理解释3.1 buff / cache&#xff08;即 buffer / cache&#xff09;3.1.1 buffer 缓冲区3.1.2 ca…
阅读更多...
Java生成包含ehcarts报表的PDF文件，亲测有效！！！

Java生成包含ehcarts报表的PDF文件，亲测有效！！！

1.引入maven依赖 <dependency><groupId>org.jfree</groupId><artifactId>jfreechart</artifactId><version>1.5.3</version></dependency><dependency><groupId>com.itextpdf</groupId><artifactId>i…
阅读更多...
QT第三天

QT第三天

完善对话框&#xff0c;点击登录对话框&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示”登录成功“&#xff0c;提供一个Ok按钮&#xff0c;用户点击Ok后&#xff0c;关闭登录界面&#xff0c;跳转到其他界面如果账号和密码不匹配&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023