# 一、前端基本原理 >[info] 自美系統的前端界面是不限設備不限制架構的，只需要下載客戶端(Client)，輸入服務端(Server)的IP地址直接連接即可。 >[success] 默認的一鍵安裝系統方法會自動下載適配的服務的(Server)+客戶端(Client)，在自美系統安裝完成后，如果檢測到有屏幕設備那么客戶端會與服務端同步運行，如果安裝自美設備無顯示輸出，則只啟動服務端（Server）。 >[warning] 前端顯示是基于web的，只需要在插件中編寫簡單的HTML代碼即可呈現出效果。helloworld案例將在屏幕中間輸出一段勵志短語。  # 二、前端界面文件結構 >[success] 在插件文件夾中新增一個名稱為 `html` 的文件夾，在文件夾中新增html，css，js等需要的功能文件即可。 >[info] 其中xxxxx.html,xxxxx.css,xxxxx.js文件不需要固定的命名格式，按照自己的風格寫文件名即可，文件名不做規定。  ```shell helloworld ├── config.json ├── helloworld.py ├── html │ ├── helloworld.css # 前端界面樣式表 │ └── helloworld.html # 前端界面HTML內容 └── vue └── index.vue ``` # 示例代碼 >[info] helloworld.html文件 ```html <div class="helloworld"> 每天進步一點點 </div> ``` >[info] helloworld.css文件 ```css .helloworld{ position: relative; left: 650px; top: 120px; font-size: 1.2rem; color: rgb(255, 244, 173); } ``` >[success] 這樣直接嵌入HTML代碼即可在前端界面上展示內容 # 規則約束 前端組件功能是將 `helloworld` 文件夾下的 `html` 文件夾里全部的文件導入到前端默認文件夾中。 所以在書寫前端插件代碼，只需要將各個組件使用 `<div>` 標簽引入到html中即可。