# 一、前端基本原理 >[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中即可。