vue项目实战-脑图编辑管理系统kitymind百度脑图

前言

项目为前端vue项目,把kitymind百度脑图整合到前端vue项目中,显示了脑图的绘制,编辑,到处为json,png,text等格式的功能

文章末尾有相关的代码链接,代码只包含前端项目,在原始的项目中也编写了相关的接口,但是原先的后端项目是公司的,不方便公开出来,这里只提供我新写的前端项目,刚兴趣的同学可以把后端实现。

项目目录

项目的核心逻辑在public包下的local-kitymind文。件夹中,vue页面只是做了简单的引用,核心逻辑写在了diy.js与index.html两个文件当中

 下面是功能介绍以及相关实现。

脑图编辑页面

主页面展示

用户可以在编辑页编辑脑图文件,支持导出为各种格式,也可导入json文件,到处test,png,md,json等格式的文件,我个人新增了 “保存” 和 “内存为” 的按钮,在原系统中可以同后端进行交互,实现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="" class="diy export" data-type="json">导出json</a>',html += '<a href="" class="diy export" data-type="md">导出md</a>',html += '<a href="" class="diy export" data-type="km">导出km</a>',html += '<a href="" class="diy export" data-type="svg">导出svg</a>',html += '<a href="" class="diy export" data-type="txt">导出text</a>',html += '<a href="" class="diy export" data-type="png">导出png</a>',html += '<button class="diy input">',html += '导入<input type="file" id="fileInput" accept=".km,.txt,.md,.json" >',html += '</button>'html += '<button class="diy httpinput">保存</button>',html += '<button class="diy 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>
<head><meta charset="utf-8"><title>KityMinder Editor</title><link href="favicon.ico" type="image/x-icon" rel="shortcut icon"><!-- bower:css --><link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.css" /><link rel="stylesheet" href="./bower_components/codemirror/lib/codemirror.css" /><link rel="stylesheet" href="./bower_components/hotbox/hotbox.css" /><link rel="stylesheet" href="./bower_components/kityminder-core/dist/kityminder.core.css" /><link rel="stylesheet" href="./bower_components/color-picker/dist/color-picker.min.css" /><!-- endbower --><link rel="stylesheet" href="kityminder.editor.min.css"><style>html, 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>
</head><body ng-app="kityminderDemo" ng-controller="MainController"><h1 class="editor-title"><a href="http://www.huangyebo.cn" style="color: #fff;" target="_blank">KityMinder Editor</a>
<a href="https://beian.miit.gov.cn/" target="_blank"></a>
</h1><kityminder-editor on-init="initEditor(editor, minder)" data-theme="fresh-green"></kityminder-editor>
<iframe name="frameFile" style="display:none;"></iframe><div id="app"><el-dialog :visible.sync="dialogVisible" title="脑图保存"><el-form ref="form" :model="BrainMap" label-width="80px"><el-form-item label="脑图名称"><el-input required="required" v-model="BrainMap.name"></el-input></el-form-item><el-form-item label="脑图描述"><el-input v-model="BrainMap.description"></el-input></el-form-item><el-form-item label="脑图版本"><el-col :span="8"><el-input readonly v-model="BrainMap.version"></el-input></el-col></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">保存</el-button><el-button>取消</el-button></el-form-item></el-form></el-dialog><el-dialog :visible.sync="dialogVisible" title="另存为"><el-form ref="form" :model="BrainMap" label-width="80px"><el-form-item label="脑图名称"><el-input required="required" v-model="BrainMap.name"></el-input></el-form-item><el-form-item label="脑图描述"><el-input v-model="BrainMap.description"></el-input></el-form-item><el-form-item label="版本名称"><el-col ><el-input  v-model="versionName"></el-input></el-col></el-form-item><el-form-item label="版本描述"><el-col ><el-input  v-model="versionDescription"></el-input></el-col></el-form-item><el-form-item><el-button type="primary" @click="saveVersion">保存</el-button><el-button>取消</el-button></el-form-item></el-form></el-dialog>
</div><div>
</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 src="kityminder.editor.min.js"></script>
<script src="diy.js"></script><!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入 Element-UI 样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入 Element-UI 组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>var 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中去,可以直接引入自己的项目

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微服务与Nacos概述

微服务概述 软件架构的演变&#xff1a;单体架构、垂直应用架构、流式计算架构 SOA、微服务架构和服务网格。 微服务是一种软件开发架构&#xff0c;它将一个大型应用程序拆分为一系列小型、独立的服务。每个服务都可以独立开发、部署和扩展&#xff0c;并通过轻量级的通信机…

事务,不只ACID | 京东物流技术团队

1. 什么是事务&#xff1f; 应用在运行时可能会发生数据库、硬件的故障&#xff0c;应用与数据库的网络连接断开或多个客户端端并发修改数据导致预期之外的数据覆盖问题&#xff0c;为了提高应用的可靠性和数据的一致性&#xff0c;事务应运而生。 从概念上讲&#xff0c;事务…

开发中常用的数据库日志都长啥样呢?

目录 常见日志级别 数据库日志 Undo log 逻辑日志 redolog binlog 慢查询日志 AOF 文本文件 RDB 二进制文件 常见日志级别 DEBUG&#xff1a;用于详细记录应用程序的运行过程&#xff0c;如变量值、执行流程等。DEBUG级别的日志通常用于开发和调试过程中&#xff0c;以…

[保研/考研机试] 约瑟夫问题No.2 C++实现

题目要求&#xff1a; 输入、输出样例&#xff1a; 源代码&#xff1a; #include<iostream> #include<queue> #include<vector> using namespace std;//例题5.2 约瑟夫问题No.2 int main() {int n, p, m;while (cin >> n >> p >> m) {//如…

业务中如何过滤敏感词

在我们访问网站的时候&#xff0c;如果发现我们发布的内容有色情暴力的东西等等&#xff0c;会屏蔽掉&#xff0c;这种行为就是过滤敏感词。 从技术层面实现起来&#xff0c;其实比较简单&#xff0c;因为我们输入的内容就是一个大型的字符串&#xff0c;我们要调用某些api来判…

ESP32开发阶段启用 Secure Boot 与 Flash encryption

Secure Boot 与 Flash encryption详情 请参考&#xff1a;https://blog.csdn.net/espressif/article/details/79362094 1、开发环境 AT版本&#xff1a;2.4.0.0 发布IDF 与 python&#xff1a; idf4.3_py3.10_env系统&#xff1a;虚拟机 ubuntu 20 2、使能 secure boot 和 …

【动态规划刷题 6】 删除并获得点数 粉刷房子

740. 删除并获得点数 给你一个整数数组 nums &#xff0c;你可以对它进行一些操作。 每次操作中&#xff0c;选择任意一个 nums[i] &#xff0c;删除它并获得 nums[i] 的点数。之后&#xff0c;你必须删除 所有 等于 nums[i] - 1 和 nums[i] 1 的元素。 开始你拥有 0 个点数。…

list模拟实现【引入反向迭代器】

文章目录 1.适配器1.1传统意义上的适配器1.2语言里的适配器1.3理解 2.list模拟实现【注意看反向迭代器】2.1 list_frame.h2.2riterator.h2.3list.h2.4 vector.h2.5test.cpp 3.反向迭代器的应用1.使用要求2.迭代器的分类 1.适配器 1.1传统意义上的适配器 1.2语言里的适配器 容…

实现链式队列

dl.h dl.c main.c 结果

BM5 合并k个已排序的链表 javascript

描述 合并 k 个升序的链表并将结果作为一个升序的链表返回其头节点。 数据范围&#xff1a; 示例1 输入&#xff1a; [{1,2,3},{4,5,6,7}] 返回值&#xff1a; {1,2,3,4,5,6,7}示例2 输入&#xff1a; [{1,2},{1,4,5},{6}] 返回值&#xff1a; {1,1,2,4,5,6}解题思路 利用两个…

RabbitMQ 发布确认机制

发布确认模式是避免消息由生产者到RabbitMQ消息丢失的一种手段 发布确认模式 原理说明实现方式开启confirm&#xff08;确认&#xff09;模式阻塞确认异步确认 总结 原理说明 生产者通过调用channel.confirmSelect方法将信道设置为confirm模式&#xff0c;之后RabbitMQ会返回Co…

spring 面试题

一、Spring面试题 专题部分 1.1、什么是spring? Spring是一个轻量级Java开发框架&#xff0c;最早有Rod Johnson创建&#xff0c;目的是为了解决企业级应用开发的业务逻辑层和其他各层的耦合问题。它是一个分层的JavaSE/JavaEE full-stack&#xff08;一站式&#xff09;轻量…

Unity之ShaderGraph 节点介绍 Utility节点

Utility 逻辑All&#xff08;所有分量都不为零&#xff0c;返回 true&#xff09;Any&#xff08;任何分量不为零&#xff0c;返回 true&#xff09;And&#xff08;A 和 B 均为 true&#xff09;Branch&#xff08;动态分支&#xff09;Comparison&#xff08;两个输入值 A 和…

未来C#上位机软件发展趋势

C#上位机软件迎来新的发展机遇。随着工业自动化的快速发展&#xff0c;C#作为一种流行的编程语言在上位机软件领域发挥着重要作用。未来&#xff0c;C#上位机软件可能会朝着以下几个方向发展&#xff1a; 1.智能化&#xff1a;随着人工智能技术的不断演进&#xff0c;C#上位机…

中间件RabbitMQ消息队列介绍

1. MQ的相关概念 1.1 什么是MQ MQ&#xff08;message queue&#xff09;&#xff0c;从字面意思上看&#xff0c;本质是个队列&#xff0c;FIFO先入先出&#xff0c;只不过队列中存放的内容是message而已&#xff0c;还是一种跨进程的通信机制&#xff0c;用于上下游传递消息…

手机开启应急预警通知 / 地震预警

前言 安卓手机在检测到地震时&#xff0c;将发送地震预警通知&#xff0c;但此设置是默认关闭的&#xff0c;原因是以防引发用户恐慌从而引发安全问题&#xff0c;且开启此设置需要完成指引教程&#xff0c;因此默认关闭此设置。下文介绍如何开启此设置。 开启方法 华为手机开…

nginx简介与安装配置,目录结构和配置文件介绍

一.nginx简介 1.简介 2.特性 二.nginx安装 1.rpm包方式 &#xff08;1&#xff09;下载扩展源 &#xff08;2&#xff09;安装扩展rpm包&#xff0c;nginx -V查看配置参数&#xff0c;后面源码安装时要用到 2.源码方式 &#xff08;1&#xff09;建议提前下好所需要的部…

github pages 用法详解 发布自己的网站

github pages 基础用法 URL 规则 假设你的 github 帐号为 mygithub&#xff0c;需要发布的仓库名为 myrepo&#xff0c;那么 pages 的 URL 为&#xff1a; https://mygithub.github.io/myrepo 添加内容 用任意编辑器写好&#xff08;或者生成&#xff09;标准的网页内容&a…

Windows安装Redis

自己电脑做个测试&#xff0c;需要用到Redis&#xff0c;把安装过程记录下&#xff0c;方便有需要的人 1、找到下载地址&#xff1a;Releases microsoftarchive/redis GitHub Windows的Redis需要到GitHub上下载&#xff1a; 2、下载完后设置密码&#xff0c;打开文件夹&…

Linux下TCP网络服务器与客户端通信程序入门

文章目录 目标服务器与客户端通信流程TCP服务器代码TCP客户端代码 目标 实现客户端连接服务器&#xff0c;通过终端窗口发送信息给服务器端&#xff0c;服务器接收到信息后对信息数据进行回传&#xff0c;客户端读取回传信息并返回。 服务器与客户端通信流程 TCP服务器代码 …