python使用 flask+vue 制作前后端分离图书信息管理系统

韩锦东

哈喽兄弟们，今天咱们来用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 快速上手

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

复制代码

 
数据库部分

1. # -*- coding: utf-8 -*-
2. from extension import db
3. class Book(db.Model):
4. __tablename__ = 'book'
5. id = db.Column(db.Integer, primary_key=True, autoincrement=True)
6. book_number = db.Column(db.String(255), nullable=False)
7. book_name = db.Column(db.String(255), nullable=False)
8. book_type = db.Column(db.String(255), nullable=False)
9. book_prize = db.Column(db.Float, nullable=False)
10. author = db.Column(db.String(255))
11. book_publisher = db.Column(db.String(255))
12. @staticmethod
13. def init_db():
14. rets = [
15. (1, '001', '活着', '小说', 39.9, '余华', '某某出版社'),
16. (2, '002', '三体', '科幻', 99.8, '刘慈欣', '重庆出版社')
17. ]
18. for ret in rets:
19. book = Book()
20. book.id = ret[0]
21. book.book_number = ret[1]
22. book.book_name = ret[2]
23. book.book_type = ret[3]
24. book.book_prize = ret[4]
25. book.author = ret[5]
26. book.book_publisher = ret[6]
27. db.session.add(book)
28. 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

1. from flask import Flask, request
2. from flask_cors import CORS
3. from flask.views import MethodView
4. from extension import db
5. from models import Book
6. app = Flask(__name__)
7. CORS().init_app(app)
8. app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///books.sqlite'
9. app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
10. db.init_app(app)
11. @app.cli.command()
12. def create():
13. db.drop_all()
14. db.create_all()
15. Book.init_db()
16. @app.route('/')
17. def hello_world(): # put application's code here
18. return 'Welcome Books!'
19. class BookApi(MethodView):
20. def get(self, book_id):
21. if not book_id:
22. books: [Book] = Book.query.all()
23. results = [
24. {
25. 'id': book.id,
26. 'book_name': book.book_name,
27. 'book_type': book.book_type,
28. 'book_prize': book.book_prize,
29. 'book_number': book.book_number,
30. 'book_publisher': book.book_publisher,
31. 'author': book.author,
32. } for book in books
33. ]
34. return {
35. 'status': 'success',
36. 'message': '数据查询成功',
37. 'results': results
38. }
39. book: Book = Book.query.get(book_id)
40. return {
41. 'status': 'success',
42. 'message': '数据查询成功',
43. 'result': {
44. 'id': book.id,
45. 'book_name': book.book_name,
46. 'book_type': book.book_type,
47. 'book_prize': book.book_prize,
48. 'book_number': book.book_number,
49. 'book_publisher': book.book_publisher,
50. 'author': book.author,
51. }
52. }
53. def post(self):
54. form = request.json
55. book = Book()
56. book.book_number = form.get('book_number')
57. book.book_name = form.get('book_name')
58. book.book_type = form.get('book_type')
59. book.book_prize = form.get('book_prize')
60. book.author = form.get('author')
61. book.book_publisher = form.get('book_publisher')
62. db.session.add(book)
63. db.session.commit()
64. # id, book_number, book_name, book_type, book_prize, author,
65. book_publisher
66. return {
67. 'status': 'success',
68. 'message': '数据添加成功'
69. }
70. def delete(self, book_id):
71. book = Book.query.get(book_id)
72. db.session.delete(book)
73. db.session.commit()
74. return {
75. 'status': 'success',
76. 'message': '数据删除成功'
77. }
78. def put(self, book_id):
79. book: Book = Book.query.get(book_id)
80. book.book_type = request.json.get('book_type')
81. book.book_name = request.json.get('book_name')
82. book.book_prize = request.json.get('book_prize')
83. book.book_number = request.json.get('book_number')
84. book.book_publisher = request.json.get('book_type')
85. book.author = request.json.get('book_type')
86. db.session.commit()
87. return {
88. 'status': 'success',
89. 'message': '数据修改成功'
90. }
91. book_api = BookApi.as_view('book_api')
92. app.add_url_rule('/books', view_func=book_api, methods=['GET', ], defaults=
93. {'book_id': None})
94. app.add_url_rule('/books', view_func=book_api, methods=['POST', ])
95. app.add_url_rule('/books/<int:book_id>', view_func=book_api, methods=['GET',
96. 'PUT', 'DELETE'])

复制代码

 
前端部分

1. vite: https://vitejs.cn/
3. vue3: https://v3.cn.vuejs.org/
5. Element Plus: https://element-plus.gitee.io/zh-CN/
7. axios: https://axios-http.com/docs/intro

复制代码

 
项目创建

1. C:\Users\xxp\Desktop>npm init vite@latest
2. √ Project name: ... book-fontend
3. √ Select a framework: » vue
4. √ Select a variant: » vue
5. Scaffolding project in C:\Users\xxp\Desktop\book-fontend...
6. Done. Now run:
7. cd book-fontend
8. npm install
9. npm run dev

复制代码

 
项目初始化

1. npm install element-plus
2. npm install axios

复制代码

 
初始化 element-plus

1. import {createApp} from 'vue'
2. import App from './App.vue'
3. import ElementPlus from 'element-plus'
4. import 'element-plus/dist/index.css'
5. const app = createApp(App)
6. app.use(ElementPlus)
7. app.mount('#app')

复制代码

 
页面创建

表单数据显示

1. <template>
3. <h1 style="text-align: center">图书管理系统</h1>
5. <el-button type="primary" @click="add_dialog_visible = true" size="small">添
6. 加图书</el-button>
8. <el-table :data="books" style="margin: 20px auto;">
9. <el-table-column label="编号" prop="book_number"/>
10. <el-table-column label="书名" prop="book_name"/>
11. <el-table-column label="类型" prop="book_type"/>
12. <el-table-column label="价格" prop="book_prize"/>
13. <el-table-column label="作者" prop="author"/>
14. <el-table-column label="出版社" prop="book_publisher"/>
15. <el-table-column align="right" label="操作" width="200px">
16. <template #default="scope">
17. <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
18. 编辑
19. </el-button>
20. <el-button
21. size="small"
22. type="danger"
23. @click="handleDelete(scope.$index, scope.row)"
24. >
25. 删除
26. </el-button
27. >
28. </template>
29. </el-table-column>
30. </el-table>
32. </template>

复制代码

 
添加数据

html表单

1. <el-dialog
2. title="添加图书"
3. v-model="add_dialog_visible"
4. width="30%"
5. :before-close="handleClose"
6. >
7. <el-form
8. ref="ruleFormRef"
9. :model="book_form"
10. status-icon
11. label-width="120px"
12. class="demo-ruleForm"
13. >
14. <el-form-item label="编号" prop="book_number">
15. <el-input v-model="book_form.book_number" autocomplete="off"/>
16. </el-form-item>
17. <el-form-item label="书名" prop="book_name">
18. <el-input v-model="book_form.book_name" autocomplete="off"/>
19. </el-form-item>
20. <el-form-item label="类型" prop="book_type">
21. <el-input v-model="book_form.book_type" autocomplete="off"/>
22. </el-form-item>
23. <el-form-item label="价格" prop="book_prize">
24. 完整源码文档：加V:python1018 备注【LL】快速通过领取
25. <el-input v-model.number="book_form.book_prize" autocomplete="off"/>
26. </el-form-item>
27. <el-form-item label="作者" prop="author">
28. <el-input v-model="book_form.author" autocomplete="off"/>
29. </el-form-item>
30. <el-form-item label="出版社" prop="book_publisher">
31. <el-input v-model="book_form.book_publisher" autocomplete="off"/>
32. </el-form-item>
33. <el-form-item>
34. <el-button type="primary" @click="submitForm(ruleFormRef)">提交</elbutton>
35. <el-button @click="resetForm(ruleFormRef)">重置</el-button>
36. </el-form-item>
37. </el-form>
38. </el-dialog>

复制代码

 
JavaScript

1. /*表单添加*/
2. const add_dialog_visible = ref(false)
3. const ruleFormRef = ref()
4. const book_form = reactive({
5. book_number: "",
6. book_name: "",
7. book_type: "",
8. book_prize: "",
9. author: "",
10. book_publisher: "",
11. id: "",
12. })
13. // 表单提交事件
14. const submitForm = (formEl) => {
15. 完整源码文档：加V:python1018 备注【LL】快速通过领取
16. axios.post('http://localhost:5000/books', book_form).then(() => {
17. add_dialog_visible.value = false
18. formEl.resetFields()
19. getStudents()
20. })
21. }
22. // 重置表单
23. const resetForm = (formEl) => {
24. formEl.resetFields()
25. }
26. // 关闭弹窗前确认
27. const handleClose = (done) => {
28. ElMessageBox.confirm('确认关闭？')
29. .then(() => {
30. done();
31. })
32. .catch(() => {
33. });
34. }

复制代码

 
好了，今天的分享就差不多到这里了！
对下一篇大家想看什么，可在评论区留言，看到我会更新的。
喜欢就关注一下博主，或点赞收藏评论一下我的文章吧！！！

来源:https://www.cnblogs.com/hahaa/p/17514984.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！