vue store
1.0.0
Зимние каникулы 2020 года особенные, поскольку школы еще не открылись из-за эпидемии новой коронавирусной пневмонии. Я вспомнил, что в прошлом семестре я изучал Vue.js и Node.js Мне всегда хотелось создать полноценный проект для практики, но раньше у меня не было столько времени в школе. Теперь, когда у меня есть немного времени, я хочу сделать проект, чтобы закрепить то, что я узнал раньше.
После долгих раздумий я наконец решил сделать проект электронной коммерции, имитирующий Xiaomi Mall. Возможно, прошло много времени, и я почти забыл многие вещи, которым научился раньше. Работая над этим проектом, я в основном следовал официальным документам и делал это постепенно. Неизбежно, что дома будут происходить различные вещи, которые замедлят продвижение проекта. Теперь все почти готово. Давайте поделимся этим для новичков. Если есть какие-либо ошибки, дайте мне несколько советов.
Интерфейс и серверная часть этого проекта разделены. Интерфейс реализован со ссылкой на Xiaomi Mall. Однако он не имеет никакого отношения к официальному сайту Xiaomi. Это чисто личная лажа. Продукты Xiaomi, пожалуйста, посетите официальный торговый центр Xiaomi.
Это интерфейс этого проекта. Перейдите на сервер хранилища для серверной части.
Интерфейс развернут в Alibaba Cloud. Посетите http://101.132.181.9/ (он несовместим с мобильными устройствами, для доступа используйте компьютер).
Серверная часть также была развернута в Alibaba Cloud, а адрес интерфейса был изменен на онлайн-адрес. Интерфейс, работающий локально, также может нормально обращаться к серверной части.
Я учусь на третьем курсе бакалавриата и этим летом начну стажировку. Возможно, в будущем у меня будет не так много свободы, но я буду время от времени обновлять и улучшать проект. Если у вас есть вопросы, задавайте их. прямо в вопросах.
Если вы считаете этот проект хорошим, вы можете нажать
Starв правом верхнем углу, чтобы поддержать его. Спасибо! ^_^
Фронтенд и бэкенд этого проекта разделены. Фронтенд основан на Vue + Vue-router + Vuex + Element-ui + Axios и реализован со ссылкой на Xiaomi Mall. Бэкенд реализован на базе Node.js(Koa框架) + Mysql .
Интерфейс содержит 11 страниц: домашняя страница, вход в систему, регистрация, все продукты, страница сведений о продукте, о нас, моя коллекция, корзина, страница оплаты заказа, страница моего заказа и обработки ошибок.
Он реализует отображение продукта, запрос классификации продукта, продукт для поиска по ключевым словам, отображение подробной информации о продукте, вход в систему, регистрацию, корзину покупок пользователя, расчет заказа, заказ пользователя, список избранного пользователя и функции обработки ошибок.
Внутренняя часть использует модель MVC, а соответствующий интерфейс, уровень управления и уровень сохранения данных разрабатываются в соответствии с модулями данных, необходимыми внешней части. Серверный адрес доставки хранилища-сервера.
Интерфейс: Vue + Vue-router + Vuex + Element-ui + Axios
Бэкенд: Node.js , Koa框架
База данных: Mysql
На странице используется Dialog element-ui для достижения эффекта всплывающего диалогового окна маски. Кнопка登录устанавливается в корневом компоненте App.vue, а отображение окна входа контролируется через состояние showLogin в vuex .
Эта конструкция предназначена для того, чтобы пользователь мог войти в систему, нажав кнопку на странице, или окно входа в систему могло автоматически появиться после того, как пользователь обращается к странице, требующей проверки входа в систему, или серверная часть возвращает приглашение, требующее проверки входа в систему, что уменьшает количество переходов по страницам. и упрощение операций пользователя.
Ввод данных пользователями часто ненадежен, поэтому информация для входа проверяется как на передней, так и на внутренней стороне этого проекта. Внешний интерфейс основан на методе проверки формы element-ui и имеет настроенные правила проверки.
На странице также используется Dialog element-ui для достижения эффекта всплывающего диалогового окна маски. Кнопка注册установлена в корневом компоненте App.vue, а значение, передаваемое через родительско-дочерний компонент, определяет, будет ли отображаться окно регистрации. .
Введенные пользователями данные часто ненадежны, поэтому регистрационная информация также проверяется на внешней и внутренней стороне этого проекта. Интерфейс основан на методе проверки формы element-ui и имеет настроенные правила проверки.
Домашняя страница в основном предназначена для отображения продуктов, а карусель показывает рекомендуемые продукты и популярные продукты, отображаемые по категориям.
Страница всех продуктов объединяет отображение всех продуктов, запрос классификации продуктов и отображение результатов поиска продуктов на основе ключевых слов.
На странице сведений о продукте в основном отображается подробная информация об определенном продукте, где пользователи могут добавлять свои любимые продукты в корзину или список избранного.
Корзина покупок реализована с использованием vuex, а эффект страницы относится к корзине покупок Xiaomi Mall.
Подробный процесс реализации см. в разделе «Реализация корзины покупок Xiaomi Mall на основе Vuex».
После того как пользователь выберет в корзине приобретаемый товар и нажмет кнопку «Перейти к оформлению», он попадет на эту страницу. Здесь пользователь выбирает адрес доставки, подтверждает соответствующую информацию о заказе, а затем подтверждает покупку.
Пользователи могут добавлять свои любимые продукты в список избранного, нажав кнопку «Добавить лайк» на странице сведений о продукте.
Отображение всех заказов, размещенных пользователем.
Уведомление:
1. Clone project
git clone https://github.com/hai-27/vue-store.git
2. Project setup
cd vue-store
npm install
3. Compiles and hot-reloads for development
npm run serve
4. Compiles and minifies for production
npm run build
первая страница
Все продукты
корзина
моя коллекция
мой заказ
Авторизоваться
зарегистрироваться
Автор hai-27
8 марта 2020 г.
