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

这篇具有很好参考价值的文章主要介绍了vue项目实战-脑图编辑管理系统kitymind百度脑图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

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

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

项目目录

vue项目实战-脑图编辑管理系统kitymind百度脑图,项目实战案例,vue,脑图,流程图,前端,javascript,html5,css

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

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

脑图编辑页面

主页面展示

用户可以在编辑页编辑脑图文件,支持导出为各种格式,也可导入json文件,到处test,png,md,json等格式的文件,我个人新增了 “保存” 和 “内存为” 的按钮,在原系统中可以同后端进行交互,实现json信息的入库。

vue项目实战-脑图编辑管理系统kitymind百度脑图,项目实战案例,vue,脑图,流程图,前端,javascript,html5,css

保存:

自动显示当前脑图所属版本,要求用户输入脑图名称和脑图描述,脑图名称为必填项

vue项目实战-脑图编辑管理系统kitymind百度脑图,项目实战案例,vue,脑图,流程图,前端,javascript,html5,css

另存为:

用户点击另存为按钮,出现弹窗,要求用户输入脑图名称,描述,新建版本名称,新建版本描述,

vue项目实战-脑图编辑管理系统kitymind百度脑图,项目实战案例,vue,脑图,流程图,前端,javascript,html5,css

功能实现

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 = 0
			axios({
				method: 'get',
				url: baseURL+'/common/versionMaxId',
				params: {
                    }
				})
				.then(response => {
					versionId = response.data.data.id

					this.BrainMap.version = versionId + 1
					console.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中去,可以直接引入自己的项目文章来源地址https://www.toymoban.com/news/detail-635701.html

到了这里,关于vue项目实战-脑图编辑管理系统kitymind百度脑图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【开源免费】Vue+SpringBoot打造图书管理系统,初学者入门实战项目

    作者主页 :Designer 小郑 作者简介 :3年JAVA全栈开发经验,专注JAVA技术、系统定制、远程指导,致力于企业数字化转型,CSDN博客专家,阿里云社区专家博主,蓝桥云课讲师。 文末获取源码,项目编号: S 066 。 color{red}{文末获取源码,项目编号:S066。} 文末获取源码,项目编

    2024年02月10日
    浏览(48)
  • 【开源免费】Vue+SpringBoot打造超市账单管理系统,初学者入门实战项目

    作者主页 :Designer 小郑 作者简介 :3年JAVA全栈开发经验,专注JAVA技术、系统定制、远程指导,致力于企业数字化转型,CSDN博客专家,阿里云社区专家博主,蓝桥云课讲师。 标题 说明 项目名称 超市账单管理系统 color{red}{超市账单管理系统} 超市账单管理系统 源码获取 ht

    2024年02月09日
    浏览(52)
  • 【项目实战】基于Vue3+TypeScript+Pinia的后台管理系统(coderwhy)

    是基于Vue3、Pinia、VueRouter、Vite、ElementPlus、TypeScript、Echarts等后台系统 https://documenter.getpostman.com/view/12387168/TzzDKb12 baseURL = ‘http://codercba.com:5000’ postman详细使用可以自己搜 也可以使用其他接口管理的工具 给项目添加 环境变量 baseURL https://gitee.com/yangyang993/vue3_ts_cms_admin.git 登录

    2024年02月07日
    浏览(66)
  • 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)

    目录 商品列表 一.创建一个子分支 二.创建组件 三.绘制商品列表的页面基本结构 1.面包屑导航  2.卡片视图区域 四.功能 1.搜索  2.删除  3.添加 五.提交代码 git branch——查看当前所在分支 git checkout -b goods_list——创建新的子分支goods_list git branch——查看当前所在分支 git pus

    2024年02月08日
    浏览(54)
  • 通俗易懂实现功能强大的实战项目 springboot+java+vue+mysql 汽车租赁管理系统

    ✍✍计算机编程指导师 ⭐⭐个人介绍:自己非常喜欢研究技术问题!专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目:有源码或者技术上的问题欢迎在评论区一起讨论交流! ⚡⚡ Java实战 | SpringBoot/SSM Python实战项目 | Django 微信小

    2024年01月19日
    浏览(47)
  • 通俗易懂实现功能强大的实战项目 springboot+java+vue+mysql 汽车服务管理系统

    ✍✍计算机编程指导师 ⭐⭐个人介绍:自己非常喜欢研究技术问题!专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目:有源码或者技术上的问题欢迎在评论区一起讨论交流! ⚡⚡ Java实战 | SpringBoot/SSM Python实战项目 | Django 微信小

    2024年01月16日
    浏览(38)
  • 计算机毕业设计 基于SSM+Vue的医院门诊互联电子病历管理信息系统的设计与实现 Java实战项目 附源码+文档+视频讲解

    博主介绍:✌从事软件开发10年之余,专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇🏻 不然下次找不到哟 ——————————

    2024年02月07日
    浏览(73)
  • C++项目实战之职工管理系统

    职工管理系统可以用来管理公司内所有员工的信息,利用C++来实现一个基于多态的职工管理系统 公司中职工分为三类:普通员工、经理、老板,显示信息时,需要显示职工编号、职工姓名、职工岗位、以及职责 普通员工职责:完成经理交给的任务 经理职责:完成老板交给的

    2024年02月14日
    浏览(35)
  • Java宝典-实战小项目:图书管理系统

    老铁们好~~在学习继承,封装,多态,接口等语法后,为了巩固知识,我们来写一个小项目,加深对知识的理解,话不多说,咱们开始今天的学习吧! 进入程序后,提示输入姓名,选择身份,程序会根据选择的身份弹出对应的菜单 管理员身份: 普通用户身份: 查找功能: 输入要查找的书名,如果

    2024年03月23日
    浏览(38)
  • 【网页实战项目设计】023学生宿舍管理系统

                摘  要 互联网发展至今,无论是其理论还是技术都已经成熟,而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播,搭配信息管理工具可以很好地为人们提供服务。针对学生宿舍信息管理混乱,出错率高,信息安全性差,劳动强度大,费时费

    2024年02月02日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包