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 +
                '}';
    }
}

效果图

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

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

ECMAScript 2019（ES2019）：数组与对象操作的精细化升级 DT—— ECMAScript 历史进程 javascript 前端
1.版本背景与发布发布时间：2019年6月，由ECMAInternational正式发布，标准编号为ECMA-26210thEdition。历史意义：作为ES6之后的第四次年度更新，ES2019聚焦于数组、对象和字符串操作的精细化改进，提升开发效率和代码可读性。时代背景：随着前端框架的成熟和Node.js的普及，开发者对数组扁平化、对象转换等高频操作的需求激增，ES2019的发布回应了这些痛点。2
Python爬虫实战：使用Scrapy+Selenium+Playwright高效爬取Coursera课程信息 Python爬虫项目 2025年爬虫实战项目 python 爬虫 scrapy 微信开发语言科技 selenium
前言在当今信息爆炸的时代，在线教育平台如Coursera提供了海量的高质量课程资源。对于学习者、教育研究者和数据分析师来说，获取这些平台的课程信息具有重要价值。本文将详细介绍如何使用Python爬虫技术高效爬取Coursera课程信息，并分析其中的技术难点与解决方案。1.Coursera网站分析Coursera是一个典型的现代Web应用，具有以下特点：采用React/Vue等前端框架构建，大量内容
使用UmiJS框架开发React 汇智知了堂前端理论知识 react java
1、什么是Umi.js?umi，中文可发音为乌米，是一个可插拔的企业级react应用框架。你可以将它简单的理解为一个专注性能的类next.js前端框架，并通过约定、自动生成和解析代码等方式来辅助开发，减少我们开发者的代码量。2、为什么使用Umi.js?我们做react开发的时候会不会遇到以下问题？：2.1项目做大的时候，开发调试的启动和热更新时间会变得很长。2.2大应用下，网站打开很慢，有没有办法
校园志愿者系统前端代码实现及技术解析创新工场
本文还有配套的精品资源，点击获取简介：本项目集中展示了Web开发中的关键技术和框架，包含PHP、Vue.js、ElementUI和Laravel在校园志愿者系统前台构建中的应用。首先，PHP用于后端开发，处理业务逻辑并与数据库交互。接着，Vue.js作为前端框架，实现交云动界面和用户交互。ElementUI提供企业级UI组件，加速开发流程，提高界面美观度。Laravel框架则用于搭建后端架构，处理
使用JavaScript构建交互式Web页面：从基础到高级功能（附带实现代码~）一ge科研小菜菜 Java 前端开发 javascript
个人主页：一ge科研小菜鸡-CSDN博客期待您的关注1.引言JavaScript作为现代网页设计的核心技术之一，已发展成为前端开发中必不可少的编程语言。随着互联网的不断进化，用户对网页体验的需求日益增长，开发者需要借助JavaScript来实现页面动态交互、用户界面更新和复杂的数据操作。JavaScript的生态系统也日趋完善，从基础的ES6+特性到各种强大的前端框架如React、Vue和Angu
Vue-12-前端框架Vue之应用基础生命周期和自定义hooks 皮皮冰燃 Vue vue.js 前端框架前端
文章目录1生命周期的理解2vue2的生命周期2.1创建工程2.2App.vue(根组件)2.3Person.vue(子组件)2.4生命周期钩子示例2.4.1Person.vue2.4.2App.vue3vue3的生命周期3.1创建工程3.2App.vue(根组件)3.3Person.vue3.4挂载流程4hooks(钩子)4.1准备效果(Person.vue)4.2hooks4.2.1useDog
Vue-15-前端框架Vue之应用基础编程式路由导航皮皮冰燃 Vue 前端框架 vue.js javascript
文章目录1RouterLink的replace属性1.1App.vue1.2应用效果2编程式路由导航2.1场景一Home.vue2.2场景二News.vue3路由重定向3.1index.ts3.2Detail.vue3.3About.vue1RouterLink的replace属性路由每次跳转都有记录，默认是push，可以改为replace。RouterLink支持两个重要的属性：replace和
Odoo OWL 框架深度研究（VIP10万字版）源力祁老师 odoo开发实践学习方法开发语言前端
一、核心理念、架构定位与实践价值前言：为什么需要一份新的前端框架？在Odoo的漫长发展历程中，其前端部分长期依赖于一个基于Backbone.js的自定义Widget系统。这个系统在当时是有效的，但随着前端技术的飞速发展（以React,Vue,Svelte等框架为代表），其固有的命令式编程、手动DOM操作和复杂的继承体系等问题，逐渐成为制约开发效率和应用性能的瓶颈。为了彻底解决这些历史遗留问题，并拥
Odoo OWL 前端开发：ORM 与 RPC 服务的选择源力祁老师 odoo开发实践 rpc 网络协议网络学习方法开发语言
随着Odoo18的发布，其前端框架OdooWebLibrary(OWL)已经成为构建现代化用户界面的核心技术。OWL采用基于组件的声明式架构，其设计灵感源自React和Vue，旨在为开发者提供一个创建动态、响应式和可复用UI组件的强大工具集。这些先进的前端组件并非孤立存在，它们的强大功能依赖于与Odoo后端之间高效、安全的数据通信。在Odoo的前端生态系统中，orm服务和rpc服务是实现这种客户端
前端领域前端框架的优缺点大剖析前端视界前端大数据与AI人工智能前端艺匠馆前端前端框架 ai
前端领域主流框架的优缺点大剖析关键词：React、Vue、Angular、Svelte、虚拟DOM、响应式编程、前端工程化摘要：本文深入解析React、Vue、Angular、Svelte四大主流前端框架的核心设计原理，通过架构图解、算法源码剖析、数学建模和实战对比，揭示各框架在性能优化、开发体验、工程实践等方面的本质差异。文章包含6个完整项目案例和20+性能基准测试数据，为技术选型提供科学决策依
uniapp小兔鲜儿小程序 Chappie_Home uni-app 小程序
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档uniapp小兔鲜儿小程序前言一、项目介绍二、技术栈三、项目模块四、运行环境百度网盘分享前言开源项目学习提示：以下是本篇文章正文内容，下面案例可供参考一、项目介绍微信小程序端：该项目包含了从首页浏览商品，到商品详情，微信登录，加入购物车，提交订单，微信支付，订单管理等功能。二、技术栈前端框架：uni-app(Vue3+TS)状态管理：
Bootstrap 折叠 froginwe11 开发语言
Bootstrap折叠引言Bootstrap是一个广受欢迎的前端框架，它提供了丰富的组件和插件，使得网页设计和开发变得更加快速和简单。其中，折叠（Collapse）是Bootstrap中一个非常有用的组件，它允许开发者创建可折叠的内容区域，这些内容区域可以在用户与之交互时展开或收起。在本文中，我们将深入探讨Bootstrap折叠组件的工作原理、使用方法以及一些实用的应用场景。折叠组件的工作原理Bo
React 和 Vue 项目中集成基于 Svelte 的 `Bytemd` 库 || @bytemd/react` 底层实现原理 GISer_Jinger 中大厂面试项目 vue.js react.js 前端
Bytemd并使用Svelte框架编写的。Svelte是一种不同的前端框架，它的核心思想是在编译时将组件代码转换成高效、原生JavaScript，从而避免运行时虚拟DOM的开销。理解了这一点，我们就可以深入探讨如何在React和Vue项目中适配Svelte编写的Bytemd组件。关于如何在React和Vue项目中集成基于Svelte的Bytemd库关于如何在React和Vue项目中集成基于Svel
Python爬虫实战：动态渲染页面爬取（Selenium技术详解与应用） Python爬虫项目 python 爬虫 selenium 数据挖掘开发语言人工智能测试工具
1.引言：为什么要用Selenium爬取动态渲染页面随着互联网技术的发展，许多网站采用了前端框架（如React、Vue、Angular）进行页面渲染，页面内容往往不是直接在HTML响应中返回，而是通过JavaScript在浏览器端异步请求数据后动态生成。这种机制大大增加了传统爬虫爬取难度。传统的基于requests和BeautifulSoup的爬虫无法直接获取动态渲染后的完整内容，而Seleniu
虚拟 DOM 与 Diff 算法：现代前端框架的核心机制步行cgn Vue 前端框架
虚拟DOM与Diff算法：现代前端框架的核心机制虚拟DOM(VirtualDOM)和Diff算法是现代前端框架（如Vue、React）的核心技术，它们共同解决了直接操作DOM性能低下的问题。虚拟DOM(VirtualDOM)什么是虚拟DOM？轻量级JavaScript对象：用JS对象模拟真实DOM结构内存中的抽象表示：不直接操作浏览器DOM，而是操作内存中的虚拟表示框架中间层：位于应用状态和真实D
Tomcat 与 Java 前端框架的集成实践 Java技术栈实战 java tomcat 前端框架 ai
Tomcat与Java前端框架的集成实践关键词：Tomcat、JavaWeb服务器、前端框架（Vue/React）、前后端集成、静态资源部署、跨域处理、WAR包发布摘要：本文以“Tomcat与Java前端框架集成”为核心，结合实际开发场景，用通俗易懂的语言讲解Tomcat的作用、前端框架（如Vue）的部署方式，以及如何通过“静态资源托管”“WAR包集成”“反向代理”三种模式实现前后端协作。通过实战
Vue中的消息订阅与发布 layman0528 vue.js vue.js javascript 前端
Vue中的消息订阅与发布模式：从Vue2到Vue3的演进在现代前端框架中，组件间通信是构建复杂应用的基础。消息订阅与发布模式（Publish-SubscribePattern）作为一种松耦合的通信机制，在Vue项目中被广泛应用。本文将深入探讨Vue2和Vue3中实现该模式的核心原理、实践方法及最佳实践，并通过实例展示其应用场景。消息订阅与发布模式概述核心概念消息订阅与发布模式是一种设计模式，它定义
React从基础入门到高级实战：React 核心技术 - 动画与过渡效果：提升 UI 交互体验 EndingCoder React react.js ui 交互前端前端框架 javascript
React动画与过渡效果：提升UI交互体验在现代Web开发中，动画和过渡效果不仅仅是视觉上的点缀，它们在提升用户体验、引导用户注意力以及增强交互性方面扮演着重要角色。作为一款广受欢迎的前端框架，React提供了多种实现动画的方式，从简单的CSS类名切换到功能强大的动画库如ReactTransitionGroup和FramerMotion。本文将深入探讨这些技术，帮助开发者为React应用添加流畅、
DvaJS学习（dva = React-Router + Redux + Redux-saga） Free Joe React
我们来介绍一下，dva出自于暴雪出品的一款游戏《守望先锋》，援引官方的角色介绍：D.Va拥有一部强大的机甲，它具有两台全自动的近距离聚变机炮、可以使机甲飞跃敌人或障碍物的推进器、还有可以抵御来自正面的远程攻击的防御矩阵。然后呢，蚂蚁金服的一位架构师sorrycc很迷这位美女，正巧刚开发了一款前端框架没有名字，作为一个向女神献礼的项目，dva框架就此诞生。我们先看看React没有解决的问题React
【React】Dva.js上手入门教程全栈前端老曹 react javascript react.js 前端 dva dva.js umi antd-pro
Dva.js上手入门教程（基于React）一、Dva.js简介Dva.js是一个基于React和Redux的轻量级前端框架，封装了Redux、Redux-saga和React-router，简化了状态管理和数据流的处理。它通过约定优于配置的方式，让开发者可以更专注于业务逻辑的实现。二、安装与初始化项目1.安装Node.js和npm确保你的开发环境已经安装了Node.js（建议使用LTS版本）和np
part4-m6 zsnpromsie react.js node.js javascript
本阶段将带你学习前端圈子中口碑极佳的React框架以及它的一些高阶用法、组件库封装、数据流方案、服务端渲染（SSR）、静态站点生成（SSG），同时深入React框架内部，剖析React部分核心源码和实现，最后还会结合TypeScript和蚂蚁金服的AntDesign库做出实战。模块六Angular企业实战开发本模块中通过企业实战带你领略最具规模的前端框架Angular，包括：NG数据绑定及实现原理
外包前端重生之，莫欺少年穷旧曲重听1 状态模式前端后端
我永远记得2020年立冬那天（转载自：VeryCool），公司CTO指着消防通道旁的折叠桌说："这是你们前端的新工位。"六台显示器挤在不到四米的狭长空间里，测试机的电源线垂下来，像一串羞辱的省略号。【生如蝼蚁】"让外包改个前端框架都磨蹭三天，这种垃圾就该滚回培训机构！""这个交互效果让前端自己折腾去，我们后端重点要保证分布式事务的一致性。""听说你们搞了个花哨的数据看板？这些花架子东西最费电了。"
Three.js引擎开发：Three.js渲染技术_（17）.Three.js与其他前端框架的集成 chenlz2007 虚拟现实游戏2 javascript 前端框架开发语言 ecmascript 贴图交互前端
Three.js与其他前端框架的集成在现代Web开发中，前端框架（如React、Vue、Angular等）已成为构建复杂和高性能Web应用的标配。这些框架提供了丰富的组件化、状态管理、路由等功能，使得开发过程更加高效和模块化。然而，对于虚拟现实游戏开发来说，仅仅依靠前端框架是不够的，还需要结合3D渲染引擎来实现复杂的3D效果。Three.js作为一个强大的3D渲染引擎，可以与这些前端框架无缝集成，
Vue-10-前端框架Vue之应用基础标签的ref属性和TS中的接口泛型自定义类型皮皮冰燃 Vue 前端框架 vue.js 前端
文章目录1html标签1.1App.vue1.1.1App.vue(vue2语法)1.1.2App.vue(vue3语法)1.2Person.vue1.3问题复现(App.vue)1.4解决方案(ref属性)1.4.1App.vue1.4.2Person.vue2组件标签2.1App.vue2.2Person.vue3TypeScript语法3.1接口3.1.1types/index.ts3.1.
Vue-11-前端框架Vue之应用基础父组件传值到子组件props的使用皮皮冰燃 Vue 前端框架 vue.js javascript
文章目录1父组件传值到子组件1.1App.vue(父组件)1.2Person.vue(子组件)2传值且保存2.1App.vue2.2Person.vue2.2.1原始写法2.2.2美观写法3列表传成数值(误传)3.1App.vue3.2Person.vue3.3限制类型(Person.vue)3.4限制必要性3.4.1App.vue3.4.2person.vue3.5限制默认值3.5.1App.v
《Vue.js前端框架技术学习心得》 dingjiGGbao 前端框架 vue.js 前端
一.初遇Vue.js二.数据绑定的便捷性三.组件化思维的养成四.生命周期钩子函数的理解五.指令系统的强大功能六.响应式原理的深入理解七.以下是我平时写的一些代码截图八.学习方法与实践的重要性在本次Vue.js的课程学习中，我收获了许多宝贵的知识和技能，每一个知识点都像是打开了一扇通往前端开发新世界的大门。一.初遇Vue.js最初接触Vue.js时，其简洁直观的语法立刻吸引了我。与传统的JavaSc
使用基于 TypeScript 的 Next.js 模板进行项目引导 fydw_715 Dify javascript typescript 前端
1.Next.js简介1.1什么是Next.jsNext.js是一个基于React的用于构建服务端渲染（SSR）和静态网站生成（SSG）的前端框架。它提供了一系列开箱即用的功能，包括：文件系统路由：基于pages目录的文件结构自动生成路由。服务端渲染（SSR）：在服务器端渲染页面，提高首屏加载速度和SEO优化。静态网站生成（SSG）：预渲染页面，生成静态HTML文件，提升性能。API路由：在pag
SSR同构渲染深度解析一个专注写代码的程序媛 ssr javascript 前端开发语言
同构渲染（IsomorphicRendering）是SSR（服务器端渲染）的核心概念，指同一套代码既能在服务器端运行，也能在客户端运行。下面我将从原理到实践全面介绍SSR同构渲染。一、同构渲染核心原理1.基本工作流程1.用户请求2.服务器执行React/Vue渲染3.返回完整HTML4.浏览器加载JS5.JS“接管”页面（Hydration）6.后续交互由前端框架处理2.关键机制对比机制服务器端客
推荐开源项目：Vue-Layui - 基于Vue.js和Layui的前端框架
推荐开源项目：Vue-Layui-基于Vue.js和Layui的前端框架项目地址:https://gitcode.com/gh_mirrors/vu/vue-layui项目简介是一个将流行的JavaScript组件库Layui与现代前端框架Vue.js结合的项目。它旨在为开发者提供一种在Vue应用中轻松集成和使用Layui组件的方法，使得开发人员可以在享受Vue的灵活性和强大的功能的同时，利用La
Web前端基础之HTML
一、浏览器火狐浏览器、谷歌浏览器(推荐)、IE浏览器推荐谷歌浏览器原因：1、简洁大方,打开速度快2、开发者调试工具（右键空白处->检查，打开调试模式）二、开发工具核心IDE工具VisualStudioCode(VSCode)‌微软开发的免费跨平台编辑器，支持智能提示、Git集成、调试功能及丰富的扩展插件‌。轻量高效，适用于HTML/CSS/JavaScript及主流前端框架开发‌。WebStorm
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)