👨🏾‍✈️ 🀄️ 💩 स्प्रिंग, रेस्ट एपीआई के पहले चरण, पीयूटी पर फ्रंटएंड के साथ संयोजन पर ध्यान केंद्रित करते हैं 👩🏼‍⚖️ 👨‍👨‍👧‍👧 🧒🏾

थोड़ा अपने बारे में: फिलहाल मैं एक स्किलबॉक्स छात्र हूं और "जावा-डेवलपर" का कोर्स करता हूं। किसी भी मामले में विज्ञापन नहीं, मैं अपने बारे में थोड़ा बताता हूं। उन्होंने मई 2019 में जावा सीखना शुरू किया, इससे पहले उन्होंने अपने दम पर HTML, CSS और JS का थोड़ा अध्ययन किया।

वास्तव में, इसने मुझे इस लेख को एक जागरूकता के साथ लिखने के लिए प्रेरित किया कि कैसे दृश्यपटल एक साथ बैकेंड के साथ काम करता है और PUT अनुरोध की समझ की कमी है। हर जगह जहां मैंने "google" किया था, बाकी API को POST और GET अनुरोधों के साथ लागू किया गया था, कभी-कभी DELETE के साथ और फ़्रंटेंड के कोई उदाहरण नहीं थे। मैं यह बताना चाहूंगा कि सबसे पहले, मैं उसी तरह REST API को फ्रंटएंड के साथ लागू करता हूं, ताकि समझ में आए। लेकिन लेख का उद्देश्य न केवल शुरुआती लोगों के लिए है, बल्कि मैं वसंत प्रौद्योगिकियों के अनुभवी उपयोगकर्ताओं के लिए भी हूं, क्योंकि टिप्पणियों में मैं पुराने साथियों की धार्मिक शिक्षाओं को देखना चाहता हूं। आखिरकार, मैं अपने अनुभव के आधार पर अपने निर्णय का वर्णन करूंगा (अनुभव की कमी पढ़ें)।

मैं स्प्रिंग को समझने की समस्या में भाग गया, और विशेष रूप से पीयूटी अनुरोध के साथ, अर्थात्, डेटाबेस में एक तत्व के डेटा को बदल रहा है। मैं POST और GET अनुरोधों का भी वर्णन करूंगा। सामान्य तौर पर, मानक CRUD (सही अगर मैं गलत हूं)। और थोड़ा फ्रंटएंड भी है, अर्थात्, सर्वर के लिए एक अनुरोध भेजा जाता है और प्रतिक्रिया संसाधित होती है।

मैंनें इस्तेमाल किया:

Maven
माई एसक्यूएल
इंटेलीज आईडिया

मैं एक आरक्षण भी करना चाहता हूं जो कि आंशिक रूप से प्रशिक्षण परियोजना में था, मैंने PUT और DELETE प्रश्नों को लागू किया।

पूरे प्रोजेक्ट को GitHub पर देखा जा सकता है ।

एक छोटी सी लाइव हैक: मावेन के साथ एक परियोजना बनाते समय, जावा संस्करण पांचवें पर कूदता है, इसे pom.xml में ठीक करने के लिए हम निम्नलिखित लिखते हैं, जहां संख्या संस्करण है।

ओपन लाइफ हैक

<properties>
    <maven.compiler.target>11</maven.compiler.target>
    <maven.compiler.source>11</maven.compiler.source>
</properties>

स्प्रिंग कनेक्शन

शुरू करने के लिए, pom.xml में हम स्प्रिंग बूट को माता-पिता के रूप में जोड़ते हैं, यह इस तथ्य से समझाया गया है कि निर्भरता का आगे कनेक्शन संस्करण द्वारा संघर्ष नहीं करता है:

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.2.4.RELEASE</version>
</parent>

अब हम कनेक्ट करते हैं कि स्प्रिंग वेब एप्लिकेशन लॉन्च करने के लिए जिम्मेदार है:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

हम एप्लिकेशन बनाते हैं और चलाते हैं

आपको सही निर्देशिका में एप्लिकेशन लिखना शुरू करना होगा, अर्थात् src / main / java / main , हां, यह सही है, मुझे इसके लिए कोई स्पष्टीकरण नहीं मिला, मुझे लगता है कि मैं समय के साथ पता लगाऊंगा।

और तुरंत आवेदन की पूरी संरचना को बाहर करना।

पहली बात मैंने एनोटेशन के साथ एप्लिकेशन चलाने के लिए एक Main.java वर्ग बनाया था @SpringBootApplication:

@SpringBootApplication
public class Main {
    public static void main(String[] args) {
        SpringApplication.run(Main.class, args);
    }
}

और आप पहले से ही रन क्लिक कर सकते हैं और यहां तक कि मेरा सर्वर भी शुरू हो जाएगा!

पोर्ट 8080 पर लॉन्च किया गया। आप पते पर जा सकते हैं http://localhost:8080/और हमें त्रुटि 404 दिखाई देगी क्योंकि अभी तक कोई पेज नहीं है।

निष्पक्षता में, आपको एक दृश्यपटल लागू करने की आवश्यकता है। HTML को टेम्पलेट करने के लिए आपको pom.xml

में निर्भरता को शामिल करना होगा ।

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

आरंभ करने के लिए, index.html src / main / resource / टेम्पलेट्स निर्देशिका में पेज शुरू करें ।

यहाँ ऐसे सादे मार्कअप के साथ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ToDo List</title>
    <script src="/js/jquery-3.4.0.min.js"></script>
    <script src="/js/main.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/styles.css">
</head>
<body>
    <div id="todo-form">
        <form>
            <label> :
            </label>
            <input id="todo-form-name" type="text" name="name" value="">
            <label>:
            </label>
            <input id="todo-form-description" type="text" name="description" value="">
            <label>  :
            </label>
            <input id="todo-form-date" type="date" name="date" value="">
            <hr>
        </form>
    </div>
    <h1> </h1>
    <button id="show-add-todo-list"> </button>
    <br><br>
    <div id="todo-list">

    </div>
</body>
</html>

हम src / main / Resources / static / css डायरेक्टरी में भी स्टाइल लिखते हैं, style.css बनाते हैं

शैलियों को देखें

* {
    font-family: Arial, serif;
}

#todo-form {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: #88888878;
}

#todo-form form {
    background-color: white;
    border: 1px solid #333;
    width: 300px;
    padding: 20px;
}

#todo-form h2 {
    margin-top: 0;
}

#todo-form label {
    display: block;
}

#todo-form form > * {
    margin-bottom: 5px;
}

h4 {
    margin-bottom: 0;
}

आप एप्लिकेशन को शुरू करने और जाने की कोशिश कर सकते हैं http://localhost:8080/और आप प्रारंभ पृष्ठ की प्रशंसा कर सकते हैं, हालांकि अब तक बिना किसी कार्रवाई के।

और निश्चित रूप से src / main / Resources / static / js निर्देशिका में jQuery प्लगइन के साथ , एक बार फिर मैं एक आरक्षण करूँगा, पहले से ही jQuery और main.js का एक हिस्सा था जो प्रशिक्षण परियोजना में लिखा गया था ।
जावा और स्प्रिंग के बारे में सभी समान हब, इसलिए पूर्ण कोड js के
लिंक
पर्याप्त होंगे: jquery-3.4.0.min.js लिंक को main.js से लिंक करें ।

नीचे GET और PUT अनुरोध पर विशेष ध्यान दिया जाएगा। दोनों सर्वर साइड से, और फ्रंटेंड से।

अब आप प्रोजेक्ट शुरू करने का प्रयास कर सकते हैं और सुनिश्चित कर सकते हैं कि फ्रंटेंड काम करता है और कार्रवाई भी (ऐड बटन फॉर्म को लॉन्च करता है)।

DB बातचीत

अगला चरण डेटाबेस के साथ बातचीत करने के लिए इकाई है, इसके लिए हम स्प्रिंग डेटा जप निर्भरता को जोड़ते हैं:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

और src / main / java / main / मॉडल डायरेक्टरी में मैं एक POJO क्लास टोडो बनाता हूं एक एनोटेशन संलग्न करता हूं @Entity।

हम खेतों की घोषणा करते हैं, मेरे पास होगा: आईडी, नाम, विवरण, तिथि।

विशेष ध्यान setDate(), मैंने स्ट्रिंग के इनपुट पर, और फिर java.util.Date में रूपांतरण किया , और यहां तक कि atStartOfDay().atZone(ZoneId.of("UTC"), मैं दिनांक फ़ील्ड के एनोटेशन पर भी ध्यान देता हूं:

package main.model;

import javax.persistence.*;
import java.time.LocalDate;
import java.time.ZoneId;
import java.util.Date;

@Entity
public class Todo {

    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private int id;
    private String name;
    private String description;
    @Temporal(TemporalType.DATE)
    private Date date;

    //getters and setters …
   
    public void setDate(String date) {
        this.date = Date.from(LocalDate.parse(date).atStartOfDay().atZone(ZoneId.of("UTC")).toInstant());
    }
}

MySQL से कनेक्शन स्थापित करने के लिए pom.xml में एक निर्भरता जोड़ें :

<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>8.0.19</version>
</dependency>

Src / main / resource निर्देशिका में, application.properties बनाएँ और डेटाबेस से कनेक्ट करने के लिए डेटा लिखें:

spring.datasource.url=jdbc:mysql://localhost:3306/todolist?useSSL=false&allowPublicKeyRetrieval=true&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=password
spring.jpa.hibernate.ddl-auto=none

अब चलो रिपॉजिटरी बनाने के लिए आगे बढ़ते हैं। Src / main / java / main / मॉडल डायरेक्टरी में, एनोटेशन @Repositoryऔर इनहेरिट CrudRepository <Todo, Integer> के साथ TodoRepository इंटरफ़ेस बनाएँ । गीतात्मक विषयांतर - जैसा कि मैं इसे समझता हूं, यह डेटाबेस और नियंत्रक के बीच एक गैसकेट है, वसंत इस में अच्छा है, आपको सॉकेट्स बनाने की आवश्यकता नहीं है, आपको डेटाबेस के साथ बातचीत करने के बारे में चिंता करने की आवश्यकता नहीं है, यह आपके लिए सब कुछ करता है।

package main.model;

import org.springframework.data.repository.CrudRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface TodoRepository extends CrudRepository<Todo, Integer> {
}

दरअसल, डेटाबेस के साथ संचार इस रिपॉजिटरी के माध्यम से होगा।

अब यह एक नियंत्रक बनाने का समय है जहां सामने के छोर से अनुरोध, डेटाबेस के साथ बातचीत और फ्रंट-एंड प्रतिक्रियाओं को संसाधित किया जाएगा। Src / main / java / main / कंट्रोलर

डायरेक्टरी में, एनोटेशन के साथ TodoController क्लास बनाएं , TodoRepository वेरिएबल घोषित करें और कंस्ट्रक्टर के माध्यम से इनिशियलाइज़ करें। चलिए POST अनुरोध के साथ शुरू करते हैं। हम टोडो को स्वीकार करते हुए ऐड () विधि बनाते हैं और इंट (आईडी) वापस करते हैं, एनोटेशन के साथ चिह्नित करते हैं और जिस रास्ते पर हम जोड़ेंगे। हम रिपॉजिटरी लेते हैं और टोडो ऑब्जेक्ट को सहेजते हैं जो डेटाबेस में विधि के अनुरोध के साथ आया था। बस जादू है।@RestController

@PostMapping(“/todo-list/”)save()

@PostMapping("/todo-list/")
public int add(Todo todo) {
    Todo newTodo = todoRepository.save(todo);
    return newTodo.getId();
}

सामान्य तौर पर, GET और DELETE के समान, लेकिन ResponseEntity शेल में आईडी और रिटर्न टोडो का उपयोग करना। यह भी ध्यान दें कि विधि का पैरामीटर get()एनोटेशन के साथ चिह्नित है, नीचे थोड़ा और विस्तृत है। तब एक प्रतिक्रिया उत्पन्न होती है ResponseEntity.ok(todoOptional.get());, अर्थात, कोड 200, या यदि यह इस आईडी से नहीं मिलता है, तो कोड 404 बॉडी नल के साथ वापस आ जाता है।

@GetMapping("/todo-list/{id}")
public ResponseEntity<Todo> get(@PathVariable int id){
    Optional<Todo> todoOptional = todoRepository.findById(id);
    if(todoOptional.isEmpty()){
        return ResponseEntity.status(HttpStatus.NOT_FOUND).body(null);
    }
    return ResponseEntity.ok(todoOptional.get());
}

आगे की तरफ क्या हो रहा है?

GET उदाहरण का उपयोग करना:

todo => सूची में एक लिंक पर क्लिक करके हम id todo को खींचते हैं => एक अनुरोध बनता है (ध्यान दें कि आईडी स्वयं विधि से पारित नहीं हुई है। प्राप्त करने के लिए आईडी) () विधि से निकाला जाता है (मान = / / todo- सूची / {id}। ") इसके लिए, हमें @PathVariableविधि पैरामीटर में एनोटेशन की आवश्यकता है ) => उत्तर एक टोडो वस्तु के रूप में आता है => सामने वाला वह कार्य करता है जो उसे फिट दिखता है, इस मामले में, टोडो विवरण और तारीख खोलता है।

कोड का टुकड़ा main.js, GET कार्यान्वयन

$(document).on('click', '.todo-link', function(){
    var link = $(this);
    var todoId = link.data('id');
    $.ajax({
        method: "GET",
        url: '/todo-list/' + todoId,
        success: function(response)
        {
            if($('.todo-div > span').is('#' + todoId)){
                return;
            }
            link.parent().append(codeDataTodo(response, todoId));
        },
        error: function(response)
        {
            if(response.status == 404) {
                alert('  !');
            }
        }
    });
    return false;
});

आइए एक और नियंत्रक बनाएं जो प्रारंभ पृष्ठ पर तुरंत टूडू-सूची प्रदर्शित करेगा। हम रिपॉजिटरी के साथ भी काम करते हैं और टोडो सूची प्राप्त करते हैं, और उसके बाद टॉडलिस्ट जादुई रूप से सामने के छोर पर जाता है:

@Controller
public class DefaultController {
    @Autowired
    TodoRepository todoRepository;
    @RequestMapping("/")
    public String index(Model model){
        Iterable<Todo>  todoIterable = todoRepository.findAll();
        ArrayList<Todo> todoList = new ArrayList<>();
        for(Todo todo : todoIterable){
            todoList.add(todo);
        }
        model.addAttribute("todoList", todoList);
        return "index";
    }
}

Index.html में इस तरह के सुधार के साथ, todoList की गतिशील लोडिंग होती है:

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<div id="todo-list">
    <div class="todo-div" th:each="todo : ${todoList}" th:attr="id=${todo.id}">
        <a href="#" class="todo-link" th:attr="data-id=${todo.id}" th:text="${todo.name}"></a>
        <br>
    </div>
</div>

PUT अनुरोध

TodoController में, हम इनपुट मैप पर put()एक एनोटेशन के साथ एक विधि बनाते हैं @PutMapping<स्ट्रिंग, स्ट्रिंग> एक एनोटेशन @RequestParamऔर एक इंट के साथ, जो मान से निकाला जाता है, टोडो के आउटपुट में ResponseEntity में लिपटे। और रिपॉजिटरी में भी अपडेट () विधि नहीं है, इसलिए सब कुछ निम्नानुसार होता है:

टोडो को डेटाबेस से आईडी द्वारा todoRepository के माध्यम से निकाला जाता है = नए मापदंडों को टोडो को सौंपा गया है = यह डेटाबेस में रिपॉजिटरी के माध्यम से सहेजा जाता है => फ्रंटएंड प्रतिक्रिया भेजी जाती है

@PutMapping(value = "todo-list/{id}")
public ResponseEntity<Todo> put(@RequestParam Map<String, String> mapParam, @PathVariable int id){
    Optional<Todo> todoOptional = todoRepository.findById(id);
    if(todoOptional.isEmpty()){
        return ResponseEntity.status(HttpStatus.NOT_FOUND).body(null);
    }
    todoOptional.get().setName(mapParam.get("name"));
    todoOptional.get().setDescription(mapParam.get("description"));
    todoOptional.get().setDate(mapParam.get("date"));
    todoRepository.save(todoOptional.get());
    return ResponseEntity.ok(todoOptional.get());
}

इस समय सामने के छोर पर:

"चेंज" बटन पर क्लिक करें => टोडो डेटा को तत्व से एकत्रित किया जाता है => केस को बदलने के लिए फॉर्म को एडिट किया जाता है (फॉर्म का नाम बदल दिया जाता है और बटन को इनपुट वैल्यू में बदल दिया जाता है। टॉडल डेटा) => फॉर्म को ओपन किया जाता है => चेंज का डेटा बदल जाता है। => फ़ॉर्म में "बदलें" बटन पर क्लिक करें => डेटा संग्रह => एक पुत अनुरोध उत्पन्न होता है (पथ, डेटा) => संशोधित टोडो वस्तु से एक प्रतिक्रिया प्राप्त होती है, लेकिन एक ही आईडी के साथ => दृश्यपटल वह क्या चाहता है, इस मामले में डेटा प्रतिस्थापन करने के लिए।

कोड का टुकड़ा main.js, PUT का कार्यान्वयन

//Update _todo and show updating _todo form
$(document).on('click', '#show-update-todo-list', function(){
    var buttonUpdate = $(this);
    var todoId = buttonUpdate.data('id');
    var todoName = buttonUpdate.data('name');
    var todoDescription = buttonUpdate.data('description');
    var todoDate = buttonUpdate.data('date');
    todoFormNameAndButton(' ', '', 'update-todo');
    todoInputValue(todoName, todoDescription, todoDate);
    $('#todo-form').css('display', 'flex');
    $('#update-todo').click(function() {
        var data = $('#todo-form form').serialize();
        $.ajax({
            method: "PUT",
            url: '/todo-list/' + todoId,
            data: data,
            success: function(response) {
                $('#todo-form').css('display', 'none');
                response.date = response.date.slice(0,10);
                $('.todo-div#' + todoId  + ' > a').text(response.name);
                $('.todo-div#' + todoId +' > span').replaceWith(codeDataTodo(response, todoId));
            }
        });
        return false;
    });
});

आप खुद को इस परियोजना के बारे में अधिक विस्तार से परिचित करा सकते हैं ।

यह शुरुआती से शुरुआती लोगों के लिए लिखा गया है, लेकिन मैं अनुभवी उपयोगकर्ताओं से रचनात्मक आलोचना सुनना पसंद करूंगा, यह उतना ही अच्छा है यदि आप टिप्पणियों में समझाते हैं कि क्यों मैप <स्ट्रिंग, स्ट्रिंग> पीयूटी के लिए पूछते समय नियंत्रक पक्ष पर आता है, मैं क्यों टोडो को प्रस्तुत नहीं कर सकता।

संसाधन:

स्प्रिंग, रेस्ट एपीआई के पहले चरण, पीयूटी पर फ्रंटएंड के साथ संयोजन पर ध्यान केंद्रित करते हैं

स्प्रिंग कनेक्शन

हम एप्लिकेशन बनाते हैं और चलाते हैं

DB बातचीत

PUT अनुरोध

More articles: