nuxt、vue实现PDF和视频文件的上传、下载、预览

上传

在这里插入图片描述

上传页面

 <el-form-item :label="(form.ququ3 == 1 ? '参培' : form.ququ3 == 2 ? '授课' : '') + '证明材料'" prop="ququ6"><PdfUpload v-model="form.ququ6" :fileType="['pdf', 'mp4', 'avi', 'ts']"></PdfUpload>
</el-form-item>

PdfUpload组件

自定义组件实现v-model,只需要定义props:value属性来接收父组件的v-model绑定的初始值,在子组件改变值时触发$emit(‘input’,值)

<template><div class="upload-file "><el-upload multiple :action="uploadFileUrl" :before-upload="handleBeforeUpload" :file-list="fileList" :limit="limit":on-error="handleUploadError" :on-exceed="handleExceed" :on-success="handleUploadSuccess" :show-file-list="false":headers="headers" class="upload-file-uploader" ref="upload"><el-button size="small" type="primary">点击上传</el-button><!-- 上传提示 --><div class="el-upload__tip" slot="tip" v-if="showTip"><template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template><template v-if="fileType"> 只能上传PDF文件和视频,格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template></div></el-upload><!-- 文件列表 --><div class="ml-100" style="margin-top: -20px;"><transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul"><li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList"><el-link :href="file.url" :underline="false" target="_blank"><span :class="getFileName(file.name).includes('pdf') ? 'el-icon-document' : 'el-icon-video-camera'"> {{getFileName(file.name) }}</span></el-link><div class="ele-upload-list__item-content-action ml-60" style="min-width: 40px;"><el-link :underline="false" @click="handleDelete(index)" type="primary" icon="el-icon-circle-close"></el-link></div></li></transition-group></div></div>
</template><script>
// ******自定义组件实现v-model,只需要定义props:value属性来接收父组件的v-model绑定的初始值,在子组件改变值时触发$emit('input',值)
export default {name: "FileUpload",props: {// 文件值,fileListvalue: [String, Object, Array],// 数量限制limit: {type: Number,},// 大小限制(MB)fileSize: {type: Number,// default: 500,},// 文件类型, 例如['png', 'jpg', 'jpeg']fileType: {type: Array,default: () => ['png', 'jpg', 'jpeg'],},// 是否显示文件大小和类型限制提示文字isShowTip: {type: Boolean,default: true},},data() {return {number: 0,uploadList: [],uploadFileUrl: '/prod-api' + "/file/upload", // 上传的图片服务器地址headers: {Authorization: this.$store.state.token,},fileList: [],};},watch: {value: {handler(val) {if (val) {console.log(666, val);// 然后将数组转为对象数组// 首先将值转为数组const list = Array.isArray(val) ? val : this.value.split(",");// 然后将数组转为对象数组this.fileList = list.map((item) => {if (typeof item === "string") {item = { name: item, url: item };}return item;});} else {this.fileList = [];return [];}},deep: true,immediate: true,}},computed: {// 是否显示提示showTip() {return this.isShowTip && (this.fileType || this.fileSize);},},methods: {// 上传前校检格式和大小handleBeforeUpload(file) {console.log('上传前-校验', file, file.name);// 校检文件类型if (this.fileType) {let fileExtension = "";if (file.name.lastIndexOf(".") > -1) {fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);}const isTypeOk = this.fileType.some((type) => {if (file.type.indexOf(type) > -1) return true;if (fileExtension && fileExtension.indexOf(type) > -1) return true;return false;});if (!isTypeOk) {this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);return false;}}// 校检文件大小if (this.fileSize) {const isLt = file.size / 1024 / 1024 < this.fileSize;if (!isLt) {this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);return false;}}this.$modal.loading("正在上传,请稍候...");this.number++;return true;},// 文件个数超出handleExceed() {this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);},// 上传失败handleUploadError(err) {this.$modal.msgError("上传失败,请重试");this.$modal.closeLoading()},// 上传成功回调handleUploadSuccess(res) {// name为 文件console.log('上传成功回调', res);this.uploadList.push({ name: res.data.url, url: res.data.url, });if (this.uploadList.length === this.number) {this.fileList = this.fileList.concat(this.uploadList);console.log(2222, this.fileList)this.uploadList = [];this.number = 0;this.$emit("input", this.listToString(this.fileList));this.$modal.closeLoading();}},// 删除文件handleDelete(index) {this.fileList.splice(index, 1);this.$emit("input", this.listToString(this.fileList));},// 获取文件名称getFileName(name) {if (name.lastIndexOf("-") > -1) {return name.slice(name.lastIndexOf("-") + 1);} else {return "";}},// 对象转成指定字符串分隔listToString(list, separator) {let strs = "";separator = separator || ",";for (let i in list) {strs += list[i].url + separator;}return strs != '' ? strs.substr(0, strs.length - 1) : '';}}
};
</script><style scoped  >
.upload-file-uploader {margin-bottom: 5px;
}::v-deep .el-upload--picture-card {width: 104px;height: 104px;line-height: 104px;
}.upload-file-list {max-height: 240px !important;overflow-y: auto;
}.upload-file-list .el-upload-list__item {line-height: 2;margin-bottom: 10px;position: relative;
}.upload-file-list .ele-upload-list__item-content {display: flex;justify-content: space-between;align-items: center;color: inherit;
}.ele-upload-list__item-content-action .el-link {margin-right: 10px;
}
</style>

整个上传页面

<template><div id="index" class="flex flex-top w ptb-30"><Menu></Menu><div class="flex-1 ml-30  over-hidden"><h3 class="mt-20 mb-40">新增培训</h3><el-form style="width:500px" :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form"><el-form-item label="培训主题名" prop="ququ1"><el-input v-model.trim="form.ququ1" placeholder="请输入培训主题名" clearable /></el-form-item><el-form-item label="培训分类" prop="ququ2"><el-select v-model="form.ququ2" placeholder="请选择培训分类" style="width: 100%;"><el-option label="5" value="5"></el-option></el-select></el-form-item><el-form-item label="所属类别" prop="ququ3"><el-radio-group v-model="form.ququ3"><el-radio label="1">参培人</el-radio><el-radio label="2">授课人</el-radio></el-radio-group></el-form-item><el-form-item label="参与地点" prop="ququ4"><el-input v-model.trim="form.ququ4" placeholder="请输入参与地点" clearable /></el-form-item><el-form-item label="起止日期" prop="ququ5"><el-date-picker v-model="form.ququ5" type="daterange" range-separator="至" start-placeholder="开始日期"end-placeholder="结束日期" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker></el-form-item><el-form-item :label="(form.ququ3 == 1 ? '参培' : form.ququ3 == 2 ? '授课' : '') + '证明材料'" prop="ququ6"><PdfUpload v-model="form.ququ6" :fileType="['pdf', 'mp4', 'avi', 'ts']"></PdfUpload></el-form-item><el-form-item label="备注" prop="ququ7"><el-input v-model.trim="form.ququ7" placeholder="请输入备注" clearable type="textarea" /></el-form-item><el-form-item><el-button type="primary" @click="submit('form')">提交审核</el-button><el-button type="primary" plain @click="save">保存草稿</el-button><el-button @click="back">返回</el-button></el-form-item></el-form></div></div>
</template>
<script>export default {data() {return {form: {ququ1: '',ququ2: '',ququ3: '',ququ4: '',ququ5: '',ququ6: [],ququ7: '',},rules: {ququ1: {required: true,message: '请输入主题名',trigger: ['blur']},ququ2: {required: true,message: '请选择培训分类',trigger: ['change']},ququ3: {required: true,message: '请选择所属类别',trigger: ['change']},ququ5: {required: true,message: '请选择起止日期',trigger: ['change']},ququ6: {required: true,message: '请上传证明材料',trigger: ['change']},}};},mounted() {if (localStorage.getItem('form')) {this.$confirm('检测到您有保存的草稿,需要使用吗?', '提示', {confirmButtonText: '使用',cancelButtonText: '删除',type: 'warning'}).then(() => {this.form = JSON.parse(localStorage.getItem('form'))}).catch(() => {localStorage.removeItem('form')});}},methods: {submit(formName) {this.$refs[formName].validate((valid) => {if (valid) {this.$axios.get('/exam/info/queryErrorQuestionQuantity').then(res => {this.back()localStorage.removeItem('form')})} else {return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},back() {this.$router.back()},save() {console.log(this.form.ququ6.map(item => item.url))localStorage.setItem('form', JSON.stringify(this.form))},},
};
</script>
<style scoped></style>

预览和下载

在这里插入图片描述

在这里插入图片描述

预览页面

 <el-button @click="downLoad(item)" type="primary" size="mini">下载</el-button><el-button @click="preview(item)" type="danger" size="mini">预览</el-button>downLoad(item) {let url = "https://cscec83-learnplatform.oss-cn-shanghai.aliyuncs.com/test/2023-11-27/6a12b9ca-3ae9-435b-b023-0f9c119afad3-1.mp4"let url1 = "https://cscec83-learnplatform.oss-cn-shanghai.aliyuncs.com/test/2023-11-27/53aa1f60-0735-4203-86b2-c2b8b019e8d9-我的哈哈.pdf"fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址const a = document.createElement('a')a.href = URL.createObjectURL(blob)a.download = url.split('-')[url.split('-').length - 1]  // 下载文件的名字document.body.appendChild(a)a.click()})},preview(item) {let url = "https://cscec83-learnplatform.oss-cn-shanghai.aliyuncs.com/test/2023-11-27/6a12b9ca-3ae9-435b-b023-0f9c119afad3-1.mp4"let url1 = "https://cscec83-learnplatform.oss-cn-shanghai.aliyuncs.com/test/2023-11-27/53aa1f60-0735-4203-86b2-c2b8b019e8d9-我的哈哈.pdf"window.open(url1)}

整个列表加详情弹窗页面

<template><div id="index" class="flex flex-top w ptb-30"><Menu></Menu><div class="flex-1 ml-30  over-hidden"><!-- 搜索 --><el-form :model="queryParams" ref="queryForm" size="small" :inline="true"><el-form-item label="培训名称" prop="ququ1"><el-input v-model.trim="queryParams.ququ1" placeholder="请输入培训名称" clearable @keyup.enter.native="getList(1)" /></el-form-item><el-form-item label="起止日期" prop="ququ2"><el-date-picker v-model="queryParams.ququ2" type="daterange" range-separator="至" start-placeholder="开始日期"end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker></el-form-item><el-form-item label="培训地点" prop="ququ3"><el-input v-model.trim="queryParams.ququ3" placeholder="请输入培训地点" clearable @keyup.enter.native="getList(1)" /></el-form-item><el-form-item><el-button type="primary" icon="el-icon-search" size="mini" @click="getList(1)">查询</el-button><el-button size="mini" @click="resetQuery">重置</el-button></el-form-item></el-form><!-- 新增 --><el-row><el-col :span="24" class="flex_r"><el-button type="success" icon="el-icon-plus" size="mini" @click="add">新增</el-button></el-col></el-row><!-- tab  --><el-tabs v-model="tab" @tab-click="getList(1)"><el-tab-pane label="全部培训" name="1"></el-tab-pane><el-tab-pane label="已通过审批" name="2"></el-tab-pane><el-tab-pane label="未通过审批" name="3"></el-tab-pane></el-tabs><!-- 表格 --><el-table :data="tableData" border><el-table-column prop="paperName" align="center" min-width="140" label="培训名称" :show-overflow-tooltip="true"></el-table-column><el-table-column prop="paperName" align="center" min-width="140" label="培训分类" :show-overflow-tooltip="true"></el-table-column><el-table-column prop="practiceType" align="center" min-width="90" label="所属类别"><template slot-scope="scope"><el-tag size="small">{{ scope.row.practiceType == 1 ? '参培人' : '授课人' }}</el-tag></template></el-table-column><el-table-column prop="paperName" align="center" min-width="100" label="培训地点" :show-overflow-tooltip="true"></el-table-column><el-table-column prop="startTime" align="center" min-width="120" label="开始时间"></el-table-column><el-table-column prop="endTime" align="center" min-width="120" label="结束时间"></el-table-column><el-table-column prop="practiceType" align="center" min-width="90" label="审批状态"><template slot-scope="scope"><el-tag :type="scope.row.practiceType == 1 ? '' : scope.row.practiceType == 2 ? 'success' : 'danger'">{{ scope.row.practiceType == 1 ? '审核中' : scope.row.practiceType == 2 ? '已通过' : '未通过' }}</el-tag></template></el-table-column><el-table-column label="操作" align="center" fixed="right" min-width="100"><template slot-scope="scope"><el-button @click="toDetail(scope.row)" size="mini" type="text" icon="el-icon-document-copy">详情</el-button></template></el-table-column></el-table><!-- 分页 --><div class="center mtb-20"><el-pagination :hide-on-single-page="true" background layout="prev, pager, next" :total="total * 1":current-page.sync="page" @current-change="getList" :page-size="this.pageSize"></el-pagination></div></div><!-- 详情弹窗 --><el-dialog title="培训详情" :visible.sync="show" width="1000px"><el-card shadow="hover" class="flex-1 ml-20 scroll pd-10"><el-descriptions title="培训详情"><el-descriptions-item label="培训主题名">kooriookami</el-descriptions-item><el-descriptions-item label="培训分类">18100000000</el-descriptions-item><el-descriptions-item label="提交时间">苏州市</el-descriptions-item><el-descriptions-item label="本人所属类别"><el-tag size="small">学校</el-tag></el-descriptions-item><el-descriptions-item label="培训起止日期">江苏省苏州市吴中区吴中大道 1188</el-descriptions-item><el-descriptions-item label="参与地点">江苏省苏州市吴中区吴中大道 1188</el-descriptions-item><el-descriptions-item label="备注">江苏省苏州市吴中区吴中大道 1188</el-descriptions-item></el-descriptions></el-card><el-card shadow="hover" class="flex-1 ml-20 scroll pd-10 mt-30"><h3 class="mb-20">附件记录</h3><div class="flex mb-10" v-for="(item, i) in 6"><div>23243232.png</div><div><el-button @click="downLoad(item)" type="primary" size="mini">下载</el-button><el-button @click="preview(item)" type="danger" size="mini">预览</el-button></div></div></el-card></el-dialog></div>
</template>
<script>export default {data() {return {tab: '1',page: 1,pageSize: 10,total: 0,tableData: [],// 搜索queryParams: {ququ1: "",ququ2: "",ququ3: "",},//详情show: false,};},mounted() {this.getList()},methods: {getList(page) {console.log(this.queryParams.ququ2)if (page == 1) {this.page = 1;}this.$axios.get('/exam/practiceHistory/record/listPc', {params: {pageNum: this.page,pageSize: this.pageSize,tab: this.tab,...this.queryParams}}).then(res => {this.tableData = res.rows;this.total = res.total;});},/** 重置按钮操作 */resetQuery() {this.$refs['queryForm'].resetFields();this.queryParams.ququ2 = ''this.getList(1)},add() {this.$router.push({ path: "/train/add" });},toDetail(row) {this.show = true},downLoad(item) {let url = "https://cscec83-learnplatform.oss-cn-shanghai.aliyuncs.com/test/2023-11-27/6a12b9ca-3ae9-435b-b023-0f9c119afad3-1.mp4"let url1 = "https://cscec83-learnplatform.oss-cn-shanghai.aliyuncs.com/test/2023-11-27/53aa1f60-0735-4203-86b2-c2b8b019e8d9-我的哈哈.pdf"fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址const a = document.createElement('a')a.href = URL.createObjectURL(blob)a.download = url.split('-')[url.split('-').length - 1]  // 下载文件的名字document.body.appendChild(a)a.click()})},preview(item) {let url = "https://cscec83-learnplatform.oss-cn-shanghai.aliyuncs.com/test/2023-11-27/6a12b9ca-3ae9-435b-b023-0f9c119afad3-1.mp4"let url1 = "https://cscec83-learnplatform.oss-cn-shanghai.aliyuncs.com/test/2023-11-27/53aa1f60-0735-4203-86b2-c2b8b019e8d9-我的哈哈.pdf"window.open(url1)}},
};
</script>
<style scoped></style>

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

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

相关文章

Java游戏制作——王者荣耀

一.准备工作 首先创建一个新的Java项目命名为“王者荣耀”&#xff0c;并在src下创建两个包分别命名为“com.sxt"、”com.stx.beast",在相应的包中创建所需的类。 创建一个名为“img”的文件夹来储存所需的图片素材。 二.代码呈现 package com.sxt;import javax.sw…

Android开源框架--Dagger2详解

功名只向马上取&#xff0c;真是英雄一丈夫 一&#xff0c;定义 我们知道在一个类中&#xff0c;通常会定义其他类型的变量&#xff0c;这个变量就是我们所说的“依赖“。 对一个类的变量进行初始化&#xff0c;有两种方式。第一种&#xff0c;这个类自己进行初始化&#xff…

【Vue】Vue3 配置全局 scss 变量

variables.scss $color: #0c8ce9;vite.config.ts // 全局css变量css: {preprocessorOptions: {scss: {additionalData: import "/styles/variables.scss";,},},},.vue 文件使用

血的教训------入侵redis之利用python来破解redis密码

血的教训------入侵redis之利用python来破解redis密码 利用强大的python来进行redis的密码破解&#xff0c;过程不亦乐乎&#xff0c;当然也可以用shell脚本 本篇文章只供学习交流&#xff0c;请勿他用&#xff0c;谢谢。 其他相关联的文章 [1]VMware安装部署kail镜像服务器【…

Spring Boot创建和使用(重要)

Spring的诞生是为了简化Java程序开发的&#xff01; Spring Boot的诞生是为了简化Spring程序开发的&#xff01; Spring Boot就是Spring框架的脚手架&#xff0c;为了快速开发Spring框架而诞生的&#xff01;&#xff01; Spring Boot的优点&#xff1a; 快速集成框架&#x…

git的用法

目录 一、为什么需要git 二、git基本操作 2.1、初始化git仓库 2.2、配置本地仓库的name和email 2.3、认识工作区、暂存区、版本库 三、git的实际操作 3.1 提交文件 3.2 查看git状态以及具体的修改 3.3 git版本回退 git reset 3.1 撤销修改 四、git分支管理 4.…

fastjson和jackson序列化的使用案例

简单记录一下一个fastjson框架和jackson进行序列化的使用案例&#xff1a; 原json字符串&#xff1a; “{“lockCount”:”{1:790,113:1,2:0,211:0,101:1328,118:8,137:0,301:0,302:0}“,“inventoryCount”:”{1:25062,113:2,2:10000,211:2,101:11034,118:9,137:40,301:903914…

【数据库】聊聊一颗B+树 可以存储多少数据

我们知道数据库使用的数据结构是B树&#xff0c;但是B树可以存储多少数据呢&#xff0c;在面试中也是经常会问的问题&#xff0c;所以我们从根上理解这个问题。 操作系统层面 数据都是存储在磁盘中的&#xff0c;而磁盘中的数据都是以最新单位扇区进行分割。一个扇区的大小是…

大数据平台/大数据技术与原理-实验报告--MapReduce编程

实验名称 MapReduce编程 实验性质 &#xff08;必修、选修&#xff09; 必修 实验类型&#xff08;验证、设计、创新、综合&#xff09; 综合 实验课时 2 实验日期 2023.10.30-2023.11.03 实验仪器设备以及实验软硬件要求 专业实验室&#xff08;配有centos7.5系统…

Cortex-M与RISC-V区别

环境 Cortex-M以STM32H750为代表&#xff0c;RISC-V以芯来为代表 RTOS版本为RT-Thread 4.1.1 寄存器 RISC-V 常用汇编 RISC-V 关于STORE x4, 4(sp)这种寄存器前面带数字的写法&#xff0c;其意思为将x4的值存入sp4这个地址&#xff0c;即前面的数字表示偏移的意思 反之LOA…

论文阅读:“Model-based teeth reconstruction”

文章目录 AbstractIntroductionTeeth Prior ModelData PreparationParametric Teeth Model Teeth FittingTeeth Boundary Extraction Reference Abstract 近年来&#xff0c;基于图像的人脸重建方法日趋成熟。这些方法可以捕捉整个面部或面部特定区域&#xff08;如头发、眼睛…

探索H5的神秘世界:测试点解析

Html5 app实际上是Web app的一种&#xff0c;在测试过程中可以延续Web App测试的部分方法&#xff0c;同时兼顾手机端的一些特性即可&#xff0c;下面帮大家总结下Html5 app 相关测试方法&#xff01; app内部H5测试点总结 1、业务逻辑 除基本功能测试外&#xff0c;需要关注的…

【微服务专题】微服务架构演进

目录 前言阅读对象阅读导航前置知识笔记正文一、系统架构的演变1.1 单体架构1.2 单体水平架构1.3 垂直架构1.4 SOA架构1.5 微服务架构 二、如何实现微服务架构2.1 微服务架构下的技术挑战2.2 微服务技术栈选型2.3 什么是Spring Cloud全家桶2.4 Spring Cloud Alibaba版本选择 学…

智慧化工~工厂设备检修和保全信息化智能化机制流程

化工厂每年需要现场检修很多机器&#xff0c;比如泵、压缩机、管道、塔等等&#xff0c;现场检查人员都是使用照相机&#xff0c;现场拍完很多机器后&#xff0c;回办公室整理乱糟糟的照片&#xff0c;但是经常照了之后无法分辨是哪台设备&#xff0c;而且现场经常漏拍&#xf…

HarmonyOS4.0系列——02、汉化插件、声明式开发范式ArkTS和类web开发范式

编辑器调整 我们在每次退出编辑器后再次打开会直接进入项目文件中&#xff0c;这样在新建项目用起来很是不方便&#xff0c;所以这里跟着设置一下就好 这样下次进入就不会直接跳转到当时的文件项目中&#xff01;&#xff01; 关于汉化 settings → plugins → installe…

耗时一个星期整理的APP自动化测试工具大全

在本篇文章中&#xff0c;将给大家推荐14款日常工作中经常用到的测试开发工具神器&#xff0c;涵盖了自动化测试、APP性能测试、稳定性测试、抓包工具等。 一、UI自动化测试工具 1. uiautomator2 openatx开源的ui自动化工具&#xff0c;支持Android和iOS。主要面向的编程语言…

西南科技大学数字电子技术实验二(SSI逻辑器件设计组合逻辑电路及FPGA实现 )预习报告

一、计算/设计过程 说明:本实验是验证性实验,计算预测验证结果。是设计性实验一定要从系统指标计算出元件参数过程,越详细越好。用公式输入法完成相关公式内容,不得贴手写图片。(注意:从抽象公式直接得出结果,不得分,页数可根据内容调整) 1、1位半加器 真值表: 逻…

flask 上传文件

from flask import Flask, request, render_template,redirect, url_for from werkzeug.utils import secure_filename import os from flask import send_from_directory # send_from_directory可以从目录加载文件app Flask(__name__)#UPLOAD_FOLDER media # 注意&#xff…

Me-and-My-Girlfriend-1

Me-and-My-Girlfriend-1 一、主机发现和端口扫描 主机发现&#xff0c;靶机地址192.168.80.147 arp-scan -l端口扫描&#xff0c;开放了22、80端口 nmap -A -p- -sV 192.168.80.147二、信息收集 访问80端口 路径扫描 dirsearch -u "http://192.168.80.147/" -e * …

深入探索Maven:优雅构建Java项目的新方式(一)

Maven高级 1&#xff0c;分模块开发1.1 分模块开发设计1.2 分模块开发实现 2&#xff0c;依赖管理2.1 依赖传递与冲突问题2.2 可选依赖和排除依赖方案一:可选依赖方案二:排除依赖 3&#xff0c;聚合和继承3.1 聚合步骤1:创建一个空的maven项目步骤2:将项目的打包方式改为pom步骤…