【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-popconfirmclass="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-popconfirmclass="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.recordsthis.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 = pageSizethis.load()},handleCurrentChange(pageNum) {console.log(pageNum)this.pageNum = pageNumthis.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.recordsthis.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-popconfirmclass="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-popconfirmclass="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-popconfirmclass="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-popconfirmclass="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 = pageNumthis.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> 组件标签

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RIP复习实验

条件: R1为外网&#xff0c;R8和r9的环回分别是172.16.1.0/24和172.16.2.0/24 中间使用78.1.1.0/24 剩下的路由器2-6使用172.16.0.0/16 要求: R1为运营商 r1远程登录r2实际登录r7 R2访问r7要求走r5去访问 全网可达 实现流程: 首先配置好各接口ip address 然后r2-r7使用rip…

数据库授权问题 ERROR 1410 (42000): You are not allowed to create a user with GRANT

当我要给数据库授权时&#xff0c;却出现了错误。 ERROR 1410 (42000): You are not allowed to create a user with GRANT 包括对数据库角色权限信息的查询&#xff0c;同样也会出现问题 ERROR: 1141: There is no such grant defined for user xuxu on host localhost 这是…

扒一扒Go语言中的“语法糖”

概 述 最近学习Golang语言的过程中&#xff0c;我发现Golang&#xff08;后面简称Go&#xff09;中的语法糖还蛮多的&#xff0c;有些语法糖还让会让人很懵逼。那么接下来&#xff0c;让我以一个曾经的 Java CURD boy&#xff0c;来说一说 Go 中的语法糖。 语法糖定义 语法糖…

Selenium自动化程序被检测为爬虫,怎么屏蔽和绕过

Selenium 操作被屏蔽 使用selenium自动化网页时&#xff0c;有一定的概率会被目标网站识别&#xff0c;一旦被检测到&#xff0c;目标网站会拦截该客户端做出的网页操作。 比如淘宝和大众点评的登录页&#xff0c;当手工打开浏览器&#xff0c;输入用户名和密码时&#xff0c…

windows和liunx对比及Linux分类

windows一定比liunx差吗&#xff0c;这绝对是天大误解&#xff0c;不是说你常用的开始是liunx就代表windows差 windows和liunx对比 有人说Linux性能远高于Windows&#xff0c;这个笔者是不认可的&#xff0c;给Linux套上一个图形界面&#xff0c;你再使劲美化一下&#xff0c…

逆向7通用寄存器

MOV指令前后的容器宽度要一致 如ECX与EAX 都是32位 mov eax&#xff0c;0x111 可以少写后面补零多写的会移除 源操作数是后面的 目标操作数是前面的 32位和64位寻址宽度 是查找内存宽度的范围 每一个编号对应一个字节 即内存宽度 32位是4g 64位大的多 0x123456是临时数

光缆通信有什么特点?

光缆由一个或多个光纤组成&#xff0c;每个光纤由一个非常纤细的玻璃或塑料纤维组成&#xff0c;可以传输光信号的高速数据。光缆通信具有以下特点&#xff1a; 1. 高带宽&#xff1a;光缆通信可以提供非常高的带宽&#xff0c;远远超过传统的铜缆通信。光纤的宽带特性使其能够…

【PixPin】比Snipaste、QQ的截图长图和动图还好用的截图工具

1.下载地址—— 下载地址 2.下载压缩包 双击exe文件运行 按默认的来 中文安装 选择安装路径 下一步&#xff0c;安装 安装完成&#xff0c;可以自己设置快捷键

python画房子

前言 今天&#xff0c;我们来用Python画房子。 一、第一种 第一种比较简单。 代码&#xff1a; import turtle as t import timedef go(x, y):t.penup()t.goto(x, y)t.pendown() def rangle(h,w):t.left(180)t.forward(h)t.right(90)t.forward(w)t.left(-90)t.forward(h) de…

Android通知---创建通知(附加代码)

1. 创建基本通知 (1) 创建基本通知 NotificationCompat.Builder builder new NotificationCompat.Builder(this, "channel_id").setSmallIcon(R.drawable.notification_icon) .setContentTitle("textTitle") .setContentText("text…

ubuntu查看内存使用情况命令

命令简介 在Ubuntu系统中&#xff0c;可以使用终端命令来查看电脑的内存使用情况。打开终端并输入以下命令&#xff1a; free -h 该命令可用于查看系统中内存的总量、已使用的内存、空闲的内存及缓冲区使用的内存。其中“-h”选项用于以人类可读的格式显示内存大小。执行该命…

YOLOv8-Seg改进:轻量化改进 | 超越RepVGG!浙大阿里提出OREPA:在线卷积重参数化

🚀🚀🚀本文改进:OREPA在线卷积重参数化巧妙的和YOLOV8结合,并实现轻量化 🚀🚀🚀YOLOv8-seg创新专栏:http://t.csdnimg.cn/KLSdv 学姐带你学习YOLOv8,从入门到创新,轻轻松松搞定科研; 1)手把手教你如何训练YOLOv8-seg; 2)模型创新,提升分割性能; 3)独家…

虽迟但到!MySQL 可以用 JavaScript 写存储过程了!

任何能用 JavaScript 来干的事情&#xff0c;最终都会用 JavaScript 来干 背景 不久前&#xff0c;Oracle 在 MySQL 官方博客官宣了在 MySQL 中支持用 JavaScript 来写存储过程。 最流行的编程语言 最流行的数据库。程序员不做选择&#xff0c;当然是全都要。 使用方法 用 J…

Docker部署情侣恋爱网站

个人名片&#xff1a; 对人间的热爱与歌颂&#xff0c;可抵岁月冗长&#x1f31e; 个人主页&#x1f468;&#x1f3fb;‍&#x1f4bb;&#xff1a;念舒_C.ying 个人博客&#x1f30f; &#xff1a;念舒_C.ying 情侣恋爱网站 1. 修改代码2. 目录结构3. 编写Dockerfile4. 编写d…

基于ssm的物流信息管理系统论文

摘 要 计算机网络发展到现在已经好几十年了&#xff0c;在理论上面已经有了很丰富的基础&#xff0c;并且在现实生活中也到处都在使用&#xff0c;可以说&#xff0c;经过几十年的发展&#xff0c;互联网技术已经把地域信息的隔阂给消除了&#xff0c;让整个世界都可以即时通话…

车速预测 | Matlab基于RBF径向基神经网络的车速预测模型(多步预测,尾巴图)

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 车速预测 | Matlab基于RBF径向基神经网络的车速预测模型&#xff08;多步预测&#xff0c;尾巴图&#xff09; 程序设计 完整程序和数据获取方式&#xff1a;私信博主回复Matlab基于RBF径向基神经网络的车速预测模型…

软件测试|MySQL中的GROUP BY分组查询,你会了吗?

MySQL中的GROUP BY分组查询&#xff1a;详解与示例 在MySQL数据库中&#xff0c;GROUP BY语句用于将数据按照指定的列进行分组&#xff0c;并对每个分组执行聚合函数操作。这就是的我们可以在查询中汇总数据并生成有意义的结果。本文将深入介绍MySQL中的GROUP BY语句&#xff…

2023年度总结:但行前路,不负韶华

​ &#x1f981;作者简介&#xff1a;一名喜欢分享和记录学习的在校大学生 &#x1f42f;个人主页&#xff1a;妄北y &#x1f427;个人QQ&#xff1a;2061314755 &#x1f43b;个人邮箱&#xff1a;2061314755qq.com &#x1f989;个人WeChat&#xff1a;Vir2021GKBS &#x…

k8s部署mongodb-sharded7.X集群(多副本集)

#mongodb-sharded 7.X版本CHART NAME: mongodb-sharded CHART VERSION: 7.0.5 APP VERSION: 7.0.2helm repo add bitnami https://charts.bitnami.com/bitnami helm pull bitnami/bitnami/mongodb-sharded --untar默认副本数较多。我修改为33 搜索关键字replicaCount 修改 最后…

盖子的c++小课堂——第二十四讲:差分数组

前言 嗨嗨嗨&#xff0c;这里是盖子的小课堂哟&#xff0c;这次更新主要是因为快放假了&#xff0c;时间多了&#xff0c;好嘞&#xff0c;废话不多说&#xff0c;点赞评论拿来吧你~ 差分数组 一维差分数组 假设给你一个数组 nums &#xff0c;先对区间 [a,b] 中每个元素加…