jianshu1212
jianshu1212

WEB 项目大文件上传下载解决方案

需求：项目要支持大文件上传功能，经过讨论，初步将文件上传大小控制在500M内，因此自己需要在项目中进行文件上传部分的调整和配置，自己将大小都以501M来进行限制。


第一步：

前端修改

由于项目使用的是BJUI前端框架，并没有使用框架本身的文件上传控件，而使用的基于jQuery的Uploadify文件上传组件，在项目使用的jslib项目中找到了BJUI框架集成jQuery Uploadify的部分，这部分代码封装在bjui-all.js文件中，

在bjui-all.js文件中的全局变量定义中有以下部分代码，这就是定义的有关于上传的Uploadify控件的重要变量：

//文件上传对象

function FileUploader(fileLoc, mgr)

{

 var _this = this;

 this.id = fileLoc.id;

 this.ui = { msg: null, process: null, percent: null, btn: { del: null, cancel: null,post:null,stop:null }, div: null};

 this.isFolder = false; //不是文件夹

 this.app = mgr.app;

 this.Manager = mgr; //上传管理器指针

 this.event = mgr.event;

 this.Config = mgr.Config;

 this.fields = jQuery.extend({}, mgr.Config.Fields, fileLoc.fields);//每一个对象自带一个fields幅本

 this.State = this.Config.state.None;

 this.uid = this.fields.uid;

 this.fileSvr = {

 pid: ""

 , id: ""

 , pidRoot: ""

 , f_fdTask: false

 , f_fdChild: false

 , uid: 0

 , nameLoc: ""

 , nameSvr: ""

 , pathLoc: ""

 , pathSvr: ""

 , pathRel: ""

 , md5: ""

 , lenLoc: "0"

 , sizeLoc: ""

 , FilePos: "0"

 , lenSvr: "0"

 , perSvr: "0%"

 , complete: false

 , deleted: false

 };//json obj，服务器文件信息

 this.fileSvr = jQuery.extend(this.fileSvr, fileLoc);


 //准备

 this.Ready = function ()

 {

 this.ui.msg.text("正在上传队列中等待...");

 this.State = this.Config.state.Ready;

 this.ui.btn.post.click(function () {

 _this.ui.btn.post.hide();

 _this.ui.btn.del.hide();

 _this.ui.btn.cancel.hide();

 _this.ui.btn.stop.show();

 if (!_this.Manager.IsPostQueueFull()) {

 _this.post();

 }

 else {

 _this.ui.msg.text("正在上传队列中等待...");

 _this.State = _this.Config.state.Ready;

 $.each(_this.ui.btn, function (i, n) { n.hide(); });

 _this.ui.btn.del.show();

 //添加到队列

 _this.Manager.AppendQueue(_this.fileSvr.id);

        }

 });

 this.ui.btn.stop.click(function () {

 _this.stop();

 });

 this.ui.btn.del.click(function () {

 _this.stop();

 _this.remove();

 });

 this.ui.btn.cancel.click(function () {

 _this.stop();

 _this.remove();

 //_this.PostFirst();//

 });

 };


 this.svr_error = function ()

 {

 alert("服务器返回信息为空，请检查服务器配置");

 this.ui.msg.text("向服务器发送MD5信息错误");

 //this.ui.btn.cancel.text("续传");

 this.ui.btn.stop.hide();

 this.ui.btn.cancel.show();

 };

 this.svr_error_same_name = function () {       

 this.ui.msg.text("服务器存在同名文件");

 this.ui.btn.stop.hide();

 this.ui.btn.cancel.show();

 };

 this.svr_create = function (sv)

 {

 if (sv.value == null)

 {

 this.Manager.RemoveQueuePost(this.fileSvr.id);

 this.svr_error(); return;

 }

 if (!sv.ret) {

 this.Manager.RemoveQueuePost(this.fileSvr.id);

 this.svr_error_same_name(); return;

 }


 var str = decodeURIComponent(sv.value);//

 this.fileSvr = JSON.parse(str);//

 //服务器已存在相同文件，且已上传完成

 if (this.fileSvr.complete)

 {

 this.post_complete_quick();

 } //服务器文件没有上传完成

 else

 {

 this.ui.process.css("width", this.fileSvr.perSvr);

 this.ui.percent.text(this.fileSvr.perSvr);

 this.post_file();

 }

 };

 this.svr_update = function () {

 if (this.fileSvr.lenSvr == 0) return;

 var param = { uid: this.fields["uid"], offset: this.fileSvr.lenSvr, lenSvr: this.fileSvr.lenSvr, perSvr: this.fileSvr.perSvr, id: this.id, time: new Date().getTime() };

 $.ajax({

 type: "GET"

 , dataType: 'jsonp'

 , jsonp: "callback" //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名

 , url: this.Config["UrlProcess"]

 , data: param

 , success: function (msg) {}

 , error: function (req, txt, err) { alert("更新文件进度错误！" + req.responseText); }

 , complete: function (req, sta) { req = null; }

 });

 };

 this.svr_remove = function ()

 {

 var param = { uid: this.fields["uid"], id: this.fileSvr.id, time: new Date().getTime() };

 $.ajax({

 type: "GET"

 , dataType: 'jsonp'

 , jsonp: "callback" //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名

 , url: this.Config["UrlDel"]

 , data: param

 , success: function (msg) { }

 , error: function (req, txt, err) { alert("删除文件失败！" + req.responseText); }

 , complete: function (req, sta) { req = null; }

 });

 };

 this.post_process = function (json)

 {

 this.fileSvr.lenSvr = json.lenSvr;//保存上传进度

 this.fileSvr.perSvr = json.percent;

 this.ui.percent.text("("+json.percent+")");

 this.ui.process.css("width", json.percent);

 var str = json.lenPost + " " + json.speed + " " + json.time;

 this.ui.msg.text(str);

 };

 this.post_complete = function (json)

 {

 this.fileSvr.perSvr = "100%";

 this.fileSvr.complete = true;

 $.each(this.ui.btn, function (i, n)

 {

 n.hide();

 });

 this.ui.process.css("width", "100%");

 this.ui.percent.text("(100%)");

 this.ui.msg.text("上传完成");

 this.Manager.arrFilesComplete.push(this);

 this.State = this.Config.state.Complete;

      //从上传列表中删除

 this.Manager.RemoveQueuePost(this.fileSvr.id);

 //从未上传列表中删除

 this.Manager.RemoveQueueWait(this.fileSvr.id);


 var param = { md5: this.fileSvr.md5, uid: this.uid, id: this.fileSvr.id, time: new Date().getTime() };


 $.ajax({

 type: "GET"

 , dataType: 'jsonp'

 , jsonp: "callback" //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名

 , url: _this.Config["UrlComplete"]

 , data: param

 , success: function (msg)

 {

  _this.event.fileComplete(_this);//触发事件

  _this.post_next();

 }

 , error: function (req, txt, err) { alert("文件-向服务器发送Complete信息错误！" + req.responseText); }

 , complete: function (req, sta) { req = null; }

 });

 };

 this.post_complete_quick = function ()

 {

   this.fileSvr.perSvr = "100%";

 this.fileSvr.complete = true;

 this.ui.btn.stop.hide();

 this.ui.process.css("width", "100%");

 this.ui.percent.text("(100%)");

 this.ui.msg.text("服务器存在相同文件，快速上传成功。");

 this.Manager.arrFilesComplete.push(this);

 this.State = this.Config.state.Complete;

 //从上传列表中删除

 this.Manager.RemoveQueuePost(this.fileSvr.id);

 //从未上传列表中删除

 this.Manager.RemoveQueueWait(this.fileSvr.id);

 //添加到文件列表

 this.post_next();

 this.event.fileComplete(this);//触发事件

 };

 this.post_stoped = function (json)

 {

 this.ui.btn.post.show();

 this.ui.btn.del.show();

 this.ui.btn.cancel.hide();

 this.ui.btn.stop.hide();

 this.ui.msg.text("传输已停止....");


 if (this.Config.state.Ready == this.State)

 {

 this.Manager.RemoveQueue(this.fileSvr.id);

 this.post_next();

 return;

 }

 this.State = this.Config.state.Stop;

 //从上传列表中删除

 this.Manager.RemoveQueuePost(this.fileSvr.id);

 this.Manager.AppendQueueWait(this.fileSvr.id);//添加到未上传列表

 //传输下一个

 this.post_next();

 };

 this.post_error = function (json)

 {

 this.svr_update();

 this.ui.msg.text(this.Config.errCode[json.value]);

 this.ui.btn.stop.hide();

 this.ui.btn.post.show();

 this.ui.btn.del.show();


 this.State = this.Config.state.Error;

 //从上传列表中删除

 this.Manager.RemoveQueuePost(this.fileSvr.id);

 //添加到未上传列表

 this.Manager.AppendQueueWait(this.fileSvr.id);

 this.post_next();

 };

 this.md5_process = function (json)

 {

 var msg = "正在扫描本地文件，已完成：" + json.percent;

 this.ui.msg.text(msg);

 };

 this.md5_complete = function (json)

 {

 this.fileSvr.md5 = json.md5;

 this.ui.msg.text("MD5计算完毕，开始连接服务器...");

 this.event.md5Complete(this, json.md5);//biz event


 var loc_path = encodeURIComponent(this.fileSvr.pathLoc);

 var loc_len = this.fileSvr.lenLoc;

 var loc_size = this.fileSvr.sizeLoc;

 var param = jQuery.extend({}, this.fields, this.Config.bizData, { md5: json.md5, id: this.fileSvr.id, lenLoc: loc_len, sizeLoc: loc_size, pathLoc: loc_path, time: new Date().getTime() });


 $.ajax({

 type: "GET"

 , dataType: 'jsonp'

 , jsonp: "callback" //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名

 , url: this.Config["UrlCreate"]

 , data: param

 , success: function (sv)

 {

 _this.svr_create(sv);

 }

 , error: function (req, txt, err)

 {

 _this.Manager.RemoveQueuePost(_this.fileSvr.id);

 alert("向服务器发送MD5信息错误！" + req.responseText);

 _this.ui.msg.text("向服务器发送MD5信息错误");

 _this.ui.btn.cancel.show();

 _this.ui.btn.stop.hide();

 }

 , complete: function (req, sta) { req = null; }

 });

 };

 this.md5_error = function (json)

 {

 this.ui.msg.text(this.Config.errCode[json.value]);

 //文件大小超过限制,文件大小为0

 if ("4" == json.value

 || "5" == json.value)

 {

 this.ui.btn.stop.hide();

 this.ui.btn.cancel.show();

 }

 else

 {           

 this.ui.btn.post.show();

 this.ui.btn.stop.hide();

 }

 this.State = this.Config.state.Error;

 //从上传列表中删除

 this.Manager.RemoveQueuePost(this.fileSvr.id);

 //添加到未上传列表

 this.Manager.AppendQueueWait(this.fileSvr.id);


 this.post_next();

 };

 this.post_next = function ()

 {

 var obj = this;

 setTimeout(function () { obj.Manager.PostNext(); }, 300);

 };

 this.post = function ()

 {

 this.Manager.AppendQueuePost(this.fileSvr.id);

 this.Manager.RemoveQueueWait(this.fileSvr.id);

 if (this.fileSvr.md5.length > 0 || this.fileSvr.lenSvr > 0)

 {

 this.post_file();

 }

 else

 {

 this.check_file();

 }

 };

 this.post_file = function ()

 {

 $.each(this.ui.btn, function (i, n) { n.hide();});

 this.ui.btn.stop.show();

 this.State = this.Config.state.Posting;//

 this.app.postFile({ id: this.fileSvr.id, pathLoc: this.fileSvr.pathLoc, pathSvr:this.fileSvr.pathSvr,lenSvr: this.fileSvr.lenSvr, fields: this.fields });

 };

 this.check_file = function ()

 {

 //this.ui.btn.cancel.text("停止").show();

 this.ui.btn.stop.show();

 this.ui.btn.cancel.hide();

 this.State = this.Config.state.MD5Working;

 this.app.checkFile({ id: this.fileSvr.id, pathLoc: this.fileSvr.pathLoc });

 };

 this.stop = function ()

 {

 $.each(this.ui.btn, function (i, n) { n.hide();});

 this.svr_update();

 this.app.stopFile({ id: this.fileSvr.id });       

 };

 //手动停止，一般在StopAll中调用

 this.stop_manual = function ()

 {

 if (this.Config.state.Posting == this.State)

 {

 this.svr_update();

 this.ui.btn.post.show();

 this.ui.btn.stop.hide();

 this.ui.btn.cancel.hide();

 this.ui.msg.text("传输已停止....");

 this.app.stopFile({ id: this.fileSvr.id ,tip:false});

 this.State = this.Config.state.Stop;

 }

 };


 //删除，一般在用户点击"删除"按钮时调用

 this.remove = function ()

 {

 this.Manager.del_file(this.fileSvr.id);

 this.app.delFile(this.fileSvr);

 this.ui.div.remove();

 if (this.State != this.Config.state.Complete) this.svr_remove();

 };

}

upload:{uploadLimit:5,fileSizeLimit:31744,removeTimeout:0.8}

以上三个变量代表的含义是：

uploadLimit：表示上传文件个数的限制，5表示文件上传个数限制是5个

fileSizeLimit：表示上传文件大小的限制，31744单位是KB，也就是表示31M

removeTimeout：表示移除文件的时间限制

继续查找使用到这些变量的地方，看到了文件大小超出限制等

了解了BJUI前端框架对于上传大文件的限制，可以这样使用，增大文件上传大小和数量，可以按照如下进行修改，我们在bjui-all.js文件看到uploadLimit属性和fileSizeLimit属性的限制，我们在jsp文件中可以这样进行替换，这里使用的是覆盖原则，重新定义uploadLimit属性和fileSizeLimit属性，覆盖bjui-all.js文件的默认值设置。


bjui-all.js文件的uploadLimit属性和fileSizeLimit属性对应到jsp文件中的属性就应该这样写，data-upload-limit属性和data-file-size-limit属性，只需要在后面改写为data-upload-limit=“800”和data-file-size-limit=“5131264”即可，一定要注意这里的单位是KB，以上数字表示501M。


关于Uploadify控件属性可以参考这篇文章也可以直接看官网文档：

http://blog.ncmem.com/wordpress/2019/08/07/java超大文件上传与下载/

属性名称默认值说明

autotrue设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 。

buttonClass”按钮样式

buttonCursor‘hand’鼠标指针悬停在按钮上的样子

buttonImagenull浏览按钮的图片的路径 。

buttonText‘SELECT FILES’浏览按钮的文本。

checkExistingfalse文件上传重复性检查程序，检查即将上传的文件在服务器端是否已存在，存在返回1，不存在返回0

debugfalse如果设置为true则表示启用SWFUpload的调试模式

fileObjName‘Filedata’文件上传对象的名称，如果命名为’the_files’，PHP程序可以用$_FILES['the_files']来处理上传的文件对象。

fileSizeLimit0上传文件的大小限制 ，如果为整数型则表示以KB为单位的大小，如果是字符串，则可以使用(B, KB, MB, or GB)为单位，比如’2MB’；

如果设置为0则表示无限制

fileTypeDesc‘All Files’这个属性值必须设置fileTypeExts属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileTypeDesc为“请选择rar doc pdf文件”

fileTypeExts‘*.*’设置可以选择的文件的类型，格式如：’*.doc;*.pdf;*.rar’ 。

formData JSON格式上传每个文件的同时提交到服务器的额外数据，可在’onUploadStart’事件中使用’settings’方法动态设置。

height30设置浏览按钮的高度 ，默认值

itemTemplatefalse用于设置上传队列的HTML模版，可以使用以下标签：

  instanceID –   Uploadify实例的ID

  fileID – 列队中此文件的ID,或者理解为此任务的ID

  fileName – 文件的名称

  fileSize – 当前上传文件的大小

  插入模版标签时使用格式如：${fileName}

methodPost提交方式Post或Get

multitrue设置为true时可以上传多个文件。

overrideEvents 设置哪些事件可以被重写，JSON格式，如：’overrideEvents’ : ['onUploadProgress']

preventCachingtrue如果为true，则每次上传文件时自动加上一串随机字符串参数，防止URL缓存影响上传结果

progressData‘percentage’设置上传进度显示方式，percentage显示上传百分比，speed显示上传速度

queueIDfalse设置上传队列容器DOM元素的ID，如果为false则自动生成一个队列容器。

queueSizeLimit999队列最多显示的任务数量，如果选择的文件数量超出此限制，将会出发onSelectError事件。

  注意此项并非最大文件上传数量，如果要限制最大上传文件数量，应设置uploadLimit。

removeCompletedtrue是否自动将已完成任务从队列中删除，如果设置为false则会一直保留此任务显示。

removeTimeout3如果设置了任务完成后自动从队列中移除，则可以规定从完成到被移除的时间间隔。

requeueErrorsfalse如果设置为true，则单个任务上传失败后将返回错误，并重新加入任务队列上传。

successTimeout30文件上传成功后服务端应返回成功标志，此项设置返回结果的超时时间

swf‘uploadify.swf’uploadify.swf 文件的相对路径。

uploaderuploadify.php后台处理程序的相对路径。

uploadLimit999最大上传文件数量，如果达到或超出此限制将会触发onUploadError事件。

width120设置文件浏览按钮的宽度。

第二步：

后端修改

由于项目后端使用的Spring Boot，本身也就是使用的Spring MVC文件上传部分，Spring MVC使用的是已经对Servlet文件上传封装了的MultipartResolver接口及其相关实现类和一些相关的类，具体的可以看Spring MVC文件上传源码部分，认为Spring源码还是需要读的，我们只要在Spring Boot启动类中注入这个Bean，或者自行写一个WebConfig配置类，注入一些Web相关的Bean即可，这样Spring Boot启动就会加载配置类，也需要自己写拦截器和全局AOP切面，去捕捉文件上传大小超过限制的异常处理等


基于Spring MVC文件上传组件MultipartResolver接口（核心），使用其中的CommonsMultipartResolver（实现了MultipartResolver接口）这个实现类，CommonsMultipartResolver中的maxUploadSize属性是它继承的抽象父类CommonsFileUploadSupport，这个抽象类其中的一个属性是FileUpload类，而这个类又继承自FileUploadBase这个抽象类，其中它的private long sizeMax = -1;就是maxUploadSize属性的最终设置地方。-1表示文件上传大小没有限制，但是我们一般都会设置一个限制值，这里设置的是210763776，这个值的单位是字节，我们将它设置为525336576字节，也就是501M的大小限制。


修改完以上前端和后端，提交修改的代码到git上即可。


第三步：

Nginx配置

进入到项目部署发布所在的Linux下，进入nginx服务器所安装的目录，

进入到nginx服务器所安装的目录

进入到nginx服务器目录下的conf目录

查看nginx.conf配置文件内容中的client_max_body_size配置的大小，这里设置的是300M。

使用vi或者vim打开nginx.conf配置文件，修改client_max_body_size的大小为501M，保存即可

进入到nginx服务器下的sbin目录下，我们使用./nginx -t查看配置文件是否成功使用，然后使用./nginx -s reload重启Nginx服务器即可。


第四步：

Tomcat配置

由于项目使用的是Spring Cloud，自然使用Spring Boot，我们这个项目还是使用外置的Tomcat作为他的服务器，便于我们对Tomcat服务器进行优化和设置。

进入到项目使用的Tomcat服务器的目录

进入到指定项目使用的Tomcat服务器的目录

进入到Tomcat服务器下的conf配置目录中

看到server.xml配置文件后

先行查看Tomcat服务器的配置，其中两个属性对于这次是比较重要的一个是connectionTimeout这个连接超时时间设置以及默认的maxPostSize属性的设置

使用vi或者vim打开server.xml配置文件，修改connectionTimeout的大小为2000000，这个属性的单位是毫秒，换算之后大概是半个小时，我们配置缺省的maxPostSize属性的值，默认情况下它的值是2097152，它的单位是字节，也就是2M的大小，修改完保存即可

修改完服务器之后，使用发布工具重新从git上拉取最新的代码和部署发布，重新启动脚本即可完成修改，再次尝试大文件上传，功能基本实现。


以上需要注意的是maxPostSize属性在各个Tomcat版本中的不同，详细源码可以网上搜索“up6文件上传”

讨论群：374992201

你可能感兴趣的:(WEB 项目大文件上传下载解决方案)

  • 极狐GitLab 论坛 2.0 全新上线，可以在论坛上查找与 GitLab 相关的问题了～ 极小狐 gitlab极狐GitLabdevopsGitLabci/cddevsecopsSCM
    安装出现依赖错误？版本升级搞不定？遇到422、500就懵逼了？不知道某个功能是免费or付费？……使用GitLab这种全球顶级的DevOps平台进行软件研发时，总会遇到一些困惑，想跟专业的技术人员快速交流以便获得答案，同时又想把这些问题沉淀下来以帮助他人？有这种赠人玫瑰，手有余香的解决方案吗？答案肯定有：论坛！！！论坛——一个各路大神聚集的地方，一个可以解惑答疑问道的地方。解惑：搜索与自己问题相同或
  • 浪潮 M5系列服务器IPMI无法监控存储RAID卡问题. Songxwn 硬件服务器服务器运维
    简介浪潮的M5代服务器，可能有WebBMC无法查看存储RAID/SAS卡状态的情况，可以通过以下方式修改。修改完成后重启BMC即可生效。ESXiIPMITools使用：https://songxwn.com/ESXi8_IPMI/（Linux也可以直接使用）Linux/ESXiIPMITool下载：https://songxwn.com/file/ipmitoolWindows下载：https:/
  • 美团自动配送车2024春季招聘 | 社招专场 美团技术团队
    关于美团自动配送团队美团自动配送以自研L4级自动驾驶软硬件技术为核心，与美团即时零售业务结合，形成满足公开道路、校园、社区、工业园区等室外全场景下的自动配送整体解决方案。美团自动配送团队成立于2016年，团队成员来自于Waymo、Cruise、Pony.ai、泛亚等自动驾驶行业头部公司，自动驾驶技术团队博士占比高达30%，依靠视觉、激光等传感器，实时感知预测周围环境，通过高精地图定位和智能决策规划
  • 学习JavaEE的日子 Day32 线程池 A 北枝 学习JavaEE学习java-eejava线程池
    Day32线程池1.引入一个线程完成一项任务所需时间为：创建线程时间-Time1线程中执行任务的时间-Time2销毁线程时间-Time32.为什么需要线程池(重要)线程池技术正是关注如何缩短或调整Time1和Time3的时间，从而提高程序的性能。项目中可以把Time1，T3分别安排在项目的启动和结束的时间段或者一些空闲的时间段线程池不仅调整Time1，Time3产生的时间段，而且它还显著减少了创建
  • SpringMVC设置全局异常处理器 水岸齐天 javaspring
    文章目录背景分析使用@ControllerAdvice（@RestControllerAdvice）+@ExceptionHandler实现全局异常全局异常处理-多个处理器匹配顺序存在一个类中存在不同的类中对于过滤器和拦截器中的异常，有两种思路可以考虑背景在项目中我们有需求做一个全局异常处理，来规范所有出去的异常信息。参考：官方文档分析首先ControllerAdvice(RestControll
  • 以前开发MFC界面如何快速转成QT界面 广州视觉芯软件有限公司 mfcqtc++
    将MFC界面快速转换为Qt界面可能需要进行一些手动工作，因为MFC和Qt是两个不同的界面框架，它们具有不同的设计和实现原理。但是，以下步骤可以帮助你快速进行转换：创建一个新的Qt项目：使用QtCreator创建一个新的Qt项目。分析MFC界面：仔细分析你的MFC界面，包括窗口、对话框、控件等的布局、样式和行为。重新设计界面：使用Qt的可视化设计器重新设计界面。在QtCreator的设计器中，你可以
  • 使用多线程的方式模拟高并发请求接口，用于自测接口的稳定性【项目】 还算善良_ 私有代码库工具类javalist数据结构
    packagecom.gitee.taven.test;importcom.gitee.taven.ApiResult;importcom.gitee.taven.aop.RepeatSubmitAspect;importorg.slf4j.Logger;importorg.slf4j.LoggerFactory;importorg.springframework.beans.factory.an
  • npm 搭建 Vite 项目 渺小的虫子 viter前端javascript开发语言
    兼容性注意Vite需要Node.js版本>=12.0.0。1、使用npm安装Viter$npminitvite@latest使用npm初始化项目#npm6.xnpminitvite@latestmy-vue-app--templatevue#npm7+,需要额外的双横线：npminitvite@latestmy-vue-app----templatevue2、配置路由：npminstallvue-
  • 请简单介绍一下Shiro框架是什么？Shiro在Java安全领域的主要作用是什么？Shiro主要提供了哪些安全功能？ AaronWang94 shirojavajava安全开发语言
    请简单介绍一下Shiro框架是什么？Shiro框架是一个强大且灵活的开源安全框架，为Java应用程序提供了全面的安全解决方案。它主要用于身份验证、授权、加密和会话管理等功能，可以轻松地集成到任何JavaWeb应用程序中，并提供了易于理解和使用的API，使开发人员能够快速实现安全特性。Shiro的核心组件包括Subject、SecurityManager和Realms。Subject代表了当前与应用
  • 大前端-postcss安装使用指南 黑夜照亮前行的路 postcss
    PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把
  • 大创项目推荐 深度学习 opencv python 公式识别(图像识别 机器视觉) laafeer python
    文章目录0前言1课题说明2效果展示3具体实现4关键代码实现5算法综合效果6最后0前言优质竞赛项目系列，今天要分享的是基于深度学习的数学公式识别算法实现该项目较为新颖，适合作为竞赛课题方向，学长非常推荐！学长这里给一个题目综合评分(每项满分5分)难度系数：3分工作量：4分创新点：4分更多资料,项目分享：https://gitee.com/dancheng-senior/postgraduate1课题
  • 关于举办第十五届蓝桥杯全国软件和信息技术专业人才大赛项目实战赛的通知 QSNKJJSW 蓝桥杯职场和发展青少年编程无人机机器人科技人工智能
    各高等院校及相关单位：为贯彻落实《中国教育现代化2035》和《国务院关于印发新时期促进集成电路产业和软件产业高质量发展若干政策的通知》有关精神，为我国制造强国和网络强国战略提供人才支持，提高学生自主创新意识和工程实践能力，工业和信息化部人才交流中心决定举办第十五届蓝桥杯全国软件和信息技术专业人才大赛——项目实战赛。大赛连续四年入围中国高等教育学会“全国普通高校大学生竞赛排行榜”竞赛项目榜单。现将项
  • 3、JavaWeb-Ajax/Axios-前端工程化-Element 所谓远行Misnearch #JavaWeb前端ajaxelementuijava前端框架
    P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名
  • docker怎么端口映射 Lance_mu docker容器运维
    1、默认固定的端口#Web服务器：WebApache或Nginx通常使用80端口HTTP：80HTTPS：443#数据库服务器MySQL：3306PostgreSQL：5432MongoDB：27017Redis：6379#邮件服务器SMTP：25POP3：110IMAP：143#其他服务SSH：22FTP：21DNS（域名解析）：53代理服务器Squid：3128版本控制系统Git：9418(S
  • Flutter运行flutter doctor 命令长时间未响应如何解决 咕噜签名分发-淼淼 flutter
    Hello大家好！我是咕噜铁蛋！在移动应用开发领域，Flutter以其高效、跨平台的特性吸引了众多开发者的关注。然而，在使用Flutter进行项目开发时，开发者可能会遇到各种问题，其中之一就是运行flutterdoctor命令时长时间未响应。今天铁蛋将深入探讨这一问题的成因、解决方案以及相关的Flutter环境配置知识。一、Flutter与flutterdoctor命令简介Flutter是Goog
  • 账务处理又出错？资深会计来教你，学会效率翻倍！共同学习 小橘子要努力吖
    作为一名会计，在实际工作中会遇到各种麻烦的账务处理问题。那么，最常用的会计处理方法都有哪些呢？今天小编为大家带来了从业二十六年的资深老会计分享的十四中会计常用的账务处理问题的解决方案，快来看看吧！一、促销品的账务处理在促销时公司经常会把一些商品按进价赠送给消费者使用二、款已付清但发票未到的账务处理三、购买材料发生不合理损耗的账务处理问题公司在购买材料时，常常会发生一些不合理的损耗，那么这种问题该怎
  • 网络安全（黑客）——自学2024 小言同学喜欢挖漏洞 web安全安全网络学习网络安全信息安全渗透测试
    01什么是网络安全网络安全可以基于攻击和防御视角来分类，我们经常听到的“红队”、“渗透测试”等就是研究攻击技术，而“蓝队”、“安全运营”、“安全运维”则研究防御技术。无论网络、Web、移动、桌面、云等哪个领域，都有攻与防两面性，例如Web安全技术，既有Web渗透，也有Web防御技术（WAF）。作为一个合格的网络安全工程师，应该做到攻守兼备，毕竟知己知彼，才能百战百胜。02怎样规划网络安全如果你是一
  • 黑客（网络安全）技术自学30天 一个迷人的黑客 web安全安全网络笔记网络安全信息安全渗透测试
    01什么是网络安全网络安全可以基于攻击和防御视角来分类，我们经常听到的“红队”、“渗透测试”等就是研究攻击技术，而“蓝队”、“安全运营”、“安全运维”则研究防御技术。无论网络、Web、移动、桌面、云等哪个领域，都有攻与防两面性，例如Web安全技术，既有Web渗透，也有Web防御技术（WAF）。作为一个合格的网络安全工程师，应该做到攻守兼备，毕竟知己知彼，才能百战百胜。02怎样规划网络安全如果你是一
  • flutter boost 如何从native跳转到flutter页面 Icarus_ flutterflutter
    FlutterBoost是一个Flutter插件，它可以帮助开发者在原生应用和Flutter应用之间无缝跳转。以下是一些基本步骤，展示了如何使用FlutterBoost从原生（Native）页面跳转到Flutter页面。1.配置FlutterBoost在你的Flutter项目中集成FlutterBoost插件。这通常涉及到修改`pubspec.yaml`文件来添加依赖项，并根据FlutterBoo
  • flutter 修改app名字和图标 肥肥呀呀呀 flutter
    一、修改名字在Android中修改应用程序名称：在AndroidManifest.xml文件中修改应用程序名称：打开Flutter项目中的android/app/src/main/AndroidManifest.xml文件。找到标签，然后在android:label属性中修改应用程序的名称，例如：android:label="YourNewAppName"。在strings.xml文件中修改应用程
  • 第一次用eclipse,导入项目错误Plug-in “org.eclipse.m2e.editor“ was unable to instantiate MavenPomEditor zhangfeng1133 eclipsejavaide
    第一次用eclipse,导入项目错误Plug-in"org.eclipse.m2e.editor"wasunabletoinstantiateMavenPomEditor。各种项目包，都不存在，maven应该能自动载入类包，比Php的composer方便太多Thecontainer'MavenDependencies'referencesnonexistinglibrary'C:\Users\Ad
  • eclipse导入项目 warning报错 org.springframework.ide.eclipse.core.springnature zhangfeng1133 ideeclipsejava
    报错org.springframework.ide.eclipse.core.springnature报错信息"org.springframework.ide.eclipse.core.springnature"通常表示EclipseIDE中与Spring框架集成的插件出现了问题。这个错误可能是因为SpringIDE插件没有正确安装或配置，或者Eclipse的更新过程中出现了问题。解决方法：确认S
  • 2.5 项目讲解流程 王守谦26 项目资料数据库
    一、项目讲解1、自我介绍2、项目流程-===============================二、自我介绍（一）、学员自我介绍，讲解存在的问题比如：讲解年份、卡顿、重点学历、忘记（二）自我规则内容1、开场白：礼貌用语2、时间：自我介绍1-2分钟以内3、内容：姓名、籍贯、毕业院校、（拉进面试官距离）4、技能：功能测试、接口测试、自动化测试、app测试、性能测试、安全测试黑盒测试、白盒测试、灰盒
  • 风险管理和采购管理核心考点梳理 WorkLee PMPPMP风险管理采购管理
    个人总结，仅供参考，欢迎加好友一起讨论PMP-风险管理和采购管理核心考点梳理风险管理风险是一个中性词，包括机会和威胁。风险管理的子过程非常多，但是相对来说子过程之间的逻辑非常清晰，整个风险管理的过程都是在维护一个非常重要的工件-风险登记册。风险管理是项目管理全生命周期都要开展的。1）规划风险管理风险管理计划包含哪些内容？解析：风险管理计划是描述如何安排与实施风险管理活动。（风险管理计划中无风险）包
  • 忙忙碌碌才是生活 北渔说
    观海年后上班，因为项目接近尾声甚是消闲。说是消闲，其实身消闲，心不消闲。都说当下社会是焦虑的社会，因为人们普遍焦虑。上班已有半月，想想这好像是上班几年来最空闲的一段时间了。空闲的主要原因是工作处在了瓶颈期，心有余而力不足。因为有一颗力求完美的心，但却没有力求完美的能力，所以徒有焦虑。不知道大家有没有这种感觉，在高压学习或工作一段时间之后，突然闲下来就会茫然无措。有时候读一本长篇，好不容易结束本来应
  • linux安装docker及docker-compose 部署spring boot项目 时而有事儿 dockerlinuxdockerlinuxspringboot
    linux系统环境：centos5.14本篇描述的是在centos系统版本下安装docker，如果是ubuntu版本，请看这篇文章：linuxubuntu20安装docker和docker-compose-CSDN博客正文：安装docker和docker-compose安装docker---------运行命名等待安装完成遇到选择直接输入yyuminstall-yyum-utilsdevice-m
  • webpack.prod.js（webpack生产环境配置文件） 门板_ webpackjavascript前端
    生产环境：只打包不运行本地服务器对于在config目录下的webpack.prod.js1.在根目录下运行npxwebpack--config./config/webpack.prod.js2.在package.json文件中配置"build":"npxwebpack--config./config/webpack.prod.js"constpath=require('path')constESL
  • 保持好奇心，约束注意力 飞巴
    一、快人一步不是运气任何新知识、新方向都不会一开始就闹得沸沸扬扬、人尽皆知，通常善于发现新机遇、新方向的人并不是瞎猫碰着死耗子，可能在一个项目成功之前，他已经尝试过四五次新方向了。保持好奇心，保持对周围事物的敏感度，才有可能发现机会。举一个美国投资大师彼得林奇的例子，他投资的一些大牛股是在陪夫人逛超市的过程中发现，他说：家庭主妇在超级市场或百货商场选购商品时，最有资格发掘好的消费类股票。当然整个投
  • 项目管理工具最佳实践 水岩
    各个公司的最佳实践去哪儿jira自定义使用1.jira编号对应git分支命名，后台增加监控程序，新增一个分支，自动解析分支中的jira编号，自动落地到数据库，完成映射2.各个发布系统间信息同步，消息中心（IC）+数据中心（DC）,广播消息加一站式查询，持续集成，推进代码检查质量，分钟级反馈质量检查反思：1.项目管好：针对一线研发人员，简单易用，而不是满足管理层的“统计度量”（...）简化分类字段，
  • VUE 页面禁止缩放（华为平板浏览器可能失效） 唐屁屁儿 JSvuewebviewjavascript
    h5页面移动端禁止缩放、web页面禁止浏览器缩放移动端优先，可禁止用户缩放和双击放大；在App.vue中的script内的方法里加入以下代码：window.onload=function(){document.addEventListener('touchstart',function(event){if(event.touches.length>1){event.preventDefault()
  • 多线程编程之卫生间 周凡杨 java并发卫生间线程厕所
    如大家所知，火车上车厢的卫生间很小，每次只能容纳一个人，一个车厢只有一个卫生间，这个卫生间会被多个人同时使用，在实际使用时，当一个人进入卫生间时则会把卫生间锁上，等出来时打开门，下一个人进去把门锁上，如果有一个人在卫生间内部则别人的人发现门是锁的则只能在外面等待。问题分析：首先问题中有两个实体，一个是人，一个是厕所，所以设计程序时就可以设计两个类。人是多数的，厕所只有一个（暂且模拟的是一个车厢）。
  • How to Install GUI to Centos Minimal sunjing linuxInstallDesktopGUI
    http://www.namhuy.net/475/how-to-install-gui-to-centos-minimal.html   I have centos 6.3 minimal running as web server. I’m looking to install gui to my server to vnc to my server. You can insta
  • Shell 函数 daizj shell函数
    Shell 函数 linux shell 可以用户定义函数，然后在shell脚本中可以随便调用。 shell中函数的定义格式如下： [function] funname [()]{ action; [return int;] } 说明： 1、可以带function fun() 定义，也可以直接fun() 定义,不带任何参数。 2、参数返回
  • Linux服务器新手操作之一 周凡杨 Linux 简单 操作
    1.whoami      当一个用户登录Linux系统之后，也许他想知道自己是发哪个用户登录的。      此时可以使用whoami命令。      [ecuser@HA5-DZ05 ~]$ whoami       e
  • 浅谈Socket通信（一） 朱辉辉33 socket
    在java中ServerSocket用于服务器端，用来监听端口。通过服务器监听，客户端发送请求，双方建立链接后才能通信。当服务器和客户端建立链接后，两边都会产生一个Socket实例，我们可以通过操作Socket来建立通信。    首先我建立一个ServerSocket对象。当然要导入java.net.ServerSocket包    ServerSock
  • 关于框架的简单认识 西蜀石兰 框架
    入职两个月多，依然是一个不会写代码的小白，每天的工作就是看代码，写wiki。 前端接触CSS、HTML、JS等语言，一直在用的CS模型，自然免不了数据库的链接及使用，真心涉及框架，项目中用到的BootStrap算一个吧，哦，JQuery只能算半个框架吧，我更觉得它是另外一种语言。 后台一直是纯Java代码，涉及的框架是Quzrtz和log4j。 都说学前端的要知道三大框架，目前node.
  • You have an error in your SQL syntax; check the manual that corresponds to your 林鹤霄
    You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'option,changed_ids  ) values('0ac91f167f754c8cbac00e9e3dc372
  • MySQL5.6的my.ini配置 aigo mysql
    注意：以下配置的服务器硬件是：8核16G内存    [client]   port=3306   [mysql]   default-character-set=utf8     [mysqld]   port=3306   basedir=D:/mysql-5.6.21-win
  • mysql 全文模糊查找 便捷解决方案 alxw4616 mysql
    mysql 全文模糊查找 便捷解决方案 2013/6/14 by 半仙 [email protected] 目的: 项目需求实现模糊查找. 原则: 查询不能超过 1秒. 问题: 目标表中有超过1千万条记录. 使用like '%str%' 进行模糊查询无法达到性能需求. 解决方案: 使用mysql全文索引. 1.全文索引 : MySQL支持全文索引和搜索功能。MySQL中的全文索
  • 自定义数据结构 链表(单项 ,双向,环形) 百合不是茶 单项链表双向链表
         链表与动态数组的实现方式差不多,    数组适合快速删除某个元素    链表则可以快速的保存数组并且可以是不连续的       单项链表;数据从第一个指向最后一个   实现代码:        //定义动态链表 clas
  • threadLocal实例 bijian1013 javathreadjava多线程threadLocal
    实例1： package com.bijian.thread; public class MyThread extends Thread { private static ThreadLocal tl = new ThreadLocal() { protected synchronized Object initialValue() { return new Inte
  • activemq安全设置—设置admin的用户名和密码 bijian1013 javaactivemq
            ActiveMQ使用的是jetty服务器, 打开conf/jetty.xml文件，找到 <bean id="adminSecurityConstraint" class="org.eclipse.jetty.util.security.Constraint"> <p
  • 【Java范型一】Java范型详解之范型集合和自定义范型类 bit1129 java
    本文详细介绍Java的范型，写一篇关于范型的博客原因有两个，前几天要写个范型方法(返回值根据传入的类型而定)，竟然想了半天，最后还是从网上找了个范型方法的写法；再者，前一段时间在看Gson, Gson这个JSON包的精华就在于对范型的优雅简单的处理，看它的源代码就比较迷糊，只其然不知其所以然。所以，还是花点时间系统的整理总结下范型吧。   范型内容 范型集合类 范型类
  • 【HBase十二】HFile存储的是一个列族的数据 bit1129 hbase
    在HBase中，每个HFile存储的是一个表中一个列族的数据，也就是说，当一个表中有多个列簇时，针对每个列簇插入数据，最后产生的数据是多个HFile，每个对应一个列族，通过如下操作验证   1. 建立一个有两个列族的表   create 'members','colfam1','colfam2'   2. 在members表中的colfam1中插入50*5
  • Nginx 官方一个配置实例 ronin47 nginx 配置实例
    user www www; worker_processes 5; error_log logs/error.log; pid logs/nginx.pid; worker_rlimit_nofile 8192; events { worker_connections 4096;} http { include conf/mim
  • java-15.输入一颗二元查找树，将该树转换为它的镜像， 即在转换后的二元查找树中，左子树的结点都大于右子树的结点。 用递归和循环 bylijinnan java
    //use recursion public static void mirrorHelp1(Node node){ if(node==null)return; swapChild(node); mirrorHelp1(node.getLeft()); mirrorHelp1(node.getRight()); } //use no recursion bu
  • 返回null还是empty bylijinnan javaapachespring编程
    第一个问题，函数是应当返回null还是长度为0的数组（或集合）？ 第二个问题，函数输入参数不当时，是异常还是返回null？ 先看第一个问题 有两个约定我觉得应当遵守： 1.返回零长度的数组或集合而不是null（详见《Effective Java》） 理由就是，如果返回empty，就可以少了很多not-null判断： List<Person> list
  • [科技与项目]工作流厂商的战略机遇期 comsci 工作流
          在新的战略平衡形成之前，这里有一个短暂的战略机遇期，只有大概最短6年，最长14年的时间，这段时间就好像我们森林里面的小动物，在秋天中，必须抓紧一切时间存储坚果一样，否则无法熬过漫长的冬季。。。。         在微软，甲骨文，谷歌，IBM,SONY
  • 过度设计-举例 cuityang 过度设计
    过度设计，需要更多设计时间和测试成本，如无必要，还是尽量简洁一些好。 未来的事情，比如 访问量，比如数据库的容量，比如是否需要改成分布式  都是无法预料的 再举一个例子，对闰年的判断逻辑： 　　1、 if($Year%4==0) return True; else return Fasle; 　　2、if (   ($Year%4==0  &am
  • java进阶，《Java性能优化权威指南》试读 darkblue086 java性能优化
    记得当年随意读了微软出版社的.NET 2.0应用程序调试，才发现调试器如此强大，应用程序开发调试其实真的简单了很多，不仅仅是因为里面介绍了很多调试器工具的使用，更是因为里面寻找问题并重现问题的思想让我震撼，时隔多年，Java已经如日中天，成为许多大型企业应用的首选，而今天，这本《Java性能优化权威指南》让我再次找到了这种感觉，从不经意的开发过程让我刮目相看，原来性能调优不是简单地看看热点在哪里，
  • 网络学习笔记初识OSI七层模型与TCP协议 dcj3sjt126com 学习笔记
      协议：在计算机网络中通信各方面所达成的、共同遵守和执行的一系列约定 　　计算机网络的体系结构：计算机网络的层次结构和各层协议的集合。 　　两类服务： 　　面向连接的服务通信双方在通信之前先建立某种状态，并在通信过程中维持这种状态的变化，同时为服务对象预先分配一定的资源。这种服务叫做面向连接的服务。 　　面向无连接的服务通信双方在通信前后不建立和维持状态，不为服务对象
  • mac中用命令行运行mysql dcj3sjt126com mysqllinuxmac
    参考这篇博客：http://www.cnblogs.com/macro-cheng/archive/2011/10/25/mysql-001.html  感觉workbench不好用（有点先入为主了）。 1，安装mysql 在mysql的官方网站下载 mysql 5.5.23 http://www.mysql.com/downloads/mysql/，根据我的机器的配置情况选择了64
  • MongDB查询（1）——基本查询[五] eksliang mongodbmongodb 查询mongodb find
    MongDB查询 转载请出自出处：http://eksliang.iteye.com/blog/2174452 一、find简介 MongoDB中使用find来进行查询。 API:如下 function ( query , fields , limit , skip, batchSize, options ){.....}  参数含义： query:查询参数 fie
  • base64，加密解密 经融加密，对接 y806839048 经融加密对接
    String data0 = new String(Base64.encode(bo.getPaymentResult().getBytes(("GBK")))); String data1 = new String(Base64.decode(data0.toCharArray()),"GBK"); // 注意编码格式，注意用于加密，解密的要是同
  • JavaWeb之JSP概述 ihuning javaweb
      什么是JSP？为什么使用JSP？ JSP表示Java Server Page，即嵌有Java代码的HTML页面。使用JSP是因为在HTML中嵌入Java代码比在Java代码中拼接字符串更容易、更方便和更高效。   JSP起源    在很多动态网页中，绝大部分内容都是固定不变的，只有局部内容需要动态产生和改变。  如果使用Servl
  • apple watch 指南 啸笑天 apple
    1. 文档 WatchKit Programming Guide（中译在线版 By @CocoaChina） 译文 译者 原文 概览 - 开始为 Apple Watch 进行开发 @星夜暮晨 Overview - Developing for Apple Watch 概览 - 配置 Xcode 项目 - Overview - Configuring Yo
  • java经典的基础题目 macroli java编程
    1.列举出 10个JAVA语言的优势 a:免费，开源，跨平台(平台独立性)，简单易用，功能完善，面向对象，健壮性，多线程，结构中立，企业应用的成熟平台, 无线应用 2.列举出JAVA中10个面向对象编程的术语 a:包，类，接口，对象，属性，方法，构造器，继承，封装，多态，抽象，范型 3.列举出JAVA中6个比较常用的包 Java.lang;java.util;java.io;java.sql;ja
  • 你所不知道神奇的js replace正则表达式 qiaolevip 每天进步一点点学习永无止境纵观千象regex
    var v = 'C9CFBAA3CAD0'; console.log(v); var arr = v.split(''); for (var i = 0; i < arr.length; i ++) { if (i % 2 == 0) arr[i] = '%' + arr[i]; } console.log(arr.join('')); console.log(v.r
  • [一起学Hive]之十五-分析Hive表和分区的统计信息(Statistics) superlxw1234 hivehive分析表hive统计信息hive Statistics
    关键字：Hive统计信息、分析Hive表、Hive Statistics   类似于Oracle的分析表，Hive中也提供了分析表和分区的功能，通过自动和手动分析Hive表，将Hive表的一些统计信息存储到元数据中。   表和分区的统计信息主要包括：行数、文件数、原始数据大小、所占存储大小、最后一次操作时间等；   14.1 新表的统计信息 对于一个新创建
  • Spring Boot 1.2.5 发布 wiselyman spring boot
        Spring Boot 1.2.5已在7月2日发布，现在可以从spring的maven库和maven中心库下载。   这个版本是一个维护的发布版，主要是一些修复以及将Spring的依赖提升至4.1.7(包含重要的安全修复)。   官方建议所有的Spring Boot用户升级这个版本。   项目首页 | 源
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他