BAI_SHOP

Projet BAI_SHOP

1. Présentation du projet

Introduction du projet : ce projet adopte le modèle de développement de séparation front-end et back-end. vue_api_server est le fichier de code back-end, vue_shop est le fichier de code de développement front-end et vue_shop_server est le fichier de code de production front-end. , exécuter directement vue_shop_server sera beaucoup plus simple que vue_shop

Pile technologique de projet front-end	illustrer
Vue	Un cadre progressif pour créer des interfaces utilisateur
Vue-routeur	vue-router est le gestionnaire de routage officiel de vue.js
Élément-UI	ElementUI Element est une bibliothèque de composants basée sur Vue 2.0 préparée pour les développeurs, les concepteurs et les chefs de produit. Elle fournit des ressources de conception de support pour aider votre site Web à prendre rapidement forme.
Axios	axios est une bibliothèque Http basée sur Promise qui peut être utilisée dans les environnements et navigateurs node.js
Graphiques électroniques	En termes simples, ECharts est un plug-in utilisé par la base de données principale pour mapper les données sur des graphiques dans le cadre des programmes de développement Internet.

Pile technologique de projet backend	illustrer
Noeud.js	nodejs est un langage développé en C++ qui s'exécute côté serveur. Il peut écrire des programmes d'arrière-plan de sites Web et développer des applications côté serveur.
Exprimer	Express est un framework de développement d'applications Web minimaliste et flexible basé sur la plate-forme Node.js. Il fournit une série de fonctionnalités puissantes pour vous aider à créer diverses applications Web et pour appareils mobiles.
wxya	json web token est un standard ouvert basé sur json implémenté pour fournir des réclamations dans un environnement d'application Web
MySQL	base de données
Séquelle	Sequelize.js fournit un accès simple aux bases de données MySQL, MariaDB, SQLite et PostgreSQL en mappant les entrées de base de données sur des objets, ou les objets sur des entrées de base de données. En bref, c'est ORM (Object-Relational-Mapper). Sequelize.js est entièrement écrit en JavaScript et convient aux environnements Node.js.

2. Description des documents

1.description du fichier vue_api_server

• répertoire du fichier de configuration config
  • fichier de configuration par défaut default.json (qui contient la configuration de la base de données, la configuration jwt)
• couche d'accès aux données dao , qui stocke les opérations d'ajout, de suppression, de modification et de requête de la base de données
  • Méthodes d'accès aux bases de données publiques fournies par DAO.js
• models stocke les fichiers de modèle ORM de base de données spécifiques
• modulesModules du projet modules
  • module de vérification des autorisations de l'API authorization.js
  • module de base de données database.js (le chargement de la base de données est basé sur le chargement de la bibliothèque nodejs-orm2)
  • passport.js est construit sur la base du module de connexion de passeport
  • Interface de résultat de retour unifiée de l'API resextra.js
• Modules tiers dont dépend node_modules
• routes unifié
  • api fournit une interface API
  • mapp fournit une interface d'application mobile
  • mweb fournit des sites Web mobiles
• couche de service services , le code de logique métier est écrit dans cette couche et les données obtenues via différentes interfaces sont converties en données requises par le front-end unifié
• fichier d'entrée du projet principal app.js
• fichier de configuration du projet package.json

2.description du fichier vue_shop

• dossier dist Le dossier généré après l'empaquetage du projet (pour l'environnement de production)

  • Contient css , fonts , img , js , favicon.ico et index.html
  • Démarrez simplement un serveur simple, montez le projet, exécutez le serveur et accédez au port par défaut
  • Comment exécuter le projet vue packagé : https://www.cnblogs.com/zhujiabin/p/10557982.html

• Le dossier public stocke les ressources statiques.

  • Contient les fichiers favicon.ico et index.html

• Le dossier src est le dossier dans lequel le programme source est stocké.

  • assets : stocke certains fichiers de ressources plus volumineux du projet, tels que des images, des polices, etc.

  • components : stocke les sous-composants de la vue du projet

  • plugins : composants element-ui introduits par le projet

  • router : routage du projet index.js

  • tools : classe d'outils de projet

  • App.vue : composant racine de vue

  • main.js : entrée web

• Autres fichiers de configuration

  • .browserslistrc : Cette configuration peut partager le navigateur cible et la version de nodejs dans différents outils frontaux. Ces outils peuvent être automatiquement configurés en fonction du navigateur cible.
  • .editorconfig : aide les développeurs à définir et à maintenir des styles de codage cohérents dans différents éditeurs et IDE
  • .eslintignore : définir les fichiers qui ne sont pas vérifiés par eslint ( ESLint est un outil de vérification de règles de grammaire JavaScript et de style de code plug-in et configurable)
  • .eslintrc.js : fichier de configuration eslint
  • .gitignore : Définir les fichiers ignorés par git
  • .prettierrc : Lorsque nous utilisons le formatage par clic droit, cela nous aidera automatiquement à compléter les symboles. Cependant, certains symboles signaleront des erreurs de syntaxe dans eslint, alors que devons-nous faire ?
  • babel.config.js : fichier de configuration Babel ( Babel est une chaîne d'outils principalement utilisée pour convertir le code de la version ECMAScript 2015+ en syntaxe JavaScript rétrocompatible afin qu'il puisse s'exécuter dans les versions actuelles et anciennes des navigateurs ou d'autres environnements)

3.description du fichier vue_shop_server

• Les fichiers du projet de l'environnement de production emballés par vue_shop dans le dossier dist
• Contient css , fonts , img , js , favicon.ico et index.html
  • Lors de l'exécution du projet, supprimez d'abord node_modules , puis entrez dans le répertoire vue_shop_server et exécutez npm install pour retélécharger le nouveau package de dépendances.
  • Une fois le package de dépendances téléchargé, exécutez la commande nodemon app.js dans la fenêtre de documentation et visitez http://localhost:3000 pour voir la page frontale du projet.
• Le serveur de fichiers app.js exécute le fichier d'entrée, qui contient certaines configurations de base pour le serveur.

3. Précautions pour l'exploitation du projet

1. Téléchargez et décompressez BAI_SHOP.zip

2. Entrez vue_api_server/db et importez mydb.sql sous le dossier db dans la base de données mysql

3. Une fois les données importées avec succès, ouvrez le fichier default.json dans le dossier config et configurez-y db_config .

4. Ouvrez la fenêtre de commande doc, entrez dans le répertoire vue_api_server et exécutez la commande npm install pour charger les dépendances requises pour le projet.

5. Une fois les dépendances chargées, exécutez nodemon app.js pour exécuter

6. Ouvrez une nouvelle fenêtre de commande doc, entrez dans le répertoire vue_shop et exécutez la commande npm install pour charger les dépendances requises pour le projet.

7. Une fois les dépendances chargées, exécutez la commande npm run serve dans la fenêtre actuelle pour exécuter le projet. Lorsqu'il vous invite Compiled successfully in xxxxms , ouvrez le navigateur et visitez localhost:8080

8. Post-scriptum : De manière générale, les projets en mode développement se déroulent avec succès ! Remarque : Vous devez d'abord disposer d'un environnement nodejs ! Et vous devez installer le code de dépendance nodemon globalement : npm install nodemon -g

Si vous souhaitez monter un projet en mode production, veuillez consulter la description du fichier vue_shop et la description du fichier vue_shop_server ci-dessus. Le dossier dist est le fichier une fois le projet vue empaqueté. Il vous suffit de le monter sur le serveur.