【JavaScript脚本宇宙】无缝集成与高效渲染：最佳JavaScript树形视图库推荐

2024-06-17 09:12
文章标签 java script 图库 树形 无缝 渲染 集成 高效 宇宙 脚本 最佳 推荐

本文主要是介绍【JavaScript脚本宇宙】无缝集成与高效渲染：最佳JavaScript树形视图库推荐，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

打造直观层级结构：深入解析六大JavaScript树形视图库

前言

在现代Web开发中，树形视图是一种非常常用的UI组件，用于直观展示层级结构的数据。无论是文件管理系统、目录浏览器，还是数据导航和分析工具，树形视图都能提供极大的便利。在本文中，我们将介绍几款流行的JavaScript树形视图库，它们各有特色，能够满足不同应用场景的需求。

欢迎订阅专栏：JavaScript脚本宇宙

文章目录

  • 打造直观层级结构：深入解析六大JavaScript树形视图库
    • 前言
    • 1. jsTree：一个用于创建树形视图的jQuery插件
      • 1.1 功能概述
        • 1.1.1 节点管理
        • 1.1.2 拖放支持
      • 1.2 主要特点
        • 1.2.1 丰富的插件体系
        • 1.2.2 高度定制化
      • 1.3 使用场景
        • 1.3.1 文件管理系统
        • 1.3.2 目录浏览器
    • 2. FancyTree：一个灵活的树形视图插件
      • 2.1 功能概述
        • 2.1.1 动态加载
        • 2.1.2 复选框集成
      • 2.2 主要特点
        • 2.2.1 性能优化
        • 2.2.2 多种主题支持
      • 2.3 使用场景
        • 2.3.1 数据导航
        • 2.3.2 配置面板
    • 3. d3-hierarchy：一个基于D3.js的层级布局库
      • 3.1 功能概述
        • 3.1.1 层级数据表示
        • 3.1.2 多种布局算法
      • 3.2 主要特点
        • 3.2.1 强大的可视化功能
        • 3.2.2 高度交互性
      • 3.3 使用场景
        • 3.3.1 数据分析工具
        • 3.3.2 组织结构图
    • 4. Vue Tree: 一个基于Vue.js的树形视图库
      • 4.1 功能概述
        • 4.1.1 双向绑定
        • 4.1.2 插槽支持
      • 4.2 主要特点
        • 4.2.1 轻量级
        • 4.2.2 易于集成
      • 4.3 使用场景
        • 4.3.1 前端框架集成
        • 4.3.2 动态组件生成
    • 5. React-Treebeard：一个用于React的树形视图库
      • 5.1 功能概述
        • 5.1.1 状态管理
        • 5.1.2 动画效果
      • 5.2 主要特点
        • 5.2.1 易于扩展
        • 5.2.2 简单直观的API
      • 5.3 使用场景
        • 5.3.1 单页应用
        • 5.3.2 数据展示
    • 6. jqTree：一个轻量级的树形视图jQuery插件
      • 6.1 功能概述
        • 6.1.1 异步数据加载
        • 6.1.2 可嵌套节点
      • 6.2 主要特点
        • 6.2.1 快速响应
        • 6.2.2 支持多种事件
      • 6.3 使用场景
        • 6.3.1 项目管理工具
        • 6.3.2 知识库系统
    • 总结

1. jsTree：一个用于创建树形视图的jQuery插件

jsTree官网

jsTree 是一个基于 jQuery 的插件，用于在网页上创建树形结构视图。它能够处理大量数据，并且具有丰富的功能和高度的定制化选项。

1.1 功能概述

1.1.1 节点管理

jsTree 提供了强大的节点管理功能，包括添加、删除、编辑节点等操作。这些功能可以通过 API 或者用户界面来使用，非常方便。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsTree 示例</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css" />
</head>
<body><div id="tree"></div><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></script><script>$(document).ready(function(){$('#tree').jstree({'core' : {'data' : [{ "text" : "节点 1" },{ "text" : "节点 2", "children" : [ { "text" : "子节点 2.1" }, { "text" : "子节点 2.2" } ] }]}});});</script>
</body>
</html>

在这个示例中，我们创建了一个基本的树形结构，其中包括两个顶级节点和两个子节点。

1.1.2 拖放支持

jsTree 支持拖放功能，允许用户通过拖动节点来重新组织树结构。这对于文件管理系统或目录浏览器来说非常有用。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsTree 拖放示例</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css" />
</head>
<body><div id="tree"></div><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></script><script>$(document).ready(function(){$('#tree').jstree({'core' : {'check_callback' : true,'data' : [{ "text" : "节点 1" },{ "text" : "节点 2", "children" : [ { "text" : "子节点 2.1" }, { "text" : "子节点 2.2" } ] }]},'plugins' : [ "dnd" ]});});</script>
</body>
</html>

在这个示例中，我们启用了 dnd（拖放）插件，并设置 check_callback 为 true 以允许节点移动。

1.2 主要特点

1.2.1 丰富的插件体系

jsTree 提供了多种插件，例如复选框、搜索、高亮显示等，可以根据需要对树结构进行扩展。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsTree 插件示例</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css" />
</head>
<body><input type="text" id="search" placeholder="搜索节点"><div id="tree"></div><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></script><script>$(document).ready(function(){var $tree = $('#tree').jstree({'core' : {'data' : [{ "text" : "节点 1" },{ "text" : "节点 2", "children" : [ { "text" : "子节点 2.1" }, { "text" : "子节点 2.2" } ] }]},'plugins' : [ "search" ]});var to = false;$('#search').keyup(function () {if(to) { clearTimeout(to); }to = setTimeout(function () {var v = $('#search').val();$tree.jstree(true).search(v);}, 250);});});</script>
</body>
</html>

在这个示例中，我们添加了一个搜索输入框，通过启用 search 插件实现了实时搜索功能。

1.2.2 高度定制化

jsTree 提供了高度的定制化选项，用户可以根据需求修改树形视图的外观和行为。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsTree 自定义示例</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css" />
</head>
<body><div id="tree"></div><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></script><script>$(document).ready(function(){$('#tree').jstree({'core' : {'themes' : {'variant' : 'large','stripes' : true},'data' : [{ "text" : "自定义节点 1" },{ "text" : "自定义节点 2", "children" : [ { "text" : "自定义子节点 2.1" }, { "text" : "自定义子节点 2.2" } ] }]}});});</script>
</body>
</html>

在这个示例中，我们通过设置 themes 属性自定义了树形视图的外观，使其显示为大尺寸和条纹样式。

1.3 使用场景

1.3.1 文件管理系统

jsTree 非常适合用于文件管理系统，允许用户以树形结构展示和管理文件夹及文件。

1.3.2 目录浏览器

jsTree 也可以用于构建目录浏览器，帮助用户以层次化的方式浏览各种目录和子目录。### 树形视图库

2. FancyTree：一个灵活的树形视图插件

FancyTree 是一个功能强大的jQuery插件，用于创建灵活的树形视图。它广泛应用于各种Web应用中，通过简洁的API和丰富的特性，能够轻松地实现复杂的树形结构和交互功能。

2.1 功能概述

2.1.1 动态加载

FancyTree支持动态加载子节点，这对于处理大型数据集非常有用，可以显著提升性能。

$(function(){$("#tree").fancytree({source: {url: "ajax-tree-data.json"},lazyLoad: function(event, data){data.result = {url: "ajax-subtree-data.json"};}});
});

在上述代码中，通过 lazyLoad 事件，FancyTree可以根据需要动态加载子节点的数据。

2.1.2 复选框集成

FancyTree提供了内置的复选框功能，用户可以方便地选择多个节点。

$(function(){$("#tree").fancytree({checkbox: true,selectMode: 3,source: { url: "tree-data.json" }});
});

以上代码展示了如何启用复选框模式，并从外部JSON文件加载树形数据。

2.2 主要特点

2.2.1 性能优化

FancyTree通过懒加载和虚拟DOM技术，能够高效地处理大型数据集，确保快速响应和流畅的用户体验。

$(function(){$("#tree").fancytree({extensions: ["dnd5"],source: { url: "tree-data-large.json" },lazyLoad: function(event, data){data.result = {url: "subtree-data-large.json"};}});
});

此示例展示了如何利用懒加载技术来优化大规模数据集的性能。

2.2.2 多种主题支持

FancyTree提供了多种主题，可以方便地与不同的UI设计风格匹配。

<link href="https://cdn.jsdelivr.net/npm/jquery.fancytree/dist/skin-win7/ui.fancytree.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jquery.fancytree/dist/jquery.fancytree-all-deps.min.js"></script>
<div id="tree"></div><script>
$(function(){$("#tree").fancytree({source: { url: "tree-data.json" },icons: true});
});
</script>

在这个例子中，我们使用了 win7 主题，使得树形视图看起来像Windows 7资源管理器。

2.3 使用场景

2.3.1 数据导航

FancyTree适用于数据导航，例如文件浏览器或目录树。

$(function(){$("#tree").fancytree({source: { url: "file-structure.json" },select: function(event, data){var node = data.node;if( !node.folder ) {window.location.href = "files/" + node.key;}}});
});

该示例展示了如何使用FancyTree构建文件浏览器，并在用户选择文件时进行相应操作。

2.3.2 配置面板

FancyTree也可以用于配置面板，帮助用户直观地查看和编辑层级化设置。

$(function(){$("#tree").fancytree({checkbox: true,selectMode: 3,source: { url: "settings-tree.json" },click: function(event, data){// 在这里处理点击事件，更新配置console.log(data.node.title + " 被点击了");},select: function(event, data){// 在这里处理复选框选择事件var selectedNodes = $.map(data.tree.getSelectedNodes(), function(node){return node.title;});$("#selected-settings").text("已选择: " + selectedNodes.join(", "));}});
});

这是一个简单的配置面板示例，其中FancyTree用于显示设置项，并处理用户的选择和点击事件。

更多关于FancyTree的信息，请访问其官方文档。

3. d3-hierarchy：一个基于D3.js的层级布局库

3.1 功能概述

3.1.1 层级数据表示

d3-hierarchy 提供了一组工具，用于表示和操作层级数据结构，如树、嵌套集合等。以下是一个简单的示例代码，它展示了如何使用 d3-hierarchy 创建一个树形图：

const data = {name: "Root",children: [{ name: "Child 1" },{name: "Child 2",children: [{ name: "Grandchild 1" },{ name: "Grandchild 2" }]}]
};const root = d3.hierarchy(data);
const treeLayout = d3.tree().size([400, 200]);treeLayout(root);root.descendants().forEach(d => {console.log(d.data.name, d.x, d.y);
});

d3-hierarchy 官方文档

3.1.2 多种布局算法

d3-hierarchy 提供了多种布局算法，如树形布局、捆绑布局和分区布局，可以满足不同的可视化需求。

3.2 主要特点

3.2.1 强大的可视化功能

d3-hierarchy 基于 D3.js，具有强大的数据驱动文档和可视化功能，能够创建高度自定义和交互性强的图表。

3.2.2 高度交互性

通过与 D3.js 的结合，d3-hierarchy 能够实现高度交互的图表效果，如拖拽节点、缩放视图等。

3.3 使用场景

3.3.1 数据分析工具

d3-hierarchy 常用于数据分析工具中，用于可视化复杂的层级数据结构，帮助用户更好地理解数据关系。

3.3.2 组织结构图

d3-hierarchy 非常适合用于绘制组织结构图，能够清晰直观地展示公司或团队的层级关系。

4. Vue Tree: 一个基于Vue.js的树形视图库

Vue Tree 是一个基于 Vue.js 的树形视图库，适用于需要使用树状结构展示和操作数据的应用。它提供了双向绑定和插槽支持，让开发者可以灵活地自定义树形视图。

4.1 功能概述

4.1.1 双向绑定

Vue Tree 支持双向数据绑定，这意味着当你修改树形视图的数据结构时，视图能够实时更新，反之亦然。双向绑定增强了数据管理的简便性和直观性。

<template><div><vue-tree :data="treeData" @update="handleUpdate"></vue-tree></div>
</template><script>
import VueTree from 'vue-tree-component'export default {components: { VueTree },data() {return {treeData: [{ name: "Node 1", children: [{ name: "Child 1" }, { name: "Child 2" }] },{ name: "Node 2", children: [{ name: "Child 3" }] }]};},methods: {handleUpdate(newData) {this.treeData = newData;}}
};
</script>

官方网站：Vue Tree

4.1.2 插槽支持

Vue Tree 提供插槽功能，让你可以在节点中插入自定义内容。这对需要复杂布局或特殊样式的应用非常有用。

<template><div><vue-tree :data="treeData"><template v-slot:node="{ node }"><span>{{ node.name }} - 自定义内容</span></template></vue-tree></div>
</template><script>
import VueTree from 'vue-tree-component'export default {components: { VueTree },data() {return {treeData: [{ name: "Node 1", children: [{ name: "Child 1" }, { name: "Child 2" }] },{ name: "Node 2", children: [{ name: "Child 3" }] }]};}
};
</script>

4.2 主要特点

4.2.1 轻量级

Vue Tree 是一个轻量级库，不会给项目引入太多负担。在性能优化和加载速度方面表现良好。

4.2.2 易于集成

Vue Tree 可以方便地集成到现有的 Vue 项目中。通过简单的安装和配置，就可以快速开始使用。

npm install vue-tree-component --save

在你的 Vue 项目中：

import Vue from 'vue';
import VueTree from 'vue-tree-component';Vue.use(VueTree);

4.3 使用场景

4.3.1 前端框架集成

Vue Tree 非常适合与前端框架（如 Vue.js）集成，用于显示和管理层级数据结构。

4.3.2 动态组件生成

Vue Tree 支持动态生成组件，适合需要根据用户输入或外部数据源动态创建树形视图的场景。

<template><div><button @click="addNode">添加节点</button><vue-tree :data="treeData"></vue-tree></div>
</template><script>
import VueTree from 'vue-tree-component'export default {components: { VueTree },data() {return {treeData: [{ name: "Node 1", children: [{ name: "Child 1" }, { name: "Child 2" }] },{ name: "Node 2", children: [{ name: "Child 3" }] }]};},methods: {addNode() {this.treeData.push({ name: `Node ${this.treeData.length + 1}`, children: [] });}}
};
</script>

以上代码展示了如何动态添加节点并更新树形视图。

5. React-Treebeard：一个用于React的树形视图库

React-Treebeard 是一个用于构建 React 应用中的树形结构视图的库。它提供了易于管理的状态和流畅的动画效果，使得树形视图变得更加直观和用户友好。

5.1 功能概述

5.1.1 状态管理

React-Treebeard 提供了内置的状态管理功能，使用户可以轻松地展开或折叠树形结构中的节点。

import React, { Component } from 'react';
import { Treebeard } from 'react-treebeard';class MyTree extends Component {constructor(props){super(props);this.state = {data: initialData};this.onToggle = this.onToggle.bind(this);}onToggle(node, toggled){const {cursor} = this.state;if (cursor) {cursor.active = false;}node.active = true;if (node.children) { node.toggled = toggled; }this.setState({ cursor: node });}render(){return (<Treebearddata={this.state.data}onToggle={this.onToggle}/>);}
}const initialData = {name: 'root',toggled: true,children: [{name: 'parent',children: [{ name: 'child1' },{ name: 'child2' }]},{name: 'loading parent',loading: true,children: []},{name: 'parent',children: [{name: 'nested parent',children: [{ name: 'nested child 1' },{ name: 'nested child 2' }]}]}]
};
5.1.2 动画效果

该库支持动画效果，当用户展开或折叠节点时，可以看到平滑的动画过渡。

import animations from 'react-treebeard/dist/themes/animations';const customAnimations = {toggle: ({node}) => ({animation: { rotateZ: node.toggled ? 90 : 0 },duration: 300})
};<Treebearddata={initialData}onToggle={this.onToggle}animations={customAnimations}
/>

更多详细信息请访问 React-Treebeard 官网。

5.2 主要特点

5.2.1 易于扩展

React-Treebeard 的设计使其非常容易扩展，开发者可以根据自己的需求自定义主题、动画和样式。

import { decorators, theme } from 'react-treebeard';// 自定义装饰器
const customDecorators = {...decorators,Header: (props) => {const style = props.style;return (<div style={style.base}><div style={style.title}>{props.node.name}</div></div>);}
};// 自定义主题
const customTheme = {...theme,tree: {base: {backgroundColor: '#FFFFFF',color: '#000000'}}
};<Treebearddata={initialData}onToggle={this.onToggle}decorators={customDecorators}style={customTheme}
/>
5.2.2 简单直观的API

React-Treebeard 提供了简单直观的API，使开发者能够快速上手并进行各种定制化操作。

<Treebearddata={this.state.data}onToggle={this.onToggle}
/>

5.3 使用场景

5.3.1 单页应用

在单页应用中，使用 React-Treebeard 可以实现复杂的数据导航和显示，提高用户体验。

// 假设我们有一个文件管理系统
class FileManager extends Component {render() {return (<MyTree />);}
}
5.3.2 数据展示

对于需要展示分层数据的场景，React-Treebeard 提供了一个理想的解决方案。

// 展示部门和员工层级关系
const departmentData = {name: '公司',toggled: true,children: [{name: '技术部',children: [{ name: '前端组' },{ name: '后端组' }]},{name: '市场部',children: [{ name: '销售组' },{ name: '推广组' }]}]
};class DepartmentTree extends Component {constructor(props){super(props);this.state = {data: departmentData};this.onToggle = this.onToggle.bind(this);}onToggle(node, toggled){const {cursor} = this.state;if (cursor) {cursor.active = false;}node.active = true;if (node.children) { node.toggled = toggled; }this.setState({ cursor: node });}render(){return (<Treebearddata={this.state.data}onToggle={this.onToggle}/>);}
}

更多详细信息请访问 React-Treebeard 官网。

6. jqTree：一个轻量级的树形视图jQuery插件

6.1 功能概述

6.1.1 异步数据加载

jqTree 允许开发者使用异步数据加载功能，这意味着可以根据需求动态加载节点数据，避免一次性加载所有数据导致性能问题。

$('#tree').tree({dataUrl: '/tree_data/',autoOpen: 1
});
6.1.2 可嵌套节点

支持多层嵌套节点，便于表示复杂的树形结构，适用于各种分层数据展示。

var data = [{name: 'Node1',children: [{ name: 'Child1' },{ name: 'Child2' }]},{ name: 'Node2' }
];$('#tree').tree({data: data
});

6.2 主要特点

6.2.1 快速响应

jqTree 针对性能进行了优化，即使在包含大量节点的情况下，也能保证良好的响应速度。

6.2.2 支持多种事件

支持多种事件，例如节点点击、展开、折叠等，开发者可以根据需求进行定制化开发。

$('#tree').bind('tree.click',function(event) {var node = event.node;alert('Clicked node: ' + node.name);}
);

6.3 使用场景

6.3.1 项目管理工具

在项目管理工具中，可以使用 jqTree 来展示任务或项目的层次结构，方便用户查看和管理各个项目及其子任务。

var projectData = [{name: 'Project A',children: [{ name: 'Task 1' },{ name: 'Task 2' }]},{ name: 'Project B' }
];$('#project-tree').tree({data: projectData
});
6.3.2 知识库系统

在知识库系统中，可以使用 jqTree 来展示文章或文档的分类，帮助用户快速查找所需信息。

var knowledgeData = [{name: 'Category 1',children: [{ name: 'Article 1' },{ name: 'Article 2' }]},{ name: 'Category 2' }
];$('#knowledge-tree').tree({data: knowledgeData
});

jqTree 官网

总结

综上所述，各大JavaScript树形视图库各具特色，适用于不同的应用场景。jsTree和jqTree作为jQuery插件，提供了丰富的插件体系和快速响应能力，非常适合文件管理系统和项目管理工具。FancyTree则通过性能优化和多种主题支持，成为数据导航和配置面板的理想选择。d3-hierarchy以其强大的可视化功能和高度交互性，广泛应用于数据分析工具和组织结构图。而基于现代前端框架的Vue Tree和React-Treebeard，凭借轻量级和易于集成的特点，分别适用于前端框架集成和单页应用的数据展示。希望通过本文的介绍，你能找到最适合你项目的树形视图库，为用户提供更优质的体验。

这篇关于【JavaScript脚本宇宙】无缝集成与高效渲染：最佳JavaScript树形视图库推荐的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1069035。

相关文章

Java五子棋之坐标校正

Java五子棋之坐标校正

上篇针对了Java项目中的解构思维，在这篇内容中我们不妨从整体项目中拆解拿出一个非常重要的五子棋逻辑实现：坐标校正，我们如何使漫无目的鼠标点击变得有序化和可控化呢？ 目录 一、从鼠标监听到获取坐标 1.MouseListener和MouseAdapter 2.mousePressed方法 二、坐标校正的具体实现方法 1.关于fillOval方法 2.坐标获取 3.坐标转换 4.坐
阅读更多...
Spring Cloud：构建分布式系统的利器

Spring Cloud：构建分布式系统的利器

引言 在当今的云计算和微服务架构时代，构建高效、可靠的分布式系统成为软件开发的重要任务。Spring Cloud 提供了一套完整的解决方案，帮助开发者快速构建分布式系统中的一些常见模式（例如配置管理、服务发现、断路器等）。本文将探讨 Spring Cloud 的定义、核心组件、应用场景以及未来的发展趋势。 什么是 Spring Cloud Spring Cloud 是一个基于 Spring
阅读更多...
Javascript高级程序设计(第四版)--学习记录之变量、内存

Javascript高级程序设计(第四版)--学习记录之变量、内存

原始值与引用值 原始值：简单的数据即基础数据类型，按值访问。 引用值：由多个值构成的对象即复杂数据类型，按引用访问。 动态属性 对于引用值而言，可以随时添加、修改和删除其属性和方法。 let person = new Object();person.name = 'Jason';person.age = 42;console.log(person.name,person.age);//'J
阅读更多...
java8的新特性之一（Java Lambda表达式）

java8的新特性之一（Java Lambda表达式）

1：Java8的新特性 Lambda 表达式： 允许以更简洁的方式表示匿名函数（或称为闭包）。可以将Lambda表达式作为参数传递给方法或赋值给函数式接口类型的变量。 Stream API： 提供了一种处理集合数据的流式处理方式，支持函数式编程风格。 允许以声明性方式处理数据集合（如List、Set等）。提供了一系列操作，如map、filter、reduce等，以支持复杂的查询和转
阅读更多...
UE3脚本UnrealScript UC语法点滴

UE3脚本UnrealScript UC语法点滴

持续更新 目录 类定义修饰符  1.dependson(CLASSNAME） 2.config(ININAME) 3.native 4.notplaceable 5.inherits(CLASSNAME1[,CLASSNAME2,...]) 类对象实例创建 类默认属性设置 变量 1.声明 var local 2.修饰符 config  3.array 类型变量 以及
阅读更多...
Java面试八股之怎么通过Java程序判断JVM是32位还是64位

Java面试八股之怎么通过Java程序判断JVM是32位还是64位

怎么通过Java程序判断JVM是32位还是64位 可以通过Java程序内部检查系统属性来判断当前运行的JVM是32位还是64位。以下是一个简单的方法： public class JvmBitCheck {public static void main(String[] args) {String arch = System.getProperty("os.arch");String dataM
阅读更多...
详细分析Springmvc中的@ModelAttribute基本知识（附Demo）

详细分析Springmvc中的@ModelAttribute基本知识（附Demo）

目录 前言1. 注解用法1.1 方法参数1.2 方法1.3 类 2. 注解场景2.1 表单参数2.2 AJAX请求2.3 文件上传 3. 实战4. 总结 前言 将请求参数绑定到模型对象上，或者在请求处理之前添加模型属性 可以在方法参数、方法或者类上使用 一般适用这几种场景： 表单处理：通过 @ModelAttribute 将表单数据绑定到模型对象上预处理逻辑：在请求处理之前
阅读更多...
eclipse运行springboot项目，找不到主类

eclipse运行springboot项目，找不到主类

解决办法尝试了很多种，下载sts压缩包行不通。最后解决办法如图： help--->Eclipse Marketplace--->Popular--->找到Spring Tools 3---->Installed。
阅读更多...
JAVA读取MongoDB中的二进制图片并显示在页面上

JAVA读取MongoDB中的二进制图片并显示在页面上

1：Jsp页面： <td><img src="${ctx}/mongoImg/show"></td> 2：xml配置： <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001
阅读更多...
Java面试题：通过实例说明内连接、左外连接和右外连接的区别

Java面试题：通过实例说明内连接、左外连接和右外连接的区别

在 SQL 中，连接（JOIN）用于在多个表之间组合行。最常用的连接类型是内连接（INNER JOIN）、左外连接（LEFT OUTER JOIN）和右外连接（RIGHT OUTER JOIN）。它们的主要区别在于它们如何处理表之间的匹配和不匹配行。下面是每种连接的详细说明和示例。 表示例 假设有两个表：Customers 和 Orders。 Customers CustomerIDCus
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2