Elegant Admin 项目教程

1. 项目目录结构及介绍

Elegant Admin 项目的目录结构如下：

elegant-admin/
├── assets/
│   ├── css/
│   ├── fonts/
│   ├── images/
│   └── js/
├── html/
│   ├── dashboard.html
│   ├── login.html
│   └── profile.html
├── landingpage/
│   └── index.html
├── README.md
└── config.json

目录结构介绍

• assets/: 存放项目的静态资源文件，包括 CSS、字体、图片和 JavaScript 文件。

  • css/: 存放项目的样式表文件。
  • fonts/: 存放项目的字体文件。
  • images/: 存放项目的图片文件。
  • js/: 存放项目的 JavaScript 文件。

• html/: 存放项目的 HTML 页面文件。

  • dashboard.html: 项目的主页面，通常用于显示仪表板。
  • login.html: 登录页面。
  • profile.html: 用户个人资料页面。

• landingpage/: 存放项目的着陆页文件。

  • index.html: 项目的着陆页。

• README.md: 项目的说明文件，通常包含项目的简介、安装步骤和使用说明。

• config.json: 项目的配置文件，用于存储项目的配置信息。

2. 项目启动文件介绍

Elegant Admin 项目的启动文件是 html/dashboard.html。这个文件是项目的主页面，通常用于显示仪表板。启动项目时，可以通过浏览器直接打开这个文件来查看项目的主界面。

启动步骤

1. 克隆项目到本地：

   git clone https://github.com/zhangyao1990/elegant-admin.git
   

2. 进入项目目录：

   cd elegant-admin
   

3. 打开 html/dashboard.html 文件：

   open html/dashboard.html
   

   或者直接在浏览器中打开 html/dashboard.html 文件。

3. 项目配置文件介绍

Elegant Admin 项目的配置文件是 config.json。这个文件用于存储项目的配置信息，例如 API 地址、数据库连接信息等。

配置文件内容示例

{
  "apiUrl": "https://api.example.com",
  "database": {
    "host": "localhost",
    "port": 3306,
    "username": "root",
    "password": "password"
  },
  "theme": "light"
}

配置项说明

• apiUrl: 项目的 API 地址。
• database: 数据库连接信息。
  • host: 数据库主机地址。
  • port: 数据库端口号。
  • username: 数据库用户名。
  • password: 数据库密码。
• theme: 项目的主题设置，可以是 light 或 dark。

通过修改 config.json 文件中的配置项，可以自定义项目的运行环境。