软件工程主要是学什么长春网站优化方案

软件工程主要是学什么,长春网站优化方案,外贸网站支付系统,网站好看的图标代码大文件上传系统开发指南#xff08;兼容IE8的Vue3WebForm实现#xff09; 项目概述 嘿#xff0c;兄弟#xff01;听说你接了个不可能完成的任务#xff1f;20G文件上传、兼容IE8、还要保留文件夹结构#xff1f;别慌#xff0c;让我这个老江湖带你飞兼容IE8的Vue3WebForm实现项目概述嘿兄弟听说你接了个不可能完成的任务20G文件上传、兼容IE8、还要保留文件夹结构别慌让我这个老江湖带你飞虽然预算只有100块但咱们程序员不就是喜欢挑战极限嘛系统架构前端Vue3 CLI但为了IE8兼容我们得用点黑科技后端ASP.NET WebFormSQL Server数据库文件存储服务器E盘传输加密SM4/AES前端加密后端解密断点续传本地存储服务器记录前端实现兼容IE8的现代方案1. 兼容IE8的Vue3环境搭建大文件上传系统2. 文件夹上传组件原生JS实现// src/components/FolderUploader.vueexportdefault{data(){return{fileList:[],isUploading:false,chunkSize:5*1024*1024,// 5MB每片encryptKey:this-is-a-32-byte-key-for-aes-256// 实际项目中应该从服务器获取}},methods:{triggerFileInput(){document.getElementById(fileInput).click();},uploadChunk(relativePath,chunk,chunkIndex,totalChunks,totalSize,fileObj){returnnewPromise((resolve,reject){constformDatanewFormData();formData.append(filePath,relativePath);formData.append(chunkIndex,chunkIndex);formData.append(totalChunks,totalChunks);formData.append(totalSize,totalSize);formData.append(chunk,newBlob([chunk]));formData.append(fileId,this.generateFileId(fileObj.file));constxhrnewXMLHttpRequest();xhr.open(POST,/api/Upload/UploadChunk,true);xhr.upload.onprogressfunction(e){if(e.lengthComputable){// 更新单个文件的进度这里简化处理}};xhr.onloadfunction(){if(xhr.status200){resolve(JSON.parse(xhr.responseText));}else{reject(newError(上传文件片失败));}};xhr.onerrorfunction(){reject(newError(网络错误));};xhr.send(formData);});},generateFileId(file){// 生成文件唯一ID用于断点续传returnfile.name-file.size-file.lastModified;},formatFileSize(bytes){if(bytes0)return0 Bytes;constk1024;constsizes[Bytes,KB,MB,GB];constiMath.floor(Math.log(bytes)/Math.log(k));returnparseFloat((bytes/Math.pow(k,i)).toFixed(2)) sizes[i];}}}后端实现ASP.NET WebForm1. 上传处理API// UploadHandler.ashx%WebHandlerLanguageC#ClassUploadHandler%publicclassUploadHandler:IHttpHandler{privatestaticreadonlystringUploadFolderE:\UploadedFiles\; private static readonly string ConnectionString System.Configuration.ConfigurationManager.ConnectionStrings[DefaultConnection].ConnectionString;publicvoidProcessRequest(HttpContextcontext){context.Response.ContentTypeapplication/json;try{if(context.Request.HttpMethodPOST){if(context.Request.Path.Contains(InitUpload)){HandleInitUpload(context);}}}catch(Exceptionex){context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(new{successfalse,messageex.Message}));}}privatevoidHandleInitUpload(HttpContextcontext){// 读取前端发送的文件结构using(varreadernewStreamReader(context.Request.InputStream)){varjsonreader.ReadToEnd();varstructureNewtonsoft.Json.JsonConvert.DeserializeObject(json);Directory.CreateDirectory(tempFolder);// 保存文件结构信息实际应用中应该存入数据库File.WriteAllText(Path.Combine(tempFolder,structure.json),json);context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(new{successtrue,sessionIdsessionId,message上传初始化成功}));}}privatevoidHandleUploadChunk(HttpContextcontext){varfilePathcontext.Request.Form[filePath];varchunkIndexint.Parse(context.Request.Form[chunkIndex]);vartotalChunksint.Parse(context.Request.Form[totalChunks]);vartotalSizelong.Parse(context.Request.Form[totalSize]);varfileIdcontext.Request.Form[fileId];varsessionIdcontext.Request.Form[sessionId];// 应该从cookie或header中获取context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(new{successtrue,chunkIndexchunkIndex,message文件片上传成功}));}publicboolIsReusablefalse;}2. 下载处理API// DownloadHandler.ashx%WebHandlerLanguageC#ClassDownloadHandler%publicclassDownloadHandler:IHttpHandler{privatestaticreadonlystringUploadFolderE:\UploadedFiles\; public void ProcessRequest(HttpContext context) { try { var filePath context.Request.QueryString[path];if(string.IsNullOrEmpty(filePath)){thrownewException(未指定文件路径);}// 防止目录遍历攻击filePathPath.GetFullPath(Path.Combine(UploadFolder,filePath));if(!filePath.StartsWith(Path.GetFullPath(UploadFolder))){thrownewException(无效的文件路径);}}catch(Exceptionex){context.Response.StatusCode500;context.Response.Write(ex.Message);}}publicboolIsReusablefalse;}IE8兼容性处理由于IE8不支持很多现代API我们需要做以下兼容处理File API兼容IE8不支持File和FileReaderAPI我们需要使用ActiveX或Flash作为后备方案但考虑到Flash已淘汰我们可以提示用户升级浏览器或使用传统上传方式XMLHttpRequest兼容IE8使用XDomainRequest进行跨域请求但我们的场景是同源所以标准的XMLHttpRequest足够JSON兼容引入JSON2.js或JSON3.js作为polyfillVue兼容使用Vue 2.x而不是Vue 3因为Vue 3不支持IE8-10修改后的前端入口兼容IE8// src/main.js (兼容IE8版本)// 使用Vue 2.ximportVuefromvue;importVueRouterfromvue-router;importAppfrom./App.vue;// 兼容性检查if(!window.console){window.console{log:function(){},error:function(){},warn:function(){}};}// 注册Vue插件Vue.use(VueRouter);// 路由配置constrouternewVueRouter({routes:[{path:/,component:()import(./components/FolderUploader.vue)}]});// 创建Vue实例newVue({el:#app,router,render:hh(App)});部署说明IIS配置确保启用ASP.NET功能增加上传文件大小限制在Web.config中数据库准备CREATETABLEUploadedFiles(IdINTIDENTITY(1,1)PRIMARYKEY,FilePath NVARCHAR(1000)NOTNULL,SizeBIGINTNOTNULL,UploadDateDATETIMENOTNULL,SessionId NVARCHAR(36)NOTNULL,UserId NVARCHAR(128)NULL-- 如果有用户系统);CREATETABLEUploadSessions(SessionId NVARCHAR(36)PRIMARYKEY,UserId NVARCHAR(128)NULL,StartTimeDATETIMENOTNULL,LastActiveDATETIMENOTNULL,StatusNVARCHAR(50)NOTNULL,FileStructure NVARCHAR(MAX)NULL);文件夹权限确保IIS应用池账户对E盘有读写权限开发文档要点系统架构前端Vue2 原生JS兼容IE8后端ASP.NET WebForm SQL Server存储服务器E盘功能说明文件夹上传保留结构大文件分片上传断点续传加密传输示例中简化处理兼容IE8现代浏览器限制说明IE8下无法实现真正的文件夹选择只能提示用户压缩后上传加密功能在IE8下需要简化处理部署步骤配置IIS设置数据库连接字符串配置上传文件夹权限总结兄弟这个项目确实有挑战性但并非不可能完成。关键点在于分层处理现代浏览器用现代方案老旧浏览器用简化方案渐进增强先实现基本功能再逐步添加高级特性性能优化分片上传、本地存储进度是关键虽然预算只有100块但我们可以使用开源组件简化加密实现或让服务器处理加密重点保证核心功能记住咱们程序员的价值不在于代码量而在于解决问题的能力这个项目搞定了你的技术水平绝对能上一个台阶以后接单更有底气最后欢迎加入我们的QQ群374992201一起交流技术一起接单赚钱群里还有红包和提成活动说不定你的下一个项目就来自群里的兄弟呢设置框架安装.NET Framework 4.7.2https://dotnet.microsoft.com/en-us/download/dotnet-framework/net472框架选择4.7.2添加3rd引用编译项目NOSQLNOSQL无需任何配置可直接访问页面进行测试SQL使用IIS大文件上传测试推荐使用IIS以获取更高性能。使用IIS Express小文件上传测试可以使用IIS Express创建数据库配置数据库连接信息检查数据库配置访问页面进行测试相关参考文件保存位置效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载完整示例下载完整示例