使用crud api

问题描述 投票:0回答:1

文件:/// C:/Users/Adil%20Ali/Downloads/front%20end%20api/intro.html

上面我有一个有一些电影列表的网站,任何人都可以列出一些关于如何制作这样的问题的建议:enter image description here

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="mystyle.css" rel="stylesheet">
  <title>My Movies</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="execute.js"></script>
</head>
<body>
  <center>
     <ul id = "movielist"></ul>
     <button id = "showMovies">All Movies</button>
 </center>

 <p>idmovielist: <input type="text" id="idmovielist"></p>
 <p>name: <input type="text" id="name"></p>
 <p>thumnail_path: <input type="text" id="thumnail_path"></p>
 <p>description: <input type="text" id="description"></p>
 <p>year_released: <input type="text" id="year_released"></p>
 <p>language_released: <input type="text" id="language_released"></p>
 <button id = "movieAdded">Add Movie</button>
 <button id = "deleteMovie">Delete Movie</button>
 <button id = "updatedMovie">Update Movie</button>
</body>
</html>

上面是我的Html,下面是我的CSS

body {
  background-color: rgb(10, 200, 196);
  font-family: sans-serif
}
  h1 {
    text-align: center;
    font-family: arial;
    color: #5a5a5a;
  }

  ul {
    display: flex;
    list-style:none;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content:center;
    flex-basis: 80%;
  }

最后是我的jquery

$(function(){
  const $movielist = $('#movielist');
  const $idmovielist = $('#idmovielist');
  const $name = $('#name');
  const $thumnail_path = $('#thumnail_path');
  const $description = $('description');
  const $language_released = $('language_released');
  const $year_released = $('year_released');
 $("#showMovies").click(function(){
$.ajax({
  method:"GET",
  url: "http://localhost:3000/movielist",
  dataType: "json",
  success: function (response) {
       $.each(response, function(i, movie) {
         $movielist.append('<li>idmovielist: ' + movie.idmovielist + ',name:' + movie.name + ', thumnail_path: ' +
       movie.thumnail_path + ', description: ' + movie.description + ', year_released: ' + movie.year_released +
       ', language_released: ' + movie.language_released + '</li>');
       });
      }
  });
  });
  $("#movieAdded").click(function() {
    const movies = {
      idmovielist: $idmovielist.val(),
      name: $name.val(),
      thumnail_path: $thumnail_path.val(),
      description: $description.val(),
      year_released: $year_released.val(),
      language_released: $language_released.val(),
    };
    $.ajax({
      method:"POST",
      url: "http://localhost:3000/movielist/addMovie",
      data: movies,
      success: function (newMovie) {
             $movielist.append('<li>idmovielist: ' + newMovie.idmovielist + ', name:' + newMovie.name + ', thumnail_path: ' +
           newMovie.thumnail_path + ', description: ' + newMovie.description + ', year_released: ' + newMovie.year_released +
           ', language_released: ' + newMovie.language_released + '</li>');
          }
      });
  });
  $("#deleteMovie").click(function() {
    const movies = {
      idmovielist: $idmovielist.val(),
      name: $name.val(),
      thumnail_path: $thumnail_path.val(),
      description: $description.val(),
      year_released: $year_released.val(),
      language_released: $language_released.val(),
    };
    $.ajax({
      method:"DELETE",
      url: "http://localhost:3000/movielist/1",
      data: movies,
      success: function (newMovie) {
             $movielist.append('<li>idmovielist: ' + newMovie.idmovielist + ', name:' + newMovie.name + ', thumnail_path: ' +
           newMovie.thumnail_path + ', description: ' + newMovie.description + ', year_released: ' + newMovie.year_released +
           ', language_released: ' + newMovie.language_released + '</li>');
          }
      });
  });
  $("#updatedMovie").click(function() {
    const movies = {
      idmovielist: $idmovielist.val(),
      name: $name.val(),
      thumnail_path: $thumnail_path.val(),
      description: $description.val(),
      year_released: $year_released.val(),
      language_released: $language_released.val(),
    };
    $.ajax({
      method:"PUT",
      url: "http://localhost:3000/movielist/update/2",
      data: movies,
      success: function (newMovie) {
             $movielist.append('<li>idmovielist: ' + newMovie.idmovielist + ', name:' + newMovie.name + ', thumnail_path: ' +
           newMovie.thumnail_path + ', description: ' + newMovie.description + ', year_released: ' + newMovie.year_released +
           ', language_released: ' + newMovie.language_released + '</li>');
          }
      });
  });

});

那么我可以添加什么来使这个crud UI应用程序与我有所有请求的代码正在工作我的目标是使这个UI的网站更具互动性

jquery-ui crud
1个回答
0
投票

如果您需要使用普通表或(引导表)来制作Crud ui,如果您的结果数量很大,您可以使用DataTables https://cdn.datatables.net/链接您的表,以便您可以拥有漂亮的导航和搜索面板

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <table class="table table-bordered table-hover" width="100%">
                            <thead style="background-color:#ddd;" class="table-borderless">
                                <tr>
                                    <th></th>
                                    <th>Name</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td align="center">1</td>
                                    <td>Home</td>
                                    <td>
                                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
        Edit
      </button>
      <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
        Delete
      </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        
                        
                        <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
© www.soinside.com 2019 - 2024. All rights reserved.