前端简单的图书增，删改，查（html+css+javascript+jquery+axios）自学前端有不足的地方希望大家指导，全部源代码已上传

这篇文章距离上次修改已过203天，其中的内容可能已经有所变动。

以下是一个简单的图书管理系统的前端部分示例，包括增,删,改,查的功能。使用了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;

前端简单的图书增，删改，查（html+css+javascript+jquery+axios）自学前端有不足的地方希望大家指导，全部源代码已上传

评论已关闭

推荐阅读