bootstrap-fileinput文件上传、回显使用详解

news2024/12/28 2:26:21

文件上传bootstrap-fileinput使用详解

  • 一、增加页面的文件上传
    • (一)bootstrap-fileinput文件上传功能
      • 1.先引入js依赖
      • 2.在html上面写入文件框
    • (二)根据若依给出的示例引用和改进
    • (三)根据uploadUrl进行上传
    • (四)完成效果图
  • 二、编辑(修改)界面文件的上传,回显,删除(数据库同时删除)的操作 )
    • (一)编辑界面文件的上传
      • 1.首先引入js
      • 2.引入标签
      • 3.引入js
      • 后台代码:
    • (二)编辑界面文件的回显
      • 1.文件的实体类:
      • 2.想要回显文件,首先要在工程类(你的编辑界面的主类)里面关联文件类
      • 3.进行文件的回显
    • (三)文件的删除

因为在使用若依框架进行学习,里面嵌入了bootstrap-fileinput这个功能,可以说是踩过了很多坑,现在给大家分享一下学习跟调试心得。

一、增加页面的文件上传

(一)bootstrap-fileinput文件上传功能

1.先引入js依赖

<th:block th:include="include :: bootstrap-fileinput-css" />
<th:block th:include="include :: bootstrap-fileinput-js" />

2.在html上面写入文件框

<div class="file-loading">
     <input id="singleFile" name="file" type="file" >
</div>

(二)根据若依给出的示例引用和改进

1.直接引用若依框架所给的js代码,这个代码不管是不是若以框架都可以使用。

//这里直接用js的ready方法,就是说等这个页面全部加载完之后就去执行写入的js
$(document).ready(function(){
            //单文件上传
            $("#singleFile").fileinput({
                uploadUrl: prefix + "/upload",//文件的上传路径,与后端一致,其中prefix为var prefix = ctx + "common/gongcheng";即你的后台的引用路径
                language: 'zh',//设置语言
                allowedFileExtensions:['image', 'html', 'text', 'video', 'audio', 'flash', 'object','png','jpg','db','txt','pdf'],//允许上传的文件类型,错误会给出提示
                dropZoneTitle: '可以将文件拖放到这里,支持文件上传',
                maxFileCount: 1,//最多上传几个文件
                autoReplace: true//自动替换
            //此功能为自动上传文件,即选择完文件后自动上传,小白可以先不用直接省略掉这部分代码    
            }).on('filebatchselected',function(event,data,previewId,index){
                $(this).fileinput("upload");
                document.getElementById('fjid').value = rsp.fjid;
                log.info("return url:" + rsp.url)
                log.info("return fileName:" + rsp.fileName)
                log.info("return newFileName:" + rsp.newFileName)
                log.info("return originalFilename: " + rsp.originalFilename)
            //建议小白先使用这个方法进行练手    
            }).on('fileuploaded',function(event,data,previewId,index) {
            	//获取到后端传过来的json数据,我的里面包含着一个map集合
                var rsp = data.response;
                //这里我用了一个隐藏域接收了从后端map集合里的一个fjid属性,根据id进行赋值操作
                document.getElementById('fjid').value = rsp.fjid;
                log.info("return url:" + rsp.url)
                log.info("return fileName:" + rsp.fileName)
                log.info("return newFileName:" + rsp.newFileName)
                log.info("return originalFilename: " + rsp.originalFilename)
            }).on('fileremoved',function (event, id, index){
                $("input[name='" + event.currentTarget.id +"']").val('')
            })
        });

2.后台所需要的实体类
我这个是在工程页面传入一个文件,所以会有两个实体类,一个是工程实体类,一个是附件实体类,我的实现逻辑是先传入文件,然后得到一个文件id,把这个id传到add页面的隐藏域中,然后后台在添加时调用隐藏域传递过来的id,根据文件id增加文件跟工程实体类的glid。
这个是我的隐藏域所传的值:

<input type="hidden" name="fjid" id="fjid">

在文件upload方法里面把fjid这个属性赋值,把后台传过来的付给他

 }).on('fileuploaded',function(event,data,previewId,index) {
                var rsp = data.response;
                document.getElementById('fjid').value = rsp.fjid;

然后后台调用增加方法

(三)根据uploadUrl进行上传

/**
     * 资料上传请求(单个)
     * @return 集合
     */
    @PostMapping("/upload")
    @ResponseBody
    public AjaxResult uploadFile(MultipartFile file) throws Exception {
        try {
            // 上传文件路径
            String filePath = RuoYiConfig.getUploadPath();
            // 上传并返回新文件名称
            String fileName = FileUploadUtils.upload(filePath, file);
            //获取文件的上传路径
            String url = serverConfig.getUrl() + fileName;
            //得到文件的文件名
            String[] split = fileName.split("/");
            //
            String fname = split[split.length - 1];
            //新建一个附件类,把以下的数据赋值给它
            PmsFujian pmsFujian = new PmsFujian();
            //设置文件的路径
            pmsFujian.setUrl(url);
            //设置文件的name
            pmsFujian.setName(fname);
            //设置文件的大小
            pmsFujian.setCssize(file.getSize());
            //设置文件的原始文件名称,即上传的文件名称
            pmsFujian.setCsname(file.getOriginalFilename());
            //设置文件所属的工程模块
            pmsFujian.setMkmc("工程资料");
            //调用文件的新增方法,添加到数据库
            pmsFujianService.insertPmsFujian(pmsFujian);
            //再添加到数据库后,得到了文件的id
            String fjid = pmsFujian.getFjid();
            //创建一个ajax结果,这个ajax继承map集合,相当于一个map集合
            AjaxResult ajax = new AjaxResult();
            ajax.put("url",url);
            ajax.put("name", fname);
            ajax.put("fjid",fjid);
            ajax.put("fileName", fileName);
            返回map集合,也就是前端页面中rsp.data的数据
            return ajax;
        } catch (Exception e) {
            return AjaxResult.error(e.getMessage());
        }
    }

运行完这个方法以后,已经把文件增加到了数据库,此时文件的数据库都有值,把文件的id添加到ajax集合,返回到前端页面,利用

}).on(‘fileuploaded’,function(event,data,previewId,index) {
var rsp = data.response;
document.getElementById(‘fjid’).value = rsp.fjid;

赋值给fjid,传到工程增加的controller层

/**
     * 新增保存工程
     */
    @RequiresPermissions("common:gongcheng:add")
    @Log(title = "工程", businessType = BusinessType.INSERT)
    @PostMapping("/add")
    @ResponseBody
    public AjaxResult addSave(PmsGongcheng pmsGongcheng,String fjid) throws IOException {
        return toAjax(pmsGongchengService.insertPmsGongcheng(pmsGongcheng,fjid));
    }

其中,pmsGongchengService.insertPmsGongcheng(pmsGongcheng,fjid)中的操作为

 /**
     * 新增工程
     * 
     * @param pmsGongcheng 工程
     * @return 结果
     */
    @Override
    public int insertPmsGongcheng(PmsGongcheng pmsGongcheng,String fjid,String jcfa)
    { 
    	//先进行工程的增加	
    	int i =  pmsGongchengMapper.insertPmsGongcheng(pmsGongcheng);
    	//判断是否有文件上传,如果有文件上传,执行下步操作
    	if (!fjid.isEmpty()) {
    	//获取工程的id
            String gcid = pmsGongcheng.getGcid();
            //根据文件的id拿到在数据库中的那条文件数据
            PmsFujian pmsFujian = pmsFujianMapper.selectPmsFujianByFjid(fjid);
            //把文件数据中的glid属性赋值
            pmsFujian.setGlid(gcid);
            //更新文件数据库中的这条信息
            pmsFujianMapper.updatePmsFujian(pmsFujian);
        }
        return i;
    }     

(四)完成效果图

在这里插入图片描述

二、编辑(修改)界面文件的上传,回显,删除(数据库同时删除)的操作 )

(一)编辑界面文件的上传

这个跟add界面的文件上传大同小异

1.首先引入js

<th:block th:include="include :: bootstrap-fileinput-css"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>

2.引入标签

<div class="file-loading">
      <input id="singleFile" name="file" type="file">
</div>

引入隐藏域

<input type="hidden" name="fjid" id="fjid">

3.引入js

<!--资料的实现-->
        //单文件上传

        $(document).ready(function(){
            $("#singleFile").fileinput({
                uploadUrl: prefix + "/upload",//文件上传路
                dropZoneTitle: '可以将文件拖放到这里,支持文件上传',
                language: 'zh',
                allowedFileExtensions: ['bmp', 'gif', 'jpg', 'jpeg', 'png', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx','html', 'htm', 'txt', 'text','rar', 'zip', 'gz', 'bz2', 'pdf', 'bpmn', 'bar','db'],
                showUpload: true,//是否显示上传按钮
                showRemove : true, //显示移除按钮
                showPreview : true, //是否显示预览
                showCaption: false,//是否显示标题
                fileSizeGetter: true,
                previewFileType: ['image','txt','text'],
                validateInitialCount:true,
                preferIconicPreview: true, // 这将强制缩略图按照以下文件扩展名的图标显示
                maxFileCount: 1,
                autoReplace: true//自动替换
                //下面的自动上传提交,建议先熟悉下面的文件点击上传
            }).on('filebatchselected',function(event,data,previewId,index){
                $(this).fileinput("upload");
                document.getElementById('fjid').value = rsp.fjid;
                log.info("return url:" + rsp.url)
                log.info("return fileName:" + rsp.fileName)
                log.info("return newFileName:" + rsp.newFileName)
                log.info("return originalFilename: " + rsp.originalFilename)
                //文件上传提交,后台返回数据前台接受
            }).on('fileuploaded',function(event,data,previewId,index) {
            	//后台返回的数据,是一个json数据,里面是个map集合
                var rsp = data.response;
                //把后台返回的fjid的值赋给隐藏于的fjid属性
                document.getElementById('fjid').value = rsp.fjid;
                log.info("return url:" + rsp.url)
                log.info("return fileName:" + rsp.fileName)
                log.info("return newFileName:" + rsp.newFileName)
                log.info("return originalFilename: " + rsp.originalFilename)
            }).on('fileremoved',function (event, id, index){
                $("input[name='" + event.currentTarget.id +"']").val('')
            })
        });

后台代码:

/**
     * 资料上传请求(单个)
     * @return
     */
    @PostMapping("/upload")
    @ResponseBody
    public AjaxResult uploadFile(MultipartFile file) throws Exception {
        try {
            // 上传文件路径
            String filePath = RuoYiConfig.getUploadPath();
            // 上传并返回新文件名称
            String fileName = FileUploadUtils.upload(filePath, file);
            //获取文件的上传路径
            String url = serverConfig.getUrl() + fileName;
            //得到文件的文件名
            String[] split = fileName.split("/");
            String fname = split[split.length - 1];

            PmsFujian pmsFujian = new PmsFujian();
            pmsFujian.setUrl(url);
            pmsFujian.setName(fname);
            pmsFujian.setCssize(file.getSize());
            pmsFujian.setCsname(file.getOriginalFilename());
            pmsFujian.setMkmc("工程资料");
            pmsFujianService.insertPmsFujian(pmsFujian);
            String fjid = pmsFujian.getFjid();
            AjaxResult ajax = new AjaxResult();
            ajax.put("url",url);
            ajax.put("name", fname);
            ajax.put("fjid",fjid);
            ajax.put("fileName", fileName);
            return ajax;
        } catch (Exception e) {
            return AjaxResult.error(e.getMessage());
        }
    }

然后调用工程的编辑方法

 /**
     * 修改保存工程
     */
    @RequiresPermissions("common:gongcheng:edit")
    @Log(title = "工程", businessType = BusinessType.UPDATE)
    @PostMapping("/edit")
    @ResponseBody
    public AjaxResult editSave(PmsGongcheng pmsGongcheng,String fjid) {
        return toAjax(pmsGongchengService.updatePmsGongcheng(pmsGongcheng,fjid));
    }

updatePmsGongcheng 里面的方法执行过程

/**
     * 修改工程
     * 
     * @param pmsGongcheng 工程
     * @return 结果
     */
    @Override
    public int updatePmsGongcheng(PmsGongcheng pmsGongcheng,String fjid,String jcfa)
    {	//先更新工程数据库中的信息
    	int i =  pmsGongchengMapper.updatePmsGongcheng(pmsGongcheng);
    	//判断是否传入了新文件
    	if (!fjid.isEmpty()) {
            String gcid = pmsGongcheng.getGcid();
            PmsFujian pmsFujian = pmsFujianMapper.selectPmsFujianByFjid(fjid);
            pmsFujian.setGlid(gcid);
            pmsFujianMapper.updatePmsFujian(pmsFujian);
        }
        return i;
    }

这样就完成了文件上传

(二)编辑界面文件的回显

1.文件的实体类:

 /** 附件主键 */
    private String fjid;
    /** 名称 */
    @Excel(name = "名称")
    private String name;
    /** 路径 */
    @Excel(name = "路径")
    private String url;
    /** 关联主键 */
    @Excel(name = "关联主键")
    private String glid;
    /** 模块名称 */
    @Excel(name = "模块名称")
    private String mkmc;
    /** 文件大小 */
    @Excel(name = "文件大小")
    private String size;
    /** 文件大小(不加计算) */
    @Excel(name = "文件大小", readConverterExp = "不=加计算")
    private Long cssize;
    /** 文件初始名称 */
    @Excel(name = "文件初始名称")
    private String csname;

2.想要回显文件,首先要在工程类(你的编辑界面的主类)里面关联文件类

public class PmsGongcheng extends BaseEntity {
/**
    * 附件类 xyh
    * */
    private List<PmsFujian> pmsFujian;
    ...生成你的get,set方法和你的tostring

xml中使用collection标签

<collection property="pmsFujian"  column="fjid" ofType="com.lrkj.pms.ztjg.common.domain.PmsFujian" resultMap="PmsFujianResult"/>

在主类的xml文件引入文件的sql

<resultMap type="com.lrkj.pms.ztjg.common.domain.PmsFujian" id="PmsFujianResult">
        <result property="fjid"    column="fjid"    />
        <result property="name"    column="name"    />
        <result property="url"    column="url"    />
        <result property="glid"    column="glid"    />
        <result property="mkmc"    column="mkmc"    />
        <result property="size"    column="size"    />
        <result property="cssize"    column="cssize"    />
        <result property="csname"    column="csname"    />
        <result property="createTime"    column="create_time"/>
        <result property="remark"    column="remark"    />
    </resultMap>

3.进行文件的回显

1.首先文件的回显需要这几个东西:

initialPreview: initialPreview,
initialPreviewConfig: initialPreviewConfig,
initialPreviewAsData: true, // 默认为数据

上面的bootstrap-fileinput文件控件里面自带的属性,把这三个属性放到$(“#singleFile”).fileinput({})里面

2.编写js代码,实现initialPreview和initialPreviewConfig的实现逻辑:

var pmsFujian = [[${pmsGongcheng.pmsFujian}]];

            var initialPreview = [];

            var initialPreviewConfig = [];

            if(pmsFujian[0].fjid == null){
                pmsFujian = [];
            }
            if(pmsFujian != null && pmsFujian != ''){
                for(var i = 0;i<pmsFujian.length;i++) {
       				var Fujian = pmsFujian[i];
                    if(Fujian != null && Fujian !=''){
                        var delFujian = new Object();
                        delFujian = generFilDel(Fujian);
                        //把文件的路径传到这个数组里面
                        initialPreview.push(Fujian.url);
                        //把文件的信息传到这个数组里面
                        initialPreviewConfig.push(delFujian);
                    }
                }
            }
//这个是判断文件属性的配置类,包含了文件的各种属性,其中url是文件的删除路径,必须要写入,与后台删除路径保持一致,key是文件删除时带到后台的ajax数据,在后台接收的是key不是fjid
            
function generFilDel(file) {
    if(file != null && file != ''){
        var type = file.url.substr(file.url.lastIndexOf('.') + 1);
        if(type=='pdf'){
				return {type: "pdf", size: file.cssize, caption: file.csname, url:prefix + "/deletePic", key: file.fjid, downloadUrl:file.url};
	    }else if(type=='text'){
				return {caption: file.csname, type: "text", size: file.cssize, url:prefix + "/deletePic", key: file.fjid , downloadUrl:file.url};
		}else if(type=='mp4'){
				return  {type: "video", size: file.cssize, filetype: "video/mp4", caption: file.csname, url:prefix + "/deletePic", key: file.fjid , downloadUrl:file.url};
		}else if(type=='txt'){
				return  {type: "txt", size: file.cssize, caption: file.csname, url:prefix + "/deletePic", key: file.fjid , downloadUrl:file.url};
		}else if(type=='db'){
				return  {type: "db", size: file.cssize, caption: file.csname, url:prefix + "/deletePic", key: file.fjid , downloadUrl:file.url};
	    }else{
				return	{caption: file.csname, size: file.cssize, url: prefix + "/deletePic", key: file.fjid};
			  }
		}
     }

此时,就完成了文件的回显:
在这里插入图片描述
回显的预览界面:
在这里插入图片描述

(三)文件的删除

文件删除直接调用bootstrap里面的filesuccessremove方法

on('filesuccessremove',function(event,data,previewId,index){
			    for (var i = 0; i < pmsFujian.length; i++) {
                    if (pmsFujian[i].fjid == data) {
                    delete pmsFujian[i];
                    }
                  }

因为咱们在initialPreviewConfig传入了删除路径和删除时所带的文件id,所以先配置好js代码:

$("#singleFile").fileinput({
//添加文件的删除路径
                deleteUrl: prefix + "/deletePic",

后台代码:

/**
     *删除文件
     *
     */
    @PostMapping("/deletePic")
    @ResponseBody
    //传入从前台过来的key
    public AjaxResult delete(String key){
        return toAjax(pmsFujianService.deletePmsFujianByFjid(key));
    }

这样就实现了前端实现文件移除时后端也删除了文件数据库中对应的文件信息

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

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

相关文章

博客管理系统--显示、退出、发布功能

6&#xff1a;显示用户信息7&#xff1a;退出登录总结博客管理系统 6&#xff1a;显示用户信息 这部分&#xff1b;希望是根据用户来显示&#xff1b;如果是博客列表页则显示登录用户的信息&#xff1b;如果是博客详情页则显示作者的信息。 1&#xff1a;前后端交互接口约定 …

如何压缩pdf文件大小?四种方法随意选择

如何压缩pdf文件大小&#xff1f;PDF文件格式由于其跨平台性&#xff0c;易于浏览、打印和传输等特点&#xff0c;在现代社会中广泛应用于各个领域。然而&#xff0c;随着PDF文件越来越大&#xff0c;传输及存储所需的时间也会变得越来越长&#xff0c;从而降低了工作效率。在这…

简单记忆clarke和park坐标变换

简单记忆clarke和park坐标变换 简介 想用简单的办法把这些变换矩阵写出来&#xff0c;需要的时候可以使用&#xff0c;不用再去翻书&#xff08;当然完全记住还是更快一些&#xff09;。只是自己用来记忆这些变换的方法。 具体可以参考&#xff1a;手撕系列&#xff08;2&am…

【Redis】实现及优化分布式锁:实现、解决误删锁问题以及lua脚本确保redis操作原子性

目录 一、概念及不同分布式锁实现的对比 1、概念 2、特征 3、不同分布式锁实现的对比 二、Redis实现分布式锁的思路 1、获取锁思路 2、释放锁思路 三、代码实现分布式锁 1、准备 2、获取锁 2、释放锁 四、分布式锁的误删锁问题 1、问题 2、原因 五、误删锁的解决…

分布式配置中心

一、Config概述 Spring Cloud Config 解决了在分布式场景下多环境配置文件的管理和维护 好处&#xff1a; 集中管理配置文件 不同环境不同配置&#xff0c;动态化的配置更新 配置信息改变时&#xff0c;不需要重启即可更新配置信息到服务 二、Config 快速入门 1、使用git…

5.10-5.11总结

我教的课中 课程双击事件&#xff0c;跳转到课程界面 输入学生姓名和学号&#xff0c;添加学生 加载学生名单&#xff0c;双击学生&#xff0c;弹出学生资料&#xff0c;并且可以删除学生 但删除学生还有bug。

LeetCode - 1552 两球之间的磁力

目录 题目来源 题目描述 示例 提示 题目解析 算法源码 题目来源 1552. 两球之间的磁力 - 力扣&#xff08;LeetCode&#xff09; 题目描述 在代号为 C-137 的地球上&#xff0c;Rick 发现如果他将两个球放在他新发明的篮子里&#xff0c;它们之间会形成特殊形式的磁力。…

二维各向同性介质弹性波数值模拟(交错网格有限差分法)

一、一阶速度-应力弹性波方程 在二维各向同介质xoz平面内&#xff0c;假定体力为0。 从上面方程当中&#xff0c;我们为了得到各点的应力和速度值&#xff0c;就需要得到关于对时间t和空间x&#xff0c;z的偏导。 二、时间上的2M阶差分 由Taylor公式得 三、空间2N阶近似差分…

知识推理——CNN模型总结(持续更新)

记录一下我看过的利用CNN实现知识推理的论文。 最后修改时间&#xff1a;2023.05.10 目录 1.ConvE 1.1.解决的问题 1.2.优势 1.3.贡献与创新点 1.4.方法 1.4.1 为什么用二维卷积&#xff0c;而不是一维卷积&#xff1f; 1.4.2.ConvE具体实现 1.4.3.1-N scoring 1.5.…

RK3568平台开发系列讲解(驱动基础篇)GPIO控制方式

🚀返回专栏总目录 文章目录 一、使用GPIO sysfs接口控制IO二、使用libgpiod控制IO沉淀、分享、成长,让自己和他人都能有所收获!😄 📢GPIO是 General Purpose I/O 的缩写,即通用输入输出端口,简单来说就是MCU/CPU可控制的引脚, 这些引脚通常有多种功能,最基本的是高…

3D点云在线查看利器【LasViewer】

LasViewer是一个免费的3D点云在线查看工具&#xff0c;支持LAS/LAZ格式的3D点云文件在浏览器中的直接渲染。访问地址&#xff1a;LasViewer。 推荐&#xff1a;用 NSDT设计器 快速搭建可编程3D场景。 1、LasViewer快速上手 和BimAnt的其他在线工具一样&#xff0c;LasViewer的…

Windows11使用Cpython 编译文件 报错 error: Unable to find vcvarsall.bat 完美解决方法

开发环境说明&#xff1a; python 3.6.2Vs studio 2017 (已经安装C桌面开发&#xff09; 我的 vcvarsall.bat 路径为&#xff1a; "D:\vsstudio\VC\Auxiliary\Build\vcvarsall.bat" 一般在Vs studio 的此安装路径下 修改python源代码 修改文件为 python3.6.2\Li…

shell脚本练习题

名为lianxi.txt的文件内容如下&#xff1a; Steve Blenheim:238-923-7366:95 Latham Lane, Easton, PA 83755:11/12/56:20300 Betty Boop:245-836-8357:635 Cutesy Lane, Hollywood, CA 91464:6/23/23:14500 Igor Chevsky:385-375-8395:3567 Populus Place, Caldwell, NJ 2387…

[230516] TPO71 | 2022年托福阅读真题第4/36篇 | Electrical Energy from the Ocean | 11:50

目录 7101 Electrical Energy from the Ocean Paragraph 1 问题1 Paragraph 2 问题2 Paragraph 3 问题3 Paragraph 4 问题4 做错 Paragraph 5 问题5 做错 Paragraph 6 问题6 Paragraph 7 问题7 Paragaph 8 问题8 做错 Paragraph 2 问题9 问题10 7101…

GateWay源码解析

前言 一、GateWay的自动配置 springboot 在引入一个新的组件时&#xff0c;一般都会有对应的XxxAutoConfiguration类来对该组件进行配置&#xff0c;GateWay也不例外&#xff0c;在引入了以下配置后&#xff0c;就会生成对应的GatewayAutoConfiguration自动配置类 <!-- gat…

15.Python Package目录及打包并发布到PyPI

欢迎访问个人网络日志&#x1f339;&#x1f339;知行空间&#x1f339;&#x1f339; 文章目录 0.基本介绍1.__init__.py文件1.1 Regular Package1.2 namespace package 2.Python Package工程2.1 安装及打包并发布到pypi2.2 将Python文件编译成.so 3.包的搜索路径参考资料 0.基…

go test coverage 单测覆盖率

单元测试的最终统计标准就是单测覆盖率&#xff0c;统计单测总体覆盖了多少行代码。一般来说&#xff0c;我们只需要关注增量代码的覆盖率&#xff0c;而非全量代码。增量代码就是本次迭代改动的代码&#xff0c;比如本次迭代改动了100行代码&#xff0c;我们保证单测能覆盖到这…

【Vue工程】007-Scss

【Vue工程】007-Scss 文章目录 【Vue工程】007-Scss一、概述1、CSS 问题三大缺点CSS 预处理器 2、简介3、中文网4、Slogan 二、基本使用1、安装2、配置全局 scss 样式文件3、在 vite.config.ts 配置4、组件中使用5、访问 http://localhost:5173/home 一、概述 1、CSS 问题 参考…

【OJ比赛日历】快周末了,不来一场比赛吗? #05.13-05.19 #14场

CompHub 实时聚合多平台的数据类(Kaggle、天池…)和OJ类(Leetcode、牛客…&#xff09;比赛。本账号同时会推送最新的比赛消息&#xff0c;欢迎关注&#xff01; 更多比赛信息见 CompHub主页 或 点击文末阅读原文 以下信息仅供参考&#xff0c;以比赛官网为准 目录 2023-05-…

AC AP简单组网

AC AP简单组网 1、LSW1交换机配置2、AC1控制器配置3、初步效果查看3.1、查看PC1获取地址情况3.2、查看AP获取地址情况 4、AC1控制器配置组网5、组网成功验收5.1、查看AP的物理地址&#xff08;dis arp)5.2、ensp模拟的拓扑结果5.3、STA链接到AP网络5.3、查看STA地址及连通性 vl…