Annuaire d'articles
avant-propos
Après avoir appris la technologie de SpringBoot, je pense que la méthode de développement actuelle de thymeleaf + SpringBoot n'est pas beaucoup utilisée, et la plupart d'entre eux utilisent la méthode de développement de séparation front-end et back-end , dont l'une est la méthode de développement de Vue+SpringBoot .
Le développement séparé des frontaux et des backends est une tendance populaire maintenant, donc je suggère que les amis qui veulent construire des projets rapidement doivent se renseigner sur la méthode de développement de vue+springboot.
idée, node.js mysql
Ici, nous nous préparons avec des outils de développement d'idées en fonction des habitudes de développement de la plupart des gens.
Vous devez d'abord installer nodejs. Bien sûr, les étudiants ici doivent avoir appris vue et node.js doit avoir été installé. Je n'entrerai pas trop dans les détails ici.
Installez
le site officiel de node.js node.js : https://nodejs.org/zh-cn/
Adresse de code spécifique :
Lien de téléchargement du disque réseau Baidu : https://pan.baidu.com/s/1fWO0i5iGxz2U8U4vmABIzA
Code d'extraction : wmlg
Installer un échafaudage vue-cli
Utilisez la commande cmd pour ouvrir la ligne de commande et entrez la commande suivante
pour modifier la commande d'installation pour les versions supérieures à vue3.0 en ceci : npm install -g @vue/cli
npm install -g @vue/cli@4。4.6
Ici, je suggère personnellement d'installer directement la version 4.4.6 de l'échafaudage, car après avoir regardé beaucoup de vidéos, il y a des choses plus ou moins incompatibles dans d'autres versions, et d'autres versions doivent être remplacées plus tard, il est donc préférable de directement installez la version 4.4.6 de la norme La colle est sûre. Bien sûr, ce n'est que ma suggestion personnelle, j'espère qu'elle pourra vous éviter les détours et la perte de cheveux haha~~
Démarrer le gestionnaire de projet vue
Une fois l'installation réussie,
entrez dans la fenêtre de ligne de commande : vue ui (notez qu'à l'emplacement où vous souhaitez créer le projet, si vous souhaitez créer un projet sur le lecteur d, passez au lecteur d et entrez cette commande .) Le démarrage est réussi
!
Une fois le démarrage réussi, il entrera dans le gestionnaire de projet Vue.
La méthode d'utilisation a été écrite dans mon dernier blog : https://blog.csdn.net/lj20020302/article/details/129402966 .
Interaction des données
L'interaction des données front-end et back-end nécessite axios pour fonctionner, nous devons donc d'abord télécharger axios.
Téléchargez le projet vue et ouvrez le terminal : Entrez la commande suivante
Une fois l'installation terminée, ajoutez le code suivant sur la page que vous devez demander :
created() {
const _this = this;
axios.get('http://localhost:8082/list').then(function (resp) {
_this.students =resp.data;
})
}
Nous initialisons la fonction, écrivons une fonction de rappel et imprimons les données. Cette fois, vous pouvez imprimer les données dans votre propre base de données.
Pour les problèmes inter-domaines, nous créons une nouvelle classe de configuration CrosConfig, vous pouvez vous référer au code suivant :
package com.guo.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CrosConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowCredentials(false)
.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
.allowedOrigins("*");
}
};
}
}
De cette façon, l'interaction simple des données entre les extrémités frontale et dorsale est terminée.
Utilisation d'Element-ui
Site officiel : https://element.eleme.cn/2.0/#/zh-CN/
Vue intègre Element UI
Les principales balises d'Element UI :
- el-container : Construire l'intégralité du cadre de la page
- el-aside : Construire le menu de gauche
- el-menu : contenu du menu de gauche, attributs communs :
- :default-openeds : Le menu ouvert par défaut, lié par la valeur d'index du menu.
- :default-active : Le menu sélectionné par défaut, associé à la valeur d'index du menu.
- el-submenu : menu extensible, attributs communs :
index : l'indice du menu, de type texte, pas de type numérique.
- template : Le nom du menu correspondant à el-submenu.
- i : Définissez l'icône de menu, définie via l'attribut class :
- el-icon-message
- el-icon-menu
- el-icon-setting
- el-menu-item : Le sous-noeud du menu, qui ne peut pas être développé, attributs communs : index : L'indice du menu, de type texte, ne peut pas être de type numérique.
Il existe de nombreux composants sur le site officiel, qui peuvent être joués librement.
J'utilise un conteneur de mise en page, vous pouvez directement copier le code ci-dessous sur votre propre page.
Routage et barre de navigation dynamique
Lorsque nous développons, nous avons besoin de l'effet de lecture dynamique de la page,
nous devons donc définir un élément sur l'étiquette pour obtenir l'index dans la route, et afficher l'effet dynamique à travers différentes valeurs d'index, $route.path==item2. path ?'is-active' : '' est lorsque le chemin que nous visitons est cohérent avec le chemin de la sous-page dans le routeur, 'is-active' : est activé lorsque cette condition est vraie.
Par exemple, lorsque nous visitons localhost:8080/BookManage et que le chemin de la sous-page dans le routeur est également /BookManage, la condition est remplie et cet attribut est sélectionné.
<el-submenu v-for="(item,index) in $router.options.routes" :index="index+''" v-if="item.show">
<template slot="title">{
{
item.name}}</template>
<el-menu-item v-for="(item2,index2) in item.children" :index="item2.path"
:class="$route.path==item2.path?'is-active':''">{
{
item2.name}}</el-menu-item>
</el-submenu>
Mettre en œuvre le clic pour changer de page :
- Ajouter l'attribut du routeur à la balise
- Ajoutez une balise à la page, qui est un conteneur qui affiche dynamiquement le routeur que vous choisissez.
- La valeur d'index de l'étiquette est le routeur vers lequel sauter.
:index="item2.path" Mettez le chemin de la page vers laquelle sauter et tout ira bien.
Si vous ne l'ajoutez pas, vous ne pouvez pas accéder à votre sous-page, car lorsque nous chargeons la page, nous chargeons d'abord la page principale. Cette balise ouvre une fenêtre pour la page principale chargée, afin qu'elle puisse charger la fenêtre juste comme app.vue.
Données de requête de pagination
Utiliser le composant d'étiquette d'élément d'interface utilisateur
avec
le code de pagination de la requête de pagination
<el-pagination
background
layout="prev, pager, next"
:page-size="pageSize"
:total="total"
@current-change="page">
</el-pagination>
@current-change Cliquez sur la réponse
La page globale ressemble à ceci
Nous avons juste besoin d'ajouter un PageRequest dans le code backend
@GetMapping("/findAll/{page}/{size}")
public Page<Book> findAll(@PathVariable("page") Integer page, @PathVariable("size") Integer size){
PageRequest request = PageRequest.of(page,size);
return bookRepository.findAll(request);
}
Vous pouvez obtenir l'effet d'une requête de pagination.
ajout de données
De même, l'interface utilisateur Element a été écrite pour nous, tant que nous savons comment l'utiliser, tout va bien, donc cette interface utilisateur Element peut créer une page Web frontale très rapidement.
Vérification des données du formulaire de l'interface utilisateur des éléments
Définir l'objet de règles et définir les règles d'inspection pour chaque option du formulaire dans l'objet de règles
rules: {
name: [
{
required: true, message: '图书名称不能为空', trigger: 'blur' }
],
author:[
{
required: true, message: '作者不能为空', trigger: 'blur' }
]
}
- required : true : s'il s'agit d'un élément obligatoire
- message : 'Le nom du livre ne peut pas être vide' : informations d'invite
- trigger : 'blur' : événement déclencheur, (perdre le focus)
Le formulaire frontal nécessite une liaison bidirectionnelle
:model="ruleForm" :rules="rules"
Le modèle est lié aux données et les règles sont liées à l'inspection.
Le code js frontal est le suivant :
submitForm(formName) {
//与后端数据交互，把前端的数据传到后端，用post直接传一个对象this.ruleForm
const _this = this
this.$refs[formName].validate((valid) => {
if (valid) {
axios.post('http://localhost:8181/book/save',this.ruleForm).then(function(resp){
if(resp.data == 'success'){
_this.$alert('《'+_this.ruleForm.name+'》添加成功！', '消息', {
confirmButtonText: '确定',
callback: action => {
_this.$router.push('/BookManage')//点击确定直接回调到/BookManage页面
}
})
}
})
} else {
return false;
}
});
Le backend appelle directement la méthode save de JPA
@PostMapping("/save")
public String save(@RequestBody Book book){
Book result = bookRepository.save(book);
if(result != null){
return "success";
}else{
return "error";
}
}
modifier supprimer des données
modifier les données
Nous devons d'abord obtenir l'identifiant suivant sur la page bookmanger :
edit(row) {
this.$router.push({
path: '/update',
query:{
id:row.id
}
})
},
Revenez ensuite à la page de mise à jour,
methods: {
submitForm(formName) {
const _this = this
this.$refs[formName].validate((valid) => {
//这个valid 表示的是验证是否通过输出回是一个布尔类型的值
if (valid) {
//如果为ture，则进行下面的请求
axios.put('http://localhost:8181/book/update',this.ruleForm).then(function(resp){
if(resp.data == 'success'){
_this.$alert('《'+_this.ruleForm.name+'》修改成功！', '消息', {
confirmButtonText: '确定',
callback: action => {
_this.$router.push('/BookManage')
}
})
}
})
} else {
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();//置为空
}
},
created() {
const _this = this
//我们在路径里面给它拼接一下，把它的id给返回到我们的后端程序里。
axios.get('http://localhost:8181/book/findById/'+this.$route.query.id).then(function(resp){
_this.ruleForm = resp.data
})
}
L'analyse de la méthode est dans les commentaires du code.
Demande de contrôleur principal
@PostMapping("/save")
public String save(@RequestBody Book book){
Book result = bookRepository.save(book);
if(result != null){
return "success";
}else{
return "error";
}
}
@GetMapping("/findById/{id}")
public Book findById(@PathVariable("id") Integer id){
return bookRepository.findById(id).get();
}
@PutMapping("/update")
public String update(@RequestBody Book book){
Book result = bookRepository.save(book);
if(result != null){
return "success";
}else{
return "error";
}
}
Suprimmer les données
La suppression est souvent l'opération la plus simple dans CURD, il vous suffit d'appeler la méthode de suppression fournie avec Jpa.
Requête principale :
@DeleteMapping("/deleteById/{id}")
public void deleteById(@PathVariable("id") Integer id){
bookRepository.deleteById(id);
}
Ajoutez un événement de clic au bouton de suppression
, puis implémentez le code js spécifique :
deleteBook(row){
const _this = this
axios.delete('http://localhost:8181/book/deleteById/'+row.id).then(function(resp){
_this.$alert('《'+row.name+'》删除成功！', '消息', {
confirmButtonText: '确定',
callback: action => {
window.location.reload()
}
})
})
}
En voyant cela, cela montre que les lecteurs ont une forte capacité pratique. L'opération de démarrage rapide de vue+springboot est presque terminée.
Allez, programmeur