ecommerce management system

Серверная система управления элементом

Система управления серверной частью электронной коммерции, основанная на Vue, использующая модель разработки разделения внешнего и внутреннего интерфейса. Стеки интерфейсных технологий, используемые в проекте, включают Vue, vue-router, Element-UI, Axios, Echarts и т. д.

Выбор технологии

Стек интерфейсных технологий:

• Вю
• Vue-роутер
• Элемент-UI
• Аксиос
• Эчартс

бизнес-функция

Технические моменты, связанные с функциями

1. Вход пользователя

• После успешного входа пользователя в систему клиент запоминает и поддерживает свой статус входа через sessionStorage и token .

• Управляйте разрешениями доступа пользователей с помощью защиты навигации по маршруту router.beforeEach . Запретите пользователям, не вошедшим в систему, попытки получить доступ к другим страницам, кроме страницы входа, через URL-адрес.

2. Макет домашней страницы

• макет
  • Реализуйте макет домашней страницы с помощью библиотеки компонентов Element-UI .
  • Используйте <el-menu> для реализации боковой панели навигации и добавьте атрибут activePath в sessionStorage чтобы панель навигации оставалась выделенной.
  • Значок на боковой панели навигации использует библиотеку векторных значков Iconfont Alibaba.
• запрос данных
  • Запросите данные интерфейса через Axios и добавьте токен в перехватчик запросов Axios, чтобы гарантировать разрешение на получение данных.
  • Используйте индикатор выполнения NProgress для отображения хода загрузки страницы (запроса данных).

3. Управление пользователями – список пользователей.

• Используйте <el-form> , чтобы добавлять пользовательские формы, настраивать правила проверки форм, а также выполнять сброс формы и предварительную проверку перед отправкой.

• Используйте slot-scope для получения данных о компонентах и ​​настройки шаблонов рендеринга.

4. Управление разрешениями

• список ролей

  • Используйте трехуровневый цикл v-for для визуализации разрешений первого, второго и третьего уровня роли соответственно.

  • Используйте элемент управления деревом <el-tree> для отображения списка разрешений, назначаемых ролями.

• Список разрешений

5. Управление товарами

• Список продуктов

  • Используйте глобальный фильтр Vue.filter чтобы настроить формат отображения объектов Date.

• Добавить продукт

  • Используйте компонент панели шагов <el-steps> , чтобы помочь пользователям заполнить форму добавления продукта в соответствии с процессом.

  • Используйте компонент <el-upload> , чтобы пользователи могли загружать изображения продуктов.

  • Используйте редактор форматированного текста vue-quill-editor чтобы пользователи могли заполнять содержимое продукта.

  • Используйте <el-form> , чтобы заполнить форму добавления продукта, настроить правила проверки формы и реализовать предварительную проверку перед отправкой формы.

• Параметры классификации

• Классификация продукции

  • Используйте компонент древовидной таблицы vue-table-with-tree-grid для отображения классификации продуктов первого, второго и третьего уровня.

6. Управление заказами – список заказов

• Используйте компонент временной шкалы <el-timeline> для отображения логистической информации о заказе.

7. Статистика данных – отчеты о данных

• Используйте Echarts для отображения отчетов о пользовательских данных.

---

Зависимости проекта

Запуск зависимостей

• axios => Отправить запрос
• эчарты => графики
• element-ui => Библиотека компонентов Element-UI
• lodash => глубокое копирование и слияние объектов
• nprogress => индикатор выполнения
• vue-quill-editor => Редактор форматированного текста
• vue-table-with-tree-grid => древовидная таблица

Зависимости развития

• Babel => преобразование синтаксиса ES6
• eslint/babel-eslint => проверка синтаксиса
• sass/sass-loader => синтаксис sass
• Babel-plugin-transform-remove-console => Удалить консоль из производственной среды
• @babel/plugin-syntax-dynamic-import => Ленивая загрузка маршрутов

Оптимизация проекта

1. Создать отчет об упаковке

Просматривайте отчеты об упаковке через панель визуализации пользовательского интерфейса Vue и анализируйте, как оптимизировать/сжимать слишком большие файлы.

2. Настройте веб-пакет

• Укажите разные файлы записи упаковки для режима разработки и режима выпуска через chainWebpack

  1. Файл записи режима разработки src/main-dev.js
  2. Файл записи режима выпуска src/main-prod.js

• В производственной среде некоторые слишком большие сторонние библиотеки будут внедрены с помощью CDN

  По умолчанию пакеты сторонних зависимостей, импортированные с помощью синтаксиса импорта, в конечном итоге будут упакованы и объединены в один и тот же файл, что приводит к проблеме, заключающейся в том, что размер одного файла становится слишком большим после успешной упаковки.

  Чтобы решить вышеуказанные проблемы, вы можете настроить зависимости, необходимые для загрузки внешних ресурсов CDN через externals узел Webpack. Любые сторонние пакеты зависимостей, объявленные во внешних файлах, не будут упакованы.

• Настройте содержимое домашней страницы различных сред с помощью плагинов (например, используйте импорт для импорта зависимых пакетов в режиме разработки и используйте CDN для импорта в режиме выпуска).

   // Vue.config.js
  config . plugin ( 'html' ) . tap ( args => {
      args [ 0 ] . isProd = true / false
      return args
  } ) 

   <!-- index.html -->
  < title > < %= htmlWebpackPlugin.options.isProd ? '' : 'dev-' % > Element后台管理系统</ title >
  < % if(htmlWebpackPlugin.options.isProd) { % >
      此处为CDN引入的第三方资源
  < % } % > 

3. Ленивая загрузка маршрутов

При упаковке проектов слишком большие пакеты js будут влиять на скорость загрузки страницы.

Используйте плагин @babel/plugin-syntax-dynamic-import и измените маршрутизацию для загрузки по требованию. Соответствующий компонент будет загружен только при доступе к маршруту.

Настройка проекта

 npm install

Компилирует и выполняет горячую перезагрузку для разработки.

 npm run serve

Компилирует и минифицирует для производства

 npm run build

Линты и исправления файлов

 npm run lint