BAI_SHOP

Proyecto BAI_SHOP

1. Introducción al proyecto

Introducción del proyecto: este proyecto adopta el modelo de desarrollo de separación de front-end y back-end. vue_api_server es el archivo de código de back-end, vue_shop es el archivo de código de desarrollo de front-end y vue_shop_server es el archivo de código de producción de front-end. , ejecutar vue_shop_server directamente será mucho más fácil que vue_shop

Pila de tecnología de proyectos front-end	ilustrar
vista	Un marco progresivo para crear interfaces de usuario.
enrutador vue	vue-router es el administrador de enrutamiento oficial de vue.js
Elemento-UI	ElementUI Element es una biblioteca de componentes basada en Vue 2.0 preparada para desarrolladores, diseñadores y gerentes de productos. Proporciona recursos de diseño de soporte para ayudar a que su sitio web tome forma rápidamente.
axios	axios es una biblioteca Http basada en Promise que se puede utilizar en entornos y navegadores node.js
Cartas electrónicas	En pocas palabras, ECharts es un complemento utilizado por la base de datos backend para asignar datos a gráficos en el proceso de desarrollo de programas de Internet.

Pila de tecnología de proyecto backend	ilustrar
Nodo.js	nodejs es un lenguaje desarrollado en C++ que se ejecuta en el lado del servidor. Puede escribir programas en segundo plano de sitios web y desarrollar aplicaciones en el lado del servidor.
Expresar	Express es un marco de desarrollo de aplicaciones web minimalista y flexible basado en la plataforma Node.js. Proporciona una serie de funciones potentes para ayudarle a crear varias aplicaciones web y para dispositivos móviles.
wxya	json web token es un estándar abierto basado en json implementado para entregar reclamos en un entorno de aplicación web
mysql	base de datos
Secuela	Sequelize.js proporciona acceso sencillo a bases de datos MySQL, MariaDB, SQLite y PostgreSQL asignando entradas de bases de datos a objetos u objetos a entradas de bases de datos. En resumen, es ORM (Object-Relational-Mapper). Sequelize.js está escrito completamente en JavaScript y es adecuado para entornos Node.js.

2. Descripción del documento

1.Descripción del archivo vue_api_server

• directorio del archivo de configuración config
  • Archivo de configuración predeterminado default.json (que contiene la configuración de la base de datos, configuración jwt)
• Capa de acceso a datos dao , que almacena las operaciones de adición, eliminación, modificación y consulta de la base de datos.
  • Métodos de acceso a bases de datos públicas proporcionados por DAO.js
• models almacenan archivos de modelo ORM de bases de datos específicos.
• modules del proyecto actual
  • Módulo de verificación de permisos API authorization.js
  • Módulo de base de datos database.js (la carga de la base de datos se basa en la carga de la biblioteca nodejs-orm2)
  • passport.js está construido en base al módulo de inicio de sesión de Passport.
  • Interfaz de resultados de devolución unificada de la API resextra.js
• Módulos de terceros de los que depende node_modules
• routes unificado
  • api proporciona una interfaz api
  • mapp proporciona una interfaz de aplicación móvil
  • mweb proporciona sitios web móviles
• Capa de servicio services , el código de lógica empresarial se escribe en esta capa y los datos obtenidos a través de diferentes interfaces se convierten en los datos requeridos por el front-end unificado.
• archivo de entrada del proyecto principal app.js
• archivo de configuración del proyecto package.json

2.Descripción del archivo vue_shop

• carpeta dist La carpeta generada después del empaquetado del proyecto (para el entorno de producción)

  • Contiene css , fonts , img , js , favicon.ico e index.html
  • Simplemente inicie un servidor simple, monte el proyecto, ejecute el servidor y acceda al puerto predeterminado
  • Cómo ejecutar el proyecto vue empaquetado: https://www.cnblogs.com/zhujiabin/p/10557982.html

• La carpeta public almacena recursos estáticos.

  • Contiene archivos favicon.ico e index.html

• La carpeta src es la carpeta donde se almacena el programa fuente.

  • assets : almacena algunos archivos de recursos más grandes del proyecto, como imágenes, fuentes, etc.

  • components : almacena los subcomponentes del proyecto vue

  • plugins : componentes element-ui introducidos por el proyecto

  • router : enrutamiento del proyecto index.js

  • tools : clase de herramienta de proyecto

  • App.vue : componente raíz de vue

  • main.js : entrada web

• Otros archivos de configuración

  • .browserslistrc : esta configuración puede compartir el navegador de destino y la versión de nodejs en diferentes herramientas de front-end. Estas herramientas se pueden configurar automáticamente según el navegador de destino.
  • .editorconfig : ayuda a los desarrolladores a definir y mantener estilos de codificación consistentes en diferentes editores e IDE
  • .eslintignore : configura archivos que no están verificados por eslint ( ESLint es un complemento y una herramienta configurable de verificación de estilo de código y reglas gramaticales de JavaScript)
  • .eslintrc.js : archivo de configuración eslint
  • .gitignore : establece archivos ignorados por git
  • .prettierrc : Cuando usamos el formato de clic derecho, automáticamente nos ayudará a completar los símbolos. Sin embargo, algunos símbolos informarán errores de sintaxis en eslint, entonces, ¿qué debemos hacer? Puede configurar el archivo a través de .prettierrc.
  • babel.config.js : archivo de configuración de Babel ( Babel es una cadena de herramientas que se utiliza principalmente para convertir el código de la versión ECMAScript 2015+ en una sintaxis JavaScript compatible con versiones anteriores para que pueda ejecutarse en versiones actuales y anteriores de navegadores u otros entornos)

3.Descripción del archivo vue_shop_server

• Los archivos del proyecto del entorno de producción empaquetados por vue_shop en la carpeta dist
• Contiene css , fonts , img , js , favicon.ico e index.html
  • Al ejecutar el proyecto, primero elimine node_modules , luego ingrese al directorio vue_shop_server y ejecute npm install para volver a descargar el nuevo paquete de dependencia.
  • Después de descargar el paquete de dependencia, ejecute el comando nodemon app.js en la ventana del documento y visite http://localhost:3000 para ver la página de inicio del proyecto.
• El servidor de archivos app.js ejecuta el archivo de entrada, que contiene algunas configuraciones básicas para el servidor.

3. Precauciones para la operación del proyecto

1. Descargue y descomprima BAI_SHOP.zip

2. Ingrese a vue_api_server/db e importe mydb.sql en la carpeta db a la base de datos mysql.

3. Una vez que los datos se hayan importado correctamente, abra el archivo default.json en la carpeta config y configure db_config en él.

4. Abra la ventana de comando doc, ingrese al directorio vue_api_server y ejecute el comando npm install para cargar las dependencias requeridas para el proyecto.

5. Una vez cargadas las dependencias, ejecute nodemon app.js para ejecutar

6. Abra una nueva ventana de comando de documento, ingrese al directorio vue_shop y ejecute el comando npm install para cargar las dependencias requeridas para el proyecto.

7. Una vez cargadas las dependencias, ejecute el comando npm run serve en la ventana actual para ejecutar el proyecto. Cuando le indique Compiled successfully in xxxxms , abra el navegador y visite localhost:8080

8. Posdata: En términos generales, los proyectos en modo de desarrollo se ejecutan correctamente. Nota: ¡Primero debes tener un entorno nodejs! Y necesitas instalar el código de dependencia de nodemon globalmente: npm install nodemon -g

Si desea montar un proyecto en modo de producción, consulte la descripción del archivo vue_shop y la descripción del archivo vue_shop_server arriba. La carpeta dist es el archivo después de empaquetar el proyecto vue.