注册自己的网站怎么注聊城做网站优化

注册自己的网站怎么注,聊城做网站优化,创网络,少儿编程网银行后台管理系统新闻模块 PDF 导入功能开发纪实 我是苏州一家银行的开发人员#xff0c;近期我们项目组接到了一个新需求#xff1a;要在后台管理系统的新闻模块中增加 PDF 导入功能#xff0c;导入后需将 PDF 转换成图片并上传到服务器。我们项目前端用的是 vue2 - cli 框…银行后台管理系统新闻模块 PDF 导入功能开发纪实我是苏州一家银行的开发人员近期我们项目组接到了一个新需求要在后台管理系统的新闻模块中增加 PDF 导入功能导入后需将 PDF 转换成图片并上传到服务器。我们项目前端用的是 vue2 - cli 框架编辑器是 wangEditor4后端采用 SpringBoot 框架数据库为 Oracle。为了找到合适的解决方案我开启了一段充满挑战的开发之旅。开源项目查找大海捞针广泛撒网我首先在 GitHub、Gitee 等开源代码托管平台上进行搜索输入关键词如“PDF 转图片”“PDF 导入前端”“Vue PDF 处理”等期望能找到可以直接集成到我们项目中的开源项目。浏览了大量项目后发现很多项目存在各种问题。有些项目虽然能实现 PDF 转图片但依赖的库版本与我们现有项目不兼容。比如有一个项目使用了较新版本的 PDF 解析库而我们的项目环境无法支持该版本升级环境又可能引发其他依赖冲突风险太大。还有些项目功能不够完善只能实现简单的 PDF 转图片对于复杂的 PDF 文档如包含大量图表、特殊字体的文档转换效果很差图片会出现模糊、乱码等问题。精准筛选在排除了大量不合适的项目后我将搜索范围缩小到与 Vue 和 SpringBoot 结合较好的项目。找到几个看似有潜力的项目其中一个项目提供了前端 PDF 预览和转换图片的接口后端也有相应的处理逻辑。但深入测试后发现它在处理大文件 PDF 时性能极差转换时间长达数分钟而且经常出现内存溢出错误这显然无法满足银行系统对稳定性和高效性的要求。另一个项目虽然转换速度较快但缺乏对 PDF 文档权限的控制。银行系统中的新闻模块可能涉及一些敏感信息如果导入的 PDF 文档有权限限制该项目无法正确处理可能会导致信息泄露风险。经过反复权衡我决定放弃寻找现成的开源项目采用自主研发的方式来实现这个功能。开发过程披荆斩棘前端开发搭建桥梁引入 PDF 解析库在前端我选择了 pdf.js 这个广泛使用的开源库来解析 PDF 文档。首先在 vue2 - cli 项目中通过 npm 安装 pdf.jsnpminstallpdfjs - dist然后在需要使用的地方引入并初始化import*aspdfjsLibfrompdfjs - dist;// 设置 pdf.js 工作线程的路径根据实际情况调整pdfjsLib.GlobalWorkerOptions.workerSrc//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js;实现 PDF 预览和转换图片创建一个 Vue 组件来处理 PDF 的导入和转换。在组件中添加文件选择按钮当用户选择 PDF 文件后使用 pdf.js 读取文件内容并将每一页转换为图片。export default { data() { return { pdfPages: [] }; }, methods: { handlePdfUpload(event) { const file event.target.files[0]; if (file) { const fileReader new FileReader(); fileReader.onload (e) { const typedArray new Uint8Array(e.target.result); this.renderPdfPages(typedArray); }; fileReader.readAsArrayBuffer(file); } }, async renderPdfPages(pdfData) { const loadingTask pdfjsLib.getDocument({ data: pdfData }); const pdf await loadingTask.promise; this.pdfPages []; for (let i 1; i pdf.numPages; i) { const page await pdf.getPage(i); const viewport page.getViewport({ scale: 1.0 }); const canvas document.createElement(canvas); const context canvas.getContext(2d); canvas.height viewport.height; canvas.width viewport.width; const renderContext { canvasContext: context, viewport: viewport }; await page.render(renderContext).promise; this.pdfPages.push(canvas.toDataURL(image/png)); } // 调用后端接口上传图片 this.uploadImagesToServer(); }, uploadImagesToServer() { // 这里实现与后端的交互上传图片数据 // 后续会详细介绍 } } };与 wangEditor4 集成将转换后的图片插入到 wangEditor4 编辑器中。在上传图片到服务器成功后获取图片的 URL然后使用 wangEditor4 的 API 将图片插入到编辑器内容中。// 假设已经获取到图片 URL 数组 imageUrlsinsertImagesToEditor(imageUrls){consteditorthis.$refs.editor.editor;// 获取 wangEditor4 实例imageUrls.forEach(url{editor.cmd.do(insertHTML,);});}后端开发稳固后盾搭建 SpringBoot 项目结构使用 Spring Initializr 创建一个新的 SpringBoot 项目添加必要的依赖如 Spring Web、Oracle JDBC 驱动等。配置好数据库连接信息确保项目能够正常访问 Oracle 数据库。org.springframework.boot spring - boot - starter - web com.oracle.database.jdbc ojdbc8 21.5.0.0实现图片上传接口创建一个 SpringBoot 控制器来处理前端上传的图片数据。在接口中接收前端发送的图片数据将其保存到服务器指定目录并将图片信息存储到 Oracle 数据库中。importorg.springframework.beans.factory.annotation.Value;importorg.springframework.web.bind.annotation.*;importorg.springframework.web.multipart.MultipartFile;importjava.io.File;importjava.io.IOException;importjava.util.UUID;RestControllerRequestMapping(/api/pdf - images)publicclassPdfImageUploadController{Value(${image.upload.dir})privateStringimageUploadDir;PostMapping(/upload)publicStringuploadImage(RequestParam(file)MultipartFilefile){try{StringoriginalFilenamefile.getOriginalFilename();StringfileExtensionoriginalFilename.substring(originalFilename.lastIndexOf(.));StringnewFilenameUUID.randomUUID().toString()fileExtension;FiledestnewFile(imageUploadDirFile.separatornewFilename);file.transferTo(dest);// 这里可以将图片信息存储到 Oracle 数据库示例省略数据库操作代码returnhttp://your - server - domain/images/newFilename;}catch(IOExceptione){e.printStackTrace();return上传失败;}}}配置服务器存储路径在 SpringBoot 的配置文件中如 application.properties 或 application.yml配置图片上传的服务器目录# application.properties 示例 image.upload.dir/path/to/your/server/image/upload/directory前后端联调紧密协作在前后端分别完成开发后进行联调测试。前端调用后端图片上传接口将转换后的图片数据发送到后端。后端接收数据并处理后返回图片的访问 URL 给前端。前端根据返回的 URL 将图片插入到 wangEditor4 编辑器中。在联调过程中遇到了跨域问题。由于前端和后端运行在不同的端口上浏览器出于安全考虑阻止了跨域请求。通过在 SpringBoot 后端添加跨域配置解决了这个问题importorg.springframework.context.annotation.Configuration;importorg.springframework.web.servlet.config.annotation.CorsRegistry;importorg.springframework.web.servlet.config.annotation.WebMvcConfigurer;ConfigurationpublicclassCorsConfigimplementsWebMvcConfigurer{OverridepublicvoidaddCorsMappings(CorsRegistryregistry){registry.addMapping(/**).allowedOrigins(*).allowedMethods(GET,POST,PUT,DELETE,OPTIONS).allowedHeaders(*);}}测试与优化精益求精功能测试对 PDF 导入功能进行全面测试包括不同大小、不同格式复杂度的 PDF 文档。测试导入过程中是否出现错误图片转换是否准确上传到服务器是否成功以及图片在编辑器中的显示是否正常。性能测试模拟多用户同时导入 PDF 文档的场景测试系统的性能和稳定性。发现当大量用户同时上传大文件 PDF 时服务器资源占用过高导致响应时间变长。通过优化图片压缩算法、增加服务器带宽和调整线程池配置等方式提高了系统的性能和并发处理能力。安全测试对系统进行安全测试检查是否存在信息泄露、文件上传漏洞等安全问题。确保上传的 PDF 文档和图片都经过安全检查防止恶意文件上传攻击。经过一段时间的努力PDF 导入功能终于成功上线并稳定运行。在这个过程中我深刻体会到了自主研发的挑战和成就感。虽然遇到了很多困难但通过不断学习和尝试最终找到了合适的解决方案满足了银行项目的需求。未来我将继续关注技术发展不断优化系统性能为银行的信息化建设贡献自己的力量。复制插件文件安装jquerynpm install jquery导入组件importEfromwangeditorconst{$,BtnMenu,DropListMenu,PanelMenu,DropList,Panel,Tooltip}Eimport{WordPaster}from../../static/WordPaster/js/wimport{zyCapture}from../../static/zyCapture/zimport{zyOffice}from../../static/zyOffice/js/o初始化组件//zyCapture ButtonclasszyCaptureBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyCapture.setEditor(this.editor).Capture();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportWordBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openDoc();}tryChangeActive(){this.active()}}//zyOffice ButtonclassexportWordBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.exportWord();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportPdfBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openPdf();}tryChangeActive(){this.active()}}//WordPaster ButtonclassWordPasterBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).Paste();}tryChangeActive(){this.active()}}//wordImport ButtonclassWordImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWord();}tryChangeActive(){this.active()}}//excelImport ButtonclassExcelImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importExcel();}tryChangeActive(){this.active()}}//ppt paster ButtonclassPPTImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importPPT();}tryChangeActive(){this.active()}}//pdf paster ButtonclassPDFImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor);WordPaster.getInstance().ImportPDF();}tryChangeActive(){this.active()}}//importWordToImg ButtonclassImportWordToImgBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWordToImg();}tryChangeActive(){this.active()}}//network paster ButtonclassNetImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor);WordPaster.getInstance().UploadNetImg();}tryChangeActive(){this.active()}}exportdefault{name:HelloWorld,data(){return{msg:Welcome to Your Vue.js App}},mounted(){vareditornewE(#editor);WordPaster.getInstance({//上传接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:http://localhost:8891/upload.aspx,License2:,//为图片地址增加域名http://www.ncmem.com/doc/view.aspx?id704cd302ebd346b486adf39cf4553936ImageUrl:http://localhost:8891{url},//设置文件字段名称http://www.ncmem.com/doc/view.aspx?idc3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:file,//提取图片地址http://www.ncmem.com/doc/view.aspx?id07e3f323d22d4571ad213441ab8530d1ImageMatch:});zyCapture.getInstance({config:{PostUrl:http://localhost:8891/upload.aspx,License2:,FileFieldName:file,Fields:{uname:test},ImageUrl:http://localhost:8891{url}}})// zyoffice// 使用前请在服务端部署zyoffice// http://www.ncmem.com/doc/view.aspx?id82170058de824b5c86e2e666e5be319czyOffice.getInstance({word:http://localhost:13710/zyoffice/word/convert,wordExport:http://localhost:13710/zyoffice/word/export,pdf:http://localhost:13710/zyoffice/pdf/upload})// 注册菜单E.registerMenu(zyCaptureBtn,zyCaptureBtn)E.registerMenu(WordPasterBtn,WordPasterBtn)E.registerMenu(ImportWordToImgBtn,ImportWordToImgBtn)E.registerMenu(NetImportBtn,NetImportBtn)E.registerMenu(WordImportBtn,WordImportBtn)E.registerMenu(ExcelImportBtn,ExcelImportBtn)E.registerMenu(PPTImportBtn,PPTImportBtn)E.registerMenu(PDFImportBtn,PDFImportBtn)E.registerMenu(importWordBtn,importWordBtn)E.registerMenu(exportWordBtn,exportWordBtn)E.registerMenu(importPdfBtn,importPdfBtn)//挂载粘贴事件editor.txt.eventHooks.pasteEvents.length0;editor.txt.eventHooks.pasteEvents.push(function(){WordPaster.getInstance().SetEditor(editor).Paste();e.preventDefault();});editor.create();varedt2newE(#editor2);//挂载粘贴事件edt2.txt.eventHooks.pasteEvents.length0;edt2.txt.eventHooks.pasteEvents.push(function(){WordPaster.getInstance().SetEditor(edt2).Paste();e.preventDefault();return;});edt2.create();}}h1,h2{font-weight:normal;}ul{list-style-type:none;padding:0;}li{display:inline-block;margin:010px;}a{color:#42b983;}测试前请配置图片上传接口并测试成功接口测试接口返回JSON格式参考为编辑器添加按钮components:{Editor,Toolbar},data(){return{editor:null,html:dd,toolbarConfig:{insertKeys:{index:0,keys:[zycapture,wordpaster,pptimport,pdfimport,netimg,importword,exportword,importpdf]}},editorConfig:{placeholder:},mode:default// or simple}},整合效果导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片一键自动上传网络图片自动下载远程服务器图片自动上传远程服务器图片下载示例点击下载完整示例