Проект Amis-admin

Amis-admin — это проект фронтенда для административного интерфейса, разработанный на основе низкокодового фреймворка Baidu Amis. Проект предназначен для предоставления простого в использовании и эффективного решения для создания административных интерфейсов с минимальными усилиями.

1. Область применения и целевая аудитория проекта

• Внутренние проекты предприятий с относительно простыми функциями управления.
• Разработчики с базовыми навыками фронтенд-разработки (HTML, JavaScript, CSS), но без глубоких знаний сложных технологий (npm, webpack, React/Vue и т. д.).

2. Преимущества проекта

1. Очень низкий порог входа: страницы определяются с помощью JSON, что позволяет разработчикам создавать страницы без необходимости изучения сложных инструментов.
2. Предоставляет полное решение для административных интерфейсов, включая встроенные меню, функции входа и выхода пользователей, а также базовые страницы 401, 403 и 404.
3. Поддерживает более 100 UI-компонентов фреймворка Amis.
4. Позволяет расширять функциональность: разработчики могут использовать различные технологии для создания страниц, такие как Amis (основная), React и традиционные HTML. Также поддерживает интеграцию HTML-страниц.
5. Прошёл проверку в реальных условиях в нескольких проектах крупной компании, успешно вышедшей на биржу.
6. Повышает эффективность разработки в 3 раза или более, а для опытных разработчиков, использующих фреймворк Amis, — в 6 раз и более.

3. Предварительный просмотр

Онлайн-демонстрация: http://amis-admin.msvc.top/ (admin/123456).

Скриншоты системы:

• Вход: screenshot/login.png.
• Запрос списка данных: screenshot/curd.png.
• Форма детализации: screenshot/detail-form.png.
• Демонстрация системы: screenshot/%E7%B3%BB%E7%BB%9F%E6%BC%94%E7%A4%BA.gif.

Быстрый старт

1. Установите Node.js (рекомендуется версия 12.x)

Скачайте с сайта: https://nodejs.org/zh-cn/download/.

// Настройте источник npm
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
npm config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/

2. Установите yarn

npm install -g yarn
yarn -v

// Настройте источник yarn
yarn config set registry https://registry.npm.taobao.org -g
yarn config set disturl https://npm.taobao.org/dist -g
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/ -g
yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ -g
yarn config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/ -g
yarn config set chromedriver_cdnurl https://cdn.npm.taobao.org/dist/chromedriver -g
yarn config set operadriver_cdnurl https://cdn.npm.taobao.org/dist/operadriver -g
yarn config set fse_binary_host_mirror https://npm.taobao.org/mirrors/fsevents -g

3. Установите TypeScript

yarn global add typescript
tsc -v

4. Инициализация и разработка

cd ./amis-admin
// Инициализируйте проект
yarn run project-init
// Запустите режим разработки
yarn run dev

1. Откройте в браузере: http://127.0.0.1:8000/schema-app.html.
2. Код страницы находится в папке /src/pages, каждый файл соответствует одной странице.
3. Конфигурация меню определяется в файле /src/router-config.tsx.

Рекомендуется использовать инструменты разработки IntelliJ IDEA или WebStorm.