? 學生作業-vue圖書管理系統帶報告冊（vue+element+axios）,實現了增刪改查功能，直接安裝包即可運行。

1.部分源碼

首頁

<template><div class="index"><Header></Header><div class="search "><el-input v-model="search" placeholder="請輸入圖書編號/圖書名稱"></el-input><el-button type="primary" @click="Search()">查詢</el-button></div><div class="conter"><ul v-if="searchData.length>0"><li class="l1" v-for="(list,i) in searchData" :key="i"><img :src='list.img' alt=""><p class="p1"><el-button type="primary" @click="handle(list.name)">借閱</el-button></p><span class="info1">{{list.name}}</span></li></ul><ul v-else><li class="l1" v-for="(list,i) in tableData" :key="i"><img :src='list.img' alt=""><p class="p1"><el-button type="primary" @click="handle(list.name)">借閱</el-button></p><span class="info1" @click="goto(list.name,list.img)">{{list.name}}</span></li></ul></div></div> </template><script> import Header from '../Wrap/Wrap' export default {name: 'Book',data () {return {search:'',// 搜索后的展示數據searchData: [],tableData: [{name: '海底兩萬里上冊',img: require('../img/1 (1).jpg')}, {name: '人間失格月亮和六便士羅生門局外人4冊套裝',img: require('../img/1 (2).jpg')},{name: '西游記原著正版人民文學出版社吳承恩完整版',img: require('../img/1 (3).jpg')},{name: '人生十二法則',img: require('../img/1 (4).jpg')},{name: '易中天中華史',img: require('../img/1 (5).jpg')},{name: '朝花夕拾魯迅原著正版無刪減完整版',img: require('../img/1 (6).jpg')},{name: '資治通鑒白話版全集正版原著全6冊',img: require('../img/1 (7).jpg')},{name: '沉默的巡游東野圭吾',img: require('../img/1 (8).jpg')},{name: '海底兩萬里上冊',img: require('../img/1 (1).jpg')}]}},components:{Header},computed: {// ...mapGetters(["getAddressList", "getLoginUser"])},methods:{handle(name){alert(name+'借閱成功！');},goto(name,img) {//直接調用$router.push 實現攜帶參數的跳轉this.$router.push({path: '/Bookinfo',query: {name: name,img:img}})},Search() {// search 是 v-model="search" 的 searchvar search = this.search;if (search) {this.searchData = this.tableData.filter(function(product) {// 每一項數據// console.log(product)return Object.keys(product).some(function(key) {// 每一項數據的參數名// console.log(key)return (String(product[key])// toLowerCase() 方法用于把字符串轉換為小寫。.toLowerCase()// indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。.indexOf(search) > -1);});});}}} } </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .el-button{border-radius: 0px; } .search {width: 100%;height: 50px;padding-right: 20px;margin-top: 20px;float: right;text-align: right;background-color: white; } .search .el-input{width: 200px;height: 50px;margin-right: 20px; } .conter{width: 100%;height: 950px;margin-top: 20px;background-color: rgb(218, 218, 218); } .conter ul {width: 100%;height: 100%;display: flex;flex-wrap:wrap;justify-content:space-around; background-color: rgb(218, 218, 218); } .conter ul li{position: relative;list-style: none;width: 30.5%;height: 244px;margin: 1%;background-color: white;text-align: center;transition: all .5s ease;cursor: pointer; } .conter ul li img{width: 248px;height: 248px;transform: scale(0.95) } .conter ul li p{position: absolute;top: 50%;left: 50%;width: 100%;height: 100%;transform: translate(-50%,-50%);background-color: rgba(218, 218, 218,.7);transition: all .5s ease;display: none; } .conter ul .el-button{position: absolute;width: 150px;top: 50%;left: 50%;background-color: #0085dd;transform: translate(-50%,-50%); } .conter ul .info1{position: absolute;width: 330px;bottom: -12%;left: 50%;transform: translateX(-50%); } .conter ul .l1:hover .p1{display:block; } .conter ul .l2:hover .p2{display:block; } .conter ul .l3:hover .p3{display:block; } .conter ul .l4:hover .p4{display:block; } .conter ul .l5:hover .p5{display:block; } .conter ul .l6:hover .p6{display:block; } .conter ul .l7:hover .p7{display:block; } .conter ul .l8:hover .p8{display:block; } .conter ul .l9:hover .p9{display:block; } </style>

路由

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld'; Vue.use(Router)export default new Router({mode: 'history', //去掉url中的#routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path: '/Reg',name: 'reg',component: () =>import ('@/components/Regiser/index.vue')},{path: '/Bookinfo',name: 'Bookinfo',component: () =>import ('@/components/Bookinfo/index.vue')},{path: '/Home',component: () =>import ('@/components/Home/Home.vue')},{path: '/Book',component: () =>import ('@/components/Book/Book.vue')},{path: '/Add',component: () =>import ('@/components/Add/Add.vue')},{path: '/load',component: () =>import ('@/components/load/load.vue')}] })

2.部分截圖

?

總結

以上是生活随笔為你收集整理的vue学生作业-图书管理系统的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。