一次偶然的机会,让我遇见了amis之排错总结(持续更新,因为还在学习)(中)

简介: 一次偶然的机会,让我遇见了amis之排错总结(持续更新,因为还在学习)

如何自定义页面的整体样式


做这个后台管理系统的demo,给领导看后,他直接pass了,原因就是颜色太暗。


所以我们可以改变这个框架的css变量。


/* 统一修改内置的css变量 */
:root {
      --Layout-aside-width: 220px;
      /* 全局背景颜色 */
      --body-bg: #f4f6f8;
      --fontFamilyBase: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
      --body-color: #595959;
      /* table背景颜色 */
      --background: #fff;
      --Table-borderColor: #f0f0f0;
      --Table-color: #595959;
      --Table-onHover-bg: #fafafa;
      --Table-onHover-borderColor: #f0f0f0;
      --Table-onHover-color: #595959;
      /* table表头 */
      --Table-thead-color:  #262626;
      /*筛选表单组件背景颜色 */
      --Table-searchableForm-backgroundColor: #fff;
      /* 表单提示文字颜色 */
      --Form-select-placeholderColor: #bfbfbf;
      --Form-input-placeholderColor: #bfbfbf;
      --Form-select-borderColor: #e0e0e0;
      --Form-input-borderColor: #e0e0e0;
      /* --Form-input-color: #000; */
      /* --Form-item-gap: 40px; */
      /* 定义表格标题栏操作项偏移的高度 */
      --table-title-operator-top: 14px;
      /* 加载时的背景图片 */
      --Spinner-bg: url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDY0IDY0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGcgaWQ9Iumhtemdoi0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0ibG9hZGluZyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC41MDAwMDAsIDAuNTAwMDAwKSI+CiAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIHN0cm9rZT0iIzk3OTc5NyIgZmlsbD0iI0Q4RDhEOCIgZmlsbC1ydWxlPSJub256ZXJvIiBvcGFjaXR5PSIwIiB4PSIwIiB5PSIwIiB3aWR0aD0iNjMiIGhlaWdodD0iNjMiPjwvcmVjdD4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hOWkh+S7vS02IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjk4MDAwMCwgMC43ODAwMDApIj4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJmcmFtZSIgc3Ryb2tlPSIjMjQ2OEYyIiBzdHJva2Utd2lkdGg9IjMuMiIgcG9pbnRzPSIyNy41MiA1LjEyIDQ5LjY5MDI1MDMgMTcuOTIgNDkuNjkwMjUwMyA0My41MiAyNy41MiA1Ni4zMiA1LjM0OTc0OTY2IDQzLjUyIDUuMzQ5NzQ5NjYgMTcuOTIiIHN0cm9rZS1kYXNoYXJyYXk9IjE2MCAxNjAiIHN0cm9rZS1kYXNob2Zmc2V0PSIxNjAiPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlIGlkPSJmcmFtZTEiIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNob2Zmc2V0IiBiZWdpbj0iLjQ1cztmcmFtZTIuZW5kIiBkdXI9Ii45cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIxNjAiIHRvPSItMTYwIiBmaWxsPSJmcmVlemUiICBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlIGlkPSJmcmFtZTIiIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNob2Zmc2V0IiBiZWdpbj0iZnJhbWUxLmVuZCIgZHVyPSIuOXMiIHR5cGU9InRyYW5zbGF0ZSIgZnJvbT0iMTYwIiB0bz0iMTYwIiBmaWxsPSJmcmVlemUiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOyAxIiAga2V5U3BsaW5lcz0iLjUgMCAuNSAxIi8+CiAgICAgICAgICAgICAgICA8L3BvbHlnb24+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGUxIiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGN4PSIyNy41MiIgY3k9IjQuOCIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlMW9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlMXR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDI2IiB0bz0iMCAwIiBmaWxsPSJmcmVlemUiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOyAxIiAga2V5U3BsaW5lcz0iLjUgMCAuNSAxIi8+CiAgICAgICAgICAgICAgICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0gaWQ9ImNpcmNsZTF0d28iIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgYmVnaW49ImNpcmNsZTFvbmUuZW5kICsgLjcycyIgZHVyPSIuNTRzIiB0eXBlPSJ0cmFuc2xhdGUiIGZyb209IjAgMCIgdG89IjAgMjYiIGZpbGw9ImZyZWV6ZSIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7IDEiICBrZXlTcGxpbmVzPSIuNSAwIC41IDEiLz4KICAgICAgICAgICAgICAgIDwvY2lyY2xlPgogICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iY2lyY2xlMiIgZmlsbD0iIzI0NjhGMiIgZmlsbC1ydWxlPSJub256ZXJvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MC4yNDAwMDAsIDE3LjI4MDAwMCkgcm90YXRlKC0xODAuMDAwMDAwKSB0cmFuc2xhdGUoLTUwLjI0MDAwMCwgLTE3LjI4MDAwMCkgIiBjeD0iNTAuMjQiIGN5PSIxNy4yOCIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlMm9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlMnR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSItMjIuNSAxMyIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUydHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGUyb25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSItMjIuNSAxMyIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGUzIiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwLjI0MDAwMCwgNDMuMjAwMDAwKSByb3RhdGUoOTAuMDAwMDAwKSB0cmFuc2xhdGUoLTUwLjI0MDAwMCwgLTQzLjIwMDAwMCkgIiBjeD0iNTAuMjQiIGN5PSI0My4yIiByPSI0LjgiPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUzb25lIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSIwcztjaXJjbGUzdHdvLmVuZCIgZHVyPSIuNTRzIiB0eXBlPSJ0cmFuc2xhdGUiIGZyb209Ii0yMi41IC0xMyIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUzdHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGUzb25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSItMjIuNSAtMTMiIGZpbGw9ImZyZWV6ZSIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7IDEiICBrZXlTcGxpbmVzPSIuNSAwIC41IDEiLz4KICAgICAgICAgICAgICAgIDwvY2lyY2xlPgogICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iY2lyY2xlNCIgZmlsbD0iIzI0NjhGMiIgZmlsbC1ydWxlPSJub256ZXJvIiBjeD0iMjcuNTIiIGN5PSI1Ni42NCIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlMW9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlMXR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIC0yNiIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUxdHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGUxb25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSIwIC0yNiIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGU1IiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuODAwMDAwLCA0My4yMDAwMDApIHJvdGF0ZSgtMTgwLjAwMDAwMCkgdHJhbnNsYXRlKC00LjgwMDAwMCwgLTQzLjIwMDAwMCkgIiBjeD0iNC44IiBjeT0iNDMuMiIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlNW9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlNXR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIyMi41IC0xMyIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGU1dHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGU1b25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSIyMi41IC0xMyIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGU2IiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuODAwMDAwLCAxNy4yODAwMDApIHJvdGF0ZSg5MC4wMDAwMDApIHRyYW5zbGF0ZSgtNC44MDAwMDAsIC0xNy4yODAwMDApICIgY3g9IjQuOCIgY3k9IjE3LjI4IiByPSI0LjgiPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGU2b25lIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSIwcztjaXJjbGU2dHdvLmVuZCIgZHVyPSIuNTRzIiB0eXBlPSJ0cmFuc2xhdGUiIGZyb209IjIyLjUgMTMiIHRvPSIwIDAiIGZpbGw9ImZyZWV6ZSIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7IDEiICBrZXlTcGxpbmVzPSIuNSAwIC41IDEiLz4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlNnR3byIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iY2lyY2xlNm9uZS5lbmQgKyAuNzJzIiBkdXI9Ii41NHMiIHR5cGU9InRyYW5zbGF0ZSIgZnJvbT0iMCAwIiB0bz0iMjIuNSAxMyIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==")
}


区分事件和动作


看官方文档中很多组件都可以设置事件,看的是一头雾水。不知道如何去操作。


比如下面的dialog组件中的事件和动作。


网络异常,图片无法展示
|


看完之后不知道怎么去操作。


其实事件就是写在每个组件的onEvent属性中的。


onEvent: {
 // 当鼠标移入时触发
  mouseenter: {
    // 配置动作表
    actions: [
      {
        actionType: "toast",
        args: {
          msg: "toast变量"
        }
      }
    ]
  },
  // 当鼠标移除时触发
  mouseleave: {
    // 配置动作表
    actions: [
      {
        actionType: "toast",
        args: {
          msg: "离开"
        }
      }
    ]
  }
}


而动作就是写在每个事件中的actions属性中的actionType。见上。


下面我们来看一个例子。其实他就是通过设置mouseenter, mouseleave, click事件然后配合toast, setValue来提示用户做了哪些操作,并且修改表单中的值。


{
  "type": "page",
  "body": {
    "type": "form",
    id: "form",
    data: {
      username: "zh"
    },
    "body": [
      {
        "type": "input-text",
        "name": "name",
        "label": "姓名:",
        value: "${username}"
      },
      {
        "label": "修改姓名",
        "name": "name",
        "type": "button",
        // "onClick": "props.formStore.setValues({name: 'amis', email: 'amis@baidu.com'});console.log('props', props)",
        onEvent: {
          mouseenter: {
            // 配置动作表
            actions: [
              {
                actionType: "toast",
                args: {
                  msg: "移入",
                }
              },
            ]
          },
          mouseleave: {
            // 配置动作表
            actions: [
              {
                actionType: "toast",
                args: {
                  msg: "离开"
                }
              }
            ]
          },
          click: {
            actions: [
              {
                actionType: "toast",
                args: {
                  msg: "点击了按钮,并且修改了username"
                }
              }, 
              {
                actionType: "setValue",
                // 这个一定需要写上哪个组件的id
                componentId: "form",
                args: {
                  value: {
                    username: "llm"
                  }
                }
              }
            ]
          }
        }
      }
    ]
  }
},


网络异常,图片无法展示
|


并不是所有的组件都可以监听click


目的:想要通过icon组件作为一个复制文本的图标,点击后可以复制文本。但是失败了。


{
    type: "page",
    data: {
      a: "复制的内容"
    },
    body: {
      type: "icon",
      icon: "fa fa-files-o",
      onClick: "console.log('copy.......')",
      "onEvent": {
        "click": {
          "actions": [
            {
              "actionType": "copy",
              "args": {
                "copyFormat": "text/html",
                "content": "${a}"
              }
            }
          ]
        }
      }
    }
},


点击页面的icon没有任何反应。


所以这时只能通过button(action)组件来解决。


{
    type: "page",
    data: {
      a: "复制的内容"
    },
    body: {
      // type: "icon",
      type: "action",
      label: "",
      icon: "fa fa-files-o",
      onClick: "console.log('copy.......')",
      "onEvent": {
        "click": {
          "actions": [
            {
              "actionType": "copy",
              "args": {
                "copyFormat": "text/html",
                "content": "${a}"
              }
            }
          ]
        }
      }
    }
  },


网络异常,图片无法展示
|


关于setValue动作的解释


它主要是更新数据域中数据的值的。其中通过componentId来绑定更新那个组件中的数据域。


如果不写componentId,那么更新的就是自己数据域中的值,如果写了,就是更新其他数据域中的值。


{
      "type": "page",
      data: {
        a: "llm"
      },
      id: "pageId",
      "body": [
        {
          type: "tpl",
          tpl: "${a}",
        },
        {
          "type": "form",
          onEvent: {
            change: {
              actions: [
                {
                  actionType: "toast",
                  args: {
                    msg: "提示toast"
                  }
                },
                // 直接清空选中的选项
                // {
                //   actionType: "clear",
                // },
                {
                  actionType: "setValue",
                  // 这个写的是那个组件id,他就更新那个组件的数据域
                  componentId: "pageId",
                  args: {
                    value: {
                      a: "${select}"
                    }
                  }
                  // 如果没有写,那么它将绑定的是该组件的id。
                  // args: {
                  //   value: {
                  //     select: "a"
                  //   }
                  // }
                }
              ]
            }
          },
          "body": [
            {
              "label": "选项",
              "type": "select",
              "name": "select",
              multiple: true,
              "menuTpl": "<div>${label} 值:${value}, 当前是否选中: ${checked}</div>",
              "options": [
                {
                  "label": "A",
                  "value": "a"
                },
                {
                  "label": "B",
                  "value": "b"
                },
                {
                  "label": "C",
                  "value": "c"
                }
              ]
            }
          ]
        }
      ]
    },


网络异常,图片无法展示
|


事件动作中获取的event.data到底是啥


这个我也很迷,结合官网的一个案例,我只知道是当前事件传递的args。


{
      "type": "page",
      "body": [
        {
          "type": "button",
          "id": "b_001",
          "label": "发一个广播,携带动作参数",
          "className": "mb-2",
          "level": "primary",
          "onEvent": {
            "click": {
              "actions": [
                {
                  "actionType": "broadcast",
                  "eventName": "broadcast_1",
                  "args": {
                    "username": "lvxj",
                    "age": 30
                  },
                  "description": "一个按钮的点击事件"
                }
              ]
            }
          }
        },
        {
          "type": "form",
          "name": "form1",
          "id": "form_001",
          "title": "接收广播事件的参数",
          "debug": true,
          "body": [
            {
              "type": "input-text",
              "id": "form_001_text_01",
              "label": "年龄",
              "name": "age",
              "disabled": false,
              "mode": "horizontal"
            },
            {
              "type": "input-text",
              "id": "form_001_text_02",
              "label": "usernae",
              "name": "username",
              "disabled": false,
              "mode": "horizontal"
            }
          ],
          "data": {
            "username": "amis"
          },
          "onEvent": {
            "broadcast_1": {
              "actions": [
                {
                  "actionType": "reload",
                  "args": {
                    "age": "${event.data.age}",
                    "username": "${event.data.username}"
                  }
                },
                {
                  actionType: "toast",
                  args: {
                    msg: "${event.data | json}"
                  }
                }
              ]
            }
          }
        }
      ]
    },


网络异常,图片无法展示
|


所以当我们用到了event这个对象的时候,可以通过这种方式打印出来看一下。


{
  "actionType": "toast",
  "args": {
    "msgType": "info",
    "msg": "${event.data | json}"
  }
}


具体案例请看这里


相关文章
|
网络安全 计算机视觉
【node】 npm install 报错:code 128
【node】 npm install 报错:code 128
607 1
|
弹性计算 安全 容灾
【深度好文】为什么说用好VPC很重要!
本文详细探讨了阿里云VPC(Virtual Private Cloud)的使用方法及其重要性。 VPC作为用户云上的“数据中心”,提供了安全隔离的网络环境,帮助用户构建和管理云服务。文章首先对比了经典网络和VPC的区别,强调了VPC在安全性、灵活性和扩展性方面的优势。接着,通过具体的规划步骤,包括选择地域、账号规划、网段规划、安全隔离设计等,展示了如何有效利用VPC。此外,还介绍了VPC连接互联网的方式及安全措施,以及VPC与IDC互访的解决方案。 总体而言,VPC不仅是用户上云的第一步,更是构建稳定、高效云基础设施的关键。
|
前端开发
一次偶然的机会,让我遇见了amis之排错总结(持续更新,因为还在学习)(下)
一次偶然的机会,让我遇见了amis之排错总结(持续更新,因为还在学习)
|
JavaScript 搜索推荐 Java
一次偶然的机会,让我遇见了amis之排错总结(持续更新,因为还在学习)(上)
一次偶然的机会,让我遇见了amis之排错总结(持续更新,因为还在学习)
|
9月前
|
人工智能 自然语言处理 测试技术
AutoRAG:自动优化 RAG 管道工具,自动评估各种 RAG 模块组合,快速找到最优的 RAG 管道
AutoRAG 是一款自动优化 RAG(Retrieval-Augmented Generation)管道的工具,帮助用户找到最适合其数据和应用场景的最佳 RAG 管道。
447 12
AutoRAG:自动优化 RAG 管道工具,自动评估各种 RAG 模块组合,快速找到最优的 RAG 管道
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
385 3
|
资源调度 JavaScript 前端开发
vue 项目运行过程中出现错误的问题解决
vue 项目运行过程中出现错误的问题解决
202 1
|
前端开发 JavaScript 数据安全/隐私保护
从0到1开发一个自己的npm包完整过程
创建自己的 npm 包涉及六个步骤:1) 注册 npm 账号;2) 使用 `npm init` 初始化项目,确保 package.json 的 name 唯一且 private 为 false;3) 开发项目,可封装 UI 组件、函数库或命令行工具;4) 本地调试,通过 `npm link` 在项目中测试;5) `npm login` 登录账号,可能需切换至官方仓库;6) 使用 `npm publish` 发布项目。注意版本号递增,无意义的包不建议发布。
从0到1开发一个自己的npm包完整过程
|
JSON 前端开发 JavaScript
【amis低代码前端框架】vue2集成百度低代码前端框架amis
【amis低代码前端框架】vue2集成百度低代码前端框架amis
1044 0