Демонстрационный сайт

Сначала поговорим о проекте.

Как следует из названия, это фреймворк, основанный на Vue.js + .NET, который был создан по просьбе участников сообщества для создания версии фреймворка ABP на Vue.js. Давайте взглянем на главную страницу:

Он выглядит довольно круто. Вот демонстрационные учётные записи:

Демонстрационный адрес: http://vue.yoyocms.com/

Логин: demo

Пароль: bb123456

Конечно, вы также можете зарегистрироваться самостоятельно, чтобы проверить его работу.

Введение

Для тех, кто не знаком с фреймворком ABP, вот что такое ABP:

ABP — это аббревиатура от "ASP.NET Boilerplate Project". ASP.NET Boilerplate — это новое начало для создания современных веб-приложений с использованием лучших практик и популярных технологий. Он предназначен для использования как универсального веб-фреймворка и шаблона проекта.

Фреймворк

ABP представляет собой приложение-фреймворк, основанный на последних версиях ASP.NET Core, ASP.NET MVC и Web API. Он использует популярные фреймворки и библиотеки, предоставляя удобные механизмы авторизации, внедрения зависимостей, валидации, обработки ошибок, локализации, журналирования и кэширования.### Архитектура ABP реализует многослойную архитектуру (слои домена, приложения, инфраструктуры и представлений), а также концепцию Domain-Driven Design (объекты, репозитории, сервисы домена, сервисы приложения, DTO и т.д.). Также он предоставляет хорошую инфраструктуру для применения лучших практик, таких как внедрение зависимостей.### Шаблон ABP легко создаёт стартовый шаблон для вашего проекта. По умолчанию он включает самые популярные фреймворки и библиотеки. Также позволяет выбрать одностраничную (AngularJS) или многопользовательскую архитектуру, Entity Framework или NHibernate в качестве ORM. Узнать больше можно на официальном сайте.

Структура проекта

Структура выбранного проекта следующая:

• .NET Framework 4.6
• Vue + Vuex + Vue-Router

Это разделение на клиентскую и серверную части, но разделение не является чистым, поскольку из-за особенностей дизайна ABP, если требуется полное разделение на клиентскую и серверную части, то процесс авторизации становится сложнее, поэтому метод авторизации через токены не используется.

В предыдущих статьях [Интерceptar динамический Web API в фреймворке ABP] было объяснено, как использовать токены для авторизации. Однако в данном случае используется метод авторизации через cookies.

Но это не влияет на способ разработки клиентской и серверной частей.

Посмотрите на страницу входа:

## Реализация функциональности

• Логин и регистрация
• Многокультурность (переключение языков)
• Управление сообщениями
• Управление арендаторами (множественные арендаторы)
• Управление ролями
• Сессия
• Авторизация (управление правами доступа)
• Управление настройками
• Управление многокультурностью
• Журнал аудита
• Динамический WebApi и другие функции, надеемся, что вы сами попробуете.### Если ваши навыки .NET недостаточно сильны, или вы хотите повысить свои навыки, ABP — это лучший учебный фреймворк.

Описание стека технологий фронтенда:

Используемые фреймы фронта

1. vue
2. vuex
3. vue-router
4. jQuery

Библиотеки UI

1. Element UI
2. Waves
3. Bootstrap
4. BSBADMIN

Структура проекта

• build — скрипты сборки webpack

• config — конфигурация сборки webpack

• dist — файлы после сборки

• src — директория исходного кода

  • assets — глобальные ресурсы
  • common — общие стили и методы
    • language — пакеты языка (временно не используется)
    • utils — утилиты
  • components — глобальные компоненты
  • filters — фильтры
  • mixins — различные стили Sass
  • router — конфигурация маршрутов
  • service — слой запросов к API
  • store — Vuex
  • vendor — директория для сторонних библиотек
  • views — вьюшки
  • vuePlugin — пользовательские плагины Vue

• static — статические файлы, директория остается неизменной после компиляции Это цитата от разработчика фронта, спасибо HuiXin666 за предоставленное время для улучшения интерфейса Vue.

Шаги разработки

Перед началом работы мы предполагаем, что у вас есть базовые навыки в ES6, Sass, Vue, VueRouter, Vuex.
Рекомендуется прочитать советы великого Ю Яньси.### Установка зависимостей фронта Перейдите в директорию Assets внутри вашего проекта Web

$ npm i

Запуск проекта

Не забудьте запустить сервер backend перед тем как запустить frontend

$ npm run dev

Webpack использует Express для запуска web-сервера на порту 8986.

Развертывание

$ npm run build

Эта команда скомпилирует все файлы в директорию dist. См. вышеупомянутую структуру проекта.

1. Добавление страницы

• Сначала создайте модульную директорию в src/views. Например, я добавил директорию, названную administration, которая содержит все страницы управления системой. Каждый модуль также может содержать директории components и assets, что указывает на то, что компоненты и ресурсы принадлежат только текущему модулю.
• Далее добавьте страницу Index.vue, которая будет служить родительским маршрутом для управления всеми страницами в данном модуле. Необходимо обратить внимание на действие keep-alive
• Затем добавьте необходимые вам страницы, например User.vue. Если требуется получение данных, добавьте метод с названием fetchData в разделе methods. В этом методе после получения данных вызовите abp.view.setContentLoading(false) для закрытия области загрузки контента. (можно использовать User.vue как пример)#### 2. Добавление маршрутов
• Перейдите в каталог src/router, создайте папку с модулем маршрута и добавьте файл index.js.
• Затем зарегистрируйте информацию о новых маршрутах в файле src/router/index.js.#### 3. Добавление сервиса
• Перейдите в каталог src/services, добавьте модуль для запросов к соответствующим API, например, все запросы, связанные с ролью, должны находиться в файле roleService.js. Файл roleService.js экспортирует объект, который соответствует abp.services.yoyocms.role. Преимущество такого подхода заключается в возможности централизованного управления и расширения.

Это основные моменты для версии Vue.js проекта ABP.

Ссылки для скачивания:

• Открытый доступ к версии Vue.js: http://git.oschina.net/yoyocms/yoyocms-abpprojecttemplate
• Пример работы версии Vue.js: http://vue.yoyocms.com/
• Открытый доступ к версии AngularJS: https://github.com/ltm0203/YoYoCms
• Пример работы версии AngularJS: http://www.yoyocms.com

Если у вас есть предложения или найдены ошибки, пожалуйста, сообщите об этом через систему issue на git.

Также мы создали генератор проектов, аналогичный официальным шаблонам ABP. http://www.yoyocms.com/