Cree una plataforma de compras sencilla desde cero (1)

Escribí este proyecto en mi tiempo libre. La interfaz de la aplicación del centro comercial se escribe principalmente imitando el pequeño programa de los vendedores de bocadillos , y el resto lo escribo yo mismo.

Código fuente del proyecto (actualización continua): https://gitee.com/DieHunter/myCode/tree/master/shopping

Tecnología utilizada:

Backend : nodo + express + MongoDB

Interfaz de gestión : react + antd

Interfaz de la tienda (terminal móvil): Vue + Mint UI

Herramientas de desarrollo: npm

Herramienta de empaquetado : webpack

Gestión de código : git

Pila de tecnología :

• （（Express, mangosta, cors, body-parser, multer, jsonwebtoken, crypto-js, bcryptjs, nodemailer）
• 管理 界面 （reaccionar, antd, axios, crypto-js, less, less-loader, react-router-dom, events, redux）
• Interfaz de tienda (vue, vue-router, vuex, axios, jquery, less, less-loader, mint-ui, swiper)

Listo para trabajar:

Configuración de herramientas

1. Instalación de nodo: descargue e instale nvm o descargue directamente la instalación de nodejs , si usa nvm, use

   nvm install [email protected]
   nvm use 12.16.1

    

2. Después de instalar el nodo, verifique las variables de entorno (haga clic con el botón derecho en Mi PC => Propiedades => Configuración avanzada del sistema => Variables de entorno). De lo contrario, agregue el directorio del nodo a las variables de entorno.

3. configuración npm:

   npm config set registry https://registry.npm.taobao.org    //将默认下载地址设置为淘宝镜像
   npm config set prefix "D:\soft\nodejs\module_global"     //设置全局模块安装默认路径（后面直接将路径放到环境变量，可以直接使用）
   npm config set cache "D:\soft\nodejs\module_cache"//设置全局模块缓存路径

    

4. Instale mongoDB: descargue e instale MongoDB , configure las variables de entorno como nodo, ingrese mongo en cmd, si aparece algo como esto, significa que la instalación y configuración fueron exitosas
   

5. webpack: instale webpack-cli y webpack globalmente usando npm

   npm i paquete web paquete web-cli -g 

Construcción de back-end

1. Crear una nueva carpeta de proyecto . Creo server.js (archivo de entrada) directamente después de crear la carpeta de back-end aquí, para que no sea necesario ingresar el nombre del proyecto cuando npm init
2. Use npm init -y para inicializar el proyecto de back-end y crear la estructura del archivo (como se muestra a continuación)
   
3.  Instale express, mongoose, cors (manejo de dominios cruzados de front-end), body-parser (que permite modificar los tipos de solicitud, en resumen, admite solicitudes de publicación), multer (habilita la carga de archivos para ser compatible), jsonwebtoken (generación de back-end de tokens unidireccionales, transmisión Al front-end para verificar el estado), crypto-js (solicitar cifrado de transmisión de datos), bcryptjs (cifrado de contraseña), nodemailer (enviar correo electrónico, código de verificación) y otros módulos

Hasta ahora, se ha construido un servidor básico

Construcción de la interfaz del sistema de gestión del servidor

1. Utilice npm install create-react-app -g para instalar la herramienta de andamio create-react-app de forma global y cree un nuevo directorio de proyecto
2. Ejecute la herramienta de andamio create-react-app myapp (nombre del proyecto) en el directorio del proyecto.
3. Configure webpack : necesita usar menos aquí. El lenguaje de preprocesamiento predeterminado proporcionado por react scaffolding es sass, por lo que debe exponer la configuración del proyecto react.
   Antes de exponer un eject en el archivo package.json en nuestro proyecto, ejecute npm run eject ( Nota: Esta operación es irreversible. Si no es necesario, lo mejor es no exponerlo. El principio del empaquetado del webpack es generar recursos estáticos a partir de las dependencias del proyecto, es decir, si no se usa ningún paquete, no tendrá ningún impacto)
4. Instale antd (ui), axios (solicitud de datos), crypto-js (solicitud de cifrado de transmisión de datos), react-router-dom (salto de ruta), redux (estado global)
5. 下载 menos 和 menos cargador,
   npm instalar menos cargador menos - guardar
6. Menos configuración: después de ejecutar eject, el elemento de expulsión en package.json desaparecerá. En este momento, habrá una carpeta de configuración adicional en el proyecto, que es el archivo de configuración de webpack. Abrimos el archivo webpack.config.js y buscamos la configuración predeterminada buscando. Los elementos de configuración de sass del sass, de acuerdo con el dibujo de calabaza, configuran menos y configuran de manera similar menos cargador (como se muestra a continuación)
   
7. Luego construya la estructura del proyecto en la carpeta src
   

Hasta ahora, se ha completado un proyecto de front-end de administración del lado del servidor básico

Construcción de interfaz de tienda

1. Utilice npm install -g vue-cli para instalar la herramienta de andamio vue-cli a nivel mundial
2. Inicialice el proyecto con vue init webpack + nombre del proyecto
3. Construye el directorio del proyecto
   
4. Instale vue-router (enrutamiento), vuex (estado global), axios (solicitud de front-end), jquery, less, less-loader, mint-ui (componente de interfaz de usuario móvil), swiper (complemento de carrusel)

La interfaz del centro comercial está construida

para resumir:

La esencia de la programación orientada a objetos es en realidad poner a prueba la propia comprensión y cognición de las ideas abstractas. Aunque no puede describir algunas cosas, existen. Considere lo que hay, no qué.