Il s'agit d'un simple projet de séparation frontale et de back-end, principalement développé à l'aide des technologies Vue.js + Springboot.
En plus d'être utilisé comme exercice d'introduction, j'espère également que le projet pourra être utilisé comme échafaudage pour certains projets Web courants pour vous aider à simplifier le processus de création d'un site Web. Il s'appelle un Jotter blanc car il commence à 0 et s'améliore progressivement avec le temps.
Retend Repo : https: //github.com/realdonald1994/whitejotter_vue
Repo backend: https: //github.com/realdonald1994/whitejotter
Bienvenue pour rejoindre le blanc de blanc!
En tant que page d'affichage, y compris les principaux documents de référence pour le développement de ce projet, les mises à jour récentes et le slogan
Fournir une fonction d'affichage d'informations sur le livre et le film
Fournir des notes, la fonction d'affichage des articles de blog
Y compris le tableau de bord, la gestion du contenu, la gestion des utilisateurs et des autorités, etc.
Introduction personnelle et liens connexes
1.vue.js
2.Elementui
3.AXIOS
4.Vuex
1. Boot de ressort
2.Spring Data + JPA
3.Mysql
4.Shiro
1.Mysql
1.Centos7
2.Nginx
3.FastDFS
1. Junit
2. Jest
1.Clone Project à local
l'extrémité avant:
git clone https://github.com/realdonald1994/WhiteJotter_Vue
Back End:
git clone https://github.com/realdonald1994/WhiteJotter
2. Créez une base de données white_jotter
dans MySQL, exécutez le projet et les données seront injectées automatiquement.
Le port Redis est 6379 (port par défaut) et le mot de passe est vide.
3. La base de données est configurée dans le fichier application.properties
dans le répertoire src main resources
du projet Backend, et la version MySQL est 8.0.15.
4.Run le projet backend dans Intellij Idea. Pour vous assurer que le projet s'exécute avec succès, vous pouvez cliquer avec le bouton droit sur pom.xml
et sélectionner Maven-> Réimportant et redémarrer le projet
À ce stade, le serveur est démarré avec succès, en même temps, exécutez le projet frontal, visitez http: // localhost: 8080
, vous pouvez entrer la page de connexion, le compte par défaut est admin
, le mot de passe est 123
Si vous voulez faire du développement secondaire, continuez à voir les cinquième et sixième étapes.
5.Enter le répertoire racine du projet frontal et entrez les commandes suivantes dans l'ordre sur la ligne de commande:
# Install dependencies
npm install
# Start the project at localhost: 8080
npm run dev
Étant donné que le transfert de port a été configuré dans le projet wj-front
pour transférer les données à Springboot, après le début du projet, entrez http: // localhost: 8080
dans le navigateur pour accéder à notre projet frontal, toutes les demandes de données verse à Springboot Grâce à la remise des ports (notez que vous ne devez pas fermer le projet Springboot pour le moment).
6. Enfin, vous pouvez utiliser WebStorm
et d'autres outils pour ouvrir le projet wj-front
et continuer le développement. Une fois le développement terminé, lorsque le projet va se rendre en ligne, vous entrez toujours dans le répertoire wj-front
, puis exécutez la commande suivante:
npm run build
Une fois la commande exécutée avec succès, un dossier dist
est généré dans le répertoire WJ-front, et les deux fichiers assets
et index.html
dans le dossier peuvent être copiés sur Nginx.Pents entrez dans le répertoire racine backend et exécutez la ligne de commande :
mvn clean install
Enfin, entrez la ligne de commande java -jar xxx.jar
dans le répertoire target
nouvellement généré. Démarrer le serveur back-end.
Entrez la ligne de commande sous le fichier nginx: start nginx
. Démarrer le serveur frontal.
08-20 Ajouter Redis
06-09 Ajouter un test unitaire avec Vue Test Utils et JEST
06-04 Utilisez GZIP pour résoudre lentement le chargement de la page Web
06-02 Le projet est déployé sur le serveur Cloud et le site Web est publié pour la première fois ?
05-29 projets frontaux et back-end séparés
04-20 Utiliser l'éditeur de marque open source pour réaliser un module d'affichage et de gestion des articles
...