Html學習：key detection

效果圖：

2 html骨架：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--網頁標題-->
    <title>detection</title>
    <!--內部css部分-->
    <style>
    ......
    </style>
</head>

<body>
    <!--div部分-->
    <div class="contain">
    ......
    </div>

    <!--內部js部分-->
    <script>    
      ......
    </script>
</body>
</html>

3 css部分：

 <!--內部css部分-->
    <style>
        /*網頁和body整體設置*/
        html,body{
            margin:0;
            padding:0;
            /*網頁背景顏色設置*/
            background-color: rgb(96, 94, 212);
        }
        
        /*class='contain'在css的前面有點*/
        .contain{
            width:200px;
            height: 200px;
            font-size:25px;
            text-align: center;
            position: absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);
            z-index:30;
        }

        /*警示label和結果label*/
        .alertInfo,.resultInfo{
            color:rgb(12, 231, 213);
            font-weight: bold;
            /*可以寫在這里，注意數字和px緊緊相鄰*/
            width: 350px;
            height: 10px;

        }
        
        /*輸入框的設置*/
        .text{
            width:150px;
            /*文本框默認顯示，下面就是不顯示*/
            /*outline:none;*/ 
            text-align: center;
            font-size:25px;
            color:blue;
        }

        /*顯示框的設置*/
        .show{
            font-size:25px;
            color:red;
        }
    </style>

4 body的div部分：

    <!--div部分-->
    <div class="contain">
        <!--注意：style可以嵌套在里面，但不推薦，也可以單獨寫在上面的css內-->
        <!--p class="alertInfo" style="width: 350px; height: 10px">顯示倒5個字符串的輸入框：</!--p-->
        <p class="alertInfo" >顯示倒5個字符串的輸入框：</p>
        <!--placeholder是指輸入框默認顯示文字-->
        <input type="text" class="text" placeholder="請輸入內容">
        <!--p class="resultInfo" style="width: 350px; height: 10px">顯示倒4個字符串的顯示區:</!--p-->
        <p class="resultInfo" >顯示倒4個字符串的顯示區:</p>
        <p class="show"></p>
    </div>

5 body的js=JavaScript=script部分：

    <!--內部js部分-->
    <script>
        // 被let聲明的變量不會作為全局對象window的屬性，而被var聲明的變量卻可以
        //text和show均是class，所以前面有一個點
        let input=document.querySelector(".text");
        let show=document.querySelector(".show");
        input.addEventListener('keyup',debounce(handle,100));
        // 防抖處理
        function debounce(func,wait){
            let timeflag;
            return function(){
                clearTimeout(timeflag); //清除100ms之內之前觸發的定時器。
                let arg=arguments;
                let timethis=this;
                timeflag=setTimeout(func.bind(timethis,arg),wait);
            }
        }
        //回調函數
        function handle(){
            //輸入框內倒取5個字符串
            input.value=input.value.slice(-5);
            //輸入框內倒取4個字符串
            show.textContent=input.value.slice(-4);
            
        }
    </script>

6 html部分基礎學習，自己整理并分享出來。

一）Filebeat介紹

FileBeat是一個輕量級的日志收集工具，他可以直接對接ES、Logstash、Kafka、Redis等。

FileBeat的工作原理：FileBeat啟動一個或多個Input，每個log日志FileBeat開啟了harvester。每個harvester讀取單個log日志獲取新寫入的內容并將其發送至libbeat，libbeat將整合的數據發送至output，output發送至對應的目標服務。整體如圖所示：

FileBeat整體架構

FileBeat主要有兩個有兩個重要組件：Inputs和harvesters。這兩個組件一起完成讀取文件內容并把數據發送至output中去。

（二）FileBeat中的重要組件及其作用

Harvester

harvester主要的作用是讀取耽擱文件的內容，它按行讀取并將內容發送至output。由于harvester負責打開或者關閉文件，所以在harvester運行過程中，這個文件的fd將會一直打開，也就是說直到harvester關閉前，這個文件的磁盤空間將一直保留。harvester的關閉可以使用close_inactive來控制。

Input

Input是負責管理所有的harvesters和找出所有帶采集的內容。如果input的類型是log，input會去匹配所有滿足配置路徑的文件，并對每個文件開啟harvester，每個文件都有個自己的一個Go routine。

樣例如下：

filebeat.inputs:
- type: log
  paths:
    - /var/log/*.log
    - /var/path2/*.log

（三）Filebeat采集案例：

3.1 資源：

鏈接：https://pan.baidu.com/s/157WchxmBQKMWFz0CcC9mRA 提取碼：l2b0

FileBeat下載包解壓并修改配置：

>unzip filebeat-7.8.0.zip
>cd filebeat-7.8.0
>vim conf.yml

3.2背景

目的

為了便于在ELK中查看到對應日志需要對日志進行切割，包括他的日志級別、線程、類等信息。同時，對異常出現換行等也需要支持。

日志樣例如下：

2022-11-26 16:31:26,386 195283108 DEBUG [lb-console-heartbeat-send-task-thread-2] (PidUtil.java:22) com.test.info.PidUtil - getPid used:43 (ms)

當前部署情況：

當前采用了比較主流的部署方式：

FileBeat->Logstash->ElasticSearch

配置文件：

filebeat.inputs:
- type: log
  enabled: true
  paths:
    - /home/test/xxx/test.log
  multiline.type: pattern
  multiline.pattern: '^[0-9]{4}-[0-9]{2}-[0-9]{2}'
  multiline.negate: true
  multiline.match: after
  tags: ["testlog"]

fields:
  service: web-test
  project: test-web

output.logstash:
  hosts: ["192.141.148.123:5044"]

processors:
  - dissect:
      when.contains:
        tags: "testlog"
      tokenizer: "%{} %{} %{} %{level} [%{thread}] (%{class}) %{msg}"
      field: "message"
      target_prefix: ""

啟動命令：

回到根目錄
./filebeat -e -c ./conf.yml &

注意點：

異常日志會有換行等情況，日志需支持

  multiline.type: pattern
  multiline.pattern: '^[0-9]{4}-[0-9]{2}-[0-9]{2}'
  multiline.negate: true
  multiline.match: after

日志需要切割，故涉及到processor中的dissect

processors:
  - dissect:
      when.contains:
        tags: "livebosLog"
      tokenizer: "%{} %{} %{} %{level} [%{thread}] (%{class}) %{msg}"
      field: "message"
      target_prefix: ""

Processor可以對讀取的數據進行簡單的處理每個processor接收event數據、處理event數據、返回event數據，如果有多個processors，他的處理過程是按照配置文件順序執行。

event -> processor 1 -> event1 -> processor 2 -> event2 ...

Dissect processor可以按照定義的格式切割字符串

樣例如下：

processors:
  - dissect:
      tokenizer: "%{key1} %{key2} %{key3|convert_datatype}"
      field: "message"
      target_prefix: "dissect"

主要屬性介紹：

tokenizer

定義切割的格式，convert datatype可以在切割完成后自動地將string轉化成integer,long,float,boolean或ip.

field

需要切割的event字段名稱。默認是message

target_prefix

切割后屬性的前綴。

結果：

參考文獻：

https://blog.csdn.net/qq_27818541/article/details/108229185

https://www.elastic.co/guide/en/beats/filebeat/current/how-filebeat-works.html

https://www.elastic.co/guide/en/beats/filebeat/current/dissect.html

https://mritd.com/2020/08/19/how-to-modify-filebeat-source-code-to-processing-logs/

如何避免el-form中el-input輸入框回車鍵導致頁面刷新的痛點問題

## 引言：問題起源與影響

在使用Element UI進行Web前端開發時，我們經常遇到一個常見的痛點問題：在`el-form`組件中的`el-input`輸入框內按回車鍵時，頁面會意外地刷新，這并非預期行為，尤其是在表單填寫場景下，用戶希望的是提交表單而非刷新整個頁面。本文將深入探討這個問題，并給出詳盡的解決方案。

### 段落一：問題現象剖析

問題重現

html
<el-form>
  <el-form-item label="用戶名">
    <el-input v-model="username"></el-input>
  </el-form-item>
  <!-- 其他表單元素... -->
</el-form>

在上述代碼中，當我們在`el-input`中輸入內容并按下回車鍵時，頁面會發生刷新，這主要是因為瀏覽器默認對`<form>`標簽或可輸入元素（如`<input>`）的回車鍵事件處理為提交表單，而提交操作通常會導致頁面刷新。

### 段落二：解決思路與方法

阻止默認行為

要解決此問題，我們可以采用兩種主要策略：

阻止回車鍵默認提交行為

javascript
export default {
  methods: {
    preventFormSubmit(e) {
      if (e.keyCode===13) { // keyCode 13代表回車鍵
        e.preventDefault(); // 阻止默認提交動作
        // 這里可以添加自定義的回車鍵觸發邏輯，例如提交表單
      }
    }
  },
  mounted() {
    document.addEventListener('keydown', this.preventFormSubmit);
  },
  beforeDestroy() {
    document.removeEventListener('keydown', this.preventFormSubmit);
  }
}

局部處理el-input回車事件

html
<el-form @submit.prevent>
  <el-form-item label="用戶名">
    <el-input v-model="username" @keyup.enter.native.prevent></el-input>
  </el-form-item>
  <!-- 其他表單元素... -->
</el-form>

在上述代碼中，`.native`修飾符用于監聽原生DOM事件，`@keyup.enter.prevent`表示監聽輸入框的回車鍵按下事件并阻止其默認行為。

自定義回車鍵功能

javascript
// 在main.js或者其他全局引入的文件中
Vue.directive('prevent-form-submit', {
  inserted(el, binding, vnode) {
    el.addEventListener('keydown', (e)=> {
      if (e.target.tagName==='INPUT' && e.keyCode===13) {
        e.preventDefault();
        const form=vnode.context.$refs[binding.value];
        if (form && typeof form.validate==='function') {
          form.validate((valid)=> {
            if (valid) {
              // 觸發表單提交邏輯
              form.submit();
            }
          });
        }
      }
    });
  }
});

// 在模板中應用全局指令
<el-form ref="myForm" @submit.prevent v-prevent-form-submit="'myForm'">
  <!-- 表單元素... -->
</el-form>

總結起來，解決`el-form`中`el-input`回車鍵導致頁面刷新的問題，關鍵在于理解和利用Vue事件系統以及原生DOM事件的處理機制，通過適當的事件監聽和阻止默認行為，我們可以輕松定制回車鍵的行為，提升用戶體驗，同時避免了不必要的頁面刷新。希望本篇文章能幫助開發者更好地掌握這一技巧，并應用于實際項目中。

在線咨詢

上一篇：CSS3增強用戶界面，有關溢出、縮放、輪廓與文本選中
下一篇：讓原生APP插上HTML5的翅膀

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Html學習：key detection

一）Filebeat介紹

（二）FileBeat中的重要組件及其作用

（三）Filebeat采集案例：

您的項目需求