tcp服務端和客戶端建立連接後會長時間維持這個連接，用於互相傳遞數據，tcp是以流的方式傳輸數據的，就像一個水管里的水一樣，從一頭不斷的流向另一頭。
理想情況下，發送的數據包都是獨立的，

現實要複雜一些，發送方和接收方都有各自的緩衝區。
發送緩衝區：應用不斷的把數據發送到緩衝區，系統不斷的從緩衝區取數據發送到接收端。
接收緩衝區：系統把接收到的數據放入緩衝區，應用不斷的從緩衝區獲取數據。
當發送方快速的發送多個數據包時，每個數據包都小於緩衝區，tcp會將多次寫入的數據放入緩衝區，一次發送出去，服務器在接收到數據流無法區分哪部分數據包獨立的，這樣產生了粘包。

或者接收方因為各種原因沒有從緩衝區里讀取數據，緩衝區的數據會積壓，等再取出數據時，也是無法區分哪部分數據包獨立的，一樣會產生粘包。
發送方的數據包大於緩存區了，其中有一部分數據會在下一次發送，接收端一次接收到時的數據不是完整的數據，就會出現半包的情況。

我們可以還原一下粘包和半包，寫一個測試代碼
服務端

func main() {
	l, err := net.Listen("tcp", ":8899")
	if err != nil {
		panic(err)
	}
	fmt.Println("listen to 8899")
	for {
		conn, err := l.Accept()
		if err != nil {
			panic(err)
		} else {
			go handleConn(conn)
		}
	}
}

func handleConn(conn net.Conn) {
	defer conn.Close()
	var buf [1024]byte
	for {
		n, err := conn.Read(buf[:])
		if err != nil {
			break
		} else {
			fmt.Printf("recv: %s \n", string(buf[0:n]))
		}
	}
}

客戶端

func main() {
	data := []byte("~測試數據：一二三四五~")
	conn, err := net.Dial("tcp", ":8899")
	if err != nil {
		panic(err)
	}
	for i := 0; i < 2000; i++ {
		if _, err = conn.Write(data); err != nil {
			fmt.Printf("write failed , err : %v\n", err)
			break
		}
	}
}

查看一下輸出

recv: ~測試數據：一二三四五~
recv: ~測試數據：一二三四五~ ~測試數據：一二三四五~ 
recv: ~測試數據：一� 
recv: ��三四五~ ~測試數據：一二三四五~ 
recv: ~測試數據：一二三四五~
recv: ~測試數據：一二三四五~ ~測試數據：一二三四五~ ~測試數據：一二三四五~ ~測試數據：一二三四五~ 
recv: ~測試數據：一二三四五~

正常情況下輸出是recv: ~測試數據：一二三四五~，發生粘包的時候會輸出多個數據包，當有半包的情況下輸出的是亂碼數據，再下一次會把剩下的半包數據也輸出。
要解決也簡單的就想辦法確定數據的邊界，常見的處理方式：

• 固定長度： 比如規定所有的數據包長度為100byte，如果不夠則補充至100長度。優點就是實現很簡單，缺點就是空間有極大的浪費，如果傳遞的消息中大部分都比較短，這樣就會有很多空間是浪費的，同樣浪費的還有流量。
• 分隔符：用分隔符來確定數據的邊界，這樣做比較簡單也不浪費空間，但數據包內就不能包含相應的分隔符，如果有會造成錯誤的解析。
• 數據頭：通過數據頭部來解析數據包長度，比如用4個字節來當數據頭，保存每個實數據包的長度。

個人更推薦數據頭方式來確定數據邊界，在發送和接收數據時做好規定，每個數據包是不定長的，比如4字節的包頭+真實的數據可以根據自己的業務進行擴展，比如上更多的包頭或者包尾，加上數據校驗等。
我修改一下上面的代碼：
客戶端

	data := []byte("~測試數據：一二三四五~")
	conn, err := net.Dial("tcp", ":8899")
	if err != nil {
		panic(err)
	}
	for i := 0; i < 2000; i++ {
		var buf [4]byte
		bufs := buf[:]
		binary.BigEndian.PutUint32(bufs, uint32(len(data)))
		if _, err := conn.Write(bufs); err != nil {
			fmt.Printf("write failed , err : %v\n", err)
			break
		}
		if _, err = conn.Write(data); err != nil {
			fmt.Printf("write failed , err : %v\n", err)
			break
		}
	}

服務端

func main() {
	l, err := net.Listen("tcp", ":8899")
	if err != nil {
		panic(err)
	}
	fmt.Println("listen to 8899")
	for {
		conn, err := l.Accept()
		if err != nil {
			panic(err)
		} else {
			go handleConn(conn)
		}
	}
}
func handleConn(conn net.Conn) {
	defer conn.Close()
	for {
		var msgSize int32
		err := binary.Read(conn, binary.BigEndian, &msgSize)
		if err != nil {
			break
		}
		buf := make([]byte, msgSize)
		_, err = io.ReadFull(conn, buf)
		if err != nil {
			break
		}
		fmt.Printf("recv: %s \n", string(buf))
	}
}

執行再看一下輸出，沒有粘包或者半包的情況

recv: ~測試數據：一二三四五~ 
recv: ~測試數據：一二三四五~ 
recv: ~測試數據：一二三四五~ 
recv: ~測試數據：一二三四五~ 
recv: ~測試數據：一二三四五~ 
recv: ~測試數據：一二三四五~

也可以像第一個例子一樣用一個指定大小的buf var buf [1024]byte，每次從conn里取出指定大小的數據，然後進行數據解析，如果發現有半包的情況，就再讀取一次，加上上次未解析的數據，再次重新解析。

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

※網頁設計公司推薦不同的風格，搶佔消費者視覺第一線

※Google地圖已可更新顯示潭子電動車充電站設置地點!!

※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益

※別再煩惱如何寫文案,掌握八大原則!

※網頁設計最專業,超強功能平台可客製化

※聚甘新

TFRecord 是 tensorflow 內置的文件格式，它是一種二進制文件，具有以下優點：

1. 統一各種輸入文件的操作

2. 更好的利用內存，方便複製和移動

3. 將二進制數據和標籤(label)存儲在同一個文件中

 

引言

在了解如下操作後進一步詳細講解TFRecord

 

tf.train.Int64List(value=list_data)

它的作用是 把 list 中每個元素轉換成 key-value 形式，

注意，輸入必須是 list，且 list 中元素類型要相同，且與 Int 保持一致；

# value = tf.constant([1, 2])     ### 這會報錯的
ss = 1               ### Int64List 對應的元素只能是 int long，其他同理
tt = 2
out1 = tf.train.Int64List(value = [ss, tt])
print(out1)
# value: 1
# value: 2

ss = [1 ,2]
out2 = tf.train.Int64List(value = ss)
print(out2)
# value: 1
# value: 2

 

同類型的 方法還有 2 個

tf.train.FloatList
tf.train.BytesList

 

tf.train.Feature(int64_list=)

它的作用是 構建 一種類型的特徵集，比如 整型

out = tf.train.Feature(int64_list=tf.train.Int64List(value=[33, 22]))
print(out)
# int64_list {
#   value: 33
#   value: 22
# }

也可以是其他類型

tf.train.Feature(float_list=tf.train.FloatList())
tf.train.Feature(bytes_list=tf.train.BytesList())

 

tf.train.Features(feature=dict_data)

它的作用是 構建 多種類型 的特徵集，可以 dict 格式表達 多種類型

ut = tf.train.Features(feature={
                            "suibian": tf.train.Feature(int64_list=tf.train.Int64List(value=[1, 2, 4])),
                            "a": tf.train.Feature(float_list=tf.train.FloatList(value=[5., 7.]))
                        })
print(out)
# feature {
#   key: "a"
#   value {
#     float_list {
#       value: 5.0
#       value: 7.0
#     }
#   }
# }
# feature {
#   key: "suibian"
#   value {
#     int64_list {
#       value: 1
#       value: 2
#       value: 4
#     }
#   }
# }

 

tf.train.Example(features=tf.train.Features())

它的作用是創建一個 樣本，Example 對應一個樣本

example = tf.train.Example(features=
                           tf.train.Features(feature={
                               'a': tf.train.Feature(int64_list=tf.train.Int64List(value=range(2))),
                               'b': tf.train.Feature(bytes_list=tf.train.BytesList(value=[b'm',b'n']))
                           }))
print(example)
# features {
#   feature {
#     key: "a"
#     value {
#       int64_list {
#         value: 0
#         value: 1
#       }
#     }
#   }
#   feature {
#     key: "b"
#     value {
#       bytes_list {
#         value: "m"
#         value: "n"
#       }
#     }
#   }
# }

 

一幅圖總結一下上面的代碼

 

Example 協議塊

它其實是一種 數據存儲的 格式，類似於 xml、json 等；

用上述方法實現該格式；

一個 Example 協議塊對應一個樣本，一個樣本有多種特徵，每種特徵下有多個元素，可參看上圖；

message Example{
    Features features = 1;
}
message Features{
    map<string,Features> feature = 1;
}
message Feature {
    oneof kind {
        BytesList bytes_list = 1;
        FloateList float_list = 2;
        Int64List int64_list = 3;
    }
}

TFRecord 文件就是以 Example協議塊 格式 存儲的；

 

TFRecord 文件

該類文件具有寫功能，且可以把其他類型的文件轉換成該類型文件，其實相當於先讀取其他文件，再寫入 TFRecord 文件；

該類文件也具有讀功能；

 

TFRecord 存儲

存儲分兩步：

1.建立存儲器 

2. 構造每個樣本的 Example 協議塊

 

tf.python_io.TFRecordWriter(file_name)

構造存儲器，存儲器有兩個常用方法

• write(record)：向文件中寫入一個樣本
• close()：關閉存儲器

注意：此處的 record 為一個序列化的 Example，通過 Example.SerializeToString()來實現，它的作用是將 Example 中的 map 壓縮為二進制，節約大量空間

 

示例代碼1：將 MNIST 數據集保存成 TFRecord 文件

import tensorflow as tf
import numpy as np
import input_data


# 生成整數型的屬性
def _int64_feature(value):
    return tf.train.Feature(int64_list = tf.train.Int64List(value = [value]))

# 生成字符串類型的屬性，也就是圖像的內容
def _string_feature(value):
    return tf.train.Feature(bytes_list = tf.train.BytesList(value = [value]))

# 讀取圖像數據 和一些屬性
mniset = input_data.read_data_sets('../../../data/MNIST_data',dtype=tf.uint8, one_hot=True)
images = mniset.train.images
labels = mniset.train.labels
pixels = images.shape[1]        # (55000, 784)
num_examples = mniset.train.num_examples        # 55000

file_name = 'output.tfrecords'          ### 文件名
writer = tf.python_io.TFRecordWriter(file_name)     ### 寫入器

for index in range(num_examples):
    ### 遍歷樣本
    image_raw = images[index].tostring()        ### 圖片轉成 字符型
    example = tf.train.Example(features = tf.train.Features(feature = {
        'pixel': _int64_feature(pixels),
        'label': _int64_feature(np.argmax(labels[index])),
        'image_raw': _string_feature(image_raw)
    }))
    writer.write(example.SerializeToString())       ### 寫入 TFRecord
writer.close()

 

示例代碼2：將 csv 保存成 TFRecord 文件

train_frame = pd.read_csv("../myfiles/xx3.csv")
train_labels_frame = train_frame.pop(item="label")
train_values = train_frame.values
train_labels = train_labels_frame.values
print("values shape: ", train_values.shape)     # values shape:  (2, 3)
print("labels shape:", train_labels.shape)      # labels shape: (2,)

writer = tf.python_io.TFRecordWriter("xx3.tfrecords")

for i in range(train_values.shape[0]):
    image_raw = train_values[i].tostring()
    example = tf.train.Example(
        features=tf.train.Features(
            feature={
                "image_raw": tf.train.Feature(bytes_list=tf.train.BytesList(value=[image_raw])),
                "label": tf.train.Feature(int64_list=tf.train.Int64List(value=[train_labels[i]]))
            }
        )
    )
    writer.write(record=example.SerializeToString())
writer.close()

 

示例3：將 png 文件保存成 TFRecord 文件

# filenames = tf.train.match_filenames_once('../myfiles/*.png')
filenames = glob.iglob('..\myfiles\*.png')

writer = tf.python_io.TFRecordWriter('png.tfrecords')

for filename in filenames:
    img = Image.open(filename)
    img_raw = img.tobytes()
    label = 1
    example = tf.train.Example(
        features=tf.train.Features(
            feature={
                "image_raw": tf.train.Feature(bytes_list=tf.train.BytesList(value=[img_raw])),
                "label": tf.train.Feature(int64_list=tf.train.Int64List(value=[label]))
            }
        )
    )
    writer.write(record=example.SerializeToString())
writer.close()

 

TFRecord 讀取

參考鏈接：https://www.cnblogs.com/nbk-zyc/p/13159986.html（案例6）、https://www.cnblogs.com/nbk-zyc/p/13168313.html

 

tf.TFRecordReader()

建立讀取器，有 read 和 close 方法

tf.parse_single_example(serialized,features=None,name= None)

解析單個 Example 協議塊

• serialized : 標量字符串的Tensor，一個序列化的Example,文件經過文件閱讀器之後的value
• features :字典數據，key為讀取的名字，value為FixedLenFeature
• return : 一個鍵值對組成的字典，鍵為讀取的名字

features中的value還可以為tf.VarLenFeature(),但是這種方式用的比較少，它返回的是SparseTensor數據，這是一種只存儲非零部分的數據格式，了解即可。

tf.FixedLenFeature(shape,dtype)

• shape : 輸入數據的形狀，一般不指定，為空列表
• dtype : 輸入數據類型，與存儲進文件的類型要一致，類型只能是float32，int 64, string
• return : 返回一個定長的 Tensor (即使有零的部分也存儲）

 

示例代碼

filename = 'png.tfrecords'
file_queue = tf.train.string_input_producer([filename], shuffle=True)

reader = tf.TFRecordReader()
key, value = reader.read(file_queue)

### features 的 key 必須和 寫入時 一致，數據類型也必須一致，shape 可為 空
dict_data= tf.parse_single_example(value, features={'label': tf.FixedLenFeature(shape=(1,1), dtype=tf.int64),
                                                        'image_raw': tf.FixedLenFeature(shape=(), dtype=tf.string)})
label = tf.cast(dict_data['label'], tf.int32)
img = tf.decode_raw(dict_data['image_raw'], tf.uint8)       ### 將 string、bytes 轉換成 int、float

image_tensor = tf.reshape(img, [500, 500, -1])

sess = tf.Session()
sess.run(tf.local_variables_initializer())
tf.train.start_queue_runners(sess=sess)

while 1:
    # print(sess.run(key))        # b'png.tfrecords:0'
    image = sess.run(image_tensor)
    img_PIL = Image.fromarray(image)
    img_PIL.show()

 

參考資料：

https://blog.csdn.net/chengshuhao1991/article/details/78656724

https://www.cnblogs.com/yanshw/articles/12419616.html

,

TFRecord 是 tensorflow 內置的文件格式，它是一種二進制文件，具有以下優點：

1. 統一各種輸入文件的操作

2. 更好的利用內存，方便複製和移動

3. 將二進制數據和標籤(label)存儲在同一個文件中

 

引言

在了解如下操作後進一步詳細講解TFRecord

 

tf.train.Int64List(value=list_data)

它的作用是 把 list 中每個元素轉換成 key-value 形式，

注意，輸入必須是 list，且 list 中元素類型要相同，且與 Int 保持一致；

# value = tf.constant([1, 2])     ### 這會報錯的
ss = 1               ### Int64List 對應的元素只能是 int long，其他同理
tt = 2
out1 = tf.train.Int64List(value = [ss, tt])
print(out1)
# value: 1
# value: 2

ss = [1 ,2]
out2 = tf.train.Int64List(value = ss)
print(out2)
# value: 1
# value: 2

 

同類型的 方法還有 2 個

tf.train.FloatList
tf.train.BytesList

 

tf.train.Feature(int64_list=)

它的作用是 構建 一種類型的特徵集，比如 整型

out = tf.train.Feature(int64_list=tf.train.Int64List(value=[33, 22]))
print(out)
# int64_list {
#   value: 33
#   value: 22
# }

也可以是其他類型

tf.train.Feature(float_list=tf.train.FloatList())
tf.train.Feature(bytes_list=tf.train.BytesList())

 

tf.train.Features(feature=dict_data)

它的作用是 構建 多種類型 的特徵集，可以 dict 格式表達 多種類型

ut = tf.train.Features(feature={
                            "suibian": tf.train.Feature(int64_list=tf.train.Int64List(value=[1, 2, 4])),
                            "a": tf.train.Feature(float_list=tf.train.FloatList(value=[5., 7.]))
                        })
print(out)
# feature {
#   key: "a"
#   value {
#     float_list {
#       value: 5.0
#       value: 7.0
#     }
#   }
# }
# feature {
#   key: "suibian"
#   value {
#     int64_list {
#       value: 1
#       value: 2
#       value: 4
#     }
#   }
# }

 

tf.train.Example(features=tf.train.Features())

它的作用是創建一個 樣本，Example 對應一個樣本

example = tf.train.Example(features=
                           tf.train.Features(feature={
                               'a': tf.train.Feature(int64_list=tf.train.Int64List(value=range(2))),
                               'b': tf.train.Feature(bytes_list=tf.train.BytesList(value=[b'm',b'n']))
                           }))
print(example)
# features {
#   feature {
#     key: "a"
#     value {
#       int64_list {
#         value: 0
#         value: 1
#       }
#     }
#   }
#   feature {
#     key: "b"
#     value {
#       bytes_list {
#         value: "m"
#         value: "n"
#       }
#     }
#   }
# }

 

一幅圖總結一下上面的代碼

 

Example 協議塊

它其實是一種 數據存儲的 格式，類似於 xml、json 等；

用上述方法實現該格式；

一個 Example 協議塊對應一個樣本，一個樣本有多種特徵，每種特徵下有多個元素，可參看上圖；

message Example{
    Features features = 1;
}
message Features{
    map<string,Features> feature = 1;
}
message Feature {
    oneof kind {
        BytesList bytes_list = 1;
        FloateList float_list = 2;
        Int64List int64_list = 3;
    }
}

TFRecord 文件就是以 Example協議塊 格式 存儲的；

 

TFRecord 文件

該類文件具有寫功能，且可以把其他類型的文件轉換成該類型文件，其實相當於先讀取其他文件，再寫入 TFRecord 文件；

該類文件也具有讀功能；

 

TFRecord 存儲

存儲分兩步：

1.建立存儲器 

2. 構造每個樣本的 Example 協議塊

 

tf.python_io.TFRecordWriter(file_name)

構造存儲器，存儲器有兩個常用方法

• write(record)：向文件中寫入一個樣本
• close()：關閉存儲器

注意：此處的 record 為一個序列化的 Example，通過 Example.SerializeToString()來實現，它的作用是將 Example 中的 map 壓縮為二進制，節約大量空間

 

示例代碼1：將 MNIST 數據集保存成 TFRecord 文件

import tensorflow as tf
import numpy as np
import input_data


# 生成整數型的屬性
def _int64_feature(value):
    return tf.train.Feature(int64_list = tf.train.Int64List(value = [value]))

# 生成字符串類型的屬性，也就是圖像的內容
def _string_feature(value):
    return tf.train.Feature(bytes_list = tf.train.BytesList(value = [value]))

# 讀取圖像數據 和一些屬性
mniset = input_data.read_data_sets('../../../data/MNIST_data',dtype=tf.uint8, one_hot=True)
images = mniset.train.images
labels = mniset.train.labels
pixels = images.shape[1]        # (55000, 784)
num_examples = mniset.train.num_examples        # 55000

file_name = 'output.tfrecords'          ### 文件名
writer = tf.python_io.TFRecordWriter(file_name)     ### 寫入器

for index in range(num_examples):
    ### 遍歷樣本
    image_raw = images[index].tostring()        ### 圖片轉成 字符型
    example = tf.train.Example(features = tf.train.Features(feature = {
        'pixel': _int64_feature(pixels),
        'label': _int64_feature(np.argmax(labels[index])),
        'image_raw': _string_feature(image_raw)
    }))
    writer.write(example.SerializeToString())       ### 寫入 TFRecord
writer.close()

 

示例代碼2：將 csv 保存成 TFRecord 文件

train_frame = pd.read_csv("../myfiles/xx3.csv")
train_labels_frame = train_frame.pop(item="label")
train_values = train_frame.values
train_labels = train_labels_frame.values
print("values shape: ", train_values.shape)     # values shape:  (2, 3)
print("labels shape:", train_labels.shape)      # labels shape: (2,)

writer = tf.python_io.TFRecordWriter("xx3.tfrecords")

for i in range(train_values.shape[0]):
    image_raw = train_values[i].tostring()
    example = tf.train.Example(
        features=tf.train.Features(
            feature={
                "image_raw": tf.train.Feature(bytes_list=tf.train.BytesList(value=[image_raw])),
                "label": tf.train.Feature(int64_list=tf.train.Int64List(value=[train_labels[i]]))
            }
        )
    )
    writer.write(record=example.SerializeToString())
writer.close()

 

示例3：將 png 文件保存成 TFRecord 文件

# filenames = tf.train.match_filenames_once('../myfiles/*.png')
filenames = glob.iglob('..\myfiles\*.png')

writer = tf.python_io.TFRecordWriter('png.tfrecords')

for filename in filenames:
    img = Image.open(filename)
    img_raw = img.tobytes()
    label = 1
    example = tf.train.Example(
        features=tf.train.Features(
            feature={
                "image_raw": tf.train.Feature(bytes_list=tf.train.BytesList(value=[img_raw])),
                "label": tf.train.Feature(int64_list=tf.train.Int64List(value=[label]))
            }
        )
    )
    writer.write(record=example.SerializeToString())
writer.close()

 

TFRecord 讀取

參考鏈接：https://www.cnblogs.com/nbk-zyc/p/13159986.html（案例6）、https://www.cnblogs.com/nbk-zyc/p/13168313.html

 

tf.TFRecordReader()

建立讀取器，有 read 和 close 方法

tf.parse_single_example(serialized,features=None,name= None)

解析單個 Example 協議塊

• serialized : 標量字符串的Tensor，一個序列化的Example,文件經過文件閱讀器之後的value
• features :字典數據，key為讀取的名字，value為FixedLenFeature
• return : 一個鍵值對組成的字典，鍵為讀取的名字

features中的value還可以為tf.VarLenFeature(),但是這種方式用的比較少，它返回的是SparseTensor數據，這是一種只存儲非零部分的數據格式，了解即可。

tf.FixedLenFeature(shape,dtype)

• shape : 輸入數據的形狀，一般不指定，為空列表
• dtype : 輸入數據類型，與存儲進文件的類型要一致，類型只能是float32，int 64, string
• return : 返回一個定長的 Tensor (即使有零的部分也存儲）

 

示例代碼

filename = 'png.tfrecords'
file_queue = tf.train.string_input_producer([filename], shuffle=True)

reader = tf.TFRecordReader()
key, value = reader.read(file_queue)

### features 的 key 必須和 寫入時 一致，數據類型也必須一致，shape 可為 空
dict_data= tf.parse_single_example(value, features={'label': tf.FixedLenFeature(shape=(1,1), dtype=tf.int64),
                                                        'image_raw': tf.FixedLenFeature(shape=(), dtype=tf.string)})
label = tf.cast(dict_data['label'], tf.int32)
img = tf.decode_raw(dict_data['image_raw'], tf.uint8)       ### 將 string、bytes 轉換成 int、float

image_tensor = tf.reshape(img, [500, 500, -1])

sess = tf.Session()
sess.run(tf.local_variables_initializer())
tf.train.start_queue_runners(sess=sess)

while 1:
    # print(sess.run(key))        # b'png.tfrecords:0'
    image = sess.run(image_tensor)
    img_PIL = Image.fromarray(image)
    img_PIL.show()

 

參考資料：

https://blog.csdn.net/chengshuhao1991/article/details/78656724

https://www.cnblogs.com/yanshw/articles/12419616.html

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※網頁設計公司推薦不同的風格，搶佔消費者視覺第一線

※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益

※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面

※南投搬家公司費用需注意的眉眉角角，別等搬了再說!

※教你寫出一流的銷售文案?

※聚甘新

轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。

原文出處：https://dzone.com/articles/why-masses-are-not-using-latest-css-features-in-20

 

儘管CSS每年都會發布全新的特性，但實際上這些新功能很少會被web開發人員實際在生產項目中使用到，甚至去了解它們的動力也不會比去多完成幾個需求更多。那究竟是什麼原因導致的呢？ 

1.使用最新特性不是優先事項

在一個新項目的初期階段，它用到的可能只是幾條CSS規則，但隨着項目的持續更新和迭代，項目中使用到的規則就會變得越來越複雜，CSS也會越來越複雜尺寸也會隨之不斷膨脹。因此，作為項目優化的第一要務，作為資源的CSS需要盡可能的精簡和減少複雜度，第一是為了便於更好地理解和維護，第二也是為了加載更為高效。那麼，更實用且可投入生產環境的一些CSS特性會被高頻使用，其他的特性則會被暫時擱置一旁。

並且，在一般情況下，樣式和品牌在一段時間內都會相對固定，完成任務的需求要比使用最新CSS的特性要更緊迫。 

 

 

(圖片來源於網絡)

 

2.預算限制

預算成本是影響了所有項目的主要因素。它在開發階段會高度影響事項的優先級。集成新的CSS功能需要時間，而開發團隊來說，增加的這部分時間成本會影響到項目的整體進度。因此，開發進度會重視在優化其他功能（而不是CSS功能）時花費的時間成本。

另外，引入了最新的CSS特性，還可能會使開發團隊把一部分精力放在解決瀏覽器兼容性問題上。這點和JavaScript不同，JavaScript有Babel來完成編譯，而CSS沒有提供類似功能。

 

 

 (圖片來源於網絡)

 

3.社區發展還未跟上

JavaScript每隔一段時間舉行一次會議。同樣，Vue和React也會為了幫助開發人員跟上社區的步伐而定期舉行會議。但是，對於CSS而言，它們根本沒有這樣的活動！因此，開發人員很難掌握其功能和路線圖。他們應該如何保持對新功能發展趨勢的了解？ 沒有版本發布說明，也沒有定期的發布會，這根本不能點燃社區用戶的學習激情。 

對普通用戶而言，既然舊的技術已經滿足了需求，那麼又何必那麼麻煩閱讀文檔學習新的功能呢？

和框架和其他編程語言不同，CSS沒有針對安全問題的補丁程序。他只是一套標準，反正大多數客戶只需要關心網站看起來UI差不多就行了。

4.很難提升簡歷的含金量

即使你在掌握CSS方面付出了很多的努力，對CSS的新特性也了如指掌，但你也很難向你的客戶或老闆證明這一點，因為類似像這樣“熟練掌握CSS3以外的CSS特性”對他人而講是沒有意義的，因為它不是CSS3。在CSS開發領域，CSS3的出現是很有意義的，因為它完成了前端領域的統一：

• Web開發人員提升了技能
• 加速瀏覽器廠商統一支持了全新的CSS標準
• 企業的技術棧更新

巨大的需求帶來了巨大的機會。除了大量的書籍、課程和視頻來幫助人們了解CSS3外，還催生了全新的布局模型，如Flexbox和Grid，儘管它們不是CSS3的一部分。

但這裏我們指的是CSS3外的特性，它們本身除了認可程度很低外，對開發團隊來講也是個相對不熟悉的東西，因此，開發團隊很難會把時間花在對市場沒有意義的事情上，客戶也不會關心你到底用不用新的技術。

5.缺乏時間

編寫CSS的主要目的是使你的網站的表現內容的形式更美觀及易於理解。CSS通過控制兩類事物來幫助開發人員去實現這個目標：布局和設計。布局（Layout）負責元素列和行排布，而設計（design）指顏色、字體、間距、動畫和邊框等基礎外觀。

但目前，舊的特性已經能處理的很好了，為什麼要花更多時間去使用新特性去替代已經很好的形式呢？

總結

CSS發布周期沒有固定的周期和計劃，導致一切都來的很突然 ，另外舊的CSS特性已經能很好的完成日常工作了，這讓很多Web開發人員沒有特別的動力去升級它們。

另外，新的特性知名度也不高，對最終用戶的吸引力也不足，很難從需求層面驅動使用。所以這就是為什麼都2020年了，CSS的新特性仍然使用的人較少的原因。

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面

※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

※想知道最厲害的網頁設計公司“嚨底家”!

※別再煩惱如何寫文案,掌握八大原則!

※產品缺大量曝光嗎?你需要的是一流包裝設計!

※聚甘新

福斯汽車（Volkswagen）深陷柴油車排氣造假案使得品牌形象受重創，為了早點擺脫「柴油門」陰影，轉移消費者的眼光，福斯近來大力推動電動車，雄心勃勃的發展電動車的同時，傳出找來德國逆變器大廠SMA Solar 結盟。

SMA Solar 成立於1981 年，公司名來自「系統、測量、系統工程」（System, Mess and Anlagentechnik）德文簡寫，為全球最大逆變器廠，逆變器應用於直流電交流電轉換，不僅應用於太陽能，也應用於電池能源儲存系統，SMA Solar 市場地位穩固，特斯拉（Tesla）於2016 年5 月宣布Powerwall 將進行小規模規格提升，其重點之一就是改為可支援SMA Solar 產品。

福斯在「柴油門」事件後，積極將事業目標轉向電動車，以便洗刷受到作假事件影響的聲譽，投注數十億歐元資金，大力發展零碳排放的純電動車以及隨選共乘服務，計劃在2025 年以前推出30 款電動車，攻佔四分之一的全球電動車市場。

但是分析師指出，福斯在2015 年只不過出貨6.7 萬輛電動車與油電混合車，以這樣的市佔與進度，要在2025 年攻佔四分之一電動車市場的目標可能很難達成，尤其是競爭對手早已起步，為了追上豐田（Toyota）與雷諾（Renault）日產（Nissan）聯盟，福斯需要找尋強大的合作夥伴。

德國地方日報《黑森下薩克森大眾報》（Hessische Niedersaechsische Allgemeine）於2016 年8 月初報導，福斯尋求能源儲存與綠能大廠SMA Solar 的合作。

福斯的電動車廠表示，SMA Solar 在靜態能源儲存領域相當強勢，對福斯來說，尋求正確的合作夥伴，將是發展電動車的重要關鍵。不過，SMA Solar 目前已經與賓士製造商戴姆勒（Daimler）以及特斯拉在能源儲存方面合作，目前對於福斯的可能合作消息不表示意見。

（本文授權自《》──〈〉。照片來源：）

本站聲明:網站內容來源於EnergyTrend https://www.energytrend.com.tw/ev/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面

※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

※想知道最厲害的網頁設計公司“嚨底家”!

※別再煩惱如何寫文案,掌握八大原則!

※產品缺大量曝光嗎?你需要的是一流包裝設計!

※聚甘新

不論是在汽車、能源還是科技界，不論發生什麼事情都在大眾目光焦點的特斯拉 （Tesla），既三月份成立臺灣分公司之後有更進一步的動作。特斯拉的臺北旗艦店在今日 （9 月1 日） 在臺北信義商圈開幕，有興趣的人可以到店體驗特斯拉房車Model S，並且預約試駕和進一步訂購，預計明年 （2017） 第一季交車。

特斯拉看中臺灣在科技產業的樞鈕地位，因此在亞太區暨中國、香港、澳門、澳洲之後，選擇臺灣，成為特斯拉全球第25 個設立的國家。而在信義商圈新光三越A11 的台灣旗艦店，則是第204 家店。選在臺灣的首善之都臺北，則是著眼信義商圈是臺北最繁盛的購物商圈，對新事物的接受度高，因此選在新光三越A11 設旗艦店，並且還跟新光三越合作，在百貨公司的地下停車場設立充電站。

電動車要能方便，必須有足夠的的充電站。Tesla香港、澳門及台灣地區區域總監范菁怡表示，目前除了設在車主自家的居家充電站之外，還會與百貨商場、飯店合作，在停車場設置目的地充電站。未來特斯拉也將在高速公路沿線設置超級充電站，服務需長距離駕駛的特斯拉車子。

由於特斯拉代表新一代的潔淨能源運用型式，對於提高都市運輸效率和降低污染有顯著效果，因此除了特斯拉的代表和合作的百貨公司代表以外，臺北市政府也由副市長林欽榮出席。另外還有負責招商相關事務的行政院全球招商及攬才聯合服務中心何怡明執行長，以及經濟部工業局黃裕峰副組長出席。林欽榮致詞時表示，臺北市仍然要繼續推動共享汽車，U-Car 計畫。

儘管目前在臺灣還只能預購特斯拉的Model S 房車車型，但是特斯拉計畫在臺引進平價車款Model 3，定價3 萬5,000 美元，預計明年引進，目前正在商品檢驗階段。

「電動車勢必是未來交通方式的主流，Tesla 一直期望扮演推動永續能源應用的角色。我們樂見台灣對環保、綠色能源的高接受度，也很高興Tesla 能成為這波改革中的一股力量。」Tesla 全球副總裁暨亞太區總裁任宇翔表示：「臺灣特殊的地理和城市發展環境，以及政府對於相關政策和補助的支持，讓Tesla 清楚看到電動車在臺灣的發展性。臺灣廠商不僅是Tesla供應鏈的合作夥伴，更在電動車的推廣上佔有重要地位。隨著Tesla 電動車在台上市與充電站的逐步擴充，Tesla 對臺灣市場的發展潛力深具信心，除了希望對合作夥伴和經濟發展帶來正面影響，更期望與臺灣一起開創電動車的新篇章。」

特斯拉之後將在臺灣設立客服，還有佈建充電網路，當特斯拉的Model S 在臺灣的道路奔馳時，超級充電站和目的地充電站在商圈、景點等地方，形成足夠的網狀分佈，維持特斯拉的輪胎不停轉動。全球有超過9,000 萬臺汽車，目前只有不到0.2% 的汽車是電動車，特斯拉推動電動車，還可以有很大的施力空間。

（首圖：設在新光三越信義A11 地下4 樓停車場的特斯拉目的地充電站，在2017 年特斯拉車子在臺灣道路奔馳之際，這類設在購物商場的充電站將會越來越多。來源：科技新報）

（本文授權轉載自《》──〈〉）

本站聲明:網站內容來源於EnergyTrend https://www.energytrend.com.tw/ev/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※超省錢租車方案

※別再煩惱如何寫文案,掌握八大原則!

※回頭車貨運收費標準

※教你寫出一流的銷售文案?

※FB行銷專家,教你從零開始的技巧

※聚甘新

flex 基本概念

　　flex布局（flex是flexible box的縮寫）， 也稱為彈性盒模型 。將屬性和屬性值（display:flex; ）寫在哪個標籤樣式中，誰就是 容器；它的所有子元素自動成為容器成員，稱為項目。

當一個元素的display 取值為flex，所有項目(子元素)會在一行显示；如果所有項目的尺寸之和大於容器，也不會超出父元素的寬、高度。不會換行(每個項目都會自動縮小相應的比例)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局之:flex</title>
    <link rel="stylesheet" href="./CSS/normalize.css">
    <style>
        section {
            width: 500px;
            height: 800px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
        }
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>
</head>
<body>
    <section>
        <div>01</div>
        <div>02</div>
        <div>03</div>
        <div>04</div>
        <div>05</div>
        <div>06</div>
    </section>
</body>
</html>

頁面效果 ： 每一個項目都等比例縮小了。

 

　　css代碼分為兩種: 一類是適用於容器的 (設置主軸的起始位置、換行、主軸的對齊方式、多跟軸線對齊方式)；一類是適用於項目的(設置項目的位置)。

容器常用的屬性和屬性值

由於重複代碼較多，就不一 一上傳代碼了,大家可以自己動手，敲敲代碼，試試看。

一、設置主軸的起始方向  flex-direction：

默認為X軸（行）：

<style>
        section {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            /* flex-direction: row; */
            /* flex-direction: row-reverse; */
            /* flex-direction: column; */
            /* flex-direction: column-reverse; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

 

flex-direction:row; 默認是X軸的起始方向為開始位置 (從左到右依次擺放)；
flex-direction:row-reverse; 改變X軸的起始方向為結束位置 (從右到左依次擺放)；

設置主軸的起始方向為Y軸（列）：

flex-direction:column; 默認是Y軸的起始方向為開始位置(從上到下依次擺放)
flex-direction:column-reverse; 改變Y軸的起始方向為結束位置(從下到上依次擺放)

二、設置項目是否換行  flex-wrap：（默認是不換行）

 <style>
        section {
            width: 400px;
            height: 400px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            /* flex-wrap: wrap; */
            /* flex-wrap: wrap-reverse; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

flex-wrap: nowrap;  默認值是不換行；（n個項目都會在一行显示.如果項目尺寸之和大於容器主軸的尺寸,則項目會自動縮小相應比列.） (參考第一個代碼 頁面結果展示)

flex-wrap: wrap; 設置換行；（超出主軸的寬，則進行換行。換行后，兩行之間會出現間距，是因為垂直方向有剩餘空間，會平均分配給第二行的上下）

flex-wrap: wrap-reverse; 倒序換行；（如果有兩行,第2行显示在前面,第一行显示在後面）

三、主軸方向的對齊方式  justify-content：

項目是一個時：

 <style>
        section {
            width: 400px;
            height: 400px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* justify-content: center; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

justify-content:flex-start; 以主軸開始方向對齊 (默認)
justify-content:flex-end; 以主軸結束方向對齊

justify-content:center; 主軸方向居中

項目是多個時:

<style>
        section {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            /* justify-content: space-between; */
            /* justify-content: space-around; */
            /* justify-content: space-evenly; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

justify-content: space-between; 兩端對齊 （第一個項目在容器的起始位置,最後一個項目在容器的結束位置，中間距離相等）

 

justify-content: space-around;  分散對齊

justify-content: space-evenly;  平分剩餘空間，每個項目之間的距離相同

 

四、主軸改變為交叉軸方向的對齊方式

一根軸線：  主軸需改變為Y軸：flex-direction: column;

 

align-items: baseline; 以項目的第一行文字的基線對齊

align-items: stretch; (項目沒有給高的情況下,stretch就是默認值，如果項目沒有設置高度,就是容器的高）

 

 <style>
        section {

            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            /* 主軸需改變為Y軸 項目按列擺放 */
            flex-direction: column;
            /* align-items: flex-start;  默認擺放方式 */
            /* align-items: center; */
            /* align-items: flex-end; */


        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

 

align-items: flex-start;  交叉軸從開始位置對齊
align-items: center; 交叉軸居中對齊

align-items: flex-end; 交叉軸從結束位置對齊

多根軸線： (所有項目的尺寸之和，必須大於容器的尺寸,使項目換行显示)

<style>
        section {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            /* align-content: center; */
            /* align-content: flex-end; */
            /* align-content: space-between; */
            /* align-content: space-around; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

 

align-content: flex-start; 交叉軸從開始位置對齊
align-content: center; 交叉軸居中對齊

align-content: flex-end; 交叉軸從結束位置對齊

align-content: space-between; 交叉軸兩端對齊

align-content: space-around; 交叉軸分散對齊

align-content: space-evenly; 交叉軸平均分配

 

項目的屬性和屬性值：

一、order 控制項目位置

order：1；
取值 : 正、負數 (默認值是 0)
值越小越靠前 值越大越靠後 。

（適用場景: 1.搜索引擎優化,提升SEO 把重要的信息在html代碼中靠前擺放,但不影響布局 2.調整項目位置）

<style>
        section {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
        
        div:nth-child(4) {
            order: -1;
        }
    </style>

設置一個或多個[項目]在交叉軸的對齊方式:

 <style>
        section {
            width: 800px;
            height: 400px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
        
        div:nth-child(2) {
            align-self: center;
        }
        
        div:nth-child(3) {
            align-self: flex-end;
        }
    </style>

align-self: flex-start; 設置項目在交叉軸開始位置擺放 （默認位置）
align-self: center; 設置項目在交叉軸居中擺放

align-self: flex-end; 設置項目在交叉軸結束位置擺放

設置某一個或多個元素放大比例

　　條件:所有項目的尺寸之和要小於容器的尺寸
　　（沒有剩餘空間，則設置此屬性無效。）

一個元素有 flex-grow 屬性

<style>
        section {
            width: 800px;
            height: 400px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
        
        div:nth-child(2) {
            flex-grow: 1;
        }
    </style>

多個項目有flex-grow 屬性

<style>
        section {
            width: 800px;
            height: 200px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            box-sizing: border-box;
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
            box-sizing: border-box;
        }
        
        div:nth-child(2) {
            flex-grow: 1;
        }
        
        div:nth-child(4) {
            flex-grow: 2;
        }
    </style>

效果展示

將容器的剩餘空間分成相應的flex-grow的份數，再按照每個項目的份數，分給有flex-grow屬性的項目。

 

　　總之，flex使用起來特別方便，可適用於響應式布局，也可使用聖杯布局。只是屬性較多，也要多練、多實踐 ，相信你也能很快熟練使用flex的。

推薦一個小遊戲，很有趣，又能增強關於flex的使用方法 ：Flexbox Froggy  http://blog.xiaoboswift.com/flexbox/#zh-cn  去幫助小青蛙回家吧~~

 

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理【其他文章推薦】

※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

※網頁設計公司推薦不同的風格，搶佔消費者視覺第一線

※想知道購買電動車哪裡補助最多?台中電動車補助資訊懶人包彙整

※南投搬家公司費用,距離,噸數怎麼算?達人教你簡易估價知識!

※教你寫出一流的銷售文案?

※超省錢租車方案

※聚甘新

前言

簡單集成Prometheus+Grafana，指標的上報收集可視化。

Prometheus

Prometheus是一個監控平台,監控從HTTP端口收集受監控目標的指標。在微服務的架構里Prometheus多維度的數據收集是非常強大的 我們首先下載安裝Prometheus和node_exporter,node_exporter用於監控CPU、內存、磁盤、I/O等信息

• Prometheus下載地址
• node_exporter下載地址

下載完成后解壓以管理員運行 prometheus.exe 訪問 http://localhost:9090/ 出現一下頁面說明啟動成功啦

.Net Core獲取指標

有了Prometheus，我們還需要給Prometheus提供獲取監控數據的接口,我們新建一個WebApi項目,並導入prometheus-net.AspNetCore包，在Configure中加入UseMetricServer中間件

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{

    app.UseMetricServer();
    
}

啟動項目訪問http://localhost:5000/metrics就可以看基本的一些監控信息啦，包括線程數，句柄數，3個GC的回收計數等信息。

# HELP process_num_threads Total number of threads
# TYPE process_num_threads gauge
process_num_threads 29
# HELP process_working_set_bytes Process working set
# TYPE process_working_set_bytes gauge
process_working_set_bytes 44441600
# HELP process_private_memory_bytes Process private memory size
# TYPE process_private_memory_bytes gauge
process_private_memory_bytes 69660672
# HELP dotnet_total_memory_bytes Total known allocated memory
# TYPE dotnet_total_memory_bytes gauge
dotnet_total_memory_bytes 2464584
# HELP dotnet_collection_count_total GC collection count
# TYPE dotnet_collection_count_total counter
dotnet_collection_count_total{generation="1"} 0
dotnet_collection_count_total{generation="0"} 0
dotnet_collection_count_total{generation="2"} 0
# HELP process_start_time_seconds Start time of the process since unix epoch in seconds.
# TYPE process_start_time_seconds gauge
process_start_time_seconds 1592448124.2853072
# HELP process_open_handles Number of open handles
# TYPE process_open_handles gauge
process_open_handles 413
# HELP process_virtual_memory_bytes Virtual memory size in bytes.
# TYPE process_virtual_memory_bytes gauge
process_virtual_memory_bytes 2225187631104
# HELP process_cpu_seconds_total Total user and system CPU time spent in seconds.
# TYPE process_cpu_seconds_total counter
process_cpu_seconds_total 1.171875

Help 是收集指標的說明，Type收集指標的類型

但是作為HTTP應用怎麼能沒有HTTP的監控和計數呢,只需要加加入UseHttpMetrics中間件就可以對HTTP請求監控和計數，主要注意的是UseHttpMetrics最好放在UseEndpoints和UseRouting中間

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseMetricServer();
    
    app.UseRouting();
    
    app.UseHttpMetrics();

    app.UseEndpoints(endpoints => { endpoints.MapControllers(); });
}

啟動項目繼續訪問http://localhost:5000/metrics

# HELP http_requests_in_progress The number of requests currently in progress in the ASP.NET Core pipeline. One series without controller/action label values counts all in-progress requests, with separate series existing for each controller-action pair.
# TYPE http_requests_in_progress gauge

可以看到已經有了，我們隨便請求一下服務看看效果,會幫我們記錄下總耗時，總請求數，和每次請求的耗時數

但是單單有上面那些數據好像還不太好定位一下很奇葩的問題，這時候我們可以獲取Runtime的一些數據，方法童謠很簡單。導入prometheus-net.DotNetRuntime 包，它可以幫助我們看到如下指標

• 垃圾回收的收集頻率和時間
• 服務佔用堆大小
• 對象堆分配的字節
• JIT編譯和JIT CPU消耗率
• 線程池大小，調度延遲以及增長/縮小的原因
• 鎖爭用情況

我們只需要在Program的Main方法中啟動收集器就可以啦。

public static void Main(string[] args)
{
    DotNetRuntimeStatsBuilder.Default().StartCollecting();
    CreateHostBuilder(args).Build().Run();
}

啟動項目繼續訪問http://localhost:5000/metrics測試一下

# HELP dotnet_collection_count_total GC collection count
# TYPE dotnet_collection_count_total counter
dotnet_collection_count_total{generation="1"} 0
dotnet_collection_count_total{generation="0"} 0
dotnet_collection_count_total{generation="2"} 0
# HELP process_private_memory_bytes Process private memory size
# TYPE process_private_memory_bytes gauge
process_private_memory_bytes 75141120
# HELP dotnet_gc_pause_ratio The percentage of time the process spent paused for garbage collection
# TYPE dotnet_gc_pause_ratio gauge
dotnet_gc_pause_ratio 0
# HELP http_requests_received_total Provides the count of HTTP requests that have been processed by the ASP.NET Core pipeline.
# TYPE http_requests_received_total counter
# HELP dotnet_gc_collection_seconds The amount of time spent running garbage collections
# TYPE dotnet_gc_collection_seconds histogram
dotnet_gc_collection_seconds_sum 0
dotnet_gc_collection_seconds_count 0
dotnet_gc_collection_seconds_bucket{le="0.001"} 0
dotnet_gc_collection_seconds_bucket{le="0.01"} 0
dotnet_gc_collection_seconds_bucket{le="0.05"} 0
dotnet_gc_collection_seconds_bucket{le="0.1"} 0
dotnet_gc_collection_seconds_bucket{le="0.5"} 0
dotnet_gc_collection_seconds_bucket{le="1"} 0
dotnet_gc_collection_seconds_bucket{le="10"} 0
dotnet_gc_collection_seconds_bucket{le="+Inf"} 0
# HELP dotnet_total_memory_bytes Total known allocated memory
# TYPE dotnet_total_memory_bytes gauge
dotnet_total_memory_bytes 4925936
# HELP dotnet_threadpool_num_threads The number of active threads in the thread pool
# TYPE dotnet_threadpool_num_threads gauge
dotnet_threadpool_num_threads 0
# HELP dotnet_threadpool_scheduling_delay_seconds A breakdown of the latency experienced between an item being scheduled for execution on the thread pool and it starting execution.
# TYPE dotnet_threadpool_scheduling_delay_seconds histogram
dotnet_threadpool_scheduling_delay_seconds_sum 0.015556
dotnet_threadpool_scheduling_delay_seconds_count 10
dotnet_threadpool_scheduling_delay_seconds_bucket{le="0.001"} 0
dotnet_threadpool_scheduling_delay_seconds_bucket{le="0.01"} 10
dotnet_threadpool_scheduling_delay_seconds_bucket{le="0.05"} 10
dotnet_threadpool_scheduling_delay_seconds_bucket{le="0.1"} 10
dotnet_threadpool_scheduling_delay_seconds_bucket{le="0.5"} 10
dotnet_threadpool_scheduling_delay_seconds_bucket{le="1"} 10
dotnet_threadpool_scheduling_delay_seconds_bucket{le="10"} 10
dotnet_threadpool_scheduling_delay_seconds_bucket{le="+Inf"} 10
# HELP process_working_set_bytes Process working set
# TYPE process_working_set_bytes gauge
process_working_set_bytes 50892800
# HELP process_num_threads Total number of threads
# TYPE process_num_threads gauge
process_num_threads 32
# HELP dotnet_jit_method_seconds_total Total number of seconds spent in the JIT compiler
# TYPE dotnet_jit_method_seconds_total counter
dotnet_jit_method_seconds_total 0
dotnet_jit_method_seconds_total{dynamic="false"} 0.44558800000000004
dotnet_jit_method_seconds_total{dynamic="true"} 0.004122000000000001
# HELP dotnet_gc_pinned_objects The number of pinned objects
# TYPE dotnet_gc_pinned_objects gauge
dotnet_gc_pinned_objects 0
# HELP process_start_time_seconds Start time of the process since unix epoch in seconds.
# TYPE process_start_time_seconds gauge
process_start_time_seconds 1592449942.6063592
# HELP dotnet_gc_heap_size_bytes The current size of all heaps (only updated after a garbage collection)
# TYPE dotnet_gc_heap_size_bytes gauge
# HELP http_request_duration_seconds The duration of HTTP requests processed by an ASP.NET Core application.
# TYPE http_request_duration_seconds histogram
# HELP dotnet_contention_seconds_total The total amount of time spent contending locks
# TYPE dotnet_contention_seconds_total counter
dotnet_contention_seconds_total 0
# HELP dotnet_gc_pause_seconds The amount of time execution was paused for garbage collection
# TYPE dotnet_gc_pause_seconds histogram
dotnet_gc_pause_seconds_sum 0
dotnet_gc_pause_seconds_count 0
dotnet_gc_pause_seconds_bucket{le="0.001"} 0
dotnet_gc_pause_seconds_bucket{le="0.01"} 0
dotnet_gc_pause_seconds_bucket{le="0.05"} 0
dotnet_gc_pause_seconds_bucket{le="0.1"} 0
dotnet_gc_pause_seconds_bucket{le="0.5"} 0
dotnet_gc_pause_seconds_bucket{le="1"} 0
dotnet_gc_pause_seconds_bucket{le="10"} 0
dotnet_gc_pause_seconds_bucket{le="+Inf"} 0
# HELP process_virtual_memory_bytes Virtual memory size in bytes.
# TYPE process_virtual_memory_bytes gauge
process_virtual_memory_bytes 2225201872896
# HELP dotnet_gc_finalization_queue_length The number of objects waiting to be finalized
# TYPE dotnet_gc_finalization_queue_length gauge
dotnet_gc_finalization_queue_length 0
# HELP dotnet_threadpool_io_num_threads The number of active threads in the IO thread pool
# TYPE dotnet_threadpool_io_num_threads gauge
dotnet_threadpool_io_num_threads 3
# HELP process_open_handles Number of open handles
# TYPE process_open_handles gauge
process_open_handles 436
# HELP dotnet_gc_collection_reasons_total A tally of all the reasons that lead to garbage collections being run
# TYPE dotnet_gc_collection_reasons_total counter
# HELP process_cpu_seconds_total Total user and system CPU time spent in seconds.
# TYPE process_cpu_seconds_total counter
process_cpu_seconds_total 0.890625
# HELP http_requests_in_progress The number of requests currently in progress in the ASP.NET Core pipeline. One series without controller/action label values counts all in-progress requests, with separate series existing for each controller-action pair.
# TYPE http_requests_in_progress gauge
# HELP dotnet_threadpool_adjustments_total The total number of changes made to the size of the thread pool, labeled by the reason for change
# TYPE dotnet_threadpool_adjustments_total counter
# HELP dotnet_jit_cpu_ratio The amount of total CPU time consumed spent JIT'ing
# TYPE dotnet_jit_cpu_ratio gauge
dotnet_jit_cpu_ratio 0.5728901224489797
# HELP process_cpu_count The number of processor cores available to this process.
# TYPE process_cpu_count gauge
process_cpu_count 8
# HELP dotnet_build_info Build information about prometheus-net.DotNetRuntime and the environment
# TYPE dotnet_build_info gauge
dotnet_build_info{version="3.3.1.0",target_framework=".NETCoreApp,Version=v5.0",runtime_version=".NET Core 5.0.0-preview.2.20160.6",os_version="Microsoft Windows 10.0.18363",process_architecture="X64"} 1
# HELP dotnet_jit_method_total Total number of methods compiled by the JIT compiler
# TYPE dotnet_jit_method_total counter
dotnet_jit_method_total{dynamic="false"} 830
dotnet_jit_method_total{dynamic="true"} 30
# HELP dotnet_gc_cpu_ratio The percentage of process CPU time spent running garbage collections
# TYPE dotnet_gc_cpu_ratio gauge
dotnet_gc_cpu_ratio 0
# HELP dotnet_threadpool_scheduled_total The total number of items the thread pool has been instructed to execute
# TYPE dotnet_threadpool_scheduled_total counter
dotnet_threadpool_scheduled_total 16
# HELP dotnet_gc_allocated_bytes_total The total number of bytes allocated on the small and large object heaps (updated every 100KB of allocations)
# TYPE dotnet_gc_allocated_bytes_total counter
dotnet_gc_allocated_bytes_total{gc_heap="soh"} 3008088
dotnet_gc_allocated_bytes_total{gc_heap="loh"} 805392
# HELP dotnet_contention_total The number of locks contended
# TYPE dotnet_contention_total counter
dotnet_contention_total 0

可以看到非常多的信息啦，但是我們有時候不需要這麼多指標也可以自定義。

public static void Main(string[] args)
{
    DotNetRuntimeStatsBuilder
        .Customize()
        .WithContentionStats()
        .WithJitStats()
        .WithThreadPoolSchedulingStats()
        .WithThreadPoolStats()
        .WithGcStats()
        .StartCollecting();
    CreateHostBuilder(args).Build().Run();
}

JIT,GC和線程的監控是會影響到一點點性能，我們可以通過sampleRate這個枚舉的值來控制採樣頻率

public static void Main(string[] args)
{
    DotNetRuntimeStatsBuilder
        .Customize()
        //每5個事件個採集一個
        .WithContentionStats(sampleRate: SampleEvery.FiveEvents)
        //每10事件採集一個
        .WithJitStats(sampleRate: SampleEvery.TenEvents)
        //每100事件採集一個
        .WithThreadPoolSchedulingStats(sampleRate: SampleEvery.HundredEvents)
        .WithThreadPoolStats()
        .WithGcStats()
        .StartCollecting();
    CreateHostBuilder(args).Build().Run();
}

有了這些指標我們需要Prometheus來收集我們Api的指標，只需要修改prometheus.yml文件然後重啟Prometheus就可以了。

scrape_configs:  
- job_name: mydemo  
  scrape_interval: 15s  
  scrape_timeout: 10s  
  metrics_path: /metrics  
  scheme: http  
  static_configs:  
  - targets:  
    - localhost:5000   

啟動Api項目和Prometheus，選中dotnet_collection_count_total點擊Excute可以看到Api的指標是正常上報的。

Prometheus有了數據我們就需要一個炫酷的UI去展示上報的數據啦。

Grafana

Prometheus有了數據就差一個漂亮的UI來展示的我們的指標了。Grafana是一個Go編寫的開源應用，用於把指標數據可視化。是當下流行的時序數據展示工具。先下載，直接下載exe安裝，完成后能打開http://localhost:3000/頁面就安裝成功了

• 下載地址

先添加數據源，選擇Prometheus為數據源，並配置。

添加儀錶盤

在Import via panel json中加入下面這個json,點擊load，

• 儀錶盤json

選擇數據源,點擊Import就能看到儀錶盤了

還可以去這裏添加很多現有的儀錶盤。複製ID添加儀錶盤。

參考文章

prometheus-net
.NetCore下使用Prometheus實現系統監控和警報系列

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

※網頁設計公司推薦不同的風格，搶佔消費者視覺第一線

※Google地圖已可更新顯示潭子電動車充電站設置地點!!

※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益

※別再煩惱如何寫文案,掌握八大原則!

※網頁設計最專業,超強功能平台可客製化

※聚甘新

      平時在開發Vue應用則需要安裝nodejs,vue cli等相關東西相對來說麻煩一些；如果你喜歡像vs.net/vscode創建普通項目一樣就能開發Vue項目的話那可以嘗試一下BeetleX針對Vue編寫的服務插件；只需要創建一個簡單的Console項目引用相關插件即可以構建一個單頁面的Vue項目。雖然在開發的時候需要用到Beetlex，但後期發布完全可以用在其他平台上，因為組件會針對Vue的內容最終生成一個可發布的js文件。接下來介紹一下這個插件的使用(vs.net/vscode均可)

創建項目

首先需要創建一個c#的Console項目

創建項目后需要引用兩個BeetleX的組件包，可通過Nuget安裝最新版本；分別是:BeetleX.FastHttpApi.Hosting和BeetleX.FastHttpApi.VueExtend；這兩個組件的作用分別是在項目中啟動HTTP服務和針對.VUE文件生成相應的javascript文件。

項目文件布局

由於是Console項目，所以需要針對相關文件存放規則，具體大概如下:

所有html,css,js和vue等文件必須存放在項目的views目錄下；對於這個目錄下用什麼子目錄存放相關文件就看自己的需求了。

服務和基礎資源配置

為了讓控制台服務作為一個HTTP服務需要做一些簡單的配置

static void Main(string[] args)
{
    var builder = new HostBuilder()
        .ConfigureServices((hostContext, services) =>
        {
            services.UseBeetlexHttp(o =>
            {
                o.Port = 80;
                o.SetDebug();
                o.LogToConsole = true;
                o.LogLevel = BeetleX.EventArgs.LogType.Info;
            },
            s =>
            {
                s.AddExts("woff;ttf;woff2");
                s.Vue().CssRewrite("/css/{1}.css").JsRewrite("/js/{1}.js");
                s.Vue().Debug();
                var resource = s.Vue().CreateWebResorce(typeof(Program).Assembly);
                resource.AddScript("vue.js", "axios.js", "beetlex4axios.js", "jquery.js", "echarts.js", "bootstrap.js", "page.js");
                resource.AddCss("bootstrap.css", "bootstrapadmin.css", "admin.css");
            },
            typeof(Program).Assembly);
        });
    builder.Build().Run();
}

前部分主要描述在那個端口開發HTTP服務，並設置相關日誌显示級別；後半部分主要是描述vue配置一些信息。這個後面會詳細描述，接下來看啟動一下服務看下日誌。

服務日誌會显示資源加載和服務端口的情況。

VUE擴展配置

前面服務啟動的時候就已經配置相關VUE的內容，這裏再詳細解說一下。

s.Vue().Debug();
s.Vue().CssRewrite("/css/{1}.css").JsRewrite("/js/{1}.js");
var resource = s.Vue().CreateWebResorce(typeof(Program).Assembly);
resource.AddScript("vue.js", "axios.js", "beetlex4axios.js", "jquery.js", "echarts.js", "bootstrap.js","page.js");
resource.AddCss("bootstrap.css", "bootstrapadmin.css", "admin.css");

Beetlex的Vue插件會管理項目的兩種資源，分別是css和javascript. 

• Debug方法

        主要是告訴組件每次調用資源都重新從文件中生成，這樣開發都在變更相關文件的時候無須重新編譯，保存文件后刷頁面即可。此方法在Release編譯模式下並不生效。

• CssRewrite和JsRewrite方法

         這兩個方法主要是描述通過那些路徑訪問到css和javascript資源，以上定義/css/路徑任意一文件都會得到項目中所有的css內容；/js/路徑任意文件都得到項目的javascript內容。

• WebResource

        這個類用於描述如何收集對應的css和javascript文件；對於javascript文件來說會先打包這些基礎的文件然後再追加項目中的vue文件。打包的順序是依據定義的順序來進行。

啟動頁

在項目vue文件只是模塊文件，我們需要在根目錄下定義一個HTML文件作為訪問落地頁面，接下來看一下這頁面的定義

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link href="/css/v1.css?group=BeetleX.AdminUI" rel="stylesheet" />
    <script src="/js/v1.js?group=BeetleX.AdminUI"></script>
    <title>BeetleX AdminUI</title>
</head>
<body>
    <div id="page">
        <main_menu @menu_resize="OnMenuResize($event)" @openwindow="OnOpenWindow($event)"></main_menu>
        <windows_bar :windows="windows" :full="full" :selectwindow="selectWindow.id" @close="OnCloseWindows($event)"></windows_bar>
        <div class="main-content" :style="{left:(full=='max'?'60px':'260px')}">
            <keep-alive>
                <component :is="selectModel" @openwindow="OnOpenWindow($event)" :token="selectWindow.data" :winsize="sizeVersion"></component>
            </keep-alive>
        </div>
        <page_footer></page_footer>
    </div>
    <script>
        var page = new Vue(pageInfo);
        page.OnOpenWindow({ id: 'home', title: '主頁', model: 'models_home' })
    </script>
</body>
</html>

頁面只是負責資源加載和VUE模塊組裝，在這裏定義的css和javascript加載組是Beetlex.AdminUI即對應剛才加載的程序集資源包：

var resource = s.Vue().CreateWebResorce(typeof(Program).Assembly);

這個落地頁的展示效果如下:

模塊定義

項目配置完成后就可以在views目錄定義自己的vue模塊，存放層次目錄沒有具體的要求可根據自己的喜好來定義存放目錄.對於vue模塊的定義和傳統的vue定義會有些差別的，模塊文件名作為對應的模塊名稱。文件內部主要有HTML和JavaScript組成，而不是像傳統那樣一個vue文件和一個js文件。下面是一個models_home.vue模塊的描述：

    <div style="width:99%;">
        <div class="row">
            <div class="col-lg-6">
                <models_panel :title="'銷售走勢'" :child="'models_monthline'" :winsize="winsize"></models_panel>
                <models_panel :title="'僱員銷售比例'" :child="`model_employeesspie`" :winsize="winsize"></models_panel>
            </div>
            <div class="col-lg-6">
                <models_panel :title="'最新訂單'" :child="`models_neworders`"></models_panel>
                <models_panel :title="'客戶訂單比例'" :child="`model_customerspie`" :winsize="winsize"></models_panel>
            </div>
        </div>
    </div>
<script>
 {
        props: ["winsize"],
        data: function () {
            return {
               
            }
        },
    }
</script>

組件支持的VUE模塊描述要相對簡單一些，沒有一些import的東西；只有HTML和一個VUE構造信息的結構體。

接下來是一個簡單的列表模塊models_employees.vue:

    <div>
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Title</th>
                    <th>Region</th>
                    <th>City</th>
                    <th>Country</th>
                    <th>Address</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in GetEmployees.result">
                    <td><a href="javascript:void(0)" @click="OnOpen(item)">{{item.FirstName}} {{item.LastName}}</a> </td>
                    <td>{{item.Title}}</td>
                    <td>{{item.Region}}</td>
                    <td>{{item.City}}</td>
                    <td>{{item.Country}}</td>
                    <td>{{item.Address}}</td>
                </tr>
            </tbody>
        </table>
    </div>
<script>
    {
        data: function () {
            return {
                GetEmployees: new beetlexAction("/Employees", null, []),
            }
        },
        methods: {
            OnOpen: function (item) {
                this.$open('emp' + item.EmployeeID, '僱員:' + item.FirstName + ' ' + item.LastName, 'models_employeedetail', { id: item.EmployeeID });
            }
        },
        mounted: function () {
            this.GetEmployees.get();
        }
    }
</script>

發布

Beetlex原本是一個HTTP服務模塊，正常情況你把相關文件嵌入到項目發布即可在Linux或windows下運行(環境.net core 2.1或更高版本)。如果你不相基於Beetlex運行，那你可以在編譯目錄下獲取相關的javascript和css完全打包好的文件放到其他環境中部署。

代碼

如果你感興趣可以訪問 https://github.com/IKende/AdminUI   演示地址: http://adminui.beetlex.io/

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※網頁設計公司推薦不同的風格，搶佔消費者視覺第一線

※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益

※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面

※南投搬家公司費用需注意的眉眉角角，別等搬了再說!

※教你寫出一流的銷售文案?

※聚甘新