<template>
<!-- 导航栏 -->
<div class="top-navbar">
<div class="logo">高校教材管理系统</div>
<div class="user-info">
欢迎您，{{ username }}
<button @click="logout" class="logout-btn">退出登录</button>
</div>
</div>
<div class="main-layout">
<!-- 左侧菜单 -->
<div class="sidebar">
<div class="menu-item active">教材信息</div>
</div>
<!-- 主内容区 -->
<div class="content">
<div class="action-bar">
<input v-model="query" placeholder="请输入教材名称或ISBN" class="search-input" />
<button @click="searchData" class="search-btn">查询</button>
</div>
<table class="data-table">
<thead>
<tr>
<th>教材名称</th>
<th>ISBN</th>
<th>作者</th>
<th>出版社</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr v-for="item in paginatedData" :key="item.textbookId">
<td>{{ item.textbookName }}</td>
<td>{{ item.isbn }}</td>
<td>{{ item.author }}</td>
<td>{{ item.publisher }}</td>
<td>{{ item.price.toFixed
(2) }}</td>
</tr>
</tbody>
</table>
<!-- 分页控件 -->
<div class="pagination">
<span>共 {{ filteredData.length }} 条记录，{{ totalPages }} 页</span>
<button @click="prevPage" :disabled="currentPage === 1">上一页</button>
<span>第 {{ currentPage }} 页</span>
<button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
const router = useRouter
()
const allData = ref
([])
const query = ref
('')
const currentPage = ref
(1)
const pageSize = 10
const username = JSON.parse
(localStorage.getItem
('user'))?.name || '未知用户'
// 搜索过滤
const filteredData = computed
(() => {
const q = query.value.toLowerCase
()
return allData.value.filter
(t =>
t.textbookName.toLowerCase
().includes
(q) ||
t.isbn.includes
(q)
)
})
// 总页数
const totalPages = computed
(() => Math.max
(1, Math.ceil
(filteredData.value.length / pageSize)))
// 当前页数据
const paginatedData = computed
(() => {
const start =
(currentPage.value - 1) * pageSize
const end = start + pageSize
return filteredData.value.slice
(start, end)
})
// 搜索
const searchData =
() => {
currentPage.value = 1
}
// 分页
const prevPage =
() => {
if
(currentPage.value > 1) currentPage.value--
}
const nextPage =
() => {
if
(currentPage.value < totalPages.value) currentPage.value++
}
// 加载数据
const fetchData = async
() => {
try {
const res = await axios.get
('http://localhost:8080/api/textbook/list')
allData.value = res.data
} catch
(err) {
alert
('加载失败，请检查网络')
}
}
// 退出登录
const logout =
() => {
localStorage.removeItem
('user')
router.push
('/login')
}
onMounted
(() => {
const user = JSON.parse
(localStorage.getItem
('user'))
if
(!user || user.role === 'admin') {
router.push
('/login')
} else {
fetchData
()
}
})
</script>
<style scoped>
/* 样式同上，完全一致 */
.top-navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #1890ff;
color: white;
padding: 12px 20px;
font-size: 18px;
box-shadow: 0 2px 4px rgba
(0,0,0,0.1
);
}
.logo {
font-weight: bold;
}
.user-info {
display: flex;
align-items: center;
gap: 10px;
}
.logout-btn {
padding: 6px 12px;
background: #fff;
color: #1890ff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.logout-btn:hover {
background: #e6f7ff;
}
.main-layout {
display: flex;
min-height: calc
(100vh - 52px
);
}
.sidebar {
width: 200px;
background: white;
border-right: 1px solid #ddd;
padding: 20px 0;
}
.menu-item {
padding: 12px 20px;
cursor: pointer;
border-left: 3px solid transparent;
}
.menu-item.active {
background-color: #e6f7ff;
border-left-color: #1890ff;
color: #1890ff;
font-weight: bold;
}
.content {
flex: 1;
padding: 20px;
background-color: #f5f5f5;
}
.action-bar {
margin-bottom: 20px;
display: flex;
gap: 10px;
align-items: center;
}
.search-input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
width: 240px;
}
.search-btn {
padding: 10px 16px;
background-color: #1890ff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.data-table {
width: 100%;
border-collapse: collapse;
background: white;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 1px 3px rgba
(0,0,0,0.1
);
}
.data-table th, .data-table td {
padding: 12px;
border: 1px solid #eee;
text-align: center;
}
.data-table th {
background-color: #f8f9fa;
color: #333;
font-weight: 600;
}
.pagination {
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
color: #666;
font-size: 14px;
}
.pagination button {
padding: 6px 12px;
border: 1px solid #ddd;
background: white;
border-radius: 4px;
cursor: pointer;
}
.pagination button:hover:not
(:disabled) {
background-color: #e6f7ff;
}
.pagination button:disabled {
color: #ccc;
cursor: not-allowed;
}
</style>
<!-- 左侧菜单 -->插入
教材采购申请
教材发放申请
本文通过一个简单的示例展示了如何使用JavaScript进行代码注入。代码注入是一种常见的安全攻击手段，了解其工作原理对于防范此类攻击至关重要。文中提供的示例代码为<script>alert('xxx');</script>，这将触发一个警告框显示文本'xxx'。
扫一扫
1629
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
