宛城区网站建设,动画设计视频教程,做app软件开发的公司,精准营销推广方案前言
项目为前端vue项目#xff0c;把kitymind百度脑图整合到前端vue项目中#xff0c;显示了脑图的绘制#xff0c;编辑#xff0c;到处为json#xff0c;png#xff0c;text等格式的功能
文章末尾有相关的代码链接#xff0c;代码只包含前端项目#xff0c;在原始的…前言
项目为前端vue项目把kitymind百度脑图整合到前端vue项目中显示了脑图的绘制编辑到处为jsonpngtext等格式的功能
文章末尾有相关的代码链接代码只包含前端项目在原始的项目中也编写了相关的接口但是原先的后端项目是公司的不方便公开出来这里只提供我新写的前端项目刚兴趣的同学可以把后端实现。
项目目录 项目的核心逻辑在public包下的local-kitymind文。件夹中vue页面只是做了简单的引用核心逻辑写在了diy.js与index.html两个文件当中 下面是功能介绍以及相关实现。
脑图编辑页面
主页面展示
用户可以在编辑页编辑脑图文件支持导出为各种格式也可导入json文件,到处testpngmdjson等格式的文件我个人新增了 “保存” 和 “内存为” 的按钮在原系统中可以同后端进行交互实现json信息的入库。 保存
自动显示当前脑图所属版本要求用户输入脑图名称和脑图描述脑图名称为必填项 另存为
用户点击另存为按钮出现弹窗要求用户输入脑图名称描述新建版本名称新建版本描述 功能实现
diy.js
在diy.js文件中我们定义了最上层若干按钮的样式以及对应的函数。
若干个导出按钮与导入导入按钮没有与后端交互调用了百度脑图的api另存为和保存按钮调用了在index.html中定义的vue函数使得页面出现弹窗同时将脑图的json转化为字符串保存在浏览器的localStorage中。下面是代码
(function () {var oldData;var baseURL http://localhost:12222;// var baseURL http://10.20.26.231:12222;var html ;html a href classdiy export data-typejson导出json/a,html a href classdiy export data-typemd导出md/a,html a href classdiy export data-typekm导出km/a,html a href classdiy export data-typesvg导出svg/a,html a href classdiy export data-typetxt导出text/a,html a href classdiy export data-typepng导出png/a,html button classdiy input,html 导入input typefile idfileInput accept.km,.txt,.md,.json ,html /buttonhtml button classdiy httpinput保存/button,html button classdiy httpinput2另存为/button,$(.editor-title).append(html);$(.diy).css({// height: 30px,// line-height: 30px,margin-top: 0px,float: right,background-color: #fff,min-width: 60px,text-decoration: none,color: #999,padding: 0 10px,border: none,border-right: 1px solid #ccc,});$(.input).css({overflow: hidden,position: relative,}).find(input).css({cursor: pointer,position: absolute,top: 0,bottom: 0,left: 0,right: 0,display: inline-block,opacity: 0});// $(.httpinput).css({// overflow: hidden,// position: relative,// }).find(httpinput).css({// cursor: pointer,// position: absolute,// top: 0,// bottom: 0,// left: 0,// right: 0,// display: inline-block,// opacity: 0// });$(.httpinput2).css({overflow: hidden,position: relative,}).find(httpinput2).css({cursor: pointer,position: absolute,top: 0,bottom: 0,left: 0,right: 0,display: inline-block,opacity: 0});$(document).on(click, .export, function (event) {event.preventDefault();var $this $(this),type $this.data(type),exportType;switch (type) {case km:exportType json;break;case md:exportType markdown;break;case svg:exportType svg;break;case txt:exportType text;break;case png:exportType png;break;default:exportType type;break;}editor.minder.exportData(exportType).then(function (content) {switch (exportType) {case json:console.log($.parseJSON(content));break;default:console.log(content);break;}var blob new Blob();switch (exportType) {case png:blob dataURLtoBlob(content); //将base64编码转换为blob对象break;default:blob new Blob([content]);break;}var a document.createElement(a); //建立标签模拟点击下载a.download $(#node_text1).text() . type;a.href URL.createObjectURL(blob);a.click();});});//保存$(document).on(click, .httpinput, async function (event) {// ct await editor.minder.exportData(json)// console.log(shangyi);var ct;console.log(-------insert start-----)editor.minder.exportData(json).then(function (content) {ct content;// console.log(ct)localStorage.setItem(brainJson,ct)});// console.log(version)myApp.openDialog()});//另存为$(document).on(click, .httpinput2, async function (event) {console.log(shangyi);var ct;console.log(-------insert start-----)editor.minder.exportData(json).then(function (content) {ct content;// console.log(ct)localStorage.setItem(brainJson,ct)});// console.log(version)myApp.openDialog2()});// 导入window.onload function () {var fileInput document.getElementById(fileInput);fileInput.addEventListener(change, function (e) {var file fileInput.files[0],// textType /(md|km)/,fileType file.name.substr(file.name.lastIndexOf(.) 1);console.log(file);switch (fileType) {case md:fileType markdown;break;case txt:fileType text;break; case km:case json:fileType json;break;default:console.log(File not supported!);alert(只支持.km、.md、、text、.json文件);return;}var reader new FileReader();reader.onload function (e) {var content reader.result;editor.minder.importData(fileType, content).then(function (data) {console.log(data)$(fileInput).val();});}reader.readAsText(file);});}})();//base64转换为图片blob
function dataURLtoBlob(dataurl) {var arr dataurl.split(,);//注意base64的最后面中括号和引号是不转译的var _arr arr[1].substring(0, arr[1].length - 2);var mime arr[0].match(/:(.*?);/)[1],bstr atob(_arr),n bstr.length,u8arr new Uint8Array(n);while (n--) {u8arr[n] bstr.charCodeAt(n);}return new Blob([u8arr], {type: mime});
}index.html文件
我们定义了页面标题等信息引入kityminder-editor这个标签同时使用elements-ui写了两个保存窗口 用户在“保存” 和 “另存为” 窗口可以点击“保存”按钮则调用axios请求将json字符串发送至后端。
在发送请求的同时也会携带当前登陆者的信息登陆者的信息是存储在cookie中调用函数 getCookie(employeeId) 可以实现但是用户这部分功能为公司项目在我提供的代码中并未体现。
这里介绍一下 document.addEventListener 这个函数在项目中他起到了初始化页面的作用原先的项目逻辑为在 脑图管理页面 点击一条脑图信息则讲相关信息存储到浏览器的localStorage中然后调用脑图初始化的api将json渲染到页面上,从而实现脑图的管理与跳转。下面是整体代码
!DOCTYPE html
html
headmeta charsetutf-8titleKityMinder Editor/titlelink hreffavicon.ico typeimage/x-icon relshortcut icon!-- bower:css --link relstylesheet href./bower_components/bootstrap/dist/css/bootstrap.css /link relstylesheet href./bower_components/codemirror/lib/codemirror.css /link relstylesheet href./bower_components/hotbox/hotbox.css /link relstylesheet href./bower_components/kityminder-core/dist/kityminder.core.css /link relstylesheet href./bower_components/color-picker/dist/color-picker.min.css /!-- endbower --link relstylesheet hrefkityminder.editor.min.cssstylehtml, body {margin: 0;padding: 0;height: 100%;overflow: hidden;}h1.editor-title {background: #393F4F;color: white;margin: 0;height: 40px;font-size: 14px;line-height: 40px;font-family: Hiragino Sans GB, Arial, Microsoft Yahei;font-weight: normal;padding: 0 20px;}div.minder-editor-container {position: absolute;top: 40px;bottom: 0;left: 0;right: 0;}/style
/headbody ng-appkityminderDemo ng-controllerMainControllerh1 classeditor-titlea hrefhttp://www.huangyebo.cn stylecolor: #fff; target_blankKityMinder Editor/a
a hrefhttps://beian.miit.gov.cn/ target_blank/a
/h1kityminder-editor on-initinitEditor(editor, minder) data-themefresh-green/kityminder-editor
iframe nameframeFile styledisplay:none;/iframediv idappel-dialog :visible.syncdialogVisible title脑图保存el-form refform :modelBrainMap label-width80pxel-form-item label脑图名称el-input requiredrequired v-modelBrainMap.name/el-input/el-form-itemel-form-item label脑图描述el-input v-modelBrainMap.description/el-input/el-form-itemel-form-item label脑图版本el-col :span8el-input readonly v-modelBrainMap.version/el-input/el-col/el-form-itemel-form-itemel-button typeprimary clickonSubmit保存/el-buttonel-button取消/el-button/el-form-item/el-form/el-dialogel-dialog :visible.syncdialogVisible title另存为el-form refform :modelBrainMap label-width80pxel-form-item label脑图名称el-input requiredrequired v-modelBrainMap.name/el-input/el-form-itemel-form-item label脑图描述el-input v-modelBrainMap.description/el-input/el-form-itemel-form-item label版本名称el-col el-input v-modelversionName/el-input/el-col/el-form-itemel-form-item label版本描述el-col el-input v-modelversionDescription/el-input/el-col/el-form-itemel-form-itemel-button typeprimary clicksaveVersion保存/el-buttonel-button取消/el-button/el-form-item/el-form/el-dialog
/divdiv
/div
/body!-- bower:js --
script src./bower_components/jquery/dist/jquery.js/script
script src./bower_components/bootstrap/dist/js/bootstrap.js/script
script src./bower_components/angular/angular.js/script
script src./bower_components/angular-bootstrap/ui-bootstrap-tpls.js/script
script src./bower_components/codemirror/lib/codemirror.js/script
script src./bower_components/codemirror/mode/xml/xml.js/script
script src./bower_components/codemirror/mode/javascript/javascript.js/script
script src./bower_components/codemirror/mode/css/css.js/script
script src./bower_components/codemirror/mode/htmlmixed/htmlmixed.js/script
script src./bower_components/codemirror/mode/markdown/markdown.js/script
script src./bower_components/codemirror/addon/mode/overlay.js/script
script src./bower_components/codemirror/mode/gfm/gfm.js/script
script src./bower_components/angular-ui-codemirror/ui-codemirror.js/script
script src./bower_components/marked/lib/marked.js/script
script src./bower_components/kity/dist/kity.min.js/script
script src./bower_components/hotbox/hotbox.js/script
script src./bower_components/json-diff/json-diff.js/script
script src./bower_components/kityminder-core/dist/kityminder.core.min.js/script
script src./bower_components/color-picker/dist/color-picker.min.js/script
!-- endbower --script srckityminder.editor.min.js/script
script srcdiy.js/script!-- 引入 Vue.js --
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
!-- 引入 Element-UI 样式 --
link relstylesheet hrefhttps://unpkg.com/element-ui/lib/theme-chalk/index.css
!-- 引入 Element-UI 组件库 --
script srchttps://unpkg.com/element-ui/lib/index.js/script
script srchttps://unpkg.com/axios/dist/axios.min.js/scriptscriptvar baseURL http://localhost:12222;// var baseURL http://10.20.26.231:12222;angular.module(kityminderDemo, [kityminderEditor]).controller(MainController, function($scope) {$scope.initEditor function(editor, minder) {window.editor editor;window.minder minder;};});function getCookie(name){var strcookie document.cookie;//获取cookie字符串var arrcookie strcookie.split(; );//分割//遍历匹配console.log(arrcookie)for ( var i 0; i arrcookie.length; i) {var arr arrcookie[i].split();if (arr[0] name){return arr[1];}}return ;}var myApp new Vue({el: #app,data() {return {dialogVisible: false, // 控制弹窗的显示和隐藏versionDescription:,versionName:,BrainMap: {name: ,version: ,description: ,Json:,employeeId:,},}},methods: {openDialog() { //保存到旧版本this.dialogVisible true; // 打开弹窗this.BrainMap.version localStorage.getItem(version)},openDialog2() { //另存为this.dialogVisible true; // 打开弹窗// this.BrainMap.version localStorage.getItem(version)},onSubmit() {console.log(save!);this.BrainMap.Json localStorage.getItem(brainJson)this.BrainMap.employeeId getCookie(employeeId)if(this.BrainMap.name){this.$message({message:脑图名不为空,type:warning})return}axios({method: POST,url: baseURL/common/saveBrainVersion,data: {json:this.BrainMap.Json,version:this.BrainMap.version,name: this.BrainMap.name,description: this.BrainMap.description,employeeId:this.BrainMap.employeeId,}}).then(response {console.log( response)}, error {console.log(错误, error.message)})this.dialogVisible false},saveVersion() {var versionId 0axios({method: get,url: baseURL/common/versionMaxId,params: {}}).then(response {versionId response.data.data.idthis.BrainMap.version versionId 1console.log(this.BrainMap.version)this.onSubmit()}, error {console.log(错误, error.message)})axios({method: get,url: baseURL/common/saveVersion,params: {versionName: this.versionName,description: this.versionDescription}}).then(response {console.log( response)}, error {console.log(错误, error.message)})this.dialogVisible false},}});document.addEventListener(DOMContentLoaded, function() {// 在页面加载完成后执行的 JavaScript 代码// 发起请求console.log(监听页面初始化)// var content {root:{data:{id:ctojgfitvug0,created:1687981368534,text:shangyi},children:[]},template:default,theme:fresh-blue,version:1.4.33} var content localStorage.getItem(brainJson)editor.minder.importData(json, content).then(function (data) {// console.log(data)});});
/script/html
项目链接
脑图编辑管理系统前端: 基于百度脑图的二次开发将百度脑图整合到vue中去可以直接引入自己的项目
