图书管理系统

[其他]代码库
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <script src="js/vue.js"></script>
 
</head>
 
<body>
  <!-- 鏁翠綋椤甸潰甯冨眬 -->
  <div class="container" id="app">
 
    <!-- 涓婇潰锛?闈㈡澘鍜岃〃鍗?->
    <div class="panel  panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">娣诲姞鏂板浘涔?/h3>
      </div>
      <div class="panel-body">
        <!-- 琛ㄥ崟 -->
        <form class="form-inline">
          <div class="form-group">
            <div class="input-group">
              <div class="input-group-addon">涔﹀悕</div>
              <input type="text" class="form-control" id="exampleInputAmount" placeholder="璇疯緭鍏ヤ功鍚?
                v-model="currentBook.bookname">
            </div>
            <div class="input-group">
              <div class="input-group-addon">浣滆€?/div>
              <input type="text" class="form-control" id="exampleInputAmount" placeholder="璇疯緭鍏ヤ功鍚?
                v-model="currentBook.author">
            </div>
            <div class="input-group">
              <div class="input-group-addon">鍑虹増绀?/div>
              <input type="text" class="form-control" id="exampleInputAmount" placeholder="璇疯緭鍏ュ嚭鐗堢ぞ"
                v-model="currentBook.publisher">
            </div>
          </div>
          <button v-if="flag == 0" type="button" class="btn btn-primary" @click="add">娣诲姞</button>
          <button v-else type="button" class="btn btn-warning" @click="updateBook">淇敼</button>
        </form>
 
      </div>
    </div>
    <!-- 涓嬮潰锛氳〃鏍?-->
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>搴忓彿</th>
          <th>涔﹀悕</th>
          <th>浣滆€?/th>
          <th>鍑虹増绀?/th>
          <th>鎿嶄綔</th>
        </tr>
      </thead>
      <tbody id="table_body">
 
        <tr v-for="(item,index) in books" :key="index">
          <td>{{item.id}}</td>
          <td>{{item.bookname}}</td>
          <td>{{item.author}}</td>
          <td>{{item.publisher}}</td>
          <td><button class="btn btn-danger btn-xs" @click="delIndex(index)">鍒犻櫎</button>
            <button class="btn btn-warning btn-xs" @click="toEdit(index)">缂栬緫</button></td>
        </tr>
      </tbody>
    </table>
 
  </div>
  <script>
    new Vue({
      el: "#app",
      data: {
        books: [],
        currentBook: {
          bookname: '',
          author: '',
          publisher: ''
        },
        flag:0 // 0鏄坊鍔狅紝1 鏄慨鏀?
      },
      // 鍒涘缓鏃?
      created() {
        // 璋冪敤鍒濆鍖栨暟鎹?
        this.initData()
      },
      methods: {
        // 鍒濆鍖栨柟娉?
        initData() {
          // 妯℃嫙鏁版嵁浠庢湇鍔″櫒鑾峰彇鐨?
          var data = [
            { "id": 1, "bookname": "瑗挎父璁?, "author": "鍚存壙鎭?, "publisher": "鍖椾含鍥句功鍑虹増绀? },
            { "id": 2, "bookname": "绾㈡ゼ姊?, "author": "鏇归洩鑺?, "publisher": "涓婃捣鍥句功鍑虹増绀? },
            { "id": 3, "bookname": "涓夊浗婕斾箟", "author": "缃楄疮涓?, "publisher": "鍖椾含鍥句功鍑虹増绀? },
            { "id": 379, "bookname": "姘存祾浼?, "author": "鏂借€愬旱", "publisher": "涓婃捣鍑虹増绀? }
          ]
          this.books = data
        },
        delIndex(index) {
          // 绗笁涓弬鏁颁笉鍐欙紝灏辨病鏈夊厓绱犳浛鎹?
          this.books.splice(index, 1)
        },
        // 娣诲姞銆?
        add() {
          // 鐢熸垚id
          this.currentBook.id = this.books.length + 1
          console.log(this.currentBook)
          // 娣诲姞鍒癰ooks
          this.books.push(this.currentBook)
          // 娓呯┖杈撳叆妗?
          this.currentBook = {
            bookname: '',
            author: '',
            publisher: ''
          }
        },
        // 缂栬緫锛堝皢闇€瑕佷慨鏀圭殑鍐呭濉厖鍒拌緭鍏ユ閲岄潰锛?
        toEdit(index){
 
 
          // 搴忓垪鍖栧拰鍙嶅簭鍒楀寲
          this.currentBook = JSON.parse(JSON.stringify(this.books[index]))
          // 灏嗘寜閽慨鏀逛负 淇敼
          this.flag = 1
        },//
 
        // 淇敼锛堢湡姝ｇ殑淇敼锛?
        updateBook(){
          // 鎵惧埌淇敼鐨勪功锛屽湪鏁扮粍閲岄潰鐨勪綅缃?
          for(var i=0;i<this.books.length;i++){
            // 褰撴潯浠剁浉鍚屾椂锛宨灏辨槸淇敼鐨勮繖鏈功鐨勪綅缃?
            if(this.books[i].id == this.currentBook.id){
                // 鏇挎崲
                this.books.splice(i,1,this.currentBook)
            }
          }
          // 娓呯┖杈撳叆妗?
          this.currentBook = {
            bookNmae:'',
            author:'',
            publisher:''
          }
          // 淇敼鎸夐挳銆?
          this.flag = 0
        }
      },
    })
  </script>
</body>
 
</html>
[源代码打包下载]
用户注册

用户登录

发表随想

该用户最新代码

编程随想

[其他]代码库

[源代码打包下载]

网友评论 (发表评论)

回复评论

发表评论：

评论须知：

扫码下载

输入口令后可复制整站源码
