vue-nodejs-elementUI-mysql-express-démo
Projets de séparation front-end et back-end Vue+nodejs, apprenez à utiliser, y compris les opérations d'entrée de base. Comprenant le processus de mise en œuvre depuis la création du projet jusqu'au déploiement final et un résumé de quelques problèmes rencontrés au cours du processus.
Adresse d'aperçu du projet : Adresse d'aperçu--aixiaodou.cn
Adresse de commentaire et de discussion : Blog personnel - https://blog.csdn.net/qq_32442967/article/details/103459148
Adresse de la base de données : express-demo/doc/demo2.sql
Base de données MySQL
La base de données est démo2
Créer une base de données démo2 > exécuter l'instruction SQL
Modifier la configuration de connexion à la base de données model/connDb.js dans le projet express-demo
express-demo-web : projet web front-end
# 安装依赖
npm install
# 运行项目
npm run dev
express-demo : projet backend nodejs
# 安装依赖
npm install
# 运行项目
npm start
Ce projet est un projet d'entrée de gamme, utilisant le mode de séparation des extrémités avant (vue) et arrière (nodejs).
Technologies principalement utilisées :
- Front-end : vue+ elementUI+ axios+ vue-cli+ webpack+ vue-router+ vuex+ js-cookie
- Back-end : nodejs+ express+ jsonwebtoken
- Base de données : mysql
- Environnement de déploiement : nginx
- Serveur de déploiement : Linux Centos7
Introduction aux fonctions existantes :
- Module de téléchargement de l'outil toolsDown : interrogez la liste dans la base de données et affichez-la par catégorie
- connexion, enregistrement connexion, enregistrement, module de déconnexion : la page d'accueil et la page de téléchargement de l'outil peuvent être prévisualisées sans connexion, et la page de la liste des utilisateurs sera visible après la connexion. Enregistrez le sessionToken dans le cookie et l'userId après la connexion dans le stockage local. Selon que vous soyez connecté ou non, affichez le login ou l'avatar dans le coin supérieur droit.
- Module de liste d'utilisateurs userManage : fonctions de pagination, de recherche floue, d'édition et de suppression d'utilisateurs
- friend_link Interface de lien d'ami : mettre des liens d'amis et archiver des informations dans la base de données
- Statistiques du nombre de téléchargements de logiciels
- Fonctions de modification et de suppression des utilisateurs
V 1.0.2 Télécharger les statistiques/vérification de l'enregistrement de connexion (éléments 5-6)
- Optimiser la vérification des jetons
- Statistiques du nombre de téléchargements de logiciels
- Fonctions de modification et de suppression des utilisateurs
V 1.0.1 Implémenter les fonctions de base (éléments 1 à 4) - enregistrer principalement certains problèmes rencontrés
l'extrémité avant
- Contrôlez si la page est accessible uniquement après la connexion : jugez s'il y a une connexion en fonction du jeton, configurez le lien de référence du routeur
- Enregistrez l'ID utilisateur obtenu après la connexion au stockage local. Lors de l'obtention des informations utilisateur, apportez l'ID utilisateur pour obtenir les informations de l'utilisateur connecté et affichez l'avatar dans le coin supérieur droit.
extrémité arrière
- Nodejs se connecte à la base de données MySQL Si un pool de connexions est utilisé, la connexion doit être libérée après utilisation, sinon le nombre maximum de connexions sera dépassé.
déployer
- Une fois que nginx a déployé le projet vue, il n'y a aucun problème d'accès normal, mais un problème 404 apparaîtra lors de l'actualisation.
- nodejs s'exécute en permanence sous Linux en utilisant un lien de référence permanent
V 1.0.0 Créer des projets front-end et back-end
l'extrémité avant
- Utilisez vue-cli+ webpack pour générer des projets vue
- Configurez le routeur, le magasin, les utilitaires, axios, elementUI, le numéro de port...
extrémité arrière
- Utilisez express pour générer des liens de référence de projet nodejs
- Installez le package de dépendances jsonwebtoken, générez un jeton et renvoyez le lien de référence frontal après une connexion réussie.
- Installer le package de dépendances de la base de données MySQL
Résoudre le problème inter-domaines des projets de séparation front-end et back-end (définition des en-têtes de requête) Lien de référence
- Front-end : intercepteur de requêtes dans axios, définissez sessionToken, utilisé comme vérification back-end pour déterminer s'il s'agit d'un serveur autorisé
- Backend : définir les en-têtes de requête dans app.js – ajouter app.all()
- Backend : en raison de l'en-tête de requête personnalisé sessionToken, pour les requêtes inter-domaines complexes, il y aura une pré-requête d'options, et les requêtes avec options de méthode sont rapidement traitées et renvoient 200
base de données
- Créer une base de données > table [user, tools_down,friend_link]
- Données de test simulées
