Регистрация входа в Vue - милый кот наггетс

Vue.js

阅读时间预计5分钟,干货满满,记得点赞加收藏哦😄

🎉Vue создает крупномасштабные одностраничные приложения для электронной коммерции с открытым исходным кодом! Нажмите на меня, чтобы увидеть исходный код 🚀🚀

1. Пишите впереди

Дорогие друзья,давно ждал.Недавно пишу практический проект семейного ведра Vue+Vant по разработке и сборке приложения для электронной коммерции с нуля.Проект в основном завершен,поделюсь с Время от времени я с нетерпением жду вашего внимания.

2. Зарегистрируйтесь и авторизуйтесь

Регистрация и вход в систему являются важным модулем почти для всех приложений электронной коммерции. Как раз сегодня я хочу взять эти знания и подробно описать их. Те, кто использовал Nuggets, знают, что интерфейс входа в систему Nuggets для ПК очень симпатичный. Когда вы входите в учетную запись, милый кот будет очень счастлив. Когда вы вводите пароль, милый кот закрывает глаза. Когда я вижу этот милый дизайн, он мне очень нравится, поэтому я позаимствовал изображение милого кота Наггетс и написал модуль регистрации входа в систему, ниже приведен полный пользовательский интерфейс.


В-третьих, общие идеи построения пользовательского интерфейса.

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

4. Использование Ванта

VantЭто компонент пользовательского интерфейса с открытым исходным кодом, который очень подходит для приложений электронной коммерции. Его очень удобно использовать. Весь мой проект построен с использованием пользовательского интерфейса Vant, который имеет единый стиль и прост и удобен в использовании. Во-первых, внедрите Vant в проект.Рекомендуется создать отдельный файл для управления модулем импорта компонентов Vant, загружать его по требованию, и принцип заключается в том, чтобы загружать тот, который используется.

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

Vant tabСогласно документации, он очень прост и удобен в использовании.

В поле ввода используется компонент поля Ванта.Vant Field

Кнопка использует компонент кнопки Ванта.Vant Button

Пять, милый кот переключается

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

// 改变萌猫
    changeImage (index) {
      if (index == 0) {
        this.imageURL = require('./../../images/login/greeting.png')
      } else if (index == 1) {
        this.imageURL = require('./../../images/login/blindfold.png')
      } else {
        this.imageURL = require('./../../images/login/normal.png')
      }
    },

6. Обратный отсчет

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

 // 发送手机验证码
    sendVerifyCode () {
      Toast({
        message: '发送验证码',
        duration: 800

      });
      this.countDown = 60;
      this.timeIntervalID = setInterval(() => {
        this.countDown--;
        // 如果减到0 则清除定时器
        if (this.countDown == 0) {
          clearInterval(this.timeIntervalID);
        }
      }, 1000)
    }

7. Регулярная проверка номера мобильного телефона

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

 computed: {
    // 手机号码正确验证
    phoneNumVerify () {
      return /[1][3,4,5,6,7,8][0-9]{9}$/.test(this.tel_registered);
    }
  },

Восемь, модуль кода подтверждения

Код подтверждения на самом делеimgИнтерфейс запроса тега получает изображение, и при щелчке по изображению он снова запрашивает последнее изображение.

// 切换验证码
    getCaptcha () {
      // 获取验证码的标签
      let captchaEle = this.$refs.captcha;
      this.$set(captchaEle, 'src', 'http://192.168.0.1/web/xlmc/api/captcha?time=' + new Date());
    },

9. Резюме

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

10. Завершить проект электронной коммерции

Домашний модуль

Модуль классификации

что есть модуль

модуль корзины покупок


модуль персонального центра

图片说明

Прошлая ссылка на общий доступ

Наконец, спасибо за внимание!

мой GitHub, надеюсь получить твою звездочку~

Я надеюсь, что мой обмен может быть вам полезен, и я надеюсь получить ваши опечатки, если есть какие-либо неточности!Я буду очень благодарен, и если вы хотите получить все обучающее видео и материалы по интерфейсу, отсканируйте QR-код ниже и ответьучитьсяВот и все, и я надеюсь, что на пути развития фронтенда мы вместе будем расти и вместе добиваться прогресса!

Категории