weixin_30569153
weixin_30569153

组织架构树的实现，前端和后端处理逻辑

渲染结果

组织架构树的实现，前端和后端处理逻辑_第1张图片

 

组织架构树的实现，前端和后端处理逻辑_第2张图片

第一种情况：后台处理了数据，前台只需要展示（后台返还的结果就是一个数组树）

组织架构树的实现，前端和后端处理逻辑_第3张图片

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>组织架构title>
  <link rel="stylesheet" href="./lib/jquery.jOrgChart.css">
  <script src="./lib/jquery.js">script>
  <script src="./lib/jquery.jOrgChart.js">script>
  <script src="./lib/jquery-ui.min.js">script>
  <style>
    a {
      text-decoration: none;
      color: #fff;
      font-size: 12px;
    }

    .jOrgChart .node {
      width: 120px;
      height: 50px;
      line-height: 50px;
      border-radius: 4px;
      margin: 0 8px;
    }
  style>
head>

<body>
  
  <div id='jOrgChart'>div>

  <script type='text/javascript'>
    $(function () {
      /**
       * 数据返回
       * 测试数据源
       * json-server .\data02.json --port 3003
       */
      $.ajax({
        url: "http://localhost:3003/data",
        type: 'GET',
        dataType: 'JSON',
        data: {
          action: 'org_select'
        },
        success: function (result) {
          console.log(result)
          var showlist = $("");

          showall(result, showlist);
          $("#jOrgChart").append(showlist);

          $("#org").jOrgChart({
            chartElement: '#jOrgChart', //指定在某个dom生成jorgchart
            dragAndDrop: false //设置是否可拖动
          });

          function showall(result, parent) {
            $.each(result, function (index, val) {
              if (val.childrens.length > 0) {
                var li = $("
  • ");
                li.append("" + val.id + ");>" + val.name +
                  "").append(
                  "
      ").appendTo(parent);
                //递归显示
                showall(val.childrens, $(li).children().eq(1));
              } else {
                $("
    • ").append("" + val.id + ");>" +
                  val.name +
                  "").appendTo(parent);
              }
            });
          }

          function getOrgId(val) {
            console.log(val);
          }
        }
      });
    });
  script>
body>

html>

       

      第二种情况：后台以单个对象的形式返还全部的数据，需要前端根据关系进行处理

      后台返还的数据

      组织架构树的实现，前端和后端处理逻辑_第4张图片

      经过前台处理后的数据

      组织架构树的实现，前端和后端处理逻辑_第5张图片

      代码如下

      DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <link rel="stylesheet" href="./lib/jquery.jOrgChart.css">
  <script src="./lib/jquery.js">script>
  <script src="./lib/jquery.jOrgChart.js">script>
  <script src="./lib/jquery-ui.min.js">script>
  <style>
    a {
      text-decoration: none;
      color: #fff;
      font-size: 12px;
    }

    .jOrgChart .node {
      width: 100px;
      height: 50px;
      line-height: 50px;
      border-radius: 4px;
      margin: 0 8px;
    }

    #jOrgChart {
      width: 600px;
      height: 600px;
      overflow-x: scroll;
    }

    /* 浏览器滚动条样式 */
    ::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }

    ::-webkit-scrollbar-track {
      background: rgb(255, 255, 255);
      border-radius: 8px;
    }

    ::-webkit-scrollbar-thumb {
      background: rgb(201, 201, 202);
      border-radius: 8px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: rgb(162, 162, 163);
    }
  style>
head>

<body>
  
  <div id='jOrgChart'>div>

  <script>
    $(function () {
      /**
       * 数据返回 
       * 默认端口3000
       * 端口被我修改成了3002
       * json-server .\data01.json --port 3002
       * **/
      $.ajax({
        url: "http://localhost:3002/children",
        type: 'GET',
        dataType: 'JSON',
        data: {
          action: 'org_select'
        },
        success: function (_data) {
          console.log(_data)
          var node = {
            id: _data[0].fatherId,
            pid: _data[0].sonId,
            name: _data[0].name,
            childrens: []
          };
          getAreaTree(_data, node);

          function getAreaTree(data, pnode) {
            var _Name = [];
            var temp = {
              id: "",
              pid: "",
              name: "",
              childrens: []
            };
            for (var i = 0; i < data.length; i++) {
              if (data[i].sonId == 0 && pnode.id == 0) {
                temp = {};
                if (_Name.indexOf(data[i].name) >= 0) {
                  continue;
                }
                _Name.push(data[i].name);
                temp = {
                  id: data[i].fatherId,
                  pid: data[i].sonId,
                  name: data[i].name,
                  childrens: []
                };
                pnode.childrens.push(temp);
                getAreaTree(data, pnode.childrens[pnode.childrens.length - 1]);
              } else if (data[i].sonId == pnode.id) {
                temp = {
                  id: data[i].fatherId,
                  pid: data[i].sonId,
                  name: data[i].name,
                  childrens: []
                };
                pnode.childrens.push(temp);
                getAreaTree(data, pnode.childrens[pnode.childrens.length - 1]);
              }
            }
          }
          console.log(node)
          // 把对象转成数组(为了length)
          function objToArr(node) {
            var nodeArr = []
            nodeArr.push(node)
            return nodeArr
          }
          var dd = objToArr(node)
          console.log(objToArr(node))

          // 渲染组织结构
          var showlist = $("");
          showall(dd, showlist);
          $("#jOrgChart").append(showlist);
          $("#org").jOrgChart({
            //指定在某个dom生成jorgchart
            chartElement: '#jOrgChart',
            //设置是否可拖动
            dragAndDrop: false
          });

          function showall(dd, parent) {
            $.each(dd, function (index, val) {
              console.log(val)
              if (val.childrens.length > 0) {

                var li = $("
    • ");
                li.append("" + val.id + ");>" + val.name +
                  "").append(
                  "
        ").appendTo(parent);
                //递归显示
                showall(val.childrens, $(li).children().eq(1));
              } else {
                $("
      • ").append("" + val.id + ");>" +
                  val.name +
                  "").appendTo(parent);
              }
            });
          }
        }
      });
    })
  script>
body>
html>

         

        后端处理结果的逻辑

         第一种方式：

         [WebMethod]
        public string getTree()
        {
            string msg = "";
            try
            {
                string sql = "select * from tb_customer";
                DataTable dt = SqlHelper.ExecuteDataTable(sql);
                IList list = null;
                if (dt.Rows.Count > 0)
                {
                    list = Table2List(dt);
                }
                Tree tree = new Tree()
                {
                    id = list[0].fatherId,
                    pid = list[0].sonId,
                    text = list[0].name,
                    children=new List()
                };
                string name = "";
               tree= GetTree(list, tree, name);
               msg = JsonConvert.SerializeObject(tree);
            }
            catch (Exception ex)
            {
                msg = ex.Message;
            }
            return msg;
        }
        public Tree GetTree(IList list ,Tree pnode,string _name) 
        {
            Tree temp = new Tree();
            foreach (Area model in list) 
            {
                if (model.sonId == 0 && pnode.id == 0) 
                {
                    if (_name==model.name)
                       {
                           continue;
                       }
                    temp = new Tree()
                     {
                         id = model.fatherId,
                         pid = model.sonId,
                         text = model.name,
                         children = new List()
                     };
                    _name =model.name;
                     pnode.children.Add(temp);
                     GetTree(list, pnode.children[pnode.children.Count - 1], _name);
                }
                else if (model.sonId == pnode.id) 
                {
 
 
                      temp = new Tree()
                     {
                         id = model.fatherId,
                         pid = model.sonId,
                         text = model.name,
                         children = new List()
                     };
                   pnode.children.Add(temp);
                   GetTree(list, pnode.children[pnode.children.Count - 1], _name);
                }
            }
            return pnode;
        }
        public static IList Table2List(DataTable dt)
        {
            IList ts = new List();// 定义集合
            Type type = typeof(Area); // 获得此模型的类型
            string tempName = "";
            foreach (DataRow dr in dt.Rows)
            {
                Area t = new Area();
                PropertyInfo[] propertys = t.GetType().GetProperties();// 获得此模型的公共属性
                foreach (PropertyInfo pi in propertys)
                {
                    tempName = pi.Name;
                    if (dt.Columns.Contains(tempName))
                    {
                        if (!pi.CanWrite) continue;
                        object value = dr[tempName];
                        if (value != DBNull.Value)
                            pi.SetValue(t, value, null);
                    }
                }
                ts.Add(t);
            }
            return ts;
        }
        "code" class="csharp">    
    public class Tree
    {
        public int id { get;set;}
 
        public int pid { get;set;}
 
        public string text { get;set;}
 
        public List children { get;set;}
 
    }

         

        第二种方式：利用了公司内部封装的一些方法

         

        using SmartA8.Common.Attributes;
using SmartA8.Entities.A8SystemEntities;
using System;
using System.Linq;
using System.Web.Script.Serialization;
using System.Collections.Generic;
using SmartA8.Models.Builders;

namespace SmartA8.Models
{
    [ModelCast(ClassName = "customer")]
    public class CustomerFirstModel
    {
        private IDAL.IA8SystemDAO A8SystemDAO = DALFactory.DataAccess.CreateA8SystemDAO();

        [ModelCast(PropertyName = "CustomerId")]
        public int CustomerId { get; set; }

        [ModelCast(PropertyName = "CompanyName")]
        public string CompanyName { get; set; }

        [ModelCast(PropertyName = "ParentCustomerId")]
        public int  ParentCustomerId { get; set; }

        [ModelCast(PropertyName = "IsUsing")]
        public bool IsUsing { get; set; }

        public List Childrens
        {
            get {
                List ccCustomer = A8SystemDAO.FindAll(g => g.ParentCustomerId == CustomerId).ToList();
                return  BaseBuilder.Cast(ccCustomer);
            }
        }
    }
}
         #region
        //组织架构
        public OperateResult GetGeneratorSetOrganList(string username, SearchGeneratorSetOrganModel model = null)
        {
            UserProfile user = A8SystemDAO.FindAll(u => u.UserName == username).FirstOrDefault();
            int customerId = user.CustomerNo;
            if (model != null && model.CustomerId != 0) customerId = model.CustomerId;
            Customer FirstCustomer = A8SystemDAO.FindAll(g => g.CustomerId == customerId).FirstOrDefault();
            CustomerFirstModel CustomerModel = BaseBuilder.Cast(FirstCustomer);
            return OperateResult.Success("", CustomerModel);
        }
 #endregion

         

        转载于:https://www.cnblogs.com/m1754171640/p/10844982.html

        你可能感兴趣的:(前端,后端,javascript,ViewUI)

        • Long类型前后端数据不一致 igotyback 前端
          响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
        • 使用 FinalShell 进行远程连接（ssh 远程连接 Linux 服务器） 编程经验分享 开发工具服务器sshlinux
          目录前言基本使用教程新建远程连接连接主机自定义命令路由追踪前言后端开发，必然需要和服务器打交道，部署应用，排查问题，查看运行日志等等。一般服务器都是集中部署在机房中，也有一些直接是云服务器，总而言之，程序员不可能直接和服务器直接操作，一般都是通过ssh连接来登录服务器。刚接触远程连接时，使用的是XSHELL来远程连接服务器，连接上就能够操作远程服务器了，但是仅用XSHELL并没有上传下载文件的功能
        • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
          ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
        • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
          加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
        • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
          ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
        • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
          Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
        • node.js学习 小猿L node.jsnode.js学习vim
          node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
        • Low Power概念介绍-Voltage Area 飞奔的大虎
          随着智能手机，以及物联网的普及，芯片功耗的问题最近几年得到了越来越多的重视。为了实现集成电路的低功耗设计目标，我们需要在系统设计阶段就采用低功耗设计的方案。而且，随着设计流程的逐步推进，到了芯片后端设计阶段，降低芯片功耗的方法已经很少了，节省的功耗百分比也不断下降。芯片的功耗主要由静态功耗（staticleakagepower）和动态功耗(dynamicpower)构成。静态功耗主要是指电路处于等
        • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
          这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
        • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
          在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
        • uniapp map组件自定义markers标记点 以对_ uni-app学习记录uni-appjavascript前端
          需求是根据后端返回数据在地图上显示标记点，并且根据数据状态控制标记点颜色，标记点背景通过两张图片实现控制{{item.options.labelName}}exportdefault{data(){return{storeIndex:0,locaInfo:{longitude:120.445172,latitude:36.111387},markers:[//标点列表{id:1,//标记点idin
        • 笋丁网页自动回复机器人V3.0.0免授权版源码 希希分享 软希网58soho_cn源码资源笋丁网页自动回复机器人
          笋丁网页机器人一款可设置自动回复，默认消息，调用自定义api接口的网页机器人。此程序后端语言使用Golang，内存占用最高不超过30MB，1H1G服务器流畅运行。仅支持Linux服务器部署，不支持虚拟主机，请悉知！使用自定义api功能需要有一定的建站基础。源码下载：https://download.csdn.net/download/m0_66047725/89754250更多资源下载：关注我。安
        • 博客网站制作教程 2401_85194651 javamaven
          首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
        • 深入浅出 -- 系统架构之负载均衡Nginx的性能优化 xiaoli8748_软件开发 系统架构系统架构负载均衡nginx
          一、Nginx性能优化到这里文章的篇幅较长了，最后再来聊一下关于Nginx的性能优化，主要就简单说说收益最高的几个优化项，在这块就不再展开叙述了，毕竟影响性能都有多方面原因导致的，比如网络、服务器硬件、操作系统、后端服务、程序自身、数据库服务等，对于性能调优比较感兴趣的可以参考之前《JVM性能调优》中的调优思想。优化一：打开长连接配置通常Nginx作为代理服务，负责分发客户端的请求，那么建议开启H
        • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
          在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
        • 计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署） java毕设程序源码王哥 php课程设计vue.js
          该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
        • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
          最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
        • 补充元象二面 Redstone Monstrosity 前端面试
          1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
        • 微信小程序开发注意事项 jun778895 微信小程序小程序
          微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
        • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
          切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
        • 字节二面 Redstone Monstrosity 前端面试
          1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
        • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
          点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
        • VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。 焚木灵 node.jsvue
          可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
        • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
          第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
        • 高性能javascript--算法和流程控制 海淀萌狗
          -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
        • 360前端星计划-动画可以这么玩 马小蜗
          动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
        • Vue + Express实现一个表单提交 九旬大爷的梦
          最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
        • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
          我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
        • Nginx从入门到实践(三) 听你讲故事啊
          动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
        • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
          Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
        • java封装继承多态等 麦田的设计者 javaeclipsejvmcencapsulatopn
                 最近一段时间看了很多的视频却忘记总结了，现在只能想到什么写什么了，希望能起到一个回忆巩固的作用。     1、final关键字       译为：最终的        &
        • F5与集群的区别 bijian1013 weblogic集群F5
                  http请求配置不是通过集群，而是F5；集群是weblogic容器的，如果是ejb接口是通过集群。         F5同集群的差别，主要还是会话复制的问题，F5一把是分发http请求用的，因为http都是无状态的服务，无需关注会话问题，类似
        • LeetCode[Math] - #7 Reverse Integer Cwind java题解MathLeetCodeAlgorithm
          原题链接：#7 Reverse Integer   要求： 按位反转输入的数字 例1： 输入 x = 123, 返回 321 例2： 输入 x = -123, 返回 -321   难度：简单   分析： 对于一般情况，首先保存输入数字的符号，然后每次取输入的末位（x%10）作为输出的高位（result = result*10 + x%10）即可。但
        • BufferedOutputStream 周凡杨
               首先说一下这个大批量，是指有上千万的数据量。      例子：      有一张短信历史表，其数据有上千万条数据，要进行数据备份到文本文件，就是执行如下SQL然后将结果集写入到文件中！      select t.msisd
        • linux下模拟按键输入和鼠标 被触发 linux
          查看/dev/input/eventX是什么类型的事件， cat /proc/bus/input/devices 设备有着自己特殊的按键键码，我需要将一些标准的按键，比如0－9，X－Z等模拟成标准按键，比如KEY_0,KEY-Z等，所以需要用到按键 模拟，具体方法就是操作/dev/input/event1文件，向它写入个input_event结构体就可以模拟按键的输入了。 linux/in
        • ContentProvider初体验 肆无忌惮_ ContentProvider
          ContentProvider在安卓开发中非常重要。与Activity，Service，BroadcastReceiver并称安卓组件四大天王。 在android中的作用是用来对外共享数据。因为安卓程序的数据库文件存放在data/data/packagename里面，这里面的文件默认都是私有的，别的程序无法访问。 如果QQ游戏想访问手机QQ的帐号信息一键登录，那么就需要使用内容提供者COnte
        • 关于Spring MVC项目（maven）中通过fileupload上传文件 843977358 mybatisspring mvc修改头像上传文件upload
          Spring MVC 中通过fileupload上传文件，其中项目使用maven管理。   1.上传文件首先需要的是导入相关支持jar包：commons-fileupload.jar,commons-io.jar 因为我是用的maven管理项目，所以要在pom文件中配置（每个人的jar包位置根据实际情况定） <!-- 文件上传 start by zhangyd-c --&g
        • 使用svnkit api，纯java操作svn，实现svn提交，更新等操作 aigo svnkit
           原文：http://blog.csdn.net/hardwin/article/details/7963318   import java.io.File; import org.apache.log4j.Logger; import org.tmatesoft.svn.core.SVNCommitInfo; import org.tmateso
        • 对比浏览器，casperjs，httpclient的Header信息 alleni123 爬虫crawlerheader
          @Override protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException { String type=req.getParameter("type"); Enumeration es=re
        • java.io操作 DataInputStream和DataOutputStream基本数据流 百合不是茶 java流
          1，java中如果不保存整个对象，只保存类中的属性，那么我们可以使用本篇文章中的方法，如果要保存整个对象  先将类实例化  后面的文章将详细写到     2，DataInputStream 是java.io包中一个数据输入流允许应用程序以与机器无关方式从底层输入流中读取基本 Java 数据类型。应用程序可以使用数据输出流写入稍后由数据输入流读取的数据。
        • 车辆保险理赔案例 bijian1013 车险
          理赔案例： 一货运车，运输公司为车辆购买了机动车商业险和交强险，也买了安全生产责任险，运输一车烟花爆竹，在行驶途中发生爆炸，出现车毁、货损、司机亡、炸死一路人、炸毁一间民宅等惨剧，针对这几种情况，该如何赔付。 赔付建议和方案： 客户所买交强险在这里不起作用，因为交强险的赔付前提是：“机动车发生道路交通意外事故”； 如果是交通意外事故引发的爆炸，则优先适用交强险条款进行赔付，不足的部分由商业
        • 学习Spring必学的Java基础知识(5)—注解 bijian1013 javaspring
                  文章来源：http://www.iteye.com/topic/1123823，整理在我的博客有两个目的：一个是原文确实很不错，通俗易懂，督促自已将博主的这一系列关于Spring文章都学完；另一个原因是为免原文被博主删除，在此记录，方便以后查找阅读。           有必要对
        • 【Struts2一】Struts2 Hello World bit1129 Hello world
          Struts2 Hello World应用的基本步骤 创建Struts2的Hello World应用，包括如下几步： 1.配置web.xml 2.创建Action 3.创建struts.xml，配置Action 4.启动web server，通过浏览器访问   配置web.xml <?xml version="1.0" encoding="
        • 【Avro二】Avro RPC框架 bit1129 rpc
          1. Avro RPC简介 1.1. RPC RPC逻辑上分为二层，一是传输层，负责网络通信；二是协议层，将数据按照一定协议格式打包和解包 从序列化方式来看，Apache Thrift 和Google的Protocol Buffers和Avro应该是属于同一个级别的框架，都能跨语言，性能优秀，数据精简，但是Avro的动态模式（不用生成代码，而且性能很好）这个特点让人非常喜欢，比较适合R
        • lua　set get cookie ronin47 lua cookie
          lua: local access_token = ngx.var.cookie_SGAccessToken if access_token then ngx.header["Set-Cookie"] = "SGAccessToken="..access_token.."; path=/;Max-Age=3000" end
        • java-打印不大于N的质数 bylijinnan java
          public class PrimeNumber { /** * 寻找不大于N的质数 */ public static void main(String[] args) { int n=100; PrimeNumber pn=new PrimeNumber(); pn.printPrimeNumber(n); System.out.print
        • Spring源码学习-PropertyPlaceholderHelper bylijinnan javaspring
          今天在看Spring 3.0.0.RELEASE的源码，发现PropertyPlaceholderHelper的一个bug 当时觉得奇怪，上网一搜，果然是个bug，不过早就有人发现了，且已经修复： 详见： http://forum.spring.io/forum/spring-projects/container/88107-propertyplaceholderhelper-bug
        • [逻辑与拓扑]布尔逻辑与拓扑结构的结合会产生什么? comsci 拓扑
             如果我们已经在一个工作流的节点中嵌入了可以进行逻辑推理的代码,那么成百上千个这样的节点如果组成一个拓扑网络,而这个网络是可以自动遍历的,非线性的拓扑计算模型和节点内部的布尔逻辑处理的结合,会产生什么样的结果呢?    是否可以形成一种新的模糊语言识别和处理模型呢?  大家有兴趣可以试试,用软件搞这些有个好处,就是花钱比较少,就算不成
        • ITEYE 都换百度推广了 cuisuqiang GoogleAdSense百度推广广告外快
          以前ITEYE的广告都是谷歌的Google AdSense，现在都换成百度推广了。   为什么个人博客设置里面还是Google AdSense呢？   都知道Google AdSense不好申请，这在ITEYE上也不是讨论了一两天了，强烈建议ITEYE换掉Google AdSense。至少，用一个好申请的吧。   什么时候能从ITEYE上来点外快，哪怕少点
        • 新浪微博技术架构分析 dalan_123 新浪微博架构
          新浪微博在短短一年时间内从零发展到五千万用户，我们的基层架构也发展了几个版本。第一版就是是非常快的，我们可以非常快的实现我们的模块。我们看一下技术特点，微博这个产品从架构上来分析，它需要解决的是发表和订阅的问题。我们第一版采用的是推的消息模式，假如说我们一个明星用户他有10万个粉丝，那就是说用户发表一条微博的时候，我们把这个微博消息攒成10万份，这样就是很简单了，第一版的架构实际上就是这两行字。第
        • 玩转ARP攻击 dcj3sjt126com r
          我写这片文章只是想让你明白深刻理解某一协议的好处。高手免看。如果有人利用这片文章所做的一切事情，盖不负责。 网上关于ARP的资料已经很多了，就不用我都说了。 用某一位高手的话来说，“我们能做的事情很多，唯一受限制的是我们的创造力和想象力”。 ARP也是如此。 以下讨论的机子有 一个要攻击的机子：10.5.4.178 硬件地址：52:54:4C:98
        • PHP编码规范 dcj3sjt126com 编码规范
          一、文件格式 1. 对于只含有 php 代码的文件，我们将在文件结尾处忽略掉 "?>" 。这是为了防止多余的空格或者其它字符影响到代码。例如：<?php$foo = 'foo';2. 缩进应该能够反映出代码的逻辑结果，尽量使用四个空格，禁止使用制表符TAB，因为这样能够保证有跨客户端编程器软件的灵活性。例
        • linux 脱机管理（nohup） eksliang linux nohupnohup
          脱机管理 nohup 转载请出自出处：http://eksliang.iteye.com/blog/2166699 nohup可以让你在脱机或者注销系统后，还能够让工作继续进行。他的语法如下 nohup [命令与参数] --在终端机前台工作 nohup [命令与参数] & --在终端机后台工作   但是这个命令需要注意的是，nohup并不支持bash的内置命令，所
        • BusinessObjects Enterprise Java SDK greemranqq javaBOSAPCrystal Reports
          最近项目用到oracle_ADF  从SAP/BO 上调用 水晶报表，资料比较少，我做一个简单的分享，给和我一样的新手 提供更多的便利。   首先，我是尝试用JAVA JSP 去访问的。   官方API：http://devlibrary.businessobjects.com/BusinessObjectsxi/en/en/BOE_SDK/boesdk_ja
        • 系统负载剧变下的管控策略 iamzhongyong 高并发
          假如目前的系统有100台机器，能够支撑每天1亿的点击量（这个就简单比喻一下），然后系统流量剧变了要，我如何应对，系统有那些策略可以处理，这里总结了一下之前的一些做法。 1、水平扩展 这个最容易理解，加机器，这样的话对于系统刚刚开始的伸缩性设计要求比较高，能够非常灵活的添加机器，来应对流量的变化。 2、系统分组 假如系统服务的业务不同，有优先级高的，有优先级低的，那就让不同的业务调用提前分组
        • BitTorrent DHT 协议中文翻译 justjavac bit
          前言 做了一个磁力链接和BT种子的搜索引擎 {Magnet & Torrent}，因此把 DHT 协议重新看了一遍。 BEP: 5Title: DHT ProtocolVersion: 3dec52cb3ae103ce22358e3894b31cad47a6f22bLast-Modified: Tue Apr 2 16:51:45 2013 -070
        • Ubuntu下Java环境的搭建 macroli java工作ubuntu
          配置命令： 　　$sudo apt-get install ubuntu-restricted-extras 　　再运行如下命令： 　　$sudo apt-get install sun-java6-jdk 　　待安装完毕后选择默认Java. 　　$sudo update- alternatives --config java 　　安装过程提示选择，输入“2”即可，然后按回车键确定。
        • js字符串转日期（兼容IE所有版本） qiaolevip TODateStringIE
          /** * 字符串转时间（yyyy-MM-dd HH:mm:ss） * result （分钟） */ stringToDate : function(fDate){ var fullDate = fDate.split(" ")[0].split("-"); var fullTime = fDate.split("
        • 【数据挖掘学习】关联规则算法Apriori的学习与SQL简单实现购物篮分析 superlxw1234 sql数据挖掘关联规则
          关联规则挖掘用于寻找给定数据集中项之间的有趣的关联或相关关系。 关联规则揭示了数据项间的未知的依赖关系，根据所挖掘的关联关系，可以从一个数据对象的信息来推断另一个数据对象的信息。 例如购物篮分析。牛奶 ⇒ 面包 [支持度：3%，置信度：40%] 支持度3%：意味3%顾客同时购买牛奶和面包。 置信度40%：意味购买牛奶的顾客40%也购买面包。 规则的支持度和置信度是两个规则兴
        • Spring 5.0 的系统需求，期待你的反馈 wiselyman spring
                         Spring 5.0将在2016年发布。Spring5.0将支持JDK 9。          Spring 5.0的特性计划还在工作中，请保持关注，所以作者希望从使用者得到关于Spring 5.0系统需求方面的反馈。  
        按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他