Новый стек технологий Vue реконструирует резюме бизнес-приложения г-на Хуанга Ele.me

Адрес склада проекта:GitHub.com/Конг Лингвен…

Онлайн-адрес проекта:http://123.57.204.48:5000

задний план

с тех пор как научилсяVueпозже вы можете использоватьVueРешенные сценарии и варианты использования, которые я использовал в максимально возможной степениVueдостигать. Простые требования варианта использования не имеют полного процесса разработки проекта, и то, что можно извлечь из него, также ограничено. В дополнение к использованиюVueсделалvue-musicпроект мобильного музыкального проигрывателя иvue-bytedanceJob(реконструируя официальный рекрутинговый сайт интернет-компании-единорога), я бесполезенVueбаловатьсяwebболее сложные бизнес-сценарии.

Чтобы найти проект для практики, я иду вgithubНачал поиск , увидевhttps://github.com/ustbhuangyi/vue-sellВо время этого проекта я почувствовал, что некоторые бизнес-сценарии этого мобильного приложения мне не были представлены, поэтому я последовал за приложением.UIа также功能используй свой собственныйСистема знанийа такжестек технологийПосле рефакторинга первый выполнил менее чем за полмесяцаcommitЭта статья отправлена ​​в проект для запуска в Интернете.Функция приложенияа такжеТехническая реализацияНекоторые аспекты анализируют процесс разработки этого проекта и карьеры, которые были добыты.

Скриншот проекта

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

1. внешний интерфейс
   • vueРазработка проекта Основная структура
   • axiosМодуль HTTP-запроса
   • lib-flexibleСхема адаптации мобильного экрана
   • better-scrollимитацияIOSМобильная библиотека прокрутки для эффектов
   • normalize.cssтретья сторонаcssмодуль инициализации стиля
   • es 6/7следующее поколениеjavascriptграмматика
2. задняя часть
   • expressСоздайте базовую структуру серверного приложения.
3. развивать
   • vue-cliЛеса инициализации проекта
   • vue-devtoolsСредства отладки среды разработки проекта
   • vscode chrome git macbookpro
4. развертывать
   • 代码托管仓库 GitHub.com/Конг Лингвен…
   • 线上地址 123.56.124.33:5000

Функция приложения

• страница продукта

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

• Страница комментариев

  • Отображение комплексной обзорной информации
  • Переключите кнопку элемента фильтра комментариев, чтобы отобразить соответствующую информацию.
  • Выберите, чтобы показать是否有内容的评论

• бизнес-страница

  • Отображение информации о торговом магазине
  • Любимый магазин
  • Реальная картина бизнесаbounceСкользящее отображение эффектов

• заголовок приложения

  • Нажмите, чтобы показать подробности
  • Информационный бюллетень с динамической прокруткой

• корзина

  • Отображение различных статусов в зависимости от количества элементов
  • Список товаров в корзине
  • платежное всплывающее окно
  • пустая корзина
  • Добавить/удалить элементы

• Применять локальную оптимизацию

bounce效果Относится к эффекту отскока при прокрутке страницы в приложении, и общая сценаIOSЭффект скольжения системного приложения

Функциональные трудности

Левый правый эффект навигации и контента продукта

Демонстрация эффекта

Полные кодовые точки компонентовGitHub.com/Конг Лингвен….

идеи

Поскольку навигация продукта и содержимое являются двумя независимыми контейнерами прокрутки, как можно активировать связанный элемент навигации при прокрутке к целевому блоку содержимого? Мы знаем, что список элементов навигации и список содержимого находятся в одном и том же порядке. интервальный блок в позиции прокрутки содержимого и получить целевой индекс, который должен активировать список навигации, а затем вы можете использоватьVueИдея представления, управляемого данными, для достижения всего этого.

Действие вокруг связывания контейнера означает активацию связанного с ним объекта-контейнера прокрутки для навигации по пункту меню и прокрутки до видимой области.

логическая реализация

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

templateчасть

<template>
    /* 这里只显示部分代码*/
     <ul class="foods-list">
          <li ref="foodsGroup" class="foods-group" v-for="(item,index) in data" :key="index">
            <dl class="foods-group-wrapper">
              <dt :class="{fixed:currentIndex===index}" class="foods-group-name">{{item.name}}</dt>
              <dd
                class="foods-group-item"
                v-for="(food ,key) in item.foods"
                :key="key"
              >
                 {{food.name}}
              </dd>
            </dl>
          </li>
        </ul>
</template>

scriptчасть

 
export default {
    data(){
      return {
          currentIndex: 0,//导航项激活的索引
          currentFood: {},
          data:[],
          sectionHeight: [0],//第一个高度块坐标`y`值为`0`
          // 渲染完成后的值为 `[0,1281,1459,1612,2000,2270,2565,2952,3574,4436]`
      }  
    },
    created() {
        request
          .get("/goods")
          .then(response => {
            this.data = response;
          })
          .then(() => {
            setTimeout(() => {
              const sections = this.$refs.foodsGroup;
    
              sections.reduce((prevTotal, current) => {
                const sectionHeight = prevTotal + current.clientHeight;
                this.sectionHeight.push(sectionHeight);
    
                return sectionHeight;
              }, 0);
            });
        });
  }
}

С каждым товарным блокомyКоординаты, следующим шагом будет регистрация события прокрутки элемента-контейнера путем нахождения положения прокрутки в реальном времени в функции обратного вызова.disanceYвsectionHeightТаким образом, позиция между двумя соседними элементами в массиве получает активируемый навигационный индекс.currentIndexЗначение , конкретный код реализуется следующим образом

<template>
    <div>
        <!--导航菜单-->
         <scroll class="menu">
            <ul class="menu-list">
              <li
                @tap="selectMenu(index)"
                class="menu-item"
                :class="{selected:currentIndex===index}"
                v-for="(item,index) in data"
                :key="index"
              >
               <span>{{ item.name}}</span>
              </li>
            </ul>
          </scroll>
          
        <!--商品内容-->
        <scroll ref="foodsScroll" @scroll="onFoodScroll" class="foods">
        <!--这里省略商品内容模板的代码-->
        </scroll>
    
    </div>
</template>

export default {

    // 这里省略其他代码
    
    methods:{
        onFoodScroll({ x, y }) {
          const distanceY = Math.abs(Math.round(y));
          for (let index = 0; index < this.sectionHeight.length; index++) {
            if (
              distanceY >= this.sectionHeight[index] &&
              distanceY < this.sectionHeight[index + 1]
            ) {
              this.currentIndex = index;
            }
          }
        }
    }
}

Полные кодовые точки компонентовGitHub.com/Конг Лингвен…. Поскольку контейнеры компоновки слева и справа основаны наbetter-scrollРеализована прокрутка страницы, так что тут нужно слушатьbetter-scrollкоторый предоставилscrollсобытие вместо собственного события прокрутки браузера. Проверитьbetter-scrollизscrollмероприятиеAPIточказдесь.

Добавить/удалить товары в корзину

Скриншот эффекта

полный кодGitHub.com/Конг Лингвен…

идеи

Добавление товаров в корзину – это функция с несколькими сценариями. Поскольку функция корзины – это многостраничный эффект привязки, изменение количества товаров в корзине в режиме реального времени также необходимо синхронизировать с содержимым продукта. страницу и страницу сведений о продукте. Сопоставление функции сjavascriptНа уровне языковой структуры данных нетрудно придуматьпередача ссылки на объектФункции можно использовать в качестве базовой архитектурной идеи для реализации этой функции, давайте перейдем к ее реализации.

выполнить

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

{
  "count": 0, // 此变量用来存储添加到购物车的数量
  "name": "皮蛋瘦肉粥",
  "price": 10,
  "oldPrice": "",
  "description": "咸粥",
  "sellCount": 229,
  "rating": 100,
  "info": "一碗皮蛋瘦肉粥，总是我到粥店时的不二之选。香浓软滑，饱腹暖心，皮蛋的Q弹与瘦肉的滑嫩伴着粥香溢于满口，让人喝这样的一碗粥也觉得心满意足",
  "ratings": [
    {
      "username": "3******b",
      "rateTime": 1469261964000,
      "rateType": 1,
      "text": "",
      "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
    }
  ],
  "icon": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
  "image": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
}

Так как каждый товар имеет добавление в корзинуселектор количествафункция, поэтому мы прямо даемселектор количества товараДизайн компонентовfoodInfoтип объектаprops, так что вУвеличение/уменьшение количества товараКогда прямое манипуляцияfoodInfoизcountсвойства для достижения эффекта синхронизации данных.

Код компонента /components/food-picker.vue

<template>
  <div class="food-picker" @click.stop>
    <div class="reduce-wrapper" @click="reduce">
      <i class="iconfont reduce"></i>
    </div>
    <div class="counter">{{foodInfo.count}}</div>
    <div class="add-wrapper" @click="add">
      <i class="iconfont add"></i>
    </div>
  </div>
</template>
<script>
export default {
  name: "food-picker",
  props: {
    foodInfo: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    reduce() {
      if (parseInt(this.foodInfo.count) > 0) {
        this.foodInfo.count--;
      }
    },
    add() {
      this.foodInfo.count++;
    }
  }
};
</script>
<style lang="less" scoped>
.food-picker {
  min-width: 180px;
  max-width: 200px;

  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  .iconfont {
    color: #00a0dc;
    font-size: 38px;
  }
  .counter {
    // margin: 0 20px;
  }
}
</style>

Следующая цель

На основе функций, которые были реализованы до сих пор, данные всего приложения представлены в видеjsonФормат файла хранится на сервере, и сервер не может его использоватьCRUDизAPIИнтерфейс доступен. Далее планирую сделатьопыт управленияи серверAPIОн используется для управления данными страницы внешнего интерфейса, чтобы данные всех модулей можно было настраивать, чтобы данные, отображаемые внешним интерфейсом, также были динамическими, а также удовлетворяла возможность интеграции трех терминалов в один проект. текущая ситуация.WebЭто необходимо для сценариев разработки с полным стеком.

Суммировать

Фактически разрабатывая такое сложное интерактивное приложение,VueИспользование и понимание в реальных бизнес-сценариях является шагом дальше. глубоко пониматьVueизИзменения представлений, управляемых даннымиподумал, освоилразработка компонентаПроцесс проекта также ощутил приносимое им удобство и построил мост для средних и крупных проектов, которыми я собирался заниматься дальше.

служба поддержки

Если этот проект полезен для вашего обучения, пожалуйста, нажмитеstarGitHub.com/Конг Лингвен…. Я также надеюсь, что вы продолжите следить за моими новостямиGitHub.com/Конг Лингвен…, с вашей поддержкой я буду мотивирован открывать более интересные проекты с открытым исходным кодом.

Лайки и комментарии приветствуются, спасибо!

Эта статья принадлежит оригинальному автору, пожалуйста, указывайте источник для перепечатки ссылки, спасибо!