ooyhao

【EasyUI篇】树组件——Tree

微信公众号：程序yuan
关注可了解更多的教程。问题或建议，请公众号留言;

查看--> 全套EasyUI示例目录

Tree树组件

Tree 树，在Easyui也是一个非常常见的组件，在组件一个管理系统的时候，少不了使用树来做导航菜单，那么，现在让我们一起来学习一下吧。。。

数据库设计：

JSP文件

<%--
  Created by IntelliJ IDEA.
  User: ooyhao
  Date: 2018/7/29 0029
  Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    Tree
    
    
    
    
    
    
    
    
    
    



    <%--
        
            宜春学院
            
                
                    数学与计算机科学学院
                    
                        学工科
                        
                            计算机科学与技术
                            
                                计算机科学与技术1班
                                计算机科学与技术2班
                            
                        
                        
                            网络工程
                            
                                网络工程2班
                                网络工程1班
                            
                        

                    
                
                学工处
                
                    体育学院
                    
                        体育教育
                        体育表演
                    
                
            
        
        
            南昌大学
            
                软件学院
            
        
    --%>
    

    

    
        变成父节点


        增加


        修改


        删除


        取消

JS文件

$(function () {

    var options = {
        url:'findTrees.action',
        // url:'getTrees.action',
        method:'post',
        //展开折叠是否使用动画
        animate:true,
        //是否在每一个节点前显示复选框
        checkbox:true,
        //是否进行层叠选中
        // cascadeCheck:false,
        //是否只在叶子节点显示复选框，需要配合checkbox使用
        // onlyLeafCheck:true,
        lines:true,
        //是否使用拖拽功能
        dnd:false,
        // data:[],//本地加载的菜单数据
        formatter:function (node) {
            // return '['+node.text+']';
            return node.text;
        },
        onLoadSuccess:function (node,data) {
            if(data){
                $(data).each(function (index,value) {
                    // value.iconCls='icon-ok';
                    // value.text = value.text+'@';
                    if(value.state="closed"){
                        // $("#box").tree("expandAll");
                    }
                });
            }
        },
        onClick:function (node) {
            // console.log(node);
        },
        onDblClick:function (node) {
            // console.log(node);
        },
        onBeforeLoad:function (node,param) {
            // console.log(node);
            console.log(param);//参数
        },
        onBeforeExpand:function (node) {
            // console.log(node);
        },
        onExpand:function (node) {
            // console.log(node);
        },
        onBeforeCollapse:function (node) {
            // console.log(node);
        },
        onCollapse:function (node) {
            // console.log(node);
        },
        //勾选复选框
        onBeforeCheck:function (node,checked) {
            // console.log(node);
            // console.log(checked);
        },
        onCheck:function (node,checked) {
            // console.log(node);
            // console.log(checked);
        },
        //点击节点
        onBeforeSelect:function (node) {
            // console.log(node);
        },
        onSelect:function (node) {
            // console.log(node);
        },
        onContextMenu:function (e,node) {
            e.preventDefault();
            $("#box").tree('select',node.target);
            $("#menu").menu('show',{
                left:e.pageX,
                top:e.pageY,
            });
        },
        onBeforeEdit:function () {
            // alert("before");
        },
        onAfterEdit:function (node) {
            var id = node.id;
            var text = node.text;
            $.ajax({
                url:'updateTree.action',
                type:'post',
                data:{
                    id:id,
                    text:text,
                },
                dataType:"json",
                success:function (data) {
                    $.messager.show({
                        title:"提示",
                        msg:data.msg,
                        timeout:2000,
                        showType:'slide',
                    });
                }
            });
        },
        onCancelEdit:function (node) {
            // alert("cancel");
        }
    };

    $("#box").tree(options);
    $("#menu").menu({
        width:150,
        onClick:function (item) {
            console.log(item);
            if(item.text == "修改"){
                var node = $('#box').tree('getSelected');
                $("#box").tree('beginEdit',node.target);

            }else if(item.text == "删除"){
                var node = $('#box').tree('getSelected');
                if(!$("#box").tree('isLeaf',node.target)){
                    $.messager.alert("错误","不能删除这个节点",'error');
                    return;
                }
                $.ajax({
                   url:'deleteTreeById.action',
                   type:'post',
                   data:{
                       id:node.id,
                   },
                   dataType:"json",
                   success:function (data) {
                       $("#box").tree('remove',node.target);
                       $.messager.show({
                           title:"提示",
                           msg:data.msg,
                           timeout:2000,
                           showType:"slide",
                       });
                   }
                });

            }else if(item.text == "变成父节点"){
                var node = $('#box').tree('getSelected');
                if(!$('#box').tree("isLeaf",node.target)){
                    $.messager.alert("提示","当前节点为父节点，不可转换","warning");
                    return;
                }
                $.ajax({
                    url:'changeNodeState.action',
                    type:'post',
                    data:{
                        id:node.id,
                    },
                    dataType:'json',
                    success:function (data) {
                        $.messager.show({
                            title:'提示',
                            msg:data.msg,
                            timeout:2000,
                            showType:'slide',
                        });
                        $('#box').tree('update',{
                            target:node.target,
                            id:node.id,
                            text:node.text,
                            state:'closed',
                        });
                        var pNode = $('#box').tree('getParent',node.target);
                        $('#box').tree('reload',pNode.target);
                    }

                });

            }else if(item.text == "增加"){
                var node = $('#box').tree('getSelected');
                if($('#box').tree("isLeaf",node.target)){
                    $.messager.alert("提示","当前节点不是父节点，请将其装换为父节点","info");
                    return;
                }
                $.ajax({
                    url:'addTree.action',
                    type:'post',
                    data:{
                        text:'新节点',
                        pid:node.id,
                        flag:0,
                    },
                    dataType:'json',
                    success:function (data) {
                        if(data.flag){
                            $('#box').tree('append',{
                                parent:node.target,
                                data:[
                                    {
                                        text:"新节点",
                                    }
                                ]
                            });
                        }
                        $.messager.show({
                            title:"提示",
                            msg:data.msg,
                            timeout:2000,
                            showType:'slide',
                        });
                        var pNode = $('#box').tree('getParent',node.target);
                        $('#box').tree('reload',node.target);
                    }
                });
            }else if(item.text == "取消"){
                var node = $('#box').tree('getSelected');
                $("#box").tree('reload',node.target);
            }
        },

    });
});

Controller文件

package com.ooyhao.controller;

import com.ooyhao.EasyUIVo.Message;
import com.ooyhao.pojo.Tree;
import com.ooyhao.service.TreeService;
import org.apache.ibatis.annotations.Param;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

/**
 * @author ooyhao
 */
@Controller
public class TreeController {

    @Autowired
    private TreeService treeService;

    @RequestMapping(value = "getTrees")
    @ResponseBody
    public List getTrees(){
        return treeService.getTrees();
    }

    @RequestMapping(value = "findTrees")
    @ResponseBody
    public List findTrees(String id){
        int pid = -1;
        if(id != null)
            pid = Integer.parseInt(id);
        return treeService.findTreesByPid(pid);
    }
    @RequestMapping(value = "deleteTreeById")
    @ResponseBody
    public Message deleteTreeById(String id){
        treeService.deleteTreeById(Integer.parseInt(id));
        return new Message(true,"删除成功");
    }

    @RequestMapping(value = "updateTree")
    @ResponseBody
    public Message updateTree(String id, String text){
        Tree tree = treeService.getTreeById(Integer.parseInt(id));
        tree.setText(text);
        treeService.updateTree(tree);
        return new Message(true,"更新成功");
    }

    @RequestMapping(value = "addTree")
    @ResponseBody
    public Message addTree(Tree tree){
        treeService.addTree(tree);
        return new Message(true,"添加成功");
    }
    @RequestMapping(value = "changeNodeState")
    @ResponseBody
    public Message changeNodeState(Integer id){
        Tree tree = treeService.getTreeById(id);
        tree.setState("closed");
        treeService.updateTree(tree);
        return new Message(true,"状态改变成功");
    }

}

Service文件

package com.ooyhao.service;

import com.ooyhao.pojo.Tree;

import java.util.List;

/**
 * @author ooyhao
 */
public interface TreeService {

   public List getTrees();

   public List findTreesByPid(Integer pid);

   public void deleteTreeById(Integer id);

   public void updateTree(Tree tree);

   public Tree getTreeById(Integer id);

   public void addTree(Tree tree);

}

ServiceImpl文件

package com.ooyhao.service;

import com.ooyhao.dao.TreeMapper;
import com.ooyhao.pojo.Tree;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * @author ooyhao
 */
@Service
public class TreeServiceImpl implements TreeService {

    @Autowired
    private TreeMapper treeMapper;

    /**
     * 一次获得所有树结构
     * @return
     */
    @Override
    public List getTrees() {
        return buildTree(-1);
    }

    //使用递归创建菜单树
    public List buildTree(Integer pid){
        //创建一棵树
        //获得一级菜单
        List trees = treeMapper.getTreesByPid(pid);
        if(trees == null || trees.size() == 0){
            return null;
        }
        //遍历一级菜单
        for(Tree tree : trees){
            //获得每一个节点的id作为下一级的父级id
            List treeList = buildTree(tree.getId());
            tree.setChildren(treeList);
        }

        return trees;
    }

    /**
     * 异步创建树
     * @param pid
     * @return
     */
    @Override
    public List findTreesByPid(Integer pid) {
        return treeMapper.getTreesByPid(pid);
    }

    @Override
    public void deleteTreeById(Integer id) {
        treeMapper.deleteTreeById(id);
    }

    @Override
    public void updateTree(Tree tree) {
        treeMapper.updateTree(tree);
    }

    @Override
    public Tree getTreeById(Integer id) {
        return treeMapper.getTreeById(id);
    }

    @Override
    public void addTree(Tree tree) {
        treeMapper.addTree(tree);
    }

}

DAO文件

package com.ooyhao.dao;

import com.ooyhao.pojo.Tree;

import java.util.List;

/**
 * @author ooyhao
 */
public interface TreeMapper {

    /**
     * 获得所有的记录
     * @return
     */
    public List getTrees();

    /**
     * 根据pid获得记录
     */
    public List getTreesByPid(Integer pid);

    /**
     * 根据id获得记录
     */
    public Tree getTreeById(Integer id);

    /**
     * 根据id删除记录
     */
    public void deleteTreeById(Integer id);

    /**
     * 更新记录
     */
    public void updateTree(Tree tree);

    /**
     * 插入一条记录
     */
    public void addTree(Tree tree);
}

Mapper文件





    
        select * from tb_tree where flag != 2;
    

    
        select * from tb_tree WHERE pid = #{pid} ;
    

    
        select * from tb_tree where id = #{id}
    

    
        DELETE FROM tb_tree WHERE id = #{id};
    

    
        UPDATE tb_tree
        
            
                text = #{text},
            
            
                pid = #{pid},
            
            
                attributes = #{attributes},
            
            
                flag = #{flag},
            
            
                state =  #{state},
            
        
        WHERE  id = #{id}
    

    
        insert into tb_tree (text,pid,state,flag,attributes)values(#{text},#{pid},#{state},#{flag},#{attributes});

Message文件

package com.ooyhao.EasyUIVo;

import java.io.Serializable;

/**
 * @author ooyhao
 */
public class Message implements Serializable{
    private Boolean flag = true;
    private String msg = "操作成功";
    private T obj;

    public Message() {
    }

    public Message(Boolean flag, String msg) {
        this.flag = flag;
        this.msg = msg;
    }

    public Message(Boolean flag, String msg, T obj) {
        this.flag = flag;
        this.msg = msg;
        this.obj = obj;
    }

    public Boolean getFlag() {
        return flag;
    }

    public void setFlag(Boolean flag) {
        this.flag = flag;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public T getObj() {
        return obj;
    }

    public void setObj(T obj) {
        this.obj = obj;
    }

    @Override
    public String toString() {
        return "Message{" +
                "flag=" + flag +
                ", msg='" + msg + '\'' +
                ", obj=" + obj +
                '}';
    }
}

Tree文件

package com.ooyhao.pojo;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

/**
 * @author ooyhao
 */
public class Tree implements Serializable {

    private Integer id;
    private String text;
    private Integer pid;
    private Integer flag;
    private String state;
    private String attributes;

    private List children = new ArrayList<>();

    public Tree() {

    }

    public Tree(Integer id, String text, Integer pid, Integer flag, String state, String attributes) {
        this.id = id;
        this.text = text;
        this.pid = pid;
        this.flag = flag;
        this.state = state;
        this.attributes = attributes;
    }



    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }


    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public Integer getPid() {
        return pid;
    }

    public void setPid(Integer pid) {
        this.pid = pid;
    }

    public Integer getFlag() {
        return flag;
    }

    public void setFlag(Integer flag) {
        this.flag = flag;
    }

    public String getAttributes() {
        return attributes;
    }

    public void setAttributes(String attributes) {
        this.attributes = attributes;
    }

    public String getState() {
        return state;
    }

    public void setState(String state) {
        this.state = state;
    }

    public List getChildren() {
        return children;
    }

    public void setChildren(List children) {
        this.children = children;
    }

    @Override
    public String toString() {
        return "Tree{" +
                "id=" + id +
                ", text='" + text + '\'' +
                ", pid=" + pid +
                ", flag=" + flag +
                ", state='" + state + '\'' +
                ", attributes='" + attributes + '\'' +
                ", children=" + children +
                '}';
    }
}

效果图

------------------------------------------------

关注小编微信公众号获取更多资源

[Python] -项目实战8- 构建一个简单的 Todo List Web 应用（Flask）踏雪无痕老爷子 Python python 开发语言
一、为什么选Flask？轻量上手快：仅需几行代码就能跑一个可用的Web应用。灵活扩展：可接入数据库、身份认证、前端框架等。教育性强：涵盖前后端交互基础，适合入门全栈开发。二、项目结构建议flask_todo/├──app.py├──templates/│└──index.html├──static/│└──style.css├──todo.db└──requirements.txtapp.py：后
推客系统小程序开发实战：2025年技术架构与实现细节 wx_qutudy java 推客小程序开发推客系统
引言在电商生态竞争日益激烈的2025年，推客系统作为私域流量运营的核心工具，其技术实现效率与合规性已成为企业增长的关键指标。本文基于实际开发经验，深度解析推客系统小程序的技术选型、架构设计与核心功能实现，旨在为开发者提供可复用的技术方案。一、技术选型：多端统一开发框架的深度实践1.1前端框架选型对比在2025年主流框架对比中，Taro3.6.31展现出显著优势：跨平台能力：支持微信/支付宝/百度小
DHTMLX Suite 9.2 重磅发布：支持历史记录、类Excel交互、剪贴板、拖放增强等多项升级
全球知名的JavaScriptUI组件库DHTMLXSuite迎来9.2新版本！此次更新虽为次版本号，却实质性提升了Grid网格组件的交互能力与用户体验，引入了包括历史记录管理、剪贴板操作、数据选择范围管理、Block区块选择等多项高级模块，支持更接近电子表格的使用体验。新版Grid组件不仅在数据可视化、数据编辑方面功能更强，还增强了与主流前端框架（如React、Vue、Angular）的集成示例
前端框架对比与选择：全面解析前端开发的得力助手 @sinner 技术选型前端前端框架
一、引言在当今快速发展的互联网时代，前端开发扮演着至关重要的角色。前端框架的出现极大地提高了开发效率、提升了用户体验。然而，市场上存在着众多的前端框架，如React、Vue、Angular等，对于开发者来说，如何在这些框架中做出合适的选择成为了一个关键问题。本文将对一些主流的前端框架进行深入对比，分析它们的特点、优势、劣势以及适用场景，希望能为广大开发者在前端框架的选择上提供有益的参考。二、Rea
探索 Vue.js 组件的最新特性
引言：Vue.js作为一款流行的前端框架，始终在不断发展和演进，为开发者带来新的特性和功能，以提升开发效率和用户体验。Vue.js组件是构建Vue应用的基础，其最新特性为开发者提供了更强大的工具和更灵活的开发方式。本文将深入探讨Vue.js组件的一些最新特性，包括组合式API、Teleport、Suspense等，帮助开发者更好地掌握和运用这些特性，从而构建出更加高效、复杂的前端应用。组合式API
探索Pebble时代遗留的瑰宝：Slate框架简介宣苓滢Rosa
探索Pebble时代遗留的瑰宝：Slate框架简介项目介绍随着技术迭代的脚步，Slate——曾经为Pebble智能手表应用提供强大支持的前端框架，虽然已被Clay取而代之，但其在移动配置页面开发领域的创新精神值得回顾。它以简洁高效的设计理念，让开发者能够快速创建美观且用户友好的配置界面，曾是众多Pebble应用背后的功臣。技术深度剖析Slate基于轻量级的JavaScript库Zepto.js构建
React.js前端框架的性能优化的误区与解决方法前端视界前端大数据与AI人工智能前端艺匠馆前端框架 react.js 性能优化 ai
React.js前端框架的性能优化的误区与解决方法关键词：React性能优化、虚拟DOM、渲染优化、组件设计、代码分割、状态管理、性能分析工具摘要：本文深入探讨React.js应用开发中常见的性能优化误区，分析其背后的原理和影响，并提供切实可行的解决方案。文章将从React核心机制入手，剖析虚拟DOM工作原理，揭示不当优化策略可能带来的反效果，并给出基于最佳实践的优化方案。通过实际代码示例、性能对
【Vue CLI】手把手教你撸插件 vivo互联网技术
本文首发于vivo互联网技术微信公众号链接：https://mp.weixin.qq.com/s/Rl8XLUX7isjXNUmbw0-wow作者：ZhuPing现如今Vue作为主流的前端框架之一，其健全的配套工具，活跃的开源社区，让广发码农热衷追捧。VueCLI作为其官方的开发构建工具，目前已更新迭代到4.x版本，其内部集成了日常开发用到的打包压缩等功能，简化了常规自己动手配置webpack的烦
原生前端JavaScript/CSS与现代框架(Vue、React)的联系、区别与运行环境(精简版)
原生前端JavaScript/CSS与现代框架(Vue、React)的联系、区别与运行环境随着Web技术的不断发展，前端开发已经从最初的原生JavaScript和CSS时代，逐步演进到以Vue、React等为代表的现代前端框架时代。对于许多刚入门或正在转型的前端开发者来说，理解原生技术和现代框架之间的联系、区别，以及各自的运行环境和条件，有助于更好地把握前端技术栈的演变趋势和实际应用场景。一、原生
《Java前端开发全栈指南：从Servlet到现代框架实战》
前言在当今Web开发领域，Java依然是后端开发的主力语言，而随着前后端分离架构的普及，Java开发者也需要掌握前端技术栈。本文将全面介绍JavaWeb前端开发的核心技术，包括传统Servlet/JSP体系、现代前端框架集成方案，以及全栈开发的最佳实践。通过本文，您将了解如何构建现代化的JavaWeb应用前端界面。一、JavaWeb前端技术演进1.1传统技术栈Servlet：JavaWeb基础，处
Vue.js 过渡 & 动画 lsx202406 开发语言
Vue.js过渡&动画引言在Web开发中，过渡与动画是提升用户体验的关键元素。Vue.js作为一款流行的前端框架，提供了强大的过渡与动画功能，使得开发者能够轻松实现丰富的交互效果。本文将深入探讨Vue.js中的过渡与动画，包括其原理、应用场景以及实现方法。一、Vue.js过渡原理Vue.js过渡是利用CSS3的transition属性实现的。当Vue.js侦测到数据变化时，会自动触发过渡效果。过渡
SpringBoot 与 HTMX：现代 Web 开发的高效组合风象南原创随笔后端 spring boot java
在当今的Web开发领域，前后端分离已成为主流趋势。传统的全栈框架往往需要复杂的模板引擎来处理视图逻辑，而前端框架如React、Vue等虽然强大，但也带来了学习曲线陡峭、构建复杂等问题。本文将介绍一种轻量级的解决方案——结合SpringBoot与HTMX，实现高效、简洁的前后端分离开发。为什么选择SpringBoot与HTMX？SpringBoot是Java生态中最流行的应用开发框架之一，它提供了自
7.3 React+CLI双剑合璧：GitHub监控工具界面开发实战全攻略少林码僧 github 前端 gpt 人工智能语言模型
React+CLI双剑合璧：GitHub监控工具界面开发实战全攻略-GitHubSentinelAgent用户界面原型设计与实现关键词：前端框架选型、React原型设计、API集成策略、CLI开发、组件化测试1.1用户界面功能规划通过ChatGPT交互式规划核心功能模块：
基于Abp Vnext、FastMCP构建一个企业级的模型即服务（MaaS）平台方案 NetX行者 Abp vnext Maas Abp vnext FastMCP 企业级平台解决方案开源 python
企业级MaaS平台技术可行性分析报告一、总体技术架构HTTP/WebSocketgRPC/RESTgRPC/RESTgRPCVue3前端ABPvNextAPI网关.NET9业务微服务ABPvNextMCPClientFastMCP模型仓库PyTorch/TensorFlowHuggingFaceHeyGem/ChatGLM自定义模型统一鉴权中心二、核心框架与中间件组件技术选型官方链接作用前端框架V
2025 年前端主流框架对比和竞争格局及趋势发展
2025年前端框架的竞争格局呈现出主流框架稳定演进、新兴技术快速渗透的特点，同时全栈整合、跨端效能、AI集成成为核心发展方向。以下是基于最新行业动态和技术实践的深度解析：一、主流框架竞争态势与核心能力1.React：企业级生态的持续统治力市场地位：全球使用率超40%，尤其在金融、社交等数据密集型场景占据主导。字节跳动、腾讯等大厂的复杂Web应用仍以React为首选。技术突破：并发模式（Concur
《Foundation 输入框尺寸：设计指南与最佳实践》 lly202406 开发语言
《Foundation输入框尺寸：设计指南与最佳实践》引言在网页设计中，输入框是用户与网站互动的关键元素。Foundation作为一款流行的前端框架，提供了丰富的组件库，其中包括多种尺寸的输入框，以满足不同设计需求。本文将详细介绍Foundation输入框的尺寸，并分享一些最佳实践，帮助设计师和开发者更好地利用这一组件。一、Foundation输入框尺寸概述Foundation提供了四种标准尺寸的
web渗透之指纹识别1 合作小小程序员小小店网络安全物联网网络安全网络攻击模型计算机网络
web渗透之指纹识别1前端技术：前端中我们需要掌握一些基础html,javascrip,jquery,bootstrap,前端框架vue.js,vue,angular,React等，在前端中可以利用的东西还是很多的，我们可使用xss配合csrf以及一些攻击漏洞进行弹框，获取cookie，劫持，绕过，跳转，跨域，重定向，重放，控制节点，挂暗链接，甚至隐藏我们的请求等。如果要说怎么在识别中使用，我们可
【AIGC时代】OneCode前端框架入门指南：从环境搭建到第一个应用低代码老李 OneCode实战低代码软件行业学习前端框架
在人工智能生成内容(AIGC)技术飞速发展的今天，前端开发领域正经历着前所未有的变革。AI工具能够批量生成代码，但如何将这些自动生成的代码转化为可维护、高质量的生产级应用，成为开发者面临的核心挑战。OneCode框架凭借其独特的设计理念，在这一背景下展现出显著优势，本文将带您从零开始，快速掌握OneCode框架的使用方法。一、AIGC背景下选择OneCode框架的四大理由AIGC工具的普及为前端开
乾坤微前端框架详细使用大全不知名靓仔前端框架
引言乾坤微前端框架（Qiankun）是一款轻量级的微前端解决方案，它基于JavaScript的Proxy特性和WebComponents技术，提供了一套简单易用的微前端实现方案。本文将详细介绍乾坤微前端框架的安装、配置、使用方法及常见问题解答，帮助开发者快速上手乾坤微前端框架。1.乾坤简介1.1什么是乾坤？乾坤是一个轻量级的微前端框架，旨在帮助开发者轻松实现微前端架构。它通过主应用（MainApp
qiankun 微前端框架子应用间通信方法详解啃火龙果的兔子开发DEMO 前端框架
qiankun作为流行的微前端解决方案，提供了多种子应用间通信的方式。以下是全面的通信方法总结：1.基于props的通信（主应用与子应用）主应用向子应用传递数据：//主应用注册子应用时传递数据registerMicroApps([{name:'subApp',entry:'//localhost:7100',container:'#subapp-container',activeRule:'/su
axios 使用入门
axios使用入门阅读目录一、前言#二、干货合集#1、加载#2、get&post#3、拦截器#三、总结#一、前言在没有接触React、Angular、Vue这类MVVM的前端框架之前，无法抛弃Jquery的重要理由，除了优秀的前端DOM元素操作性以外，能够非常便捷的发起http请求也占有非常重要的地位。既然我们已经开始使用Vue进行前端开发，抛弃了对页面DOM元素的操作，难道，为了方便的发起htt
Bootstrap 表单 wjs2024 开发语言
Bootstrap表单Bootstrap是一个流行的前端框架，它可以帮助开发者快速构建响应式和美观的网页界面。在Bootstrap中，表单是用户与网站交互的重要部分。本文将详细介绍Bootstrap表单的用法、样式和优化技巧。1.Bootstrap表单概述Bootstrap表单提供了丰富的样式和组件，可以帮助开发者轻松实现各种表单需求。以下是一些常见的Bootstrap表单组件：输入框（Input
jEasyUI 创建自定义视图沐知全栈开发开发语言
jEasyUI创建自定义视图引言jEasyUI是一款流行的jQueryUI扩展库，它提供了丰富的UI组件和交互效果，帮助开发者快速构建美观、响应式的网页应用。在jEasyUI中，创建自定义视图是一个常见的需求，本文将详细介绍如何使用jEasyUI创建自定义视图，包括视图的结构、样式和交互。视图结构在jEasyUI中，一个自定义视图通常由以下几个部分组成：容器：用于承载视图内容的HTML元素，通常是
Vue3 学习教程，从入门到精通，Vue3 简介知识点及案例代码（1）知识分享小能手 vue3 前端开发网页开发学习 bootstrap javascript typescript 前端 vue.js vue
Vue3简介知识点及案例代码一、Vue3简介Vue3是一款用于构建用户界面的渐进式JavaScript框架，采用MVVM模式，具有响应式、组件化等优点，可提高开发效率，优化应用性能。二、Web前端开发概述Web前端开发涉及HTML、CSS、JavaScript等技术，用于构建用户可直接交互的页面部分。随着技术发展，出现了多种前端框架，Vue3是其中的优秀代表，基于前后端分离模式，使前后端开发解耦，
通俗易懂，一看就懂的React与Vue的区别 More more react.js vue.js
React和Vue是当前最主流的前端框架，对开发者而言，日常开发中它们的区别可以总结为以下几点（用实际场景举例说明）：一、写模板的方式不同React：用JSX（JavaScript+HTML混合写法），所有UI逻辑都在JavaScript中完成。Vue：用类似HTML的模板语法，逻辑和模板分离，但也可以通过JSX扩展。//React组件（JSX）functionButton(){const[cou
基于uniapp小程序的诗词学习系统附带文章源码部署视频讲解等
文章目录前言详细视频演示具体实现截图核心技术介绍小程序框架Uniapp前端框架Vue持久层框架MyBaits为什么选择我代码参考数据库参考测试用例参考源码获取前言博主介绍：✌CSDN特邀作者、资深全栈开发程序员，曾在互联网大厂担任高级职位、码云/掘金/华为云/阿里云/InfoQ/StackOverflow/github等平台优质作者、专注于Java、小程序、前端、python等技术领域毕业项目实战
OpenLayers 入门指南：序言凌往昔 OpenLayers 入门指南 WebGIS OpenLayers
本专栏旨在帮助零GIS基础的开发人员系统掌握OpenLayers这一强大的开源Web地图库，通过“理论+实战”结合的方式，逐步实现从创建地图到构建一个基础地图应用模版。无论你是前端开发者、GIS爱好者，都可以通过此专栏零基础开始用OpenLayers开发一个基础地图应用。如果你对OpenLayers已经有过了解和使用，且对API也掌握的比较熟了，不建议订阅此专栏！一、前端框架Vue3TypeScr
【前端】【数字孪生】基础知识：数字孪生 3D 模型去哪里找？Three.js 辅助组件库有哪些？模型的动画是黑盒吗？怎么控制？患得患失949 数字孪生前端 3d javascript
前端数字孪生全解：Vue与Three.js的最佳实践、3D模型网站推荐、自带动画控制详解在数字孪生（DigitalTwin）和三维可视化逐渐成为前端热点的今天，很多开发者开始转向WebGL+前端框架的集成实践，最常见的组合包括：React+Three.js（通过@react-three/fiber与@react-three/drei）Vue+Three.js（本文重点）本文将从以下几个维度全面解析
element-ui手机区号+手机号
需求场景项目开发中对方要求手机号带上全球区号需求分析项目使用的是若依前端框架，element-ui的框架。尝试使用已经网上的组件vue-country-intl等发现不怎么适配element-ui的样式等。这还不是关键的，关键的是弹窗中使用这些组件发现区号的下拉展示框展示不全，层级存在问题，设置css的z-index等相关属性也不能有效处理。于是决定手搓一个element-ul下拉的区号，支持国际
用springboot+vue+mybatis写一个前后端分离的后台管理系统 13572025090 mybatis spring boot vue.js java 后端
在写一个前后端分离的后台管理系统时，您可以使用SpringBoot作为后端框架，Vue.js作为前端框架，MyBatis作为数据访问框架。首先，您需要在SpringBoot中配置MyBatis，连接到数据库并编写相应的SQL语句。然后，您可以编写后端控制器来处理HTTP请求，并使用MyBatis执行数据库操作。在前端部分，您可以使用Vue.js构建用户界面，并使用Axios等库与后端进行交互。当用
eclipse maven IXHONG eclipse
eclipse中使用maven插件的时候，运行run as maven build的时候报错 -Dmaven.multiModuleProjectDirectory system propery is not set. Check $M2_HOME environment variable and mvn script match. 可以设一个环境变量M2_HOME指
timer cancel方法的一个小实例 alleni123 多线程 timer
package com.lj.timer; import java.util.Date; import java.util.Timer; import java.util.TimerTask; public class MyTimer extends TimerTask { private int a; private Timer timer; pub
MySQL数据库在Linux下的安装 ducklsl mysql
1.建好一个专门放置MySQL的目录 /mysql/db数据库目录 /mysql/data数据库数据文件目录 2.配置用户，添加专门的MySQL管理用户 >groupadd mysql ----添加用户组 >useradd -g mysql mysql ----在mysql用户组中添加一个mysql用户 3.配置，生成并安装MySQL >cmake -D
spring------>>cvc-elt.1: Cannot find the declaration of element Array_06 spring bean
将-------- <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3
maven发布第三方jar的一些问题 cugfy maven
maven中发布第三方jar到nexus仓库使用的是 deploy:deploy-file命令有许多参数，具体可查看 http://maven.apache.org/plugins/maven-deploy-plugin/deploy-file-mojo.html 以下是一个例子： mvn deploy:deploy-file -DgroupId=xpp3
MYSQL下载及安装 357029540 mysql
好久没有去安装过MYSQL，今天自己在安装完MYSQL过后用navicat for mysql去厕测试链接的时候出现了10061的问题，因为的的MYSQL是最新版本为5.6.24，所以下载的文件夹里没有my.ini文件，所以在网上找了很多方法还是没有找到怎么解决问题，最后看到了一篇百度经验里有这个的介绍，按照其步骤也完成了安装，在这里给大家分享下这个链接的地址
ios TableView cell的布局张亚雄 tableview
cell.imageView.image = [UIImage imageNamed:[imageArray objectAtIndex:[indexPath row]]]; CGSize itemSize = CGSizeMake(60, 50); &nbs
Java编码转义 adminjun java 编码转义
import java.io.UnsupportedEncodingException; /** * 转换字符串的编码 */ public class ChangeCharset { /** 7位ASCII字符，也叫作ISO646-US、Unicode字符集的基本拉丁块 */ public static final Strin
Tomcat 配置和spring aijuans spring
简介 Tomcat启动时，先找系统变量CATALINA_BASE，如果没有，则找CATALINA_HOME。然后找这个变量所指的目录下的conf文件夹，从中读取配置文件。最重要的配置文件：server.xml 。要配置tomcat，基本上了解server.xml，context.xml和web.xml。 Server.xml -- tomcat主
Java打印当前目录下的所有子目录和文件 ayaoxinchao 递归 File
其实这个没啥技术含量，大湿们不要操笑哦，只是做一个简单的记录，简单用了一下递归算法。 import java.io.File; /** * @author Perlin * @date 2014-6-30 */ public class PrintDirectory { public static void printDirectory(File f
linux安装mysql出现libs报冲突解决 BigBird2012 linux
linux安装mysql出现libs报冲突解决安装mysql出现 file /usr/share/mysql/ukrainian/errmsg.sys from install of MySQL-server-5.5.33-1.linux2.6.i386 conflicts with file from package mysql-libs-5.1.61-4.el6.i686
jedis连接池使用实例 bijian1013 redis jedis连接池 jedis
实例代码： package com.bijian.study; import java.util.ArrayList; import java.util.List; import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool; import redis.clients.jedis.JedisPoo
关于朋友 bingyingao 朋友兴趣爱好维持
成为朋友的必要条件：志相同，道不合，可以成为朋友。譬如马云、周星驰一个是商人，一个是影星，可谓道不同，但都很有梦想，都要在各自领域里做到最好，当他们遇到一起，互相欣赏，可以畅谈两个小时。志不同，道相合，也可以成为朋友。譬如有时候看到两个一个成绩很好每次考试争做第一，一个成绩很差的同学是好朋友。他们志向不相同，但他
【Spark七十九】Spark RDD API一 bit1129 spark
aggregate package spark.examples.rddapi import org.apache.spark.{SparkConf, SparkContext} //测试RDD的aggregate方法 object AggregateTest { def main(args: Array[String]) { val conf = new Spar
ktap 0.1 released bookjovi kernel tracing
Dear, I'm pleased to announce that ktap release v0.1, this is the first official release of ktap project, it is expected that this release is not fully functional or very stable and we welcome bu
能保存Properties文件注释的Properties工具类 BrokenDreams properties
今天遇到一个小需求：由于java.util.Properties读取属性文件时会忽略注释，当写回去的时候，注释都没了。恰好一个项目中的配置文件会在部署后被某个Java程序修改一下，但修改了之后注释全没了，可能会给以后的参数调整带来困难。所以要解决这个问题。 &nb
读《研磨设计模式》-代码笔记-外观模式-Facade bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ /* * 百度百科的定义： * Facade（外观）模式为子系统中的各类（或结构与方法）提供一个简明一致的界面， * 隐藏子系统的复杂性，使子系统更加容易使用。他是为子系统中的一组接口所提供的一个一致的界面 * * 可简单地
After Effects教程收集 cherishLC After Effects
1、中文入门 http://study.163.com/course/courseMain.htm?courseId=730009 2、videocopilot英文入门教程（中文字幕） http://www.youku.com/playlist_show/id_17893193.html 英文原址： http://www.videocopilot.net/basic/ 素
Linux Apache 安装过程 crabdave apache
Linux Apache 安装过程下载新版本： apr-1.4.2.tar.gz（下载网站：http://apr.apache.org/download.cgi） apr-util-1.3.9.tar.gz（下载网站：http://apr.apache.org/download.cgi） httpd-2.2.15.tar.gz（下载网站：http://httpd.apac
Shell学习之变量赋值和引用 daizj shell 变量引用赋值
本文转自：http://www.cnblogs.com/papam/articles/1548679.html Shell编程中，使用变量无需事先声明，同时变量名的命名须遵循如下规则：首个字符必须为字母（a-z，A-Z）中间不能有空格，可以使用下划线（_）不能使用标点符号不能使用bash里的关键字（可用help命令查看保留关键字）需要给变量赋值时，可以这么写：
Java SE 第一讲（Java SE入门、JDK的下载与安装、第一个Java程序、Java程序的编译与执行） dcj3sjt126com java jdk
Java SE 第一讲： Java SE：Java Standard Edition Java ME: Java Mobile Edition Java EE：Java Enterprise Edition Java是由Sun公司推出的（今年初被Oracle公司收购）。收购价格：74亿美金 J2SE、J2ME、J2EE JDK：Java Development
YII给用户登录加上验证码 dcj3sjt126com yii
1、在SiteController中添加如下代码： /** * Declares class-based actions. */ public function actions() { return array( // captcha action renders the CAPTCHA image displ
Lucene使用说明 dyy_gusi Lucene search 分词器
Lucene使用说明 1、lucene简介 1.1、什么是lucene Lucene是一个全文搜索框架，而不是应用产品。因此它并不像baidu或者googleDesktop那种拿来就能用，它只是提供了一种工具让你能实现这些产品和功能。 1.2、lucene能做什么要回答这个问题，先要了解lucene的本质。实际
学习编程并不难,做到以下几点即可! gcq511120594 数据结构编程算法
不论你是想自己设计游戏，还是开发iPhone或安卓手机上的应用，还是仅仅为了娱乐，学习编程语言都是一条必经之路。编程语言种类繁多，用途各异，然而一旦掌握其中之一，其他的也就迎刃而解。作为初学者，你可能要先从Java或HTML开始学，一旦掌握了一门编程语言，你就发挥无穷的想象，开发各种神奇的软件啦。 1、确定目标学习编程语言既充满乐趣，又充满挑战。有些花费多年时间学习一门编程语言的大学生到
Java面试十问之三：Java与C++内存回收机制的差别 HNUlanwei java C++finalize()堆栈内存回收
大家知道， Java 除了那 8 种基本类型以外，其他都是对象类型（又称为引用类型）的数据。 JVM 会把程序创建的对象存放在堆空间中，那什么又是堆空间呢？其实，堆（ Heap）是一个运行时的数据存储区，从它可以分配大小各异的空间。一般，运行时的数据存储区有堆（ Heap）和堆栈（ Stack），所以要先看它们里面可以分配哪些类型的对象实体，然后才知道如何均衡使用这两种存储区。一般来说，栈中存放的
第二章 Nginx+Lua开发入门 jinnianshilongnian nginx lua
Nginx入门本文目的是学习Nginx+Lua开发，对于Nginx基本知识可以参考如下文章： nginx启动、关闭、重启 http://www.cnblogs.com/derekchen/archive/2011/02/17/1957209.html agentzh 的 Nginx 教程 http://openresty.org/download/agentzh-nginx-tutor
MongoDB windows安装基本命令 liyonghui160com
windows安装安装目录： D:\MongoDB\ 新建目录 D:\MongoDB\data\db 4.启动进城： cd D:\MongoDB\bin mongod -dbpath D:\MongoDB\data\db &n
Linux下通过源码编译安装程序 pda158 linux
一、程序的组成部分　　Linux下程序大都是由以下几部分组成：　　二进制文件：也就是可以运行的程序文件　　库文件：就是通常我们见到的lib目录下的文件　　配置文件：这个不必多说，都知道　　帮助文档：通常是我们在linux下用man命令查看的命令的文档　　二、linux下程序的存放目录　　linux程序的存放目录大致有三个地方：　　/etc, /b
WEB开发编程的职业生涯４个阶段 shw3588 编程 Web 工作生活
觉得自己什么都会 2007年从学校毕业，凭借自己原创的ASP毕业设计，以为自己很厉害似的，信心满满去东莞找工作，找面试成功率确实很高，只是工资不高，但依旧无法磨灭那过分的自信，那时候什么考勤系统、什么OA系统、什么ERP，什么都觉得有信心，这样的生涯大概持续了约一年。根本不是自己想的那样 2008年开始接触很多工作相关的东西，发现太多东西自己根本不会，都需要去学，不管是asp还是js，
遭遇jsonp同域下变作post请求的坑 vb2005xu jsonp 同域post
今天迁移一个站点时遇到一个坑爹问题,同一个jsonp接口在跨域时都能调用成功,但是在同域下调用虽然成功,但是数据却有问题. 此处贴出我的后端代码片段 $mi_id = htmlspecialchars(trim($_GET['mi_id '])); $mi_cv = htmlspecialchars(trim($_GET['mi_cv '])); 贴出我前端代码片段: $.aj

【EasyUI篇】树组件——Tree

查看--> 全套EasyUI示例目录

Tree树组件

你可能感兴趣的:(前端框架EasyUI)