Question

file：/// C：/Users/Adil%20Ali/Downloads/front%20end%20api/intro.html

在我上面的网站上有一些电影列表，谁能给我一些建议，例如：

import csv
from datetime import datetime, timedelta
import os


today = datetime.today()
cutoff = datetime(year=today.year, month=today.month, day=today.day,
                  hour=21, minute=45)
max_time_diff = timedelta(hours=24)

input_file = 'date_temp.txt'
save_path = './clips'
complete_name = os.path.join(save_path, 'clips'+today.strftime('%Y-%m-%d')+'.txt')
os.makedirs(save_path, exist_ok=True)  # Make sure dest directory exists.

with open(input_file, newline='') as oldfile, \
     open(complete_name, 'w', newline='') as newfile:

    reader = csv.reader(oldfile)
    writer = csv.writer(newfile)

    next(reader)  # Skip header.
    for line in reader:
        line_date = datetime.strptime(line[3], "%Y-%m-%d %H:%M:%S")
        if cutoff - line_date < max_time_diff:
            writer.writerow(line)

print('done')

以上是我的HTML 下面是我的CSS

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

最后是我的jQuery

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

因此，我可以添加具有我所有要求的代码的原始应用程序，以使它成为一个粗糙的UI应用程序，我的目标是使该UI的Webiste更具交互性

Answer 1

如果需要使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>

使用Crud API

1 个答案: