以下是一个简单的图书管理系统的前端部分示例，包括增,删,改,查的功能。使用了HTML, CSS, JavaScript, jQuery 和 axios 库。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Book Manager</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<h2>Books</h2>
<input type="text" v-model="newBook" placeholder="Add book">
<button @click="addBook">Add</button>
<ul>
<li v-for="(book, index) in books" :key="index">
{{ book }}
<button @click="removeBook(index)">Delete</button>
<button @click="editBook(index)">Edit</button>
</li>
</ul>
<div v-if="editIndex !== null">
<input type="text" v-model="editBookValue">
<button @click="updateBook(editIndex)">Update</button>
<button @click="cancelEdit">Cancel</button>
</div>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@next"></script>
<script src="main.js"></script>
</body>
</html>
CSS (style.css):
#app {
max-width: 600px;
margin: 30px auto;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
input[type="text"] {
width: 100%;
padding: 10px;
margin: 10px 0;
box-sizing: border-box;
}
button {
padding: 10px 15px;
background-color: #5cb85c;
color: white;
border: none;
margin: 10px 0;
cursor: pointer;
}
button:hover {
background-color: #4cae4c;
}
ul li {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
}
JavaScript (main.js):
const { createApp, ref } = Vue;
createApp({
setup() {
const books = ref([]);
const newBook = ref('');
const editIndex = ref(null);
const editBookValue = ref('');
const fetchBooks = async () => {
// 假设有一个API可以获取图书列表
const response = await axios.get('/api/books');
books.value = response.data;
};
fetchBooks();
const addBook = () => {
books.value.push(newBook.value);
newBook.value = '';
};
const removeBook = (index) => {
books.value.splice(index, 1);
};
const editBook = (index) => {
editIndex.value = index;
editBookValue.value = books.value[index];
};
const updateBook = (index) => {
books.value[index] = editBookValue.value;
editIndex.value = null;