YoYoCms.AbpProjectTemplate

Демо-сайт

Давайте сначала поговорим об этом проекте. Как и в названии, это фреймворк, разработанный на основе VUE+.NET. Это также фреймворк ABP, версию vue которого требовали члены группы. Давайте сначала посмотрим на домашнюю страницу:

Это очень круто, я предоставлю вам демо-счет.

Адрес демо: http://vue.yoyocms.com/ Аккаунт: demo Пароль: bb123456 Конечно, вы также можете зарегистрировать аккаунт самостоятельно для проверки.

представлять

Во-первых, для студентов, которые не знают структуру ABP, давайте объясним, что такое структура ABP:

ABP — это аббревиатура «Проект шаблона ASP.NET (Проект шаблона ASP.NET)». ASP.NET Boilerplate — это новая отправная точка для разработки современных веб-приложений с использованием передового опыта и популярных технологий. Он призван стать универсальной платформой веб-приложений и шаблоном проекта. Framework ABP — это платформа приложений, основанная на новейших технологиях ASP.NET CORE, ASP.NET MVC и веб-API. Используя популярные платформы и библиотеки, он предоставляет простые в использовании общие функции, такие как авторизация, внедрение зависимостей, проверка, обработка исключений, локализация, ведение журнала, кеширование и т. д. Архитектура ABP реализует многоуровневую архитектуру (уровень домена, уровень приложения, уровень инфраструктуры и уровень представления), а также проектирование, управляемое доменом (сущности, репозитории, службы домена, службы приложений, DTO и т. д.). Также реализована и предоставлена ​​хорошая инфраструктура для реализации лучших практик, таких как внедрение зависимостей. Template ABP легко создает шаблоны запуска для ваших проектов. По умолчанию он включает в себя наиболее часто используемые фреймворки и библиотеки. Также позволяет вам выбрать одностраничную (Angularjs) или многостраничную архитектуру, EntityFramework или NHibernate в качестве ORM. Посетите официальный сайт, чтобы узнать больше.

структура

Структура выбранного на этот раз проекта такова:

• .net-фреймворк 4.6
• VUE + VUEX + VUE-ROUTER — это технология разделения внешнего и внутреннего интерфейса, но разделение не очень чистое. Из-за конструкции ABP, если вы хотите чисто разделить внешний и внешний интерфейс, это необходимо. будет немного затруднительно при авторизации, поэтому метод токена не используется.

В предыдущей статье [ABP Framework] Использование перехвата Dynamic Web Api было объяснено, как использовать токен для проверки авторизации. В настоящее время для проверки все еще используется метод cookie. Но это не влияет на методы фронтенд- и бэкенд-разработки. Взгляните на страницу входа:

Реализация функции

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

Если ваши навыки работы с .NET недостаточны или вы хотите их улучшить, ABP — лучшая среда обучения.

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

####Фреймворк, используемый интерфейсом 1.vue
2.vuex
3.vue-маршрутизатор
4.jquery

библиотека пользовательского интерфейса

1.element-ui
2.волны
3. начальная загрузка
4.BSBADMIN

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

• скрипт сборки, созданный с помощью веб-пакета
• конфигурация конфигурации сборки веб-пакета
• Файлы после сборки dist
• каталог исходного кода src
  • файлы глобальных ресурсов активов
  • общедоступный метод общего публичного стиля
    • язык языковой пакет (временно не используется)
    • класс инструментов utils
  • компоненты глобальные компоненты
  • фильтры фильтры
  • Миксины хранят различные стили Sass
  • настройка маршрутизации маршрутизатора
  • Уровень запроса интерфейса службы
  • магазин
  • поставщик хранит сторонние библиотеки
  • просмотры просмотр файла
  • vuePlugin: собственный плагин vue
• static статические файлы, скомпилированный каталог остается неизменным

Ниже приведены оригинальные слова разработчиков интерфейса. Спасибо Huixin666 за то, что нашли время для улучшения интерфейса vue.

Этапы разработки

Перед разработкой мы предполагаем, что у вас есть базовые навыки работы с es6 , sass , vue , vue-router и vuex .
Рекомендуется прочитать советы Ю Юси.

Установите внешние зависимости

Войдите в каталог Assets в Web项目

 $ npm i

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

Не забудьте сначала начать фон

 $ npm run dev

webpack будет использовать экспресс для запуска веб-сервера с портом 8986.

развертывать

 $ npm run build

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

1.Добавить страницу

• Сначала перейдите в src/views чтобы создать каталог модуля.
  Например, сейчас я добавил каталог под названием administration , который содержит все страницы управления системой. Каждый модуль также может содержать каталоги components и assets , что означает, что компоненты и ресурсы в нем принадлежат только текущему модулю.
• Затем добавьте Index.vue в качестве родительской страницы маршрутизации, чтобы управлять всеми страницами этого модуля.
  Необходимо обратить внимание на роль поддержания активности
• Затем добавьте нужную страницу, например User.vue
  Если вам нужно получить данные, добавьте метод с именем fetchData в methods . В этом методе вам нужно вызвать abp.view.setContentLoading(false) после получения данных, чтобы закрыть слой маски загрузки области содержимого. (Вы можете обратиться к User.vue)

2.Добавить маршрут

• Войдите в каталог src/router , добавьте папку модуля маршрутизации и добавьте в нее файл с именем index.js .
• Затем зарегистрируйте текущую добавленную информацию о маршрутизации в src/router/index.js

3.Добавить услугу

• Войдите в каталог src/services и добавьте модуль, соответствующий запросу интерфейса. Например, объекты, связанные с ролью, помещаются в roleService.js Объекты, экспортированные файлом roleService.js соответствуют abp.services.yoyocms.role . Преимущество такого использования заключается в том, что им можно управлять и расширять единообразно.

Выше приведена базовая ситуация с vue-версией ABP.

Адрес загрузки:

Адрес с открытым исходным кодом версии vue: https://github.com/yoyocms/YoYoCms.AbpProjectTemplate Демо-адрес версии vue: http://vue.yoyocms.com/ Адрес с открытым исходным кодом версии angularJS: https ://github.com/ltm0203/YoYoCms Адрес демонстрационной версии angularJS: http://www.yoyocms.com

Если у вас есть хорошие предложения или отзывы об ошибках, сообщите о проблеме на github.

В то же время мы также сделали генератор проектов с функциями, аналогичными официальному шаблону ABP. Функция будет выпущена в середине года, поэтому следите за обновлениями.