[JAVA] API mit Spring + Vue.js verknüpfen

Einführung

Dieses Mal habe ich die Rest-API mit Spring Framework und erstellt Ziel ist es, die Daten in Vue.js anzuzeigen. (Die Umgebungskonstruktion, bei der es sich um die anfängliche Einstellung handelt, z. B. die Java-Installation, wird weggelassen.)

Projekterstellung

◇Vue.js Wir werden es mit VueCli erstellen.

① Installieren Sie VueCli ab npm

`Konsole`


npm install -g @vue-cli

② Projekterstellung

`Konsole`


vue create practice

Bei der Ausführung werden die zum Erstellen der Anwendung erforderlichen Einstellungsdateien und Beispielquellen automatisch erstellt. ③ Überprüfen Sie den Beispielbildschirm Führen Sie unter dem erstellten Projekt Folgendes aus

`Konsole`


npm run serve

◇Spring Wir werden "Spring Tools for Eclipse" verwenden.

① Projekterstellung Wählen Sie "Spring Starter Project", um ein Projekt zu erstellen

Wenn Sie ein Projekt erstellen, werden die folgenden Ordner und Dateien erstellt. (Dieses Mal verwenden wir "gradle".)

Erstellen einer Rest-API

Erstellen Sie eine API, um Daten aus der H2-Datenbank abzurufen. ① Vorbereitung der H2-Datenbank Was ist eine H2-Datenbank? Open Source RDB auf der JAVA-Plattform Es kann als "In-Memory-Datenbank" verwendet werden und ist standardmäßig im Spring-Boot enthalten, sodass keine komplizierten Einstellungen erforderlich sind. Die folgenden JDBC-Treiber sind bereits registriert

Da es dieses Mal als "In-Memory-Datenbank" verwendet wird, erstellen wir Tabellen und Daten, die initialisiert werden sollen. Platzieren Sie "data.sql" und "schema.sql" unter "src / main / resources". Es wird bei jedem Start der App initialisiert, da es sich um eine In-Memory-Datenbank handelt. Zum Zeitpunkt der Initialisierung werden automatisch zwei SQLs ausgeführt.

data.sql

`data.sql`


INSERT INTO person(code, name, belong_nm)
VALUES('001', 'Test 1', 'Abteilung Allgemeine Angelegenheiten');
INSERT INTO person(code, name, belong_nm)
VALUES('002', 'Test 2', 'Personalabteilung');

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)
);

Klicken Sie mit der rechten Maustaste auf das Projekt und starten Sie es mit "Spring Boot App". Nach dem Start "http: // localhost: 8080 / h2-console" Um zu überprüfen, ob die Tabelle erstellt wurde

Wählen Sie Verbinden Es wurden sowohl Tabellen als auch Daten erstellt.

② Controller und Service erstellen Rufen Sie den Service vom Controller an. Beziehen Sie sich nicht einmal auf die Datenbank und geben Sie einen festen Wert zurück.

Der feste Wert wird in eine Liste gepackt und zurückgegeben.

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;
	}
}

Rufen Sie den Dienst an, packen Sie die erfassten Werte in eine Liste und geben Sie sie zurück.

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;
	}
}

Wir werden es tatsächlich ausführen und überprüfen. ![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」 Ich habe darauf zugegriffen und der feste Wert wurde angezeigt.

(3) Ändern Sie, um den von der Datenbank erhaltenen Wert in der Form-Klasse zu speichern und zurückzugeben. Die DAO-Klasse ist für die Verbindung zur Datenbank und die Ausgabe von SQL verantwortlich. Die Rollen sind "Controller (Bearbeitung von Anforderungen und Antworten)", "Service (Logik)" und "Dao (DB-Operation)".

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;
	}
}

Neue Datei zum Speichern von Daten

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;
	}

}

Neue Datei für den DB-Betrieb

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;
	}

}

Versuchen Sie nach der obigen Korrektur den seitlichen Zugriff.

Der Wert von DB wurde erworben.

Führen Sie die API von Vue.js aus

Rufen Sie die API von der Front-End-Seite aus auf, um die Daten anzuzeigen. ① Installieren Sie Axios Verwenden Sie "axios", um die API auszuführen. Axios: JavaScript-Bibliothek, die HTTP-Kommunikation ermöglicht

`Konsole`


npm install --save axios

② API mit Axios aufrufen.

Starten Sie den Server für Vue und Spring. Geben Sie in axios die API-URL an und rufen Sie die Daten ab.

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>

Überprüfen Sie den Bildschirm.

Daten wurden erfasst.

③ Anzeige auf dem Tisch Verarbeiten wir den Bildschirm so mit der Datentabelle des UI-Frameworks "vuetify".

Person.vue

`Person.vue`


// Person.vue
<template>
  <div>
    <h1>Mitarbeiterliste</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: 'Vollständiger Name', value: 'name' },
          { text: 'Mitarbeitercode', value: 'code' },
          { text: 'Name der Zugehörigkeit', 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>

Durch die Anzeige mithilfe einer Datentabelle konnte so etwas problemlos angezeigt werden.

Zusammenfassung

Ich konnte eine einfache API erstellen und mit dem Frontend arbeiten. Dank moderner Frameworks wird grob entschieden, wo und welche Logik zu schreiben ist. Daher ist die Rolle klar und bequem.

Verweise

Ich durfte mich beziehen. https://b1tblog.com/2020/03/17/spring-rest-2/