Vue实现图书管理系统的完整攻略
1. 项目搭建
- 安装 Vue CLI 脚手架工具
npm install -g @vue/cli
- 创建 Vue 项目
vue create book-manager
- 安装项目所需的依赖
cd book-manager
npm install axios bootstrap-vue vue-router vuex --save
2. 添加路由
- 在
/src目录下新建一个router目录，创建index.js文件
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/books',
name: 'books',
component: () => import(/* webpackChunkName: "Books" */ '../views/Books.vue'),
},
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
});
export default router;
- 在
/src/views目录下创建Home.vue和Books.vue文件
3. 添加页面
- 在
Home.vue文件中添加一个 “首页” 的欢迎语
<template>
<div class="home">
<h1>欢迎使用图书管理系统</h1>
</div>
</template>
- 在
Books.vue文件中添加一个图书表格
<template>
<div class="books">
<b-table striped hover :items="books" :fields="fields"></b-table>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'Books',
data() {
return {
books: [],
fields: [
{
key: 'title',
sortable: true,
},
{
key: 'author',
sortable: true,
},
{
key: 'isbn',
sortable: true,
},
{
key: 'status',
sortable: true,
},
],
};
},
created() {
axios.get('/api/books').then(response => (this.books = response.data));
},
};
</script>
4. 添加数据
- 在
/src目录下新建一个api目录，创建books.js文件
const mock = [
{
title: 'book1',
author: 'author1',
isbn: '1234567890',
status: 'available',
},
{
title: 'book2',
author: 'author2',
isbn: '0987654321',
status: 'borrowed',
},
];
export default {
get() {
return new Promise(resolve => {
setTimeout(() => {
resolve(mock);
}, 1000);
});
},
};
- 在
/src/main.js文件中添加 mock 数据的接口地址
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';
import './assets/scss/app.scss';
import api from './api/books';
Vue.config.productionTip = false;
Vue.prototype.$api = api;
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app');
5. 数据处理
- 在
/src目录下新建一个store目录，分别创建index.js和modules/books.js文件
// index.js
import Vue from 'vue';
import Vuex from 'vuex';
import books from './modules/books';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
books,
},
});
// modules/books.js
import api from '../../api/books';
const state = {
books: [],
};
const mutations = {
SET_BOOKS(state, books) {
state.books = books;
},
};
const actions = {
async fetchBooks({ commit }) {
const books = await api.get();
commit('SET_BOOKS', books);
},
};
const getters = {};
export default {
namespaced: true,
state,
mutations,
actions,
getters,
};
- 在
/src/views/Books.vue文件中使用vuex获取数据
<script>
import { mapActions, mapGetters } from 'vuex';
export default {
name: 'Books',
computed: {
...mapGetters('books', ['books']),
},
methods: {
...mapActions('books', ['fetchBooks']),
},
created() {
this.fetchBooks();
},
};
</script>
示例
这里提供两个示例：
- 添加图书
在 /src/components 目录下创建 AddBook.vue 组件
<template>
<div>
<b-form @submit.prevent="onSubmit">
<b-form-group
label="Title"
description="Add the title of the book"
>
<b-form-input
v-model="title"
/>
</b-form-group>
<b-form-group
label="Author"
description="Add the author of the book"
>
<b-form-input
v-model="author"
/>
</b-form-group>
<b-form-group
label="ISBN"
description="Add the ISBN of the book"
>
<b-form-input
v-model="isbn"
/>
</b-form-group>
<b-button type="submit" variant="primary">Add</b-button>
</b-form>
</div>
</template>
<script>
export default {
name: 'AddBook',
data() {
return {
title: '',
author: '',
isbn: '',
};
},
methods: {
onSubmit() {
// Todo: add book api request
this.$router.push({ name: 'books' });
},
},
};
</script>
在 Books.vue 文件中添加一个按钮，点击后可以跳转到添加图书的界面
<template>
<div class="books">
<div class="mb-3">
<b-button variant="primary" to="/add_book">Add Book</b-button>
</div>
<b-table striped hover :items="books" :fields="fields"></b-table>
</div>
</template>
- 修改图书状态
在 Books.vue 文件中添加一个状态列的 slot，并添加一个提交按钮，可以将图书状态修改为 “available” 或者 “borrowed”
<template>
<div class="books">
<b-table striped hover :items="books" :fields="fields">
<template slot="status" slot-scope="data">
<b-form-select
v-model="data.item.status"
:options="statusOptions"
@change="onChangeStatus(data.item)"
/>
</template>
</b-table>
</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
export default {
name: 'Books',
computed: {
...mapGetters('books', ['books']),
},
methods: {
...mapActions('books', ['fetchBooks', 'updateBookStatus']),
onChangeStatus(book) {
this.updateBookStatus(book);
},
},
created() {
this.fetchBooks();
},
data() {
return {
statusOptions: [
{ value: 'available', text: 'Available' },
{ value: 'borrowed', text: 'Borrowed' },
],
};
},
};
</script>
在 books.js 中添加 updateBookStatus 方法
// modules/books.js
// ...
const actions = {
// ...
async updateBookStatus({ commit }, book) {
// Todo: api request
commit('SET_BOOK_STATUS', book);
},
};
const mutations = {
// ...
SET_BOOK_STATUS(state, book) {
const index = state.books.findIndex(item => item.isbn === book.isbn);
state.books.splice(index, 1, book);
},
};
// ...
在 api/books.js 中添加 updateStatus 方法
const mock = [
{
title: 'book1',
author: 'author1',
isbn: '1234567890',
status: 'available',
},
{
title: 'book2',
author: 'author2',
isbn: '0987654321',
status: 'borrowed',
},
];
export default {
get() {
return new Promise(resolve => {
setTimeout(() => {
resolve(mock);
}, 1000);
});
},
updateStatus(isbn, status) {
return new Promise(resolve => {
setTimeout(() => {
mock.forEach(book => {
if (book.isbn === isbn) {
book.status = status;
resolve(book);
}
});
}, 1000);
});
},
};
使用 axios 实现真正的 ajax 请求
// api/books.js
import axios from 'axios';
export default {
async get() {
return new Promise(resolve => {
axios.get('/api/books').then(response => {
resolve(response.data);
});
});
},
async updateStatus(isbn, status) {
return new Promise(resolve => {
axios.put(`/api/books/${isbn}`, { status }).then(response => {
resolve(response.data);
});
});
},
};
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue实现图书管理系统 - Python技术站
微信扫一扫 
支付宝扫一扫 