python使用 flask+vue 製作前後端分離圖書信息管理系統

来源:https://www.cnblogs.com/hahaa/archive/2023/06/29/17514984.html
-Advertisement-
Play Games

哈嘍兄弟們,今天咱們來用Python實現一個前後端分離的圖書信息管理系統。 製作前後端分離圖書信息管理系統的思路: 1、前端部分 首先,我們可以使用 VueJS 作為前端框架,並通過 Vue CLI 工具進行創建和管理項目。 2、後端部分 後端部分我們可以採用 Python Flask 框架,這個框 ...


哈嘍兄弟們,今天咱們來用Python實現一個前後端分離的圖書信息管理系統。

製作前後端分離圖書信息管理系統的思路:

1、前端部分

首先,我們可以使用 VueJS 作為前端框架,並通過 Vue CLI 工具進行創建和管理項目。

2、後端部分

後端部分我們可以採用 Python Flask 框架,這個框架是一個輕量級的Web框架,十分適合快速開發API介面。

3、前端和後端交互

前後端的交互可以採用 Restful API 設計的方式進行,例如創建一個圖書列表介面,前端只需要發送一個 GET 請求給後端,後端通過查詢資料庫,返回 JSON 格式的數據給前端。

4、資料庫

為了方便管理圖書信息,我們可以使用關係型資料庫 MySQL 存儲和管理相關數據。

5、部署

可以使用 Docker 將前後端應用部署在同一個容器內,或者使用 CI/CD 工具將前後端應用分別部署在不同的伺服器上。

總的來說,通過使用以上技術棧,我們就可以實現一個前後端分離的圖書信息管理系統。

 

素材+代碼

 素材和完整代碼,視頻講解,都在文末最後一段代碼里

效果展示

 

 

後端部分

flask: https://flask.palletsprojects.com/en/2.1.x/

flask-sqlalchemy: https://flask-sqlalchemy.palletsprojects.com/en/2.x/

flask-cors: https://flask-cors.readthedocs.io/en/latest/

flask 快速上手

from flask import Flask, request
app = Flask(__name__)
@app.route('/')
def hello_world(): # put application's code here
return 'Welcome Books!'

 

資料庫部分

# -*- coding: utf-8 -*-
from extension import db
class Book(db.Model):
__tablename__ = 'book'
id = db.Column(db.Integer, primary_key=True, autoincrement=True)
book_number = db.Column(db.String(255), nullable=False)
book_name = db.Column(db.String(255), nullable=False)
book_type = db.Column(db.String(255), nullable=False)
book_prize = db.Column(db.Float, nullable=False)
author = db.Column(db.String(255))
book_publisher = db.Column(db.String(255))
@staticmethod
def init_db():
rets = [
(1, '001', '活著', '小說', 39.9, '餘華', '某某出版社'),
(2, '002', '三體', '科幻', 99.8, '劉慈欣', '重慶出版社')
]
for ret in rets:
book = Book()
book.id = ret[0]
book.book_number = ret[1]
book.book_name = ret[2]
book.book_type = ret[3]
book.book_prize = ret[4]
book.author = ret[5]
book.book_publisher = ret[6]
db.session.add(book)
db.session.commit()

 

使用之前需要 flask create 初始化一下數據

 

介面部分

RESTful API 最佳實踐(阮一峰) : https://www.ruanyifeng.com/blog/2018/10/restful-api-best-practice
s.html

Method Views for APIs: https://flask.palletsprojects.com/en/2.1.x/views/#method-views-for-apis

from flask import Flask, request
from flask_cors import CORS
from flask.views import MethodView
from extension import db
from models import Book
app = Flask(__name__)
CORS().init_app(app)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///books.sqlite'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db.init_app(app)
@app.cli.command()
def create():
db.drop_all()
db.create_all()
Book.init_db()
@app.route('/')
def hello_world(): # put application's code here
return 'Welcome Books!'
class BookApi(MethodView):
def get(self, book_id):
if not book_id:
books: [Book] = Book.query.all()
results = [
{
'id': book.id,
'book_name': book.book_name,
'book_type': book.book_type,
'book_prize': book.book_prize,
'book_number': book.book_number,
'book_publisher': book.book_publisher,
'author': book.author,
} for book in books
]
return {
'status': 'success',
'message': '數據查詢成功',
'results': results
}
book: Book = Book.query.get(book_id)
return {
'status': 'success',
'message': '數據查詢成功',
'result': {
'id': book.id,
'book_name': book.book_name,
'book_type': book.book_type,
'book_prize': book.book_prize,
'book_number': book.book_number,
'book_publisher': book.book_publisher,
'author': book.author,
}
}
def post(self):
form = request.json
book = Book()
book.book_number = form.get('book_number')
book.book_name = form.get('book_name')
book.book_type = form.get('book_type')
book.book_prize = form.get('book_prize')
book.author = form.get('author')
book.book_publisher = form.get('book_publisher')
db.session.add(book)
db.session.commit()
# id, book_number, book_name, book_type, book_prize, author,
book_publisher
return {
'status': 'success',
'message': '數據添加成功'
}
def delete(self, book_id):
book = Book.query.get(book_id)
db.session.delete(book)
db.session.commit()
return {
'status': 'success',
'message': '數據刪除成功'
}
def put(self, book_id):
book: Book = Book.query.get(book_id)
book.book_type = request.json.get('book_type')
book.book_name = request.json.get('book_name')
book.book_prize = request.json.get('book_prize')
book.book_number = request.json.get('book_number')
book.book_publisher = request.json.get('book_type')
book.author = request.json.get('book_type')
db.session.commit()
return {
'status': 'success',
'message': '數據修改成功'
}
book_api = BookApi.as_view('book_api')
app.add_url_rule('/books', view_func=book_api, methods=['GET', ], defaults=
{'book_id': None})
app.add_url_rule('/books', view_func=book_api, methods=['POST', ])
app.add_url_rule('/books/<int:book_id>', view_func=book_api, methods=['GET',
'PUT', 'DELETE'])

 

前端部分

vite: https://vitejs.cn/

vue3: https://v3.cn.vuejs.org/

Element Plus: https://element-plus.gitee.io/zh-CN/

axios: https://axios-http.com/docs/intro

 

項目創建

C:\Users\xxp\Desktop>npm init vite@latest
√ Project name: ... book-fontend
√ Select a framework: » vue
√ Select a variant: » vue
Scaffolding project in C:\Users\xxp\Desktop\book-fontend...
Done. Now run:
cd book-fontend
npm install
npm run dev

 

項目初始化

npm install element-plus
npm install axios

 

初始化 element-plus

import {createApp} from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

 

頁面創建

表單數據顯示

<template>
<div style="margin: 0 auto;width: 50%;">
<h1 style="text-align: center">圖書管理系統</h1>
<!-- 添加圖書按鈕 -->
<el-button type="primary" @click="add_dialog_visible = true" size="small">添
加圖書</el-button>
<!-- 數據表格 -->
<el-table :data="books" style="margin: 20px auto;">
<el-table-column label="編號" prop="book_number"/>
<el-table-column label="書名" prop="book_name"/>
<el-table-column label="類型" prop="book_type"/>
<el-table-column label="價格" prop="book_prize"/>
<el-table-column label="作者" prop="author"/>
<el-table-column label="出版社" prop="book_publisher"/>
<el-table-column align="right" label="操作" width="200px">
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">
編輯
</el-button>
<el-button
size="small"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>
刪除
</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script setup>
import axios from 'axios'
import {reactive, ref, onMounted} from "vue";
import {ElMessageBox} from 'element-plus'
const books = reactive([])
const getStudents = () => {
axios.get("http://localhost:5000/books",).then(res => {
books.splice(0, books.length)
books.push(...res.data.results)
console.log('更新數據')
})
}
// 頁面渲染之後添加數據
onMounted(() => {
getStudents()
})
// 刪除數據
const handleDelete = (index, scope) => {
axios.delete(`http://localhost:5000/books/${scope.id}`).then(() => {
getStudents()
})
}
</script>

 

添加數據

html表單

<!-- 添加圖書頁面 -->
<el-dialog
title="添加圖書"
v-model="add_dialog_visible"
width="30%"
:before-close="handleClose"
>
<el-form
ref="ruleFormRef"
:model="book_form"
status-icon
label-width="120px"
class="demo-ruleForm"
>
<el-form-item label="編號" prop="book_number">
<el-input v-model="book_form.book_number" autocomplete="off"/>
</el-form-item>
<el-form-item label="書名" prop="book_name">
<el-input v-model="book_form.book_name" autocomplete="off"/>
</el-form-item>
<el-form-item label="類型" prop="book_type">
<el-input v-model="book_form.book_type" autocomplete="off"/>
</el-form-item>
<el-form-item label="價格" prop="book_prize">
完整源碼文檔:加V:python1018 備註【LL】快速通過領取
<el-input v-model.number="book_form.book_prize" autocomplete="off"/>
</el-form-item>
<el-form-item label="作者" prop="author">
<el-input v-model="book_form.author" autocomplete="off"/>
</el-form-item>
<el-form-item label="出版社" prop="book_publisher">
<el-input v-model="book_form.book_publisher" autocomplete="off"/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(ruleFormRef)">提交</elbutton>
<el-button @click="resetForm(ruleFormRef)">重置</el-button>
</el-form-item>
</el-form>
</el-dialog>

 

JavaScript

/*表單添加*/
const add_dialog_visible = ref(false)
const ruleFormRef = ref()
const book_form = reactive({
book_number: "",
book_name: "",
book_type: "",
book_prize: "",
author: "",
book_publisher: "",
id: "",
})
// 表單提交事件
const submitForm = (formEl) => {
完整源碼文檔:加V:python1018 備註【LL】快速通過領取
axios.post('http://localhost:5000/books', book_form).then(() => {
add_dialog_visible.value = false
formEl.resetFields()
getStudents()
})
}
// 重置表單
const resetForm = (formEl) => {
formEl.resetFields()
}
// 關閉彈窗前確認
const handleClose = (done) => {
ElMessageBox.confirm('確認關閉?')
.then(() => {
done();
})
.catch(() => {
});
}

 

好了,今天的分享就差不多到這裡了!

對下一篇大家想看什麼,可在評論區留言,看到我會更新的。

喜歡就關註一下博主,或點贊收藏評論一下我的文章吧!!!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 最終成果,實現了一個可運行的核心路由工程:柏成/vue-router3.x。地址如下:https://gitee.com/lbcjs/vue-router3.x ...
  • 摘要:在本文中,我們將介紹如何使用Vue3和Spring Framework進行開發,並創建一個簡單的TodoList應用程式。 本文分享自華為雲社區《Vue3搭配Spring Framework開發【Vue3應用程式實戰】》,作者:黎燃。 一、介紹 Vue3和Spring Framework都是現 ...
  • 作者總結這些年在支付寶做架構的經驗,把自己摸索成長的內容寫下來,從對架構師的認知到業務能力和架構能力多方面總結了案例經驗,希望可以幫助到大家。 ...
  • 歡迎來到本篇文章,書接上回,本篇說說 Spring 中的依賴註入,包括註入的方式,寫法,該選擇哪個註入方式以及可能出現的迴圈依賴問題等內容。 如果正在閱讀的朋友還不清楚什麼是「依賴」,建議先看看我第一篇文章,通過 Employee 和 Department 簡單說了什麼是所謂的依賴。 ...
  • # 6 sleep與yield的比較 ## sleep 1. 調用 sleep 會讓當前線程從 *Running* 進入 *Timed Waiting* 狀態(阻塞) 2. 其它線程可以使用 interrupt 方法打斷正在睡眠的線程,這時 sleep 方法會拋出 InterruptedExcept ...
  • 某日二師兄參加XXX科技公司的C++工程師開發崗位第29面: > 面試官:什麼是構造函數? > > 二師兄:構造函數是一種特殊的成員函數,用於創建和初始化類的對象。構造函數的名稱與類的名稱相同,並且沒有返回類型。構造函數在對象被創建時自動調用。 ```c++ struct Foo { Foo(int ...
  • 在`numpy`中,數組可以看作是一系列數值的有序集合,可以通過下標訪問其中的元素。處理數組的過程中,經常需要用到數組過濾功能。 過濾功能可以在處理數據時非常有用,因為它可以使數據更加乾凈和可讀性更強。例如,在進行數據分析時,通常需要去除異常值,過濾掉不必要的元素可以使數據更加易於分析和處理。 `n ...
  • > 本文首發於公眾號:Hunter後端 > 原文鏈接:[celery筆記九之task運行結果查看](https://mp.weixin.qq.com/s/QabEFiXgEOtFCI_kX-yuIg) 這一篇筆記介紹一下 celery 的 task 運行之後結果的查看。 前面我們使用的配置是這樣的: ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...