Всем, у кого есть вопросы, рекомендуется задавать их здесь: https://gitee.com/wBekvam/vue-shop-admin/issues

Интернет-магазин для администраторов (проект на переднем крае) Предварительный просмотр

Задний API-интерфейс управления системой (проект переднего края) Скачать. API-интерфейсы

Если у вас есть какие-либо вопросы, пожалуйста, присоединяйтесь к группе для обсуждения, и мы постараемся ответить вам как можно скорее: 827923683

Функции

Используется для управления учётными записями пользователей, категориями товаров, информацией о товарах, заказами, статистическими данными и другими бизнес-функциями.

Режим разработки

Система управления интернет-магазином для администраторов в целом использует режим разработки с разделением переднего и заднего конца, причём проект переднего конца представляет собой SPA-проект, основанный на стеке технологий Vue.

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

Стек технологий проекта переднего конца

• Vue
• Vue-router
• Element-UI
• Axios
• Echarts

Стек технологий заднего проекта

• Node.js

• Express

• Jwt

• Mysql

• Sequelize

  API-интерфейсы.

  Задний исходный код скачать.

Инициализация проекта

Шаги инициализации проекта переднего конца

1. Установите Vue scaffolding.
2. Создайте проект с помощью Vue-Cli.
3. Настройте Vue-router.
4. Настройте компонентную библиотеку Element-UI.
5. Настройте библиотеку Axios.
6. Инициализируйте удалённый репозиторий git.

Соответствующие зависимости — импортировать по мере необходимости

Настройка среды и конфигурации заднего проекта

1. Установить MySQL базу данных.
2. Настроить среду Node.js.
3. Конфигурировать информацию, связанную с проектом.
4. Запустить проект.
   1. Импортируйте базу данных с помощью phpstudy и запустите её.
   2. npm init задний проект.
   3. node ./app.js.
5. Используйте Postman для проверки того, работает ли интерфейс заднего проекта нормально.

Обзор входа в систему

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

1. Введите имя пользователя и пароль на странице входа.
2. Вызовите задний интерфейс для аутентификации.
3. После успешной аутентификации перейдите на главную страницу проекта в соответствии с состоянием ответа заднего интерфейса.

Технические аспекты входа в систему

1. HTTP не имеет состояния.
2. Состояние сохраняется на клиенте через cookie.
3. Состояние сохраняется на сервере через session.
4. Состояние поддерживается через токен (не может использоваться для междоменного доступа).

Логика процесса входа в систему

Макет страницы входа

Реализован с использованием компонентов Element-UI:

• el-form
• el-form-item
• el-input
• el-button
• Значки шрифтов

Создать ветку git

// Создать и переключиться на ветку входа
git checkout -b login

// Объединить ветку входа с основной веткой
// 1. Переключитесь на основную ветку
git checkout master
// 2. Объедините ветку с основной
git merge login

// Отправить локальную ветку входа на github
git push -u origin login

Маршрутизация навигации по охране контролирует доступ

Если пользователь не вошёл в систему, но напрямую обращается к определённой странице через URL, необходимо перенаправить его на страницу входа.

// Для объекта маршрутизатора добавьте beforeEach перед навигацией
router.beforeEach((to,from,next) => {
    // Если вы переходите на страницу входа, просто пропустите
    if (to.path === 'login') return next()
    // Получить сохранённое значение токена из sessionStorage
    const tokenStr = window.sessionStorage.getItem('token')
    // Если нет токена, принудительно перейти на страницу входа
    if(!tokenStr) return next('/login')
    next()
})

Главная страница макета

Получение данных меню через интерфейс

Через перехватчик axios добавьте токен, чтобы гарантировать, что у него есть разрешение на получение данных.

// axios перехват
axios.interceptors.request.use(config => {
    // Добавьте поле авторизации с токеном в заголовок запроса
    config.headers.Authorization = window.sessionStorage.getItem('token')
    return config
})

Управление полномочиями

Анализ управления полномочиями

Модуль управления полномочиями используется для контроля различных операций, которые могут выполнять разные пользователи. Конкретно, управление полномочиями может быть реализовано через роли, то есть каждому пользователю назначается определённая роль, а роль включает различные функции.

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

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

1. Шаг 1:

module.exports = {
  chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
      // В vue.config.js следующая конфигурация:
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nporgress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })
    })
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}

2. Шаг 2:

В файле public/index.html в заголовке замените уже настроенные импорты (таблицы стилей) на импорт через CDN.

3. Шаг 3:

В файле public/index.html в заголовке удалите и замените уже настроенные импорты (файлы JavaScript) на импорт через CDN.

4. Сравнение ускорения с использованием CDN до и после упаковки (файл chunk-vendors):

Размер после анализа: 2,6 МБ → 596,9 КБ.

• Оптимизация использования CDN для elementui:

Конкретные шаги:

1. Закомментируйте код для отложенной загрузки element-ui в main-prod.js.
2. Загрузите стили CSS и скрипты JavaScript для element-ui через CDN в разделе заголовка index.html.

• Настройка домашней страницы:

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

Конфигурация в vue.config.js:

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

Модификация в index.html:

<!-- Режим разработки: использование import, режим выпуска: использование CDN -->
<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev-' %>vue-mall</title>
<% if(htmlWebpackPlugin.options.isProd) { %>
  css | js помещаются сюда
<% } %>

• Постепенная загрузка компонентов Element-UI:

Компоненты Element-UI загружаются по мере необходимости.

• Отложенная загрузка маршрутов:

Когда проект собирается, пакеты JavaScript становятся очень большими, что влияет на загрузку страниц. Если мы можем разделить различные компоненты, соответствующие разным маршрутам, на разные блоки кода и загружать их только при доступе к маршруту, это будет более эффективно.

Пример:

// Пример:
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

// import Login from '../components/Login.vue'
const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Login.vue')
// import Home from '../components/Home.vue'
const Home = () => import(/* webpackChunkName: "login_home_welcome" */
``` **Конкретное содержание статьи см. в разделе «Ссылки» внизу.**

### Проект запущен

#### Создание веб-сервера с помощью node

> Создаётся новый проект node и устанавливается express. С помощью express быстро создаётся веб-сервер, а папка dist, созданная после упаковки vue, размещается как статический ресурс. Ключевой код выглядит следующим образом:

```js
// 1. npm init -y
// 2. npm i express -S
// 3. Поместить упакованную папку dist в проект node
// 4. 
const express = require('express')
const app = express()

app.use(express.static('./dist'))
app.listen(80, () => {
    console.log('server runing at http://127.0.0.1')
})
// 5. Запустить проект с помощью узла app.js

Включение конфигурации gzip

Использование gzip для уменьшения размера файла и ускорения передачи данных.

Настроить gzip на сервере с помощью express:

// 1.npm install compression -S
// 2. Импортировать пакет
const compression = require('compression')
// 3. Включить промежуточное ПО
app.use(compression())

Настройка службы https

Зачем нужна служба https?

• Традиционный протокол http передаёт данные в виде открытого текста, что небезопасно.
• Протокол https шифрует передаваемые данные, предотвращая их перехват третьими лицами. Это более безопасный способ передачи данных.

Получить сертификат ssl (https://freessl.org). Для корпоративных целей обычно используется платный ssh (http по умолчанию работает на порту 80, https по умолчанию работает на порту 443).

Управление приложением с помощью pm2

1. Установить pm2 глобально: npm i pm2 -g
2. Запустить скрипт (например, ./app.js) с помощью pm2: pm2 start
3. Просмотреть список запущенных проектов: pm2 ls
4. Перезапустить проект: pm2 restart
5. Остановить проект: pm2 stop
6. Удалить проект: pm2 delete

Интерфейс API

Конфигурация vue.config.js

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

Настройка babel

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

Ошибки и исключения

1. При использовании Node.js версии 14+ может возникнуть ошибка:

Module build failed (from ./node_modules/babel-loader/lib/index.js): Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main resolved in /home/vue/vueShop/vue-shop-admin/node_modules/@babel/helper-compilation-targets/package.json at applyExports (internal/modules/cjs/loader.js:498:9) at resolveExports (internal/modules/cjs/loader.js:514:23) ...

Решение: npm install @babel/helper-compilation-targets --save-dev

2. Отключить проверку синтаксиса Eslint

Закомментировать строку кода в файле eslintsrc.js: '@vue/standard'