vue 复杂的流程图实现--antv/g6

news2024/11/18 17:34:40

可以先看下对应的文档：G6 Demos - AntV

 npm install --save @antv/g6

实现如图：

<template>
  <div class="drawflow">
    <div id="mountNode"></div>
  </div>
</template>
<script>
import G6 from "@antv/g6";
export default {
  data() {
    return {
      registerEdgeLine: null,
      graph: null,
      registerEdgeNode: null,
    };
  },
  mounted() {
    this.init2();
    this.init();
  },
  methods: {
    init2() {},
    init() {
      const width = document.getElementById("mountNode").clientWidth;
      const spacing = width / 20;
      const anchorPoints = [
        [0.4, 0],
        [0.6, 0],
        [0.4, 1],
        [0.6, 1],
      ];
      //生产水线
      G6.registerEdge("line-production-arrow", {
        draw(cfg, group) {
          var startPoint = cfg.startPoint,
            endPoint = cfg.endPoint;
          var keyShape = group.addShape("path", {
            attrs: {
              path: [
                ["M", startPoint.x, startPoint.y],
                ["L", endPoint.x, startPoint.y],
                ["L", endPoint.x, endPoint.y],
              ],
              stroke: "#03b329",
              lineWidth: 1,
              startArrow: false,
              endArrow: true,
              className: "edge-shape",
            },
          });
          return keyShape;
        },
      });
      //循环水出水线
      G6.registerEdge("line-circulate-arrow", {
        draw(cfg, group) {
          var startPoint = cfg.startPoint,
            endPoint = cfg.endPoint;
          var keyShape = group.addShape("path", {
            attrs: {
              path: [
                ["M", startPoint.x, startPoint.y],
                ["L", startPoint.x, startPoint.y - 120],
                ["L", endPoint.x, endPoint.y - 120],
                ["L", endPoint.x, endPoint.y],
              ],
              stroke: "#FFC100",
              lineWidth: 1,
              startArrow: false,
              endArrow: true,
              className: "edge-shape",
            },
          });
          return keyShape;
        },
      });
      //循环水进水线
      G6.registerEdge("line-circulate-in-arrow", {
        draw(cfg, group) {
          var startPoint = cfg.startPoint,
            endPoint = cfg.endPoint;
          var keyShape = group.addShape("path", {
            attrs: {
              path: [
                ["M", startPoint.x, startPoint.y],
                ["L", startPoint.x, startPoint.y + 120],
                ["L", endPoint.x, endPoint.y + 120],
                ["L", endPoint.x, endPoint.y],
              ],
              stroke: "#FFC100",
              lineWidth: 1,
              startArrow: false,
              endArrow: true,
              className: "edge-shape",
            },
          });
          return keyShape;
        },
      });
      //脱盐水站出水线
      G6.registerEdge("line-desalination-arrow", {
        draw(cfg, group) {
          var startPoint = cfg.startPoint,
            endPoint = cfg.endPoint;
          var keyShape = group.addShape("path", {
            attrs: {
              path: [
                ["M", startPoint.x, startPoint.y],
                ["L", startPoint.x, startPoint.y - 40],
                ["L", endPoint.x, endPoint.y - 40],
                ["L", endPoint.x, endPoint.y],
              ],
              stroke: "#2BFF96",
              lineWidth: 1,
              startArrow: false,
              endArrow: true,
              className: "edge-shape",
            },
          });
          return keyShape;
        },
      });

      //污水站出水线
      G6.registerEdge("line-sewage-arrow", {
        draw(cfg, group) {
          var startPoint = cfg.startPoint,
            endPoint = cfg.endPoint;
          var keyShape = group.addShape("path", {
            attrs: {
              path: [
                ["M", startPoint.x, startPoint.y],
                ["L", startPoint.x, startPoint.y - 80],
                ["L", endPoint.x, endPoint.y - 80],
                ["L", endPoint.x, endPoint.y],
              ],
              stroke: "#8a63f5",
              lineWidth: 1,
              startArrow: false,
              endArrow: true,
              className: "edge-shape",
            },
          });
          return keyShape;
        },
      });
      //污水站进水线
      G6.registerEdge("line-sewage-in-arrow", {
        draw(cfg, group) {
          var startPoint = cfg.startPoint,
            endPoint = cfg.endPoint;
          var keyShape = group.addShape("path", {
            attrs: {
              path: [
                ["M", startPoint.x, startPoint.y],
                ["L", startPoint.x, startPoint.y + 80],
                ["L", endPoint.x, endPoint.y + 80],
                ["L", endPoint.x, endPoint.y],
              ],
              stroke: "#f37907",
              lineWidth: 1,
              startArrow: false,
              endArrow: true,
              className: "edge-shape",
            },
          });
          return keyShape;
        },
      });
      //消耗水线
      G6.registerEdge("line-consume-arrow", {
        draw(cfg, group) {
          var startPoint = cfg.startPoint,
            endPoint = cfg.endPoint;
          var keyShape = group.addShape("path", {
            attrs: {
              path: [
                ["M", startPoint.x, startPoint.y],
                ["L", startPoint.x, startPoint.y + 40],
                ["L", endPoint.x, endPoint.y],
              ],
              stroke: "#f30474",
              lineWidth: 1,
              startArrow: false,
              endArrow: true,
              className: "edge-shape",
            },
          });
          return keyShape;
        },
      });
      //外排污水水线
      G6.registerEdge("line-sewageConsume-arrow", {
        draw(cfg, group) {
          var startPoint = cfg.startPoint,
            endPoint = cfg.endPoint;
          var keyShape = group.addShape("path", {
            attrs: {
              path: [
                ["M", startPoint.x, startPoint.y],
                ["L", startPoint.x, startPoint.y + 80],
                ["L", endPoint.x, endPoint.y],
              ],
              stroke: "#f36f04",
              lineWidth: 1,
              startArrow: false,
              endArrow: true,
              className: "edge-shape",
            },
          });
          return keyShape;
        },
      });

      G6.registerNode(
        "rectNode",
        {
          drawShape(cfg, group) {
            var keyShape = group.addShape("rect", {
              attrs: {
                width: 35,
                height: 250,
                x: 0,
                y: 0,
                radius: 4,
                lineWidth: 1,
                stroke: "#409eff",
                fill: "#0158CF",
              },
            });
            group.addShape("text", {
              attrs: {
                y: cfg.top || 160,
                x: 12,
                text: cfg.text,
                fill: "#fff",
                lineHeight: 20,
              },
            });

            return keyShape;
          },
        },
        "rect"
      );
      G6.registerNode(
        "textNode",
        {
          drawShape(cfg, group) {
            var keyShape = group.addShape("rect", {
              attrs: {
                width: 50,
                height: 30,
                x: 0,
                y: 0,
                radius: 4,
                lineWidth: 1,
                stroke: "transparent",
                fill: "transparent",
              },
            });
            group.addShape("text", {
              attrs: {
                y: cfg.textY || 25,
                x: cfg.textX || 15,
                text: cfg.text,
                fill: cfg.color || "#03b329",
                lineHeight: 20,
              },
            });

            return keyShape;
          },
        },
        "rect"
      );
      let data = {
        nodes: [
          {
            id: "productionWater",
            x: (3 / 4) * spacing,
            y: 80,
            type: "textNode",
            text: "生产水",
            anchorPoints: [[0, 1]],
          },
          {
            id: "1",
            x: (1 / 2) * spacing,
            y: 150,
            type: "rectNode",
            text: "水\n循\n环\n系\n统",
            anchorPoints: anchorPoints,
          },
          {
            id: "2",
            x: 2 * spacing,
            y: 150,
            text: "脱\n盐\n水\n站",
            type: "rectNode",
            anchorPoints: anchorPoints,
          },
          {
            id: "3",
            x: 3 * spacing,
            y: 150,
            text: "冷\n凝\n鼓\n风",
            type: "rectNode",
            anchorPoints: anchorPoints,
          },
          {
            id: "4",
            x: 4 * spacing,
            y: 150,
            text: "脱\n硫\n单\n元",
            type: "rectNode",
            anchorPoints: anchorPoints,
          },
          {
            id: "5",
            x: 5 * spacing,
            y: 150,
            text: "硫\n铵\n单\n元",
            type: "rectNode",
            anchorPoints: anchorPoints,
          },
          {
            id: "6",
            x: 6 * spacing,
            y: 150,
            text: "粗\n苯\n蒸\n馏\n单\n元",
            type: "rectNode",
            anchorPoints: anchorPoints,
          },
          {
            id: "7",
            x: 7 * spacing,
            y: 150,
            text: "终\n冷\n洗\n苯\n单\n元",
            type: "rectNode",
            anchorPoints: anchorPoints,
          },
          {
            id: "8",
            x: 8 * spacing,
            y: 150,
            text: "制\n酸\n单\n元",
            type: "rectNode",
            anchorPoints: anchorPoints,
          },
          {
            id: "9",
            x: 9 * spacing,
            y: 150,
            text: "蒸\n氨\n单\n元",
            type: "rectNode",
            anchorPoints: anchorPoints,
          },
          {
            id: "10",
            x: 10 * spacing,
            y: 150,
            text: "油\n库\n单\n元",
            type: "rectNode",
            anchorPoints: anchorPoints,
          },
          {
            id: "11",
            x: 11 * spacing,
            y: 150,
            text: "汽\n化\n单\n元",
            type: "rectNode",
            anchorPoints: anchorPoints,
          },
          {
            id: "12",
            x: 12 * spacing,
            y: 150,
            text: "备\n煤\n系\n统\n焦\n处\n理\n系\n统",
            top: 200,
            type: "rectNode",
            anchorPoints: anchorPoints,
          },
          {
            id: "13",
            x: 13 * spacing,
            y: 150,
            text: "炼\n焦\n设\n施",
            type: "rectNode",
            anchorPoints: anchorPoints,
          },
          {
            id: "14",
            x: 14 * spacing,
            y: 150,
            text: "除\n尘\n设\n施",
            type: "rectNode",
            anchorPoints: [...anchorPoints, [0.8, 0], [0.8, 1]],
          },
          {
            id: "15",
            x: 15 * spacing,
            y: 150,
            text: "热\n力\n设\n施",
            type: "rectNode",
            anchorPoints: [...anchorPoints, [0.8, 0], [0.8, 1]],
          },
          {
            id: "16",
            x: 16 * spacing,
            y: 150,
            text: "干\n熄\n焦\n系\n统",
            type: "rectNode",
            anchorPoints: [...anchorPoints, [0.8, 0], [0.8, 1]],
          },
          {
            id: "17",
            x: 17 * spacing,
            y: 150,
            text: "汽\n轮\n发\n电\n站",
            type: "rectNode",
            anchorPoints: [...anchorPoints, [0.8, 0], [0.8, 1]],
          },
          {
            id: "18",
            x: 18.5 * spacing,
            y: 150,
            text: "污\n水\n处\n理\n站",
            type: "rectNode",
            anchorPoints: [
              [0.5, 0],
              [0.4, 1],
              [0.6, 1],
            ],
          },
          {
            id: "consumeWater",
            x: 19.5 * spacing,
            y: 410,
            type: "textNode",
            text: "耗水",
            textX: -45,
            color: "#f30474",
            anchorPoints: [[0, 1]],
          },
          {
            id: "sewageConsumeWater",
            x: 19.5 * spacing,
            y: 450,
            type: "textNode",
            text: "外排废水",
            textX: -45,
            textY: 20,
            color: "#f36f04",
            anchorPoints: [[0, 1]],
          },
        ],
        edges: [
          {
            source: "productionWater",
            target: "2",
            type: "line-production-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "3",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "4",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "5",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "6",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "7",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "8",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "9",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "10",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "11",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "12",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "13",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "14",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "15",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "16",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "17",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "17",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "17",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "16",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "15",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "14",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "13",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "12",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "11",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "10",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "9",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "8",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "7",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "6",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "5",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "4",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "3",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "2",
            target: "3",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "4",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "5",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "6",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "7",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "8",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "9",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "10",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "11",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "12",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "13",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "14",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "15",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "16",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "17",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "18",
            target: "17",
            type: "line-sewage-arrow",
            sourceAnchor: 0,
            targetAnchor: 4,
          },
          {
            source: "18",
            target: "16",
            type: "line-sewage-arrow",
            sourceAnchor: 0,
            targetAnchor: 4,
          },
          {
            source: "18",
            target: "15",
            type: "line-sewage-arrow",
            sourceAnchor: 0,
            targetAnchor: 4,
          },
          {
            source: "18",
            target: "14",
            type: "line-sewage-arrow",
            sourceAnchor: 0,
            targetAnchor: 4,
          },
          {
            source: "2",
            target: "18",
            type: "line-sewage-in-arrow",
            sourceAnchor: 3,
            targetAnchor: 1,
          },
          {
            source: "17",
            target: "18",
            type: "line-sewage-in-arrow",
            sourceAnchor: 5,
            targetAnchor: 1,
          },
          {
            source: "16",
            target: "18",
            type: "line-sewage-in-arrow",
            sourceAnchor: 5,
            targetAnchor: 1,
          },
          {
            source: "15",
            target: "18",
            type: "line-sewage-in-arrow",
            sourceAnchor: 5,
            targetAnchor: 1,
          },
          {
            source: "14",
            target: "18",
            type: "line-sewage-in-arrow",
            sourceAnchor: 5,
            targetAnchor: 1,
          },
          {
            source: "1",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "3",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "4",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "5",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "6",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "7",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "8",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "9",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "10",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "11",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "12",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "13",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "14",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "15",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "16",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "17",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
           {
            source: "18",
            target: "sewageConsumeWater",
            type: "line-sewageConsume-arrow",
            sourceAnchor: 2,
            targetAnchor: 0,
          },
        ],
      };

      this.graph = new G6.Graph({
        container: "mountNode",
        width: width,
        height: 620,
      });
      this.graph.data(data);
      this.graph.render();
    },
  },
};
</script>
<style lang="scss" scoped>
.drawflow {
  height: 100%;
  width: 100%;
  #mountNode {
    width: 100%;
    height: 100%;
  }
}
</style>

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1138508.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

FreeRTOS 互斥量 优先级反转（翻转）和优先级继承 详解

FreeRTOS 互斥量 优先级反转（翻转）和优先级继承 详解

目录 什么是互斥量&#xff1f; 什么是优先级反转&#xff08;翻转&#xff09;和优先级继承 互斥量相关 API 函数 优先级反转&#xff08;翻转&#xff09;示例 使用互斥量优化优先级反转&#xff08;翻转&#xff09;问题示例 什么是互斥量&#xff1f; 在多数情况下&a…
阅读更多...
Perl爬虫程序

Perl爬虫程序

以下是一个使用Perl爬虫程序&#xff0c;用于爬取图像。每行代码的中文解释如下&#xff1a; #!/usr/bin/perl ​ use strict; use warnings; use Mojo::UserAgent; use JSON; ​ # 创建一个Mojo::UserAgent实例 my $ua Mojo::UserAgent->new; ​ # 使用获取代理 my $prox…
阅读更多...
【机器学习可解释性】2.特征重要性排列

【机器学习可解释性】2.特征重要性排列

机器学习可解释性 1.模型洞察的价值2.特征重要性排列3.偏依赖图 &#xff08; partial dependence plots &#xff09;4.SHAP Value5.SHAP Value 高级使用 正文 前言 你的模型认为哪些特征最重要&#xff1f; 介绍 我们可能会对模型提出的最基本的问题之一是&#xff1a;哪…
阅读更多...
react的table合并行时，出现border-bottom重复问题

react的table合并行时，出现border-bottom重复问题

背景&#xff1a; 需求是呈现一个表格&#xff0c;根据操作人跟操作时间是否相同来进行合并行数据 数据结构&#xff1a; 经过跟后端的同事商量&#xff0c;需要在每一行数据中返回rowSpanNum的值&#xff0c;前端在column中根据值来判断是否满足合并行&#xff08;没有合并行…
阅读更多...
在Go项目中封装AES加解密客户端接口

在Go项目中封装AES加解密客户端接口

1.摘要 在一个中型以上的项目中, 我们一般会在项目工程中开辟一个pkg文件夹用来存放一些基础工具接口,比如:数据库、中间件、加解密算法、基础协议等等。在这篇文章中, 我主要分享一下在基于Go语言的项目中, 加解密算法中如何封装一个通用的加解密接口, 并以使用比较广泛的AES…
阅读更多...
day11力扣打卡

day11力扣打卡

打卡记录 避免洪水泛滥&#xff08;贪心 Map Set&#xff09; 链接 将晴天的日期全部记录到 set 中。 使用 unordered_map 来记录每个湖泊上一次下雨的日期。 当下雨时&#xff0c;湖泊已经水满了时&#xff0c;查询到上次下雨的日期。 通过这个日期在晴天记录中查找对应的…
阅读更多...
JS问题：项目中如何区分使用防抖或节流？

JS问题：项目中如何区分使用防抖或节流？

前端功能问题系列文章&#xff0c;点击上方合集↑ 序言 大家好&#xff0c;我是大澈&#xff01; 本文约2300字&#xff0c;整篇阅读大约需要6分钟。 本文主要内容分三部分&#xff0c;第一部分是需求分析&#xff0c;第二部分是实现步骤&#xff0c;第三部分是问题详解。 …
阅读更多...
Android 发布 15 周年了！Google 员工说出了这些年的美好回忆

Android 发布 15 周年了！Google 员工说出了这些年的美好回忆

原文链接&#xff1a;https://blog.google/products/android/android-15th-anniversary-googler-highlights/ 作者&#xff1a;Sameer Samat, GM and VP of Android Ecosystem 翻译者&#xff1a;张拭心 https://shixin.blog.csdn.net/ 自从带有 Android Market&#xff08;现在…
阅读更多...
MVC架构_Qt自己的MV架构

MVC架构_Qt自己的MV架构

文章目录 前言模型/视图编程1.先写模型2. 视图3. 委托 例子&#xff08;Qt代码&#xff09;例1 查询本机文件系统例2 标准模型项操作例3 自定义模型示例:军事武器模型例4 只读模型操作示例例5 选择模型操作例6 自 定 义委 托(在testSelectionModel上修改) 前言 在Qt中&#xf…
阅读更多...
Git（四）底层命令：git对象、树对象、提交对象

Git（四）底层命令：git对象、树对象、提交对象

目录 一、知识回顾1.1 Linux 基础命令1.2 .git 文件夹解析 二、git 对象&#xff08;数据对象&#xff09;2.1 hash-object 存储对象2.2 cat-file 查看对象 三、树对象3.1 ls-files 查看暂存区3.2 update-index 创建暂存区3.3 write-tree 生成树对象3.4 更新暂存区&#xff0c;…
阅读更多...
C/C++面试常见问题——const关键字的作用和用法

C/C++面试常见问题——const关键字的作用和用法

首先我们需要一下const关键字的定义&#xff0c;const名叫常量限定符&#xff0c;当const修饰变量时&#xff0c;就是在告诉编译器该变量只可访问不可修改&#xff0c;而编译器对于被const修饰的变量有一个优化&#xff0c;编译器不会专门为其开辟空间&#xff0c;而是将变量名…
阅读更多...
Liunx两台服务器实现相互SSH免密登录

Liunx两台服务器实现相互SSH免密登录

一、首先准备两台Linux虚拟机当作此次实验的两台服务器 服务器1&#xff1a;server IPV4&#xff1a;192.168.110.136 服务器2&#xff1a;client IPV4&#xff1a; 192.168.110.134 二、准备阶段 [rootserver ~]# systemctl disable firewalld #关…
阅读更多...
【MySQL索引与优化篇】InnoDB数据存储结构

【MySQL索引与优化篇】InnoDB数据存储结构

文章目录 1. 数据库的存储结构:页1.1 磁盘与内存交互基本单位:页1.2 页结构概述1.3 页的上层结构 2. 页的内部结构3. InnoDB行格式(或记录格式)3.1 Compact行格式3.2 Dynamic和Compressed行格式3.3 Redundant行格式 4. 区、段与碎片区4.1 为什么要有区&#xff1f;4.2 为什么要…
阅读更多...
Webpack简介及打包演示

Webpack简介及打包演示

Webpack 是一个静态模块打包工具&#xff0c;从入口构建依赖图&#xff0c;打包有关的模块&#xff0c;最后用于展示你的内容 静态模块&#xff1a;编写代码过程中的&#xff0c;html&#xff0c;css&#xff0c; js&#xff0c;图片等固定内容的文件 打包过程&#xff0c;注…
阅读更多...
【iOS安全】提取app对应的URLScheme

【iOS安全】提取app对应的URLScheme

获取app的URLScheme 在已越狱的iPhone上&#xff0c;使用Filza进入app列表目录&#xff1a; /private/var/containers/Bundle/Application/ 比如我要分析Microsoft Authenticator&#xff0c;明显对应的是这里面的“Authenticator”&#xff0c;那就在Filza中点击进入“Authen…
阅读更多...
网络协议--TFTP：简单文件传送协议

网络协议--TFTP：简单文件传送协议

15.1 引言 TFTP(Trivial File Transfer Protocol)即简单文件传送协议&#xff0c;最初打算用于引导无盘系统&#xff08;通常是工作站或X终端&#xff09;。和将在第27章介绍的使用TCP的文件传送协议&#xff08;FTP&#xff09;不同&#xff0c;为了保持简单和短小&#xff0…
阅读更多...
STM32中断，看着一篇就够了

STM32中断，看着一篇就够了

1&#xff0c;环境搭建&#xff1a; 硬件平台&#xff1a;STM32H750XBH6 开发环境&#xff1a;STM32CubeMX V6.8.1KEIL V5.28.0.0 STM32H750固件版本&#xff1a;package V1.11.0 仿真下载驱动&#xff1a;ST-Link 2&#xff0c;中断的定义 中断&#xff08;Interrupt&#xff…
阅读更多...
【考研数学】数学“背诵”手册 | 需要记忆且容易遗忘的知识点

【考研数学】数学“背诵”手册 | 需要记忆且容易遗忘的知识点

文章目录 引言一、高数常见泰勒展开 n n n 阶导数公式多元微分函数连续、可微、连续可偏导之间的关系多元函数极值无条件极值条件极值 三角函数的积分性质华里士公式&#xff08; “点火”公式 &#xff09;特殊性质 原函数与被积函数的奇偶性结论球坐标变换公式 二、写在最后 …
阅读更多...
centos中安装mysql5.7

centos中安装mysql5.7

建议第八步骤&#xff0c;和第九步骤对于生产者人员就不用配置了&#xff0c;风险大&#xff0c;我自己的也没有配置 1.首先切换到root用户下 2.更新密钥 rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022 3.安装mysql yum库 rpm -Uvh https://repo.mysql.com//…
阅读更多...
云计算模式的区域LIS系统源码，基于ASP.NET+JQuery、EasyUI+MVC技术架构开发

云计算模式的区域LIS系统源码，基于ASP.NET+JQuery、EasyUI+MVC技术架构开发

云计算模式的区域LIS系统源码 云LIS系统源码&#xff0c;自主版权 LIS系统是专为医院检验科的仪器设备能与计算机连接。可通过LIS系统向仪器发送指令&#xff0c;让仪器自动操作和接收仪器数据。并快速的将检验仪器中的数据导入到医生工作站中进行管理&#xff0c;且可将检验结…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023