devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

flask实现简易图书管理系统_python+htm+flaskl前后端交互的图书馆管理系统代码

作者：从前慢现在也慢 | 2024-07-04 21:21:46

赞

踩

python+htm+flaskl前后端交互的图书馆管理系统代码

项目结构

技术选型

flask 做后端, 提供数据和渲染html
暂时没有提供mysql, 后续会更新操作mysql和样式美化的版本

起一个flask服务

flask是python的一个web框架, 下面演示如何提供http接口, 并返回json数据

main.py

  1. # flask创建http接口
  2. from flask import Flask, request, jsonify,render_template
  3. # 支持flask跨域
  4. from flask_cors import CORS 
  5. # 创建flask服务
  6. app = Flask(__name__)
  7. CORS(app, resources=r'/*')  # 注册CORS, "/*" 允许访问域名所有api  
  8.  
  9. # 首页
  10. @app.route('/',methods=['get'])
  11. def index():
  12.     # 自动在templates里找对应名称的文件
  13.     return jsonify({"msg":"hello"})
  14.  
  15. if __name__ == "__main__":
  16.     # 运行web服务
  17.     app.run(host='0.0.0.0', port=10086)
此时打开终端, 运行 

python main.py
打开浏览器, 输入 http://localhost:10086/

渲染模板

flask可以渲染html文件(自动往项目根目录的templates里找), 并往里面填数据

main.py

  1. # flask创建http接口
  2. from flask import Flask, request, jsonify,render_template
  3. # 支持flask跨域
  4. from flask_cors import CORS 
  5. # 创建flask服务
  6. app = Flask(__name__)
  7. CORS(app, resources=r'/*')  # 注册CORS, "/*" 允许访问域名所有api  
  8.  
  9. # 首页
  10. @app.route('/',methods=['get'])
  11. def index():
  12.     # 自动在templates里找对应名称的文件
  13.     return render_template('index.html',msg="hello world")
  14.  
  15. if __name__ == "__main__":
  16.     # 运行web服务
  17.     app.run(host='0.0.0.0', port=10086)

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     {{msg}}
  11. </body>
  12. </html>

浏览器

用对象数组来存放图书数据

main.py

通过模板渲染传递books到html里 
  1. # flask创建http接口
  2. from flask import Flask, request, jsonify,render_template
  3. # 支持flask跨域
  4. from flask_cors import CORS 
  5. # 创建flask服务
  6. app = Flask(__name__)
  7. CORS(app, resources=r'/*')  # 注册CORS, "/*" 允许访问域名所有api 
  8.  
  9. # 暂时代替数据库
  10. books = [
  11.     {
  12.         "id":'1',
  13.         "name":"hello world",
  14.         "author":"迭名",
  15.         "desc": "程序员入门第一本书",
  16.         "price": 11.99
  17.     },
  18.     {
  19.         "id":'2',
  20.         "name":"0基础学it",
  21.         "author":"xx程序员",
  22.         "desc": "某培训机构精心出品教程",
  23.         "price": 99.98
  24.     },
  25. ]
  26.  
  27. # 首页
  28. @app.route('/',methods=['get'])
  29. def index():
  30.     # 自动在templates里找对应名称的文件
  31.     return render_template('index.html',books=books)
  32.  
  33. if __name__ == "__main__":
  34.     # 运行web服务
  35.     app.run(host='0.0.0.0', port=10086)

index.html

html接收flask后端传来的数据, 渲染到table里 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  10. <!-- 加样式,居中 -->
  11. <style>
  12.     * {
  13.         margin: 0 auto;
  14.     }
  15. </style>
  16.  
  17. <body>
  18.     <br>
  19.     <table border="1">
  20.         <thead>
  21.             <tr>
  22.                 <th>书名</th>
  23.                 <th>作者</th>
  24.                 <th>描述</th>
  25.                 <th>价格</th>
  26.                 <th>操作</th>
  27.             </tr>
  28.         </thead>
  29.         <tbody>
  30.             {% for book in books %} {# 遍历 books 变量 #}
  31.             <tr id={{book.id}}>
  32.                 <th>{{book.name}}</th>
  33.                 <th>{{book.author}}</th>
  34.                 <th>{{book.desc}}</th>
  35.                 <th>{{book.price}}</th>
  36.                 <th>
  37.                     <button id={{book.id}}>删除</button>
  38.                     <a href='http://localhost:10086/uptbook?id={{book.id}}'>修改</a>
  39.                 </th>
  40.             </tr>
  41.             {% endfor %} {# 使用 endfor 标签结束 for 语句 #}
  42.         </tbody>
  43.     </table>
  44.     <br>
  45. </body>
  46.  
  47. </html>

查看效果

添加图书

使用a标签请求flask后端, flask后端返回html模板, 实现跳转添加页面(add.html)
这里add.html是在book下, 这是因为如果还有别的服务(比如用户的crud), 可以通过不同文件夹区分模块

添加两个接口, 我们的id就用book对象在books数组里的下标(索引/序号), 添加就直接append添加到books数组的末尾 
  1. # 跳转添加页面
  2. @app.route('/addbook',methods=['get'])
  3. def addbook_html():
  4.     # 自动在templates里找对应名称的文件
  5.     return render_template('book/add.html')
  6.  
  7. # 添加
  8. @app.route('/addbook',methods=['post'])
  9. def addbook(): 
  10.     # 获取json数据
  11.     book = request.get_json() 
  12.     book['id']= str(len(book)-1) 
  13.     books.append(book)
  14.     return jsonify({"books":books})

main.py

  1. # flask创建http接口
  2. from flask import Flask, request, jsonify,render_template
  3. # 支持flask跨域
  4. from flask_cors import CORS 
  5. # 创建flask服务
  6. app = Flask(__name__)
  7. CORS(app, resources=r'/*')  # 注册CORS, "/*" 允许访问域名所有api 
  8.  
  9. # 暂时代替数据库
  10. books = [
  11.     {
  12.         "id":'1',
  13.         "name":"hello world",
  14.         "author":"迭名",
  15.         "desc": "程序员入门第一本书",
  16.         "price": 11.99
  17.     },
  18.     {
  19.         "id":'2',
  20.         "name":"0基础学it",
  21.         "author":"xx程序员",
  22.         "desc": "某培训机构精心出品教程",
  23.         "price": 99.98
  24.     },
  25. ]
  26.  
  27. # 首页
  28. @app.route('/',methods=['get'])
  29. def index():
  30.     # 自动在templates里找对应名称的文件
  31.     return render_template('index.html',books=books)
  32.  
  33. # 跳转添加页面
  34. @app.route('/addbook',methods=['get'])
  35. def addbook_html():
  36.     # 自动在templates里找对应名称的文件
  37.     return render_template('book/add.html')
  38.  
  39. # 添加
  40. @app.route('/addbook',methods=['post'])
  41. def addbook(): 
  42.     # 获取json数据
  43.     book = request.get_json() 
  44.     # 用数组下标表示id
  45.     book['id']= str(len(book)-1) 
  46.     # 添加到books末尾
  47.     books.append(book)
  48.     return jsonify({"books":books})
  49.  
  50. if __name__ == "__main__":
  51.     # 运行web服务
  52.     app.run(host='0.0.0.0', port=10086)

index.html

我们使用axios(js的一个库)来发送http请求 
  1. <!-- 引入axios发送请求给后端 -->
  2. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
发送请求前, 通过input框的value获取数据, 然后axios发送post请求, 并传递一个json对象给后端 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  10.  
  11. <body>
  12.     <form id="form">
  13.         <lable>书名</lable>
  14.         <input type="text" name="book-name" id="book-name">
  15.         <label>作者</label>
  16.         <input type="text" name="book-author" id="book-author">
  17.         <label>描述</label>
  18.         <input type="text" name="book-desc" id="book-desc">
  19.         <label>价格</label>
  20.         <input type="text" name="book-price" id="book-price">
  21.         <button type="submit">提交</button>
  22.     </form>
  23.     <!-- 引入axios发送请求给后端 -->
  24.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  25.     <script>
  26.         const addform = document.querySelector("#form")
  27.         const bookName = document.querySelector("#book-name")
  28.         const bookDesc = document.querySelector("#book-desc")
  29.         const bookAuthor = document.querySelector("#book-author")
  30.         const bookPrice = document.querySelector("#book-price")
  31.         addform.addEventListener("submit", function (e) {
  32.             e.preventDefault();
  33.             // console.log(bookName.value);
  34.             // 发送请求给后端
  35.             axios.post('http://localhost:10086/addbook',
  36.                 // 传递json数据给后端
  37.                 {
  38.                     name: bookName.value,
  39.                     author: bookAuthor.value,
  40.                     desc: bookDesc.value,
  41.                     price: bookPrice.value
  42.                 })
  43.                 // axios请求完成后
  44.                 .then((res) => {
  45.                     // 后端处理完请求,axios拿到的结果
  46.                     console.log(res);
  47.                     alert('添加成功')
  48.                     // 跳转首页
  49.                     window.location.href = 'http://localhost:10086/'
  50.                 })
  51.         })
  52.     </script>
  53. </body>
  54.  
  55. </html>

查看效果

删除图书

我们通过axios发送delete请求给后端, 同时传递id, 后端遍历books, 找到对应id的元素下标, 然后删除

main.py

  1. # flask创建http接口
  2. from flask import Flask, request, jsonify,render_template
  3. # 支持flask跨域
  4. from flask_cors import CORS 
  5. # 创建flask服务
  6. app = Flask(__name__)
  7. CORS(app, resources=r'/*')  # 注册CORS, "/*" 允许访问域名所有api 
  8.  
  9. # 暂时代替数据库
  10. books = [
  11.     {
  12.         "id":'1',
  13.         "name":"hello world",
  14.         "author":"迭名",
  15.         "desc": "程序员入门第一本书",
  16.         "price": 11.99
  17.     },
  18.     {
  19.         "id":'2',
  20.         "name":"0基础学it",
  21.         "author":"xx程序员",
  22.         "desc": "某培训机构精心出品教程",
  23.         "price": 99.98
  24.     },
  25. ]
  26.  
  27. # 首页
  28. @app.route('/',methods=['get'])
  29. def index():
  30.     # 自动在templates里找对应名称的文件
  31.     return render_template('index.html',books=books)
  32.  
  33. # 跳转添加页面
  34. @app.route('/addbook',methods=['get'])
  35. def addbook_html():
  36.     # 自动在templates里找对应名称的文件
  37.     return render_template('book/add.html')
  38.  
  39. # 添加
  40. @app.route('/addbook',methods=['post'])
  41. def addbook(): 
  42.     # 获取json数据
  43.     book = request.get_json() 
  44.     # 用数组下标表示id
  45.     book['id']= str(len(book)-1) 
  46.     # 添加到books末尾
  47.     books.append(book)
  48.     return jsonify({"books":books})
  49.          
  50. # 删除
  51. @app.route('/delete',methods=['delete'])
  52. def delbook():
  53.     id = request.args.get('id')
  54.     # 下标
  55.     index = -1
  56.     # 遍历,找到id相同的元素
  57.     for i in range(len(books)):
  58.         if books[i]['id'] == id:
  59.             # 记录元素下标
  60.             index = i
  61.     # id不是-1表示有找到要删除的元素
  62.     if i != -1:
  63.         # 删除
  64.         books.remove(books[index])
  65.         return jsonify({'books': books})
  66.     else:
  67.         return jsonify({'books': books})
  68.  
  69. if __name__ == "__main__":
  70.     # 运行web服务
  71.     app.run(host='0.0.0.0', port=10086)

index.html

我们在渲染table的时候, 将每行(tr标签)的id设为book的id, 删除时, 可以通过tr的id获取要删除的book的id, 实现删除特定的book 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  10. <!-- 加样式,居中 -->
  11. <style>
  12.     * {
  13.         margin: 0 auto;
  14.         text-align: center;
  15.     }
  16. </style>
  17.  
  18. <body>
  19.     <br>
  20.     <table border="1">
  21.         <thead>
  22.             <tr>
  23.                 <th>书名</th>
  24.                 <th>作者</th>
  25.                 <th>描述</th>
  26.                 <th>价格</th>
  27.                 <th>操作</th>
  28.             </tr>
  29.         </thead>
  30.         <tbody>
  31.             {% for book in books %} {# 遍历 books 变量 #}
  32.             <tr id={{book.id}}>
  33.                 <th>{{book.name}}</th>
  34.                 <th>{{book.author}}</th>
  35.                 <th>{{book.desc}}</th>
  36.                 <th>{{book.price}}</th>
  37.                 <th>
  38.                     <button id={{book.id}}>删除</button>
  39.                     <a href='http://localhost:10086/uptbook?id={{book.id}}'>修改</a>
  40.                 </th>
  41.             </tr>
  42.             {% endfor %} {# 使用 endfor 标签结束 for 语句 #}
  43.         </tbody>
  44.     </table>
  45.     <br>
  46.     <a href="http://localhost:10086/addbook">添加图书</a>
  47.     <!-- axios,可以发送请求给后端 -->
  48.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  49.     <script>
  50.         // 按钮
  51.         const btns = document.querySelectorAll('th > button')
  52.         // 遍历
  53.         btns.forEach((b) => {
  54.             console.log(b.id);
  55.             // 给按钮添加click事件
  56.             b.addEventListener('click', function (e) {
  57.                 // todo 弹出确认框,是否删除
  58.                 // 删除
  59.                 axios.delete(("http://localhost:10086/delete?id=" + b.id))
  60.                     .then((res) => {
  61.                         if (res.status == 200 && res.data) {
  62.                             // 刷新页面
  63.                             location.reload();
  64.                             alert('删除成功')
  65.                         } else {
  66.                             alert('删除失败')
  67.                         }
  68.                     })
  69.             })
  70.         })
  71.     </script>
  72. </body>
  73.  
  74. </html>

查看效果

修改图书信息

前端点击修改后跳转修改页面 
<a href='http://localhost:10086/uptbook?id={{book.id}}'>修改</a>

main.py

  1. # flask创建http接口
  2. from flask import Flask, request, jsonify,render_template
  3. # 支持flask跨域
  4. from flask_cors import CORS 
  5. # 创建flask服务
  6. app = Flask(__name__)
  7. CORS(app, resources=r'/*')  # 注册CORS, "/*" 允许访问域名所有api 
  8.  
  9. # 暂时代替数据库
  10. books = [
  11.     {
  12.         "id":'1',
  13.         "name":"hello world",
  14.         "author":"迭名",
  15.         "desc": "程序员入门第一本书",
  16.         "price": 11.99
  17.     },
  18.     {
  19.         "id":'2',
  20.         "name":"0基础学it",
  21.         "author":"xx程序员",
  22.         "desc": "某培训机构精心出品教程",
  23.         "price": 99.98
  24.     },
  25. ]
  26.  
  27. # 首页
  28. @app.route('/',methods=['get'])
  29. def index():
  30.     # 自动在templates里找对应名称的文件
  31.     return render_template('index.html',books=books)
  32.  
  33. # 跳转添加页面
  34. @app.route('/addbook',methods=['get'])
  35. def addbook_html():
  36.     # 自动在templates里找对应名称的文件
  37.     return render_template('book/add.html')
  38.  
  39. # 添加
  40. @app.route('/addbook',methods=['post'])
  41. def addbook(): 
  42.     # 获取json数据
  43.     book = request.get_json() 
  44.     # 用数组下标表示id
  45.     book['id']= str(len(book)-1) 
  46.     # 添加到books末尾
  47.     books.append(book)
  48.     return jsonify({"books":books})
  49.          
  50. # 删除
  51. @app.route('/delete',methods=['delete'])
  52. def delbook():
  53.     id = request.args.get('id')
  54.     # 下标
  55.     index = -1
  56.     # 遍历,找到id相同的元素
  57.     for i in range(len(books)):
  58.         if books[i]['id'] == id:
  59.             # 记录元素下标
  60.             index = i
  61.     # id不是-1表示有找到要删除的元素
  62.     if i != -1:
  63.         # 删除
  64.         books.remove(books[index])
  65.         return jsonify({'books': books})
  66.     else:
  67.         return jsonify({'books': books})
  68.  
  69. # 跳转修改页面
  70. @app.route('/uptbook',methods=['get'])
  71. def uptbook_html():
  72.     id = request.args.get('id') 
  73.     book = {}
  74.     for b in books: 
  75.         if b['id'] == id:
  76.             book = b
  77.     return render_template('book/update.html',book=book)
  78.  
  79. # 修改
  80. @app.route('/uptbook',methods=['patch'])
  81. def uptbook():
  82.     id = request.args.get('id') 
  83.     book = request.get_json() 
  84.     index = -1
  85.     for i in range(len(books)): 
  86.         if books[i]['id'] == id:
  87.             index = i
  88.     if index == -1:
  89.         return jsonify({"books":books})
  90.     else: 
  91.         if(book['name']!=None):
  92.             books[index]['name'] = book['name']
  93.         if(book['author']!=None):
  94.             books[index]['author'] = book['author']
  95.         if(book['desc']!=None):
  96.             books[index]['desc'] = book['desc']
  97.         if(book['price']!=None):
  98.             books[index]['price'] = book['price']
  99.         return jsonify({"books":books}) 
  100.         
  101. if __name__ == "__main__":
  102.     # 运行web服务
  103.     app.run(host='0.0.0.0', port=10086)

update.html

和添加图书页面基本相同 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  10.  
  11. <body>
  12.     <!-- 自定义属性,值为book.id -->
  13.     <form id="form" data-id={{book.id}}>
  14.         <lable>书名</lable>
  15.         <input type="text" name="book-name" value={{book.name}} id="book-name">
  16.         <label for="">作者</label>
  17.         <input type="text" name="book-author" value={{book.author}} id="book-author">
  18.         <label for="">描述</label>
  19.         <input type="text" name="book-desc" value={{book.desc}} id="book-desc">
  20.         <label for="">价格</label>
  21.         <input type="text" name="book-price" value={{book.price}} id="book-price">
  22.         <button type="submit">提交</button>
  23.     </form>
  24.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  25.     <script>
  26.         const uptform = document.querySelector("#form")
  27.         const bookName = document.querySelector("#book-name")
  28.         const bookDesc = document.querySelector("#book-desc")
  29.         const bookAuthor = document.querySelector("#book-author")
  30.         const bookPrice = document.querySelector("#book-price")
  31.         // 自定义属性 
  32.         const id = uptform.dataset.id
  33.         uptform.addEventListener("submit", function (e) {
  34.             e.preventDefault();
  35.             // console.log(bookName.value);
  36.             // 发送请求给后端
  37.             axios.patch(("http://localhost:10086/uptbook?id=" + id), {
  38.                 name: bookName.value,
  39.                 author: bookAuthor.value,
  40.                 desc: bookDesc.value,
  41.                 price: bookPrice.value
  42.             }).then((res) => {
  43.                 console.log(res);
  44.                 alert('修改成功')
  45.                 // 跳转回首页
  46.                 window.location.href = 'http://localhost:10086/'
  47.             })
  48.         })
  49.     </script>
  50. </body>
  51.  
  52. </html>

查看效果

完结, 恭喜
声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号