By GokiSoft.com| 11:53 15/08/2022|
Spring MVC

[Souce Code] Phát triển dự án bằng Spring MVC - Rest API - Client Side

[Souce Code] Phát triển dự án bằng Spring MVC - Rest API - Server Side



#config.js


const BASE_URL = "http://localhost:8080/APISpringMVC";
const API_STUDENT_LIST = BASE_URL + "/api/test/students";
const API_TOUR_LIST = BASE_URL + "/api/tour/list";
const API_TOUR_ADD = BASE_URL + "/api/tour/add";
const API_TOUR_EDIT = BASE_URL + "/api/tour/edit";
const API_TOUR_FIND = BASE_URL + "/api/tour/find";
const API_TOUR_DELETE = BASE_URL + "/api/tour/delete";

function getParameterByName(name, url = window.location.href) {
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}


#student.html


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Student Management</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript" src="config.js"></script>
</head>
<body>
  
<div class="container mt-5">
  <div class="row">
    <div class="col-md-12">
      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th>STT</th>
            <th>Full Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody id="result">
        </tbody>
      </table>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(function() {
    $.get(API_STUDENT_LIST, function(data) {
      index = 0
      for(item of data) {
        $('#result').append(`<tr>
            <td>${++index}</td>
            <td>${item.fullname}</td>
            <td>${item.email}</td>
          </tr>`)
      }
    })
  })
</script>
</body>
</html>


#add.html


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>View - Form Add New Tour</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="../config.js?id=2"></script>
    </head>
    <body>
        <div class="container">
            <h1 style="text-align: center">Add new tour</h1>
            <div class="row">
                <div class="col-md-12">
                    <form method="post" id="MyForm">
                        <div class="form-group">
                            <label>Title: </label>
                            <input required="true" type="text" name="title" class="form-control" placeholder="Enter title"/>
                        </div>
                        <div class="form-group">
                            <label>Thumbnail: </label>
                            <input required="true" type="text" name="thumbnail" class="form-control" placeholder="Enter thumbnail"/>
                        </div>
                        <div class="form-group">
                            <label>Address </label>
                            <input required="true" type="text" name="address" class="form-control" placeholder="Enter address"/>
                        </div>
                        <div class="form-group">
                            <label>Tour Date: </label>
                            <input required="true" type="datetime-local" name="dateTime" class="form-control" placeholder="Enter tour date"/>
                        </div>
                        <div class="form-group">
                            <label>Price </label>
                            <input required="true" type="number" name="price" class="form-control" placeholder="Enter price"/>
                        </div>
                        <div class="form-group">
                            <label>Description: </label>
                            <textarea class="form-control" name="content" rows="5"></textarea>
                        </div>
                        <button class="btn btn-success">Add tour</button>
                        <p style="margin-top: 20px">
                            <a href="index.html">Back to tour list</a>
                        </p>
                    </form>
                </div>
            </div>
        </div>

        <script type="text/javascript">
            $(function() {
                $('#MyForm').submit(function() {
                    $.post(API_TOUR_ADD, {
                        title: $('[name=title]').val(),
                        thumbnail: $('[name=thumbnail]').val(),
                        address: $('[name=address]').val(),
                        tourDate: $('[name=dateTime]').val(),
                        price: $('[name=price]').val(),
                        content: $('[name=content]').val()
                    }, function(data) {
                        window.open('add.html', '_self')
                    })
                    return false;
                })
            })
        </script>
    </body>
</html>


#edit.html


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>View - Form Edit Tour</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="../config.js?id=3"></script>
    </head>
    <body>
        <div class="container">
            <h1 style="text-align: center">Add new tour</h1>
            <div class="row">
                <div class="col-md-12">
                    <form method="post" id="MyForm">
                        <div class="form-group">
                            <label>Title: </label>
                            <input required="true" type="text" name="title" class="form-control" placeholder="Enter title"/>
                        </div>
                        <div class="form-group">
                            <label>Thumbnail: </label>
                            <input required="true" type="text" name="thumbnail" class="form-control" placeholder="Enter thumbnail"/>
                        </div>
                        <div class="form-group">
                            <label>Address </label>
                            <input required="true" type="text" name="address" class="form-control" placeholder="Enter address"/>
                        </div>
                        <div class="form-group">
                            <label>Tour Date: </label>
                            <input required="true" type="datetime-local" name="dateTime" class="form-control" placeholder="Enter tour date"/>
                        </div>
                        <div class="form-group">
                            <label>Price </label>
                            <input required="true" type="number" name="price" class="form-control" placeholder="Enter price"/>
                        </div>
                        <div class="form-group">
                            <label>Description: </label>
                            <textarea class="form-control" name="content" rows="5"></textarea>
                        </div>
                        <button class="btn btn-warning">Update tour</button>
                        <p style="margin-top: 20px">
                            <a href="index.html">Back to tour list</a>
                        </p>
                    </form>
                </div>
            </div>
        </div>

        <script type="text/javascript">
            $(function() {
                id = getParameterByName('id')

                $.get(API_TOUR_FIND + "?id=" + id, function(data) {
                    $('[name=title]').val(data.title)
                    $('[name=thumbnail]').val(data.thumbnail)
                    $('[name=address]').val(data.address)
                    $('[name=dateTime]').val(data.dateTime)
                    $('[name=price]').val(data.price)
                    $('[name=content]').val(data.content)
                })

                $('#MyForm').submit(function() {
                    $.post(API_TOUR_EDIT, {
                        id: id,
                        title: $('[name=title]').val(),
                        thumbnail: $('[name=thumbnail]').val(),
                        address: $('[name=address]').val(),
                        tourDate: $('[name=dateTime]').val(),
                        price: $('[name=price]').val(),
                        content: $('[name=content]').val()
                    }, function(data) {
                        window.open('add.html', '_self')
                    })
                    return false;
                })
            })
        </script>
    </body>
</html>


#index.html


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Student Management</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript" src="../config.js?id=1"></script>
</head>
<body>
  
<div class="container mt-5">
  <div class="row">
    <div class="col-md-12">
      <a href="add.html"><button class="btn btn-success">Add tour</button></a>
      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th>STT</th>
            <th>Thumbnail</th>
            <th>Title</th>
            <th>Address</th>
            <th>Tour Date</th>
            <th>Price</th>
            <th style="width: 50px"></th>
            <th style="width: 50px"></th>
          </tr>
        </thead>
        <tbody id="result">
        </tbody>
      </table>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(function() {
    $.get(API_TOUR_LIST, function(data) {
      index = 0
      for(item of data) {
        $('#result').append(`<tr>
            <td>${++index}</td>
            <td><img src="${item.thumbnail}" style="width: 120px"/></td>
            <td>${item.title}</td>
            <td>${item.address}</td>
            <td>${item.tourDate}</td>
            <td>${item.price}</td>
            <td>
              <a href="edit.html?id=${item.id}"><button class="btn btn-warning">Edit</button></a>
            </td>
            <td>
              <button class="btn btn-danger" onclick="deleteItem(${item.id})">Delete</button>
            </td>
          </tr>`)
      }
    })
  })

  function deleteItem(id) {
    option = confirm("Are you sure to delete this item?")
    if(!option) return

    $.post(API_TOUR_DELETE, {
      "id": id
    }, function(data) {
      location.reload()
    })
  }
</script>
</body>
</html>


Tags:



Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó