圖書管理系統練習項目源碼-前后端分離-使用node.js來做后端開發

前端學習了這么久了，node.js 也有了一定的了解，知道使用node也可以來開發后端，今天給大家分享使用node 來做后端，vue來寫前端，做一個簡單的圖書管理系統。我們在剛開始學習編程的時候，需要自己寫大量的項目來練習自己的編程技能，在開發中你會遇到各種各樣的編程問題，這個時候就可以根據自己學習到的編程知識來解決開發中遇到的問題，這樣我們就會慢慢的掌握一門編程語言。
今天分享的就是我最近寫的一個圖書管理系統。
使用技術：
Node.js：后端使用Node.js平臺，版本要求16.20以上，基于其高性能和跨平臺特性，能夠輕松支持大規模的API請求。

Express框架：簡潔高效的后端框架，幫助快速搭建API服務。

MySQL 5.7：作為關系型數據庫管理系統，MySQL用于存儲用戶和圖書信息，并支持CRUD操作。

Vue2：前端使用Vue2框架，配合Element UI組件庫，提供響應式頁面和現代化用戶界面。

Element UI：幫助實現簡潔且功能豐富的UI設計，極大提高了前端開發效率。

系統功能：
用戶管理：可以新增、編輯、刪除用戶信息。

圖書管理：添加、修改、刪除圖書，并能夠查看圖書列表。

借閱管理：記錄圖書借閱、歸還情況。

數據展示：通過前端頁面展示系統中的圖書、用戶信息，提供了簡潔、易用的界面。
部分頁面效果展示：
在這里插入圖片描述

目錄結構：

部分前端代碼：

<template><div class="app-container"><!-- 搜索和操作欄 --><div class="filter-container"><el-inputv-model="listQuery.name"placeholder="請輸入圖書名稱"style="width: 200px; margin-right: 10px"class="filter-item"@keyup.enter.native="handleFilter"/><el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button><el-button type="primary" @click="handleCreate" style="margin-left: 10px">新增圖書</el-button></div><!-- 數據表格 --><el-tablev-loading="listLoading":data="list"element-loading-text="加載中..."borderfithighlight-current-rowstyle="margin-top: 20px;"><el-table-column label="圖書編號" prop="book_no" align="center" /><el-table-column label="圖書名稱" prop="name" align="center" /><el-table-column label="分類" prop="category_name" align="center" /><el-table-column label="作者" prop="author" align="center" /><el-table-column label="使用狀態" align="center"><template slot-scope="{row}"><el-tag :type="row.use_status === 0 ? 'info' : row.use_status === 1 ? 'success' : 'warning'">{{ row.use_status === 0 ? '在書架' : row.use_status === 1 ? '已買' : '已借出' }}</el-tag></template></el-table-column><el-table-column label="是否二手" align="center"><template slot-scope="{row}"><el-tag :type="row.is_second_hand === 1 ? 'warning' : 'info'">{{ row.is_second_hand === 1 ? '是' : '否' }}</el-tag></template></el-table-column><el-table-column label="狀態" align="center"><template slot-scope="{row}"><el-tag :type="row.status === 1 ? 'success' : 'danger'"  style="cursor: pointer">{{ row.status === 1 ? '正常' : '維護' }}</el-tag></template></el-table-column><el-table-column label="備注" prop="remark" align="center" show-overflow-tooltip /><el-table-column label="創建時間" prop="created_at" align="center" /><el-table-column label="操作" align="center" width="160" fixed="right"><template slot-scope="{row}"><el-button type="primary" size="mini" @click="handleUpdate(row)">編輯</el-button><el-button type="danger" size="mini" @click="handleDelete(row)">刪除</el-button></template></el-table-column></el-table><!-- 新增/編輯對話框 --><el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px"><el-formref="dataForm":model="temp":rules="rules"label-position="left"label-width="100px"style="margin-left: 50px; margin-right: 50px"><el-form-item label="圖書編號" prop="book_no"><el-input v-model="temp.book_no" placeholder="請輸入圖書編號" /></el-form-item><el-form-item label="圖書名稱" prop="name"><el-input v-model="temp.name" placeholder="請輸入圖書名稱" /></el-form-item><el-form-item label="圖書分類" prop="category_id"><el-select v-model="temp.category_id" placeholder="請選擇圖書分類" style="width: 100%"><el-optionv-for="item in categories":key="item.id":label="item.name":value="item.id"/></el-select></el-form-item><el-form-item label="作者" prop="author"><el-input v-model="temp.author" placeholder="請輸入作者" /></el-form-item><el-form-item label="出版日期" prop="publish_date"><el-date-pickerv-model="temp.publish_date"type="datetime"placeholder="請選擇出版日期"style="width: 100%"/></el-form-item><el-form-item label="定價" prop="price"><el-input-numberv-model="temp.price":precision="2":step="0.1":min="0"style="width: 100%"/></el-form-item><el-form-item label="狀態" prop="status"><el-select v-model="temp.status" placeholder="請選擇狀態" style="width: 100%"><el-option label="正常" :value="1" /><el-option label="維護" :value="0" /></el-select></el-form-item><el-form-item label="使用狀態" prop="use_status"><el-select v-model="temp.use_status" placeholder="請選擇使用狀態" style="width: 100%"><el-option label="在書架" :value="0" /><el-option label="已買" :value="1" /><el-option label="已借出" :value="2" /></el-select></el-form-item><el-form-item label="是否二手" prop="is_second_hand"><el-select v-model="temp.is_second_hand" placeholder="請選擇是否二手" style="width: 100%"><el-option label="否" :value="0" /><el-option label="是" :value="1" /></el-select></el-form-item><el-form-item label="備注" prop="remark"><el-inputv-model="temp.remark"type="textarea"placeholder="請輸入備注信息":rows="3"/></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="submitForm">確定</el-button></div></el-dialog></div>
</template><script>
import {getBookList,createBook,updateBook,deleteBook,updateBookStatus
} from '@/api/book'
import { getCategoryList } from '@/api/category'export default {name: 'BookList',data() {return {list: [], // 圖書列表數據categories: [], // 分類列表數據listLoading: false, // 列表加載狀態listQuery: { // 查詢參數name: '' // 圖書名稱搜索關鍵詞},dialogVisible: false, // 對話框顯示狀態dialogTitle: '', // 對話框標題temp: { // 臨時數據對象id: undefined,book_no: '',name: '',category_id: undefined,author: '',publish_date: undefined,price: 0,status: 1,remark: '',use_status: 0,is_second_hand: 0},rules: { // 表單驗證規則book_no: [{ required: true, message: '請輸入圖書編號', trigger: 'blur' }],name: [{ required: true, message: '請輸入圖書名稱', trigger: 'blur' }],category_id: [{ required: true, message: '請選擇圖書分類', trigger: 'change' }],author: [{ required: true, message: '請輸入作者', trigger: 'blur' }],publish_date: [{ required: true, message: '請選擇出版日期', trigger: 'change' }],price: [{ required: true, message: '請輸入定價', trigger: 'blur' }]}}},created() {this.getList()this.getCategories()},methods: {// 獲取圖書列表async getList() {try {this.listLoading = trueconst { data } = await getBookList(this.listQuery)this.list = data} catch (error) {console.error('獲取圖書列表失敗:', error)} finally {this.listLoading = false}},// 處理搜索handleFilter() {this.getList()},// 獲取分類列表async getCategories() {try {const { data } = await getCategoryList()this.categories = data} catch (error) {console.error('獲取分類列表失敗:', error)}},// 重置表單resetTemp() {this.temp = {id: undefined,book_no: '',name: '',category_id: undefined,author: '',publish_date: undefined,price: 0,status: 1,remark: '',use_status: 0,is_second_hand: 0}},// 打開新增對話框handleCreate() {this.resetTemp()this.dialogTitle = '新增圖書'this.dialogVisible = truethis.$nextTick(() => {this.$refs['dataForm'].clearValidate()})},// 打開編輯對話框handleUpdate(row) {this.temp = Object.assign({}, row)this.dialogTitle = '編輯圖書'this.dialogVisible = truethis.$nextTick(() => {this.$refs['dataForm'].clearValidate()})},// 提交表單submitForm() {this.$refs['dataForm'].validate(async (valid) => {if (valid) {try {if (this.temp.id) {// 更新await updateBook(this.temp.id, this.temp)this.$message.success('更新成功')} else {// 新增await createBook(this.temp)this.$message.success('創建成功')}this.dialogVisible = falsethis.getList()} catch (error) {console.error('保存圖書失敗:', error)}}})},// 刪除圖書handleDelete(row) {this.$confirm('確認刪除該圖書嗎？', '提示', {type: 'warning'}).then(async () => {try {await deleteBook(row.id)this.$message.success('刪除成功')this.getList()} catch (error) {console.error('刪除圖書失敗:', error)}}).catch(() => {})},// 更新狀態async handleStatusChange(row) {try {await updateBookStatus(row.id, row.status)this.$message.success('狀態更新成功')} catch (error) {console.error('更新狀態失敗:', error)// 恢復原狀態row.status = row.status === 1 ? 0 : 1}}}
}
</script><style lang="scss" scoped>
.filter-container {padding-bottom: 10px;.filter-item {margin-right: 10px;}
}
</style>

部分后端代碼：

const BookModel = require('../models/book.model')
const Response = require('../utils/response')
const asyncHandler = require('../utils/asyncHandler')class BookController {/*** 獲取圖書列表*/getList = asyncHandler(async (req, res) => {const { name } = req.queryconst books = await BookModel.getAll({ name })res.json(Response.success(books))})/*** 獲取圖書詳情*/getDetail = asyncHandler(async (req, res) => {const { id } = req.paramsconst book = await BookModel.findById(id)if (!book) {return res.json(Response.error('圖書不存在'))}res.json(Response.success(book))})/*** 創建圖書*/create = asyncHandler(async (req, res) => {const { book_no, name, category_id, author, publish_date, price, status, remark, use_status, is_second_hand } = req.body// 驗證必填字段if (!book_no) {return res.json(Response.error('圖書編號不能為空'))}if (!name) {return res.json(Response.error('圖書名稱不能為空'))}if (!category_id) {return res.json(Response.error('圖書分類不能為空'))}if (!author) {return res.json(Response.error('作者不能為空'))}if (!publish_date) {return res.json(Response.error('出版日期不能為空'))}if (!price) {return res.json(Response.error('定價不能為空'))}const id = await BookModel.create({ book_no, name, category_id, author, publish_date, price, status, remark,use_status,is_second_hand})const book = await BookModel.findById(id)res.json(Response.success(book, '創建成功'))})/*** 更新圖書*/update = asyncHandler(async (req, res) => {const { id } = req.paramsconst { book_no, name, category_id, author, publish_date, price, status, remark, use_status, is_second_hand } = req.bodyconst book = await BookModel.update(id, { book_no, name, category_id, author, publish_date, price, status, remark,use_status,is_second_hand})res.json(Response.success(book, '更新成功'))})/*** 刪除圖書*/delete = asyncHandler(async (req, res) => {const { id } = req.paramsawait BookModel.delete(id)res.json(Response.success(null, '刪除成功'))})/*** 更新圖書狀態*/updateStatus = asyncHandler(async (req, res) => {const { id } = req.paramsconst { status } = req.bodyif (status === undefined) {return res.json(Response.error('狀態不能為空'))}const book = await BookModel.updateStatus(id, status)res.json(Response.success(book, '狀態更新成功'))})
}module.exports = new BookController()