jquery-ui - 使用 crud api
问题描述
file:///C:/Users/Adil%20Ali/Downloads/front%20end%20api/intro.html
上面我有一个带有一些电影列表的网站,任何人都可以列出一些关于如何制作这样的 crud ui 的建议:
<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>');
}
});
});
});
那么我可以添加什么来使它成为一个粗鲁的 UI 应用程序,我的所有请求都在工作,我的目标是让这个 UI 网站更具交互性
解决方案
如果您需要像这样制作 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">×</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>
推荐阅读
- azure-ad-b2c - 从注册和登录 v2 政策中获取电子邮件地址?
- css - 如何让 liveserver 渲染 django 模板?
- ios - 无法读取数据,因为它的格式不正确(swift)
- windows - Bash Shell 脚本无法在 Windows 10 上使用 CMDER 查找文件,但可以在 Linux 上运行
- random - vb6 随机数没有重复和没有零
- odoo - Odoo QWeb:指客户公司
- javascript - Firebase 云函数中的空传播错误
- java - 用随机数创建一个数组
- spring-boot - 多模块项目的模块是否可以使用另一个模块的存储库文件夹?
- html - 在没有类的情况下定位 div 内部的东西?