vue store
1.0.0
Las vacaciones de invierno de 2020 son particularmente especiales porque las escuelas aún no han comenzado debido a la epidemia de neumonía causada por el nuevo coronavirus. Recordé que usé mi tiempo libre para aprender Vue.js y Node.js el semestre pasado. Siempre quise hacer un proyecto completo para practicar, pero antes no tenía tanto tiempo en la escuela. Ahora que tengo algo de tiempo quiero hacer un proyecto para consolidar lo aprendido antes.
Después de mucha deliberación, finalmente decidí hacer un proyecto de comercio electrónico imitando al Xiaomi Mall. Tal vez ha pasado mucho tiempo y casi me olvido de muchas cosas que aprendí antes. Al hacer este proyecto, básicamente seguí los documentos oficiales y lo hice poco a poco. Es inevitable que haya varias cosas en casa que retrasen el avance del proyecto. Ahora está casi listo. Compartámoslo para que los novatos comiencen. Si hay algún error, por favor denme algún consejo.
El front-end y el back-end de este proyecto están separados. El front-end se implementa con referencia a Xiaomi Mall. Sin embargo, no tiene nada que ver con el sitio web oficial de Xiaomi. Productos Xiaomi, diríjase al centro comercial oficial de Xiaomi.
Este es el front-end de este proyecto. Muévase al servidor de la tienda para el back-end.
El front-end se ha implementado en Alibaba Cloud. Puede visitar http://101.132.181.9/ (no es compatible con dispositivos móviles, utilice una computadora para acceder).
El backend también se implementó en Alibaba Cloud y la dirección de la interfaz se cambió a una dirección en línea. El frontend que se ejecuta localmente también puede acceder al backend normalmente.
Estoy en mi tercer año de estudios universitarios y comenzaré una pasantía este verano. Puede que no tenga tanta libertad en el futuro, pero actualizaré y mejoraré el proyecto de vez en cuando. Si tiene alguna pregunta, por favor plantéela. directamente en Problemas.
Si cree que este proyecto es bueno, puede hacer clic en
Staren la esquina superior derecha para apoyarlo. ¡Gracias! ^_^
El front-end y el back-end de este proyecto están separados. El front-end se basa en Vue + Vue-router + Vuex + Element-ui + Axios y se implementa con referencia a Xiaomi Mall. El backend se implementa en base a Node.js(Koa框架) + Mysql .
La interfaz contiene 11 páginas: página de inicio, inicio de sesión, registro, todos los productos, página de detalles del producto, acerca de nosotros, mi colección, carrito de compras, página de liquidación de pedidos, mi pedido y página de manejo de errores.
Implementa funciones de visualización de productos, consulta de clasificación de productos, búsqueda de palabras clave de productos, visualización de información detallada del producto, inicio de sesión, registro, carrito de compras del usuario, liquidación de pedidos, pedido de usuario, lista de favoritos del usuario y manejo de errores.
El back-end adopta el modelo MVC y la interfaz, la capa de control y la capa de persistencia de datos correspondientes se diseñan de acuerdo con los módulos de datos requeridos por el front-end. Servidor-tienda de dirección de entrega backend.
Interfaz: Vue + Vue-router + Vuex + Element-ui + Axios
Backend: Node.js , Koa框架
Base de datos: Mysql
La página utiliza Dialog de element-ui para lograr el efecto de abrir el cuadro de diálogo de máscara. El botón登录se configura en el componente raíz App.vue, y si se muestra el cuadro de inicio de sesión se controla a través showLogin en vuex .
Este diseño es para que el usuario pueda iniciar sesión haciendo clic en el botón de la página, o el cuadro de inicio de sesión puede aparecer automáticamente después de que el usuario accede a una página que requiere verificación de inicio de sesión o el backend devuelve un mensaje que requiere verificación de inicio de sesión, lo que reduce los saltos de página. y simplificar las operaciones del usuario.
La entrada de datos por parte de los usuarios a menudo no es confiable, por lo que la información de inicio de sesión se verifica tanto en el front-end como en el back-end de este proyecto. El front-end se basa en el método de verificación de formulario de element-ui y tiene reglas de verificación personalizadas para la verificación.
La página también utiliza el Dialog de element-ui para lograr el efecto de abrir el cuadro de diálogo de máscara.注册se establece en el componente raíz de App.vue y el valor pasado a través del componente principal-hijo controla si se muestra el cuadro de registro. .
La entrada de datos por parte de los usuarios a menudo no es confiable, por lo que la información de registro también se verifica en la parte frontal y posterior de este proyecto. La parte frontal se basa en el método de verificación de formulario de element-ui y tiene reglas de verificación personalizadas para la verificación.
La página de inicio sirve principalmente para mostrar productos, con un carrusel que muestra los productos recomendados y los productos populares mostrados por categoría.
La página de todos los productos integra la visualización de todos los productos, la consulta de clasificación de productos y la visualización de resultados de búsqueda de productos según palabras clave.
La página de detalles del producto muestra principalmente la información detallada de un determinado producto, donde los usuarios pueden agregar sus productos favoritos al carrito de compras o a la lista de favoritos.
El carrito de compras se implementa utilizando vuex y el efecto de página se refiere al carrito de compras del centro comercial Xiaomi.
Para conocer el proceso de implementación detallado, consulte: Implementación del carrito de compras Xiaomi Mall basado en Vuex
Después de que el usuario seleccione el producto que desea comprar en el carrito de compras y haga clic en el botón "Ir a pagar", accederá a esta página. Aquí el usuario selecciona la dirección de entrega, confirma la información relevante sobre el pedido y luego confirma la compra.
Los usuarios pueden agregar sus productos favoritos a la lista de favoritos haciendo clic en el botón Agregar Me gusta en la página de detalles del producto.
Mostrar todos los pedidos realizados por el usuario.
Aviso:
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
página delantera
Todos los productos
carro de la compra
mi colección
mi pedido
Acceso
registro
Autor hai-27
8 de marzo de 2020
