使用Vue.js构建图书管理前端-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51958339/article/details/109429097

本文档介绍了如何使用Vue.js构建图书管理的前端页面，包括在http/apis.js中添加后端请求路由，router/index.js中配置路由，创建Books.vue父组件和BookEdit.vue子组件，以及在main.js中引入ElementUI进行UI设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.图书管理页面

1.1 http/apis.js添加后端请求路由

import {
    get, post, put, del } from './index'
// 书籍管理接口
export const getBookList = (params, headers) => get("/books/book/", params, headers) 
export const addBook = (params, headers) => post("/books/book/", params, headers)
export const editBook = (params, headers) => put("/books/book/", params, headers) 
export const delBook = (params, headers) => del("/books/book/", params, headers)

1.2 router/index.js添加路由

import Books from '@/views/books/Books'
export default new Router({
   
    routes: [ 
        {
    path: '/', name: 'Books', component: Books },        // 图书增删改查 案例 
    ]
  })

1.3 src\views\books\Books.vue父组件

<template>  
    <div>
    	<h1>图书管理系统</h1> 
		<div style="margin: 30px;">   
            <button @click="addNew">新增图书</button>   
		    <BookEdit>  
				v-show='dialogVisible'    
                :visible.sync='dialogVisible'    
                :data='editData'    
				@save='save'
			</BookEdit> 
		</div>
        <div>      
            <table style='margin: auto; border: solid 1px black;'>
                <tr>  
                    <th>图书编号</th>     
                    <th>图书名字</th>   
                    <th>出版时间</th>	
                    <th>阅读数<