Проект уличного торгового центра с имитацией грибов Vue (vue + koa + mongodb)

JavaScript

1 Введение

Привет, меня зовут Сикс Сикс. Проучившись долгое время, я хотел сделать проект, чтобы тренироваться, поэтому я влюбился в Могуцзе (там много красивой одежды и красавиц, хахаха). Поэтому я планирую сделать проект с нуля на официальном сайте Mogujie, и теперь проект наконец-то онлайн. Если у вас есть какие-либо вопросы или предложения по проекту, вы можете оставить комментарий, я приветствую всех, кто может прийти и высказать свое мнение.

адрес гитхаба:github.com/6sy/myShop

2 Введение в проект

  • функция входа, выхода
  • Функция регистрации
  • Функция отображения продукта
  • Функция поиска пользователя
  • Избранное пользователя
  • функция корзины
  • Функция заказа
  • персональный центр
  • Сменить аватар
  • Торговый чат
  • проблема развития
  • Проблемы с развертыванием
  • Оптимизация проекта

3. Модуль регистрации входа

анализ спроса:

Полное имя пользователя, регистрация пользователя и регистрационная информация хранятся в базе данных.

Внешний вид страницы vue, использование axios для выполнения запросов данных, использование koa для создания серверов, использование механизма проверки токенов, использование базы данных mongodb, использование bcryptjs для шифрования паролей

Анализ производительности:

Используйте тест низкой скорости сети, чтобы проверить наличие проблемы, она была решена. в 10,2

4. Функция отображения продукта

анализ спроса:

Показать рекомендуемые продукты, а также конкретизировать каждый продукт.

технический анализ:

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

строить планы:

5. Модуль поиска пользователей

анализ спроса:

Завершите функцию поиска пользователями продуктов и отобразите искомые элементы в соответствии с их потребностями. и сохраните историю поиска.

технический анализ:

Передайте параметры компоненту через маршрут, и компонент загрузит соответствующий продукт через сетевой запрос через параметр.

6. Любимая функция пользователя

анализ спроса:

Завершите функцию сбора и разгрузки продуктов.

технический анализ:

В каждом пользователе есть атрибут user_collect, который содержит массив, и при сборе в этот массив нужно добавить id продукта. Каждый раз, когда вы вводите продукт, просматривайте этот массив, чтобы определить, есть ли этот идентификатор, и добавьте стиль, если он есть. Отмените сбор, чтобы удалить его из массива.

7. Функция корзины

анализ спроса:

Добавляйте товары в корзину, делайте выбор в корзине и добавляйте в заказ.

технический анализ:

Добавленный товар сохраняется в базе данных, и страница корзины запрашивает данные корзины через сеть.

9. Функция заказа

анализ спроса:

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

экспонат:

10. Персональный центр

анализ спроса:

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

экспонат:

11. Сменить аватар

анализ спроса:

Реализовать загрузку аватаров пользователей и пользовательскую обрезку

технический анализ:

Для обрезки используется технология canvas, а изображение загружается на сервер через FormData.

Изображение эффекта:

вопрос:

  • Обрезка реализована, но размер не настраиваемый и будет постепенно улучшаться в будущем.

12. Торговый чат

анализ спроса:

Чтобы реализовать общение между пользователями и продавцами, у продавца есть список для записи всех пользователей чата.

технический анализ:

Используйте socket.io для связи. Компоненты Vue используют связь по шине.

Изображение эффекта:

вопрос:

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

13. Проблемы, возникающие при разработке

13.1:

При использовании koa для написания промежуточного ПО обязательно используйте асинхронность.

13.2 Слишком низкая скорость Интернета: ошибка:

Когда скорость сети слишком низкая, регистрация не может быть выполнена, и нет ответа на нажатие кнопки «Регистрация»:
анализировать: из-за низкой скорости сети, когда учетная запись неоднократно проверяется, если она не проходит проверку, она уже была нажата для регистрации. В настоящее время учетная запись, прошедшая оценочную переменную, все еще ложна. Даже если она удовлетворена , его нельзя зарегистрировать, потому что условий недостаточно.

 if (this.isAccount && this.isPassword) {......}        //通过条件，进行网络请求

решить: Объявите переменную isClick, которая будет иметь значение true, если будет сочтено, что она соответствует этой ситуации.После того, как учетная запись успешно повторит сетевой запрос, регистрация будет отправлена ​​повторно.

13.3: Ошибка обновления:

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

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

13.4: Ошибка обновления

определить пустой объектанализировать: Когда компонент чата обновляется, поскольку данные вводятся через параметры компонента, если данные теряются из-за обновления, данные и представление сообщают об ошибке, и вы можете судить, является ли this.$route.params пустой объект.решить:

    isEmptyObj (obj) {
      return (Object.prototype.toString.call(obj) === '[object Object]')
        && (Object.getOwnPropertyNames(obj).length === 0)
        && (Object.getOwnPropertySymbols(obj).length === 0)
    }

13.5: проблема рендеринга vue:

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

      chatUsers: {
        '小李': [{ 'msg': 'obj' }, { 'msg': '你好啊' }],
        '小张': [{ 'msg': 'obj' }, { 'msg': '你好啊' }]
      }

Требование: получить последнее предложение истории чата каждого пользователя и отобразить его. Поэтому легко использовать v-for.

    <!-- 聊天列表 -->
    <ul>
      <li v-for='(item,index) in chatUsers'
          :key='index'>{{item[item.length-1]['msg']}}</li>      
    </ul>

Ошибка:

Анализ: Судя по причине ошибки, это, вероятно, ошибка рендеринга, но логика не проблема, просто не могу получить атрибут msg.
Решение: поэтому я изменил свое мнение и настроил объект для хранения последнего предложения записи чата.

      // 最后聊天信息
      chatLastMsg: {

      }

  // 将这个对象的属性设为响应式
    handleMsg (msg) {
      if (!this.chatUsers[msg.name]) {
        this.$set(this.chatUsers, msg.name, [])
        this.$set(this.chatLastMsg, msg.name, '')
      }

//每次传入消息都赋值给这个对象，也就是最后一次消息了
 this.chatLastMsg[msg.name] = msg.msg

13.6 Ошибка запроса данных:

Нашел код проблемы:

 this.shop = Object.keys(this.cartList)

Анализ: когда страница корзины открыта, необходимо сделать запрос, но когда корзина пуста, данные, возвращаемые запросом, делаютthis.cartListне определено, что приводит к ошибке.

решить:

this.cartList? this.shop = Object.keys(this.cartList):this.shop=[]

14. Проблемы с развертыванием

14.1 Путь загрузки изображения:

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

14.2 Импортируйте локальную базу данных в базу данных сервера:

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

Решение: повторно создайте коллекцию на стороне сервера и импортируйте локальные данные в коллекцию, чтобы использовать ее.

15. Оптимизация производительности

Перед оптимизацией: наверное нужно выгрузить7 секундВлево и вправо, можно сказать, довольно страшно. Ресурс ядра около 600кб.

1. Введите cdn

Один файл сжат с 600kb до 300kb

2. Включите сжатие gzip.

Один файл был сжат с 300 КБ до 90 КБ, а время загрузки также сократилось до1.5sоколо. (зависит от факторов кэша)

3. Маршрутизация ленивой загрузки

Отложенная загрузка ресурсов, соответствующий js-модуль будет загружен при доступе к нему вместо загрузки всех ресурсов в первый раз.

Первая загрузка основных ресурсов изменена с 90кб до 48кб.

4. Свойства больше не являются реактивными: ожидается

5. Сжатие изображений

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

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

После сжатия загрузка изображения может стабилизироваться в течение 100 мс, что значительно улучшает взаимодействие с пользователем.

16. Резюме

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

Категории