flask通过前端界面操作mysql_python3+flask+jquery+mysql 实现前端呈现思维导图 后台数据管理...

环境

受此篇博客启发：https://blog..net/btt2013/article/details/51037356，感谢该作者！

python 3.6

Flask 0.12.2

jquery 1.8.0 其中引用zTree-bootstrap 插件实现后台管理页面，下载地址https://github.com/lisztj/ZTREE-BOOTSTRAP，存入static文件夹。引用d3插件实现前端页面。

mysql 8.0.11

文件目录

前端主页面_tree.html

.node {

cursor: pointer;

}

.node circle {

fill: #fff;

stroke: steelblue;

stroke-width: 1.5px;

}

.node text {

font: 10px sans-serif;

}

.link {

fill: none;

stroke: #ccc;

stroke-width: 1.5px;

}

.tree{

width: 800px;

height: 800px;

margin: 0 auto;

background: #E0E0E0;

}

.tree svg{

width: 100%;

height: 100%;

}

$SCRIPT_ROOT = { { request.script_root|tojson|safe }};

$(document).ready(function(){

$.getJSON($SCRIPT_ROOT+'/_get_front_tree',function(data){

var json = data

console.info(json)

root = json[0];

var margin = [20, 120, 20, 120],

width = document.getElementById("tree").offsetWidth,

height = document.getElementById("tree").offsetHeight;

var i = 0,

duration = 750,

root;

var tree = d3.layout.tree()

.size([height, width]);

var diagonal = d3.svg.diagonal()

.projection(function(d) { return [d.y, d.x]; });

var zoom = d3.behavior.zoom().scaleExtent([0.1, 100]).on("zoom", zoomed);//添加放大缩小事件

var svg = d3.select("body").select("#tree").append("svg")

.call(zoom)//给svg绑定zoom事件

.append("g")

.call(zoom)//给g绑定zoom事件

.append("g")

.attr("transform", "translate(" + margin[3] + "," + margin[0] + ")");

root.x0 = height / 2;

root.y0 = 0;

function collapse(d) {

if (d.children) {

d._children = d.children;

d._children.forEach(collapse);

d.children = null;

}

}

root.children.forEach(collapse);

update(root);

function zoomed() {

svg.attr("transform",

"translate(" + zoom.translate() + ")" +

"scale(" + zoom.scale() + ")"

);

}

function update(source) {

// Compute the new tree layout.

var nodes = tree.nodes(root).reverse(),

links = tree.links(nodes);

// Normalize for fixed-depth.

nodes.forEach(function(d) { d.y = d.depth * 180; });

// Update the nodes…

var node = svg.selectAll("g.node")

.data(nodes, function(d) { return d.id || (d.id = ++i); });

// Enter any new nodes at the parent's previous position.

var nodeEnter = node.enter().append("g")

.attr("class", "node")

.attr("transform", function(d) { return "translate(" + source.y0 + "," &