|
|
@@ -0,0 +1,202 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>文章品类管理</title>
|
|
|
+ <!-- 引入 Bootstrap 样式 -->
|
|
|
+ <link href="https://gcore.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
+ <script src="https://gcore.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<div class="container mt-5">
|
|
|
+ <!-- 查询部分 -->
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-header bg-primary text-white">
|
|
|
+ <h5>查询数据</h5>
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <div class="row g-3 align-items-center">
|
|
|
+ <div class="col-md-2">
|
|
|
+ <label for="titleInput" class="form-label">标题</label>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-8">
|
|
|
+ <input type="text" class="form-control" id="titleInput" placeholder="请输入标题">
|
|
|
+ </div>
|
|
|
+ <div class="col-md-2">
|
|
|
+ <button class="btn btn-success w-100" onclick="queryData(1)">查询</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 数据展示表格 -->
|
|
|
+ <div class="card mt-4">
|
|
|
+ <div class="card-header bg-secondary text-white">
|
|
|
+ <h5>数据列表</h5>
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <table class="table table-bordered table-hover">
|
|
|
+ <thead class="table-light">
|
|
|
+ <tr>
|
|
|
+ <th>produce_content_id</th>
|
|
|
+ <th>标题</th>
|
|
|
+ <th>品类</th>
|
|
|
+ <th>操作</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody id="dataTableBody">
|
|
|
+ <!-- 动态数据填充 -->
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <!-- 分页控件 -->
|
|
|
+ <nav aria-label="Page navigation">
|
|
|
+ <ul class="pagination justify-content-center" id="pagination">
|
|
|
+ <!-- 分页按钮将在这里生成 -->
|
|
|
+ </ul>
|
|
|
+ </nav>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<!-- JavaScript 脚本 -->
|
|
|
+<script>
|
|
|
+ let currentPage = 1; // 当前页码
|
|
|
+ const pageSize = 50; // 每页显示的数据条数
|
|
|
+
|
|
|
+ window.onload = function () {
|
|
|
+ queryData(currentPage); // 页面加载后自动执行查询，查询第一页数据
|
|
|
+ };
|
|
|
+
|
|
|
+ // 查询数据：调用后端接口，支持分页
|
|
|
+ function queryData(page) {
|
|
|
+ currentPage = page; // 更新当前页码
|
|
|
+ const title = document.getElementById('titleInput').value;
|
|
|
+
|
|
|
+ // 调用后端查询接口
|
|
|
+ fetch(`http://127.0.0.1:8001/articleCategory/list`, { // 替换为实际接口
|
|
|
+ method: 'POST',
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'application/json',
|
|
|
+ 'Access-Control-Allow-Origin': '*'
|
|
|
+ },
|
|
|
+ body: JSON.stringify({title: title, pageNum: currentPage, pageSize: pageSize})
|
|
|
+ })
|
|
|
+ .then(response => response.json())
|
|
|
+ .then(data => {
|
|
|
+ console.log('查询结果:', data);
|
|
|
+ populateTable(data.data.objs); // 渲染数据表格
|
|
|
+ totalPage = data.data.totalSize / pageSize;
|
|
|
+ renderPagination(totalPage); // 渲染分页控件
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.error('查询失败:', error);
|
|
|
+ alert('查询失败，请检查接口连接！');
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 渲染数据到表格
|
|
|
+ function populateTable(data) {
|
|
|
+ const tableBody = document.getElementById('dataTableBody');
|
|
|
+ tableBody.innerHTML = ''; // 清空旧数据
|
|
|
+
|
|
|
+ data.forEach(item => {
|
|
|
+ const row = `
|
|
|
+ <tr>
|
|
|
+ <td>${item.produceContentId}</td>
|
|
|
+ <td>${item.title}</td>
|
|
|
+ <td><input type="text" class="form-control" id="category-${item.produceContentId}" value="${item.category}"></td>
|
|
|
+ <td>
|
|
|
+ <button class="btn btn-primary btn-sm" onclick="submitData('${item.produceContentId}', '${item.title}')">提交</button>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ `;
|
|
|
+ tableBody.insertAdjacentHTML('beforeend', row);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 渲染分页控件
|
|
|
+ function renderPagination(totalPages) {
|
|
|
+ const pagination = document.getElementById('pagination');
|
|
|
+ pagination.innerHTML = ''; // 清空旧分页
|
|
|
+
|
|
|
+ const maxVisiblePages = 5; // 最多显示的页码按钮数量
|
|
|
+ let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
|
|
|
+ let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
|
|
|
+
|
|
|
+ // 上一页按钮
|
|
|
+ pagination.insertAdjacentHTML('beforeend', `
|
|
|
+ <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
|
|
|
+ <a class="page-link" href="#" onclick="queryData(${currentPage - 1})">上一页</a>
|
|
|
+ </li>
|
|
|
+ `);
|
|
|
+
|
|
|
+ // 显示前面的省略号（如果有的话）
|
|
|
+ if (startPage > 1) {
|
|
|
+ pagination.insertAdjacentHTML('beforeend', `
|
|
|
+ <li class="page-item">
|
|
|
+ <a class="page-link" href="#" onclick="queryData(1)">1</a>
|
|
|
+ </li>
|
|
|
+ <li class="page-item disabled">
|
|
|
+ <span class="page-link">...</span>
|
|
|
+ </li>
|
|
|
+ `);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 数字页码按钮
|
|
|
+ for (let i = startPage; i <= endPage; i++) {
|
|
|
+ pagination.insertAdjacentHTML('beforeend', `
|
|
|
+ <li class="page-item ${currentPage === i ? 'active' : ''}">
|
|
|
+ <a class="page-link" href="#" onclick="queryData(${i})">${i}</a>
|
|
|
+ </li>
|
|
|
+ `);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 显示后面的省略号（如果有的话）
|
|
|
+ if (endPage < totalPages) {
|
|
|
+ pagination.insertAdjacentHTML('beforeend', `
|
|
|
+ <li class="page-item disabled">
|
|
|
+ <span class="page-link">...</span>
|
|
|
+ </li>
|
|
|
+ <li class="page-item">
|
|
|
+ <a class="page-link" href="#" onclick="queryData(${totalPages})">${totalPages}</a>
|
|
|
+ </li>
|
|
|
+ `);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 下一页按钮
|
|
|
+ pagination.insertAdjacentHTML('beforeend', `
|
|
|
+ <li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
|
|
|
+ <a class="page-link" href="#" onclick="queryData(${currentPage + 1})">下一页</a>
|
|
|
+ </li>
|
|
|
+ `);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 提交修改：调用后端接口
|
|
|
+ function submitData(id, title) {
|
|
|
+ ele = document.getElementById(`category-` + id);
|
|
|
+ const categoryInput = document.getElementById(`category-` + id).value; // 获取输入框的值
|
|
|
+
|
|
|
+ // 调用后端更新接口
|
|
|
+ fetch('http://127.0.0.1:8001/articleCategory/updateCategory', { // 替换为实际接口
|
|
|
+ method: 'POST',
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'application/json',
|
|
|
+ 'Access-Control-Allow-Origin': '*'
|
|
|
+ },
|
|
|
+ body: JSON.stringify({title: title, category: categoryInput})
|
|
|
+ })
|
|
|
+ .then(response => response.json())
|
|
|
+ .then(data => {
|
|
|
+ console.log('修改结果:', data);
|
|
|
+ alert('修改成功！');
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.error('修改失败:', error);
|
|
|
+ alert('修改失败，请检查接口连接！');
|
|
|
+ });
|
|
|
+ }
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|
wangyunpeng