[JAVA] Lier l'API avec Spring + Vue.js

introduction

Cette fois, j'ai créé l'API Rest avec le framework Spring et Le but est d'afficher les données dans Vue.js. (La construction d'environnement qui est le paramètre initial tel que l'installation Java est omise.)

Création de projet

◇Vue.js Nous allons le créer en utilisant VueCli.

① Installez VueCli depuis npm

`console`


npm install -g @vue-cli

② Création de projet

`console`


vue create practice

Une fois exécutés, les fichiers de paramètres et les exemples de sources requis pour créer l'application seront créés automatiquement. ③ Vérifiez l'écran d'échantillon Exécutez ce qui suit sous le projet créé

`console`


npm run serve

◇Spring Nous continuerons en utilisant "Spring Tools for Eclipse".

① Création de projet Sélectionnez "Spring Starter Project" pour créer un projet

Lorsque vous créez un projet, les dossiers et fichiers suivants sont créés. (Cette fois, nous utilisons "gradle".)

Créer une API Rest

Créez une API pour récupérer les données de la base de données H2. ① Préparation de la base de données H2 Qu'est-ce que la base de données H2? RDB open source sur plateforme JAVA Il peut être utilisé comme "base de données en mémoire" et est inclus par défaut dans Spring boot, donc aucun paramètre compliqué n'est requis. Les pilotes JDBC suivants sont déjà enregistrés

Puisque cette fois il sera utilisé comme "base de données en mémoire", nous créerons des tables et des données à initialiser. Placez "data.sql" et "schema.sql" sous "src / main / resources". Il est initialisé à chaque démarrage de l'application car il s'agit d'une base de données en mémoire. Deux SQL sont automatiquement exécutés au moment de l'initialisation.

data.sql

`data.sql`


INSERT INTO person(code, name, belong_nm)
VALUES('001', 'Test 1', 'Département des affaires générales');
INSERT INTO person(code, name, belong_nm)
VALUES('002', 'Test 2', 'Département des Ressources Humaines');

schema.sql

`schema.sql`


CREATE TABLE person
(
   id INT NOT NULL AUTO_INCREMENT,
   code VARCHAR(100) NOT NULL,
   name VARCHAR(100) NOT NULL,
   belong_nm VARCHAR(500) NOT NULL,
   PRIMARY KEY(id)
);

Faites un clic droit sur le projet et lancez-le avec "Spring Boot App" Après le démarrage "http: // localhost: 8080 / h2-console" Pour vérifier que la table a été créée

Sélectionnez Connect Les tableaux et les données ont été créés.

② Créer un contrôleur et un service Appelez le service du contrôleur. Ne faites pas référence au DB une seule fois et renvoyez une valeur fixe.

La valeur fixe est emballée dans une liste et renvoyée.

PracticeServiceImp.java

`PracticeServiceImp.java`


package com.example.demo.service;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Service;

@Service
public class PracticeServiceImp implements PracticeService {

	@Override
	public List<String> getAll() {
		List<String> list = new ArrayList<>();
		 
        list.add("1");
        list.add("2");
        list.add("3");
 
		return list;
	}
}

Appelez le service, mettez les valeurs acquises dans une liste et renvoyez-la.

PracticeController.java

`PracticeController.java`


package com.example.demo.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.example.demo.service.PracticeService;
import com.example.demo.service.PracticeServiceImp;

@RestController
@RequestMapping("api/practice")
public class PracticeController {
	
	private final PracticeService practiceService;
	
	@Autowired
 	public PracticeController(PracticeServiceImp practiceService){
 		this.practiceService = practiceService;
 	}

	@GetMapping
	public List<String> getAll() {
		List<String> list = practiceService.getAll();
		
		return list;
	}
}

Nous allons effectivement l'exécuter et le vérifier. ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567766/31ef2fd9-f158-ce3b-980f-234a77b68ab6.png)

「http://localhost:8080/api/practice」 J'ai accédé et la valeur fixe a été affichée.

(3) Modifiez pour stocker la valeur obtenue à partir du DB dans la classe Form et la renvoyer. La classe DAO est responsable de la connexion à la base de données et de l'émission de SQL. Les rôles sont "Contrôleur (traitement des requêtes et réponses)", "Service (logique)" et "Dao (opération DB)".

PracticeServiceImp.java

`PracticeServiceImp.java`


package com.example.demo.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.example.demo.dao.PracticeDao;
import com.example.demo.form.PracticeForm;

@Service
public class PracticeServiceImp implements PracticeService {

    private final PracticeDao dao;
	
	@Autowired
	public PracticeServiceImp(PracticeDao dao) {
		this.dao = dao;
	}
	@Override
	public List<PracticeForm> getAll() {
//		List<PracticeForm> list = new ArrayList<>();
//		 
//        list.add("1");
//        list.add("2");
//        list.add("3");
		return dao.getAll();
	}
}

PracticeController.java

`PracticeController.java`


package com.example.demo.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.example.demo.form.PracticeForm;
import com.example.demo.service.PracticeService;
import com.example.demo.service.PracticeServiceImp;

@RestController
@RequestMapping("api/practice")
@CrossOrigin(origins = {"http://localhost:8081"})
public class PracticeController {
	
	private final PracticeService practiceService;
	
	@Autowired
 	public PracticeController(PracticeServiceImp practiceService){
 		this.practiceService = practiceService;
 	}

	@GetMapping
	public List<PracticeForm> getAll() {
		List<PracticeForm> list = practiceService.getAll();
		
		return list;
	}
}

Nouveau fichier pour stocker des données

PracticeForm.java

`PracticeForm.java`


package com.example.demo.form;

import javax.validation.constraints.NotNull;

public class PracticeForm {
	public PracticeForm() {};

    public PracticeForm(int id, String code, String name, String belong_nm) {
		super();
		this.id = id;
		this.code = code;
		this.name = name;
		this.belong_nm = belong_nm;
	}

    @NotNull
    private int id;
    
    @NotNull
    private String code;

    @NotNull
    private String name;
    
    @NotNull
    private String belong_nm;

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getCode() {
		return code;
	}

	public void setCode(String code) {
		this.code = code;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getBelong_nm() {
		return belong_nm;
	}

	public void setBelong_nm(String belong_nm) {
		this.belong_nm = belong_nm;
	}

}

Nouveau fichier pour l'opération DB

PracticeDaoImp.java

`PracticeDaoImp.java`


package com.example.demo.dao;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Repository;

import com.example.demo.form.PracticeForm;

@Repository
public class PracticeDaoImp implements PracticeDao {
	
    private final JdbcTemplate jdbcTemplate;
	
	@Autowired
	public PracticeDaoImp(JdbcTemplate jdbcTemplate) {
		this.jdbcTemplate = jdbcTemplate;
	}

	@Override
	public List<PracticeForm> getAll() {
		// TODO Auto-generated method stub
		String sql = "select id, code, name, belong_nm from person";
		List<Map<String, Object>> resultList =  jdbcTemplate.queryForList(sql);
		List<PracticeForm> list = new ArrayList<PracticeForm>();
		for(Map<String, Object> result : resultList) {
			PracticeForm practiceForm = new PracticeForm();
			practiceForm.setId((int)result.get("id"));
			practiceForm.setCode((String)result.get("code"));
			practiceForm.setName((String)result.get("name"));
			practiceForm.setBelong_nm((String)result.get("belong_nm"));
			list.add(practiceForm);
		}
		return list;
	}

}

Après la correction ci-dessus, essayez l'accès latéral.

La valeur de DB a été acquise.

Exécutez l'API à partir de Vue.js

Appelez l'API du côté frontal pour afficher les données. ① Installer axios Utilisez "axios" pour exécuter l'API. axios: bibliothèque JavaScript capable de communication HTTP

`console`


npm install --save axios

② Appelez l'API avec axios.

Démarrez le serveur pour Vue et Spring. Dans axios, spécifiez l'URL de l'API et récupérez les données.

Home.vue

`Home.vue`


// Home.vue
<template>
  <div>
    {{ people }}
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      people: []
    }
  },
  methods: {
    getPerson () {
      const path = 'http://localhost:8080/api/practice'
      axios.get(path)
        .then(response => {
          this.people = response.data
        })
        .catch(error => {
          console.log(error)
        })
    }
  },
  created () {
    this.getPerson()
  }
}
</script>

Vérifiez l'écran.

Les données ont été acquises.

③ Affichage sur la table Traitons l'écran comme ça en utilisant la table de données du framework d'interface utilisateur "vuetify"

Person.vue

`Person.vue`


// Person.vue
<template>
  <div>
    <h1>Liste des employés</h1>
    <v-data-table
          :headers="headers"
          :items="people">
    </v-data-table>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  components:{

  },
  data () {
    return {
      people: [],
      singleSelect: false,
        selected: [],
        headers: [
          {
            align: 'start',
            sortable: false,
          },
          { text: 'ID', value: 'id' },
          { text: 'Nom complet', value: 'name' },
          { text: 'Code d'employé', value: 'code' },
          { text: 'Nom d'affiliation', value: 'belong_nm' },
        ],
    }
  },
  methods: {
    getNews () {
      const path = 'http://localhost:8080/api/practice'
      axios.get(path)
        .then(response => {
          this.people = response.data
        })
        .catch(error => {
          console.log(error)
        })
    }
  },
  created () {
    this.getNews()
  }
}
</script>

En l'affichant à l'aide d'un tableau de données, quelque chose comme ça était facilement affiché.

Résumé

J'ai pu créer une API simple et la travailler avec le front-end. Grâce aux frameworks modernes, où et quel type de logique écrire est approximativement décidé. Par conséquent, le rôle est clair et pratique.

Les références

J'ai été autorisé à faire référence. https://b1tblog.com/2020/03/17/spring-rest-2/