WEB开发: 全栈工程师起步 - Python Flask +SQLite的管理系统实现

一、前言

罗马不是一天建成的。

 每个全栈工程师都是从HELLO WORLD 起步的。

之前我们分别用NODE.JS 、ASP.NET Core 这两个框架实现过基于WebServer的全栈工程师入门教程。

今天我们用更简单的来实现: Python。

我们将用Python来实现一个学生管理应用,它包括Web服务器+管理前端+后端Api+数据库,并满足一个管理应用所具有的基本的增删查功能。由此来熟悉Phthon的webServer (Flask )应用。

二、流程和技术栈

先来看下我们设想的应用流程

然后根据这个来设定一下我们的技术栈:

  1. 前端:HTML + JS + CSS
    前端开发利用HTML来构建网页的骨架和内容结构,CSS用于定义网页的样式和布局,如字体、颜色、空间等,确保网页在不同设备上的视觉效果一致。JavaScript则负责网页的动态交互功能,如响应用户输入、动画效果和与服务器的通信,使得网页变得互动性强,提升用户体验。

  2. 服务器:Python Flask
    Flask是一个轻量级的Python Web框架,适合构建小型到中型的Web应用。它简洁、易于上手,并且高度可扩展。Flask允许开发者定义路由、处理HTTP请求、与数据库交互,并能够快速搭建RESTful API服务,广泛用于开发Web服务和微服务。Flask的灵活性使得开发者可以根据需求选择需要的功能和扩展。

  3. 数据库:SQLite
    SQLite是一种轻量级的嵌入式关系型数据库管理系统,适用于桌面和移动设备应用。它将数据存储在一个单一的文件中,不需要独立的数据库服务器,安装和配置非常简单。SQLite支持SQL标准,可以高效地存储、查询、更新数据,适合用在低并发、数据量较小的项目中,常用于原型开发、小型应用和嵌入式系统。

三、文件结构

所以 首先你需要在自己的电脑上安装PYTHON。默认都有了。

然后需要 pip install  sqlite3。 安装这个数据库引擎。

一切齐全,准备动手,动手前先确定一下这个项目的目录文件结构:

目录结构

/student-grade-management├── app.py                  # Flask应用的主程序├── students.db             # SQLite数据库文件├── /templates              # 存放HTML模板文件的文件夹|    └── index.html         # 主页面的HTML文件├── /static                 # 存放静态资源(如CSS, JS, 图片等)的文件夹├── style.css          # 样式文件(CSS)└── script.js          # 前端脚本(JavaScript)

这个目录结构是一个典型的 Flask 项目的结构,适用于一个简单的学生成绩管理系统。下面我将逐一解释每个文件和文件夹的作用:

详细解释

1. app.py
  • 作用:这是你的 Flask Web 应用的主程序。Flask 是一个轻量级的 Python Web 框架,用于快速开发 Web 应用。
  • 功能:在这个文件中,我们会定义所有的路由(URLs)、视图函数(处理请求的函数)和一些与数据库交互的代码。
    • 例如:
      • /   路由显示学生成绩列表。
      • /add   路由处理添加学生成绩。
      • /delete/<id>   路由处理删除学生成绩。
      • /search   路由处理按姓名查询学生成绩。
    • 该文件还负责启动 Flask Web 服务器(通常使用 app.run())。
2. students.db
  • 作用:这是 SQLite 数据库文件,存储系统中的所有数据。
  • 功能:SQLite 是一个轻量级的数据库,它会将数据保存在本地文件中。这个数据库文件包含一个表(比如 students),存储学生的姓名和成绩。
    • 该数据库可以使用 Python 的 sqlite3 库进行操作。
    • 例如,系统会在此数据库中进行以下操作:
      • 插入新学生成绩。
      • 查询学生成绩。
      • 删除学生成绩。

        请注意这个db文件最开始需要用脚本生成,脚本中设定了各个字段、表名,见后i面的文件介绍。
3. /templates
  • 作用:这个文件夹存放 Flask 应用的 HTML 模板文件,Flask 会使用 Jinja2 模板引擎来渲染这些 HTML 文件。

  • 功能

    • Flask 会使用模板文件来动态生成页面内容。
    • 在我们的项目中,index.html 作为主页面模板,显示学生成绩列表,并提供添加、删除和查询功能。
    • Jinja2 语法使得我们可以在 HTML 中插入 Python 变量、执行条件语句、循环等操作。
    • 例如,学生的姓名和成绩列表会从数据库中获取,Flask 会将这些数据传递到模板中,然后通过模板渲染显示在页面上。

    例如:

    <table><thead><tr><th>姓名</th><th>成绩</th></tr></thead><tbody>{% for student in students %}<tr><td>{{ student.name }}</td><td>{{ student.grade }}</td></tr>{% endfor %}</tbody>
    </table>
    
4. /static
  • 作用static 文件夹用来存放 Web 应用中不会变化的静态资源文件,如 CSS、JavaScript、图片等。

  • 功能:这些静态文件是客户端直接访问的文件,不需要通过 Flask 后端处理。Flask 会自动处理 static 文件夹中的文件并提供服务。

    • style.css:存放样式表文件(CSS),用于控制页面的外观和布局。你可以在 index.html 中引用它,定义页面的字体、颜色、布局等样式。
    • script.js:存放 JavaScript 文件,用于处理客户端的交互逻辑。例如,处理添加、删除、查询学生成绩的事件,或者发送 AJAX 请求来与 Flask 后端进行交互。

    例如:

    <link rel="stylesheet" href="/static/style.css">
    <script src="/static/script.js"></script>
    

典型流程

  1. 用户在浏览器中访问 Flask 应用时,Flask 会根据请求路由选择适当的视图函数。
  2. 视图函数可以与数据库交互,获取或修改数据。
  3. 数据传递到模板中,模板使用 Jinja2 引擎动态生成 HTML 页面并返回给浏览器。
  4. 浏览器根据返回的 HTML 内容渲染页面,并加载 static 文件夹中的 CSS 和 JavaScript 资源。

四、源码

以下是各个部分的源码:

dbMake.py (这个是一个脚本,用来生成数据库,运行这个脚本可以在根目录下生成一个数据库文件 students.db)

import sqlite3# 连接数据库(如果数据库文件不存在,会自动创建)
conn = sqlite3.connect('students.db')# 创建一个cursor对象
cursor = conn.cursor()# 创建学生成绩表
cursor.execute('''
CREATE TABLE IF NOT EXISTS students (id INTEGER PRIMARY KEY AUTOINCREMENT,name TEXT NOT NULL,grade INTEGER NOT NULL
)
''')# 提交并关闭
conn.commit()
conn.close()

app.py

from flask import Flask, render_template, request, jsonify
import sqlite3app = Flask(__name__)# 获取数据库连接
def get_db_connection():conn = sqlite3.connect('students.db')conn.row_factory = sqlite3.Row  # 返回字典类型的行return conn# 首页,显示学生成绩列表
@app.route('/')
def index():conn = get_db_connection()students = conn.execute('SELECT * FROM students').fetchall()conn.close()return render_template('index.html', students=students)# 添加学生成绩
@app.route('/add', methods=['POST'])
def add_student():name = request.form['name']grade = request.form['grade']conn = get_db_connection()conn.execute('INSERT INTO students (name, grade) VALUES (?, ?)', (name, grade))conn.commit()conn.close()return jsonify({"status": "success"})# 查询学生成绩
@app.route('/search', methods=['GET'])
def search_student():name = request.args.get('name', '')conn = get_db_connection()students = conn.execute('SELECT * FROM students WHERE name LIKE ?', ('%' + name + '%',)).fetchall()conn.close()return render_template('index.html', students=students)# 删除学生成绩
@app.route('/delete/<int:id>', methods=['GET'])
def delete_student(id):conn = get_db_connection()conn.execute('DELETE FROM students WHERE id = ?', (id,))conn.commit()conn.close()return jsonify({"status": "success"})if __name__ == '__main__':app.run(debug=True)

script.js

document.getElementById('add-student-form').addEventListener('submit', function (event) {event.preventDefault();const name = document.getElementById('name').value;const grade = document.getElementById('grade').value;fetch('/add', {method: 'POST',body: new URLSearchParams({'name': name,'grade': grade})}).then(response => response.json()).then(data => {if (data.status === 'success') {alert('学生成绩已添加!');window.location.reload(); // 刷新页面}});
});// 删除学生成绩
function deleteStudent(id) {if (confirm('确定要删除这个成绩吗?')) {fetch(`/delete/${id}`).then(response => response.json()).then(data => {if (data.status === 'success') {alert('学生成绩已删除!');window.location.reload(); // 刷新页面}});}
}// 查询学生成绩
document.getElementById('search-form').addEventListener('submit', function (event) {event.preventDefault();const name = document.getElementById('search-name').value;fetch(`/search?name=${name}`).then(response => response.text()).then(data => {document.body.innerHTML = data; // 更新页面内容});
});

style.css

body {font-family: Arial, sans-serif;margin: 20px;background-color: #f9f9f9;
}h1 {text-align: center;
}table {width: 50%;margin: 0 auto;border-collapse: collapse;
}th, td {padding: 10px;text-align: center;
}form {margin-top: 20px;text-align: center;
}input, button {padding: 10px;margin: 5px;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学生成绩管理系统</title><link rel="stylesheet" href="/static/style.css">
</head>
<body><h1>学生成绩管理系统</h1><h2>查询学生成绩</h2><form id="search-form"><label for="search-name">姓名: </label><br><input type="text" id="search-name" name="name"><br><br><button type="submit">查询</button></form><h2>学生成绩列表</h2><table border="1"><thead><tr><th>姓名</th><th>成绩</th><th>操作</th></tr></thead><tbody id="students-list">{% for student in students %}<tr><td>{{ student.name }}</td><td>{{ student.grade }}</td><td><button onclick="deleteStudent({{ student.id }})">删除</button></td></tr>{% endfor %}</tbody></table><h2>添加学生成绩</h2><form id="add-student-form"><label for="name">姓名: </label><br><input type="text" id="name" name="name"><br><br><label for="grade">成绩: </label><br><input type="number" id="grade" name="grade"><br><br><button type="submit">添加</button></form><script src="/static/script.js"></script>
</body>
</html>

准备完毕,命令行切入根目录,执行 python app.py 启动应用

显示 服务器启动了  端口是5000  使用 http://127.0.0.1:5000 可以访问这个应用:

 

万丈高楼平地起,这个还有一些bug,可以自己修复。祝你好运!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/492778.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WatchAlert - 开源多数据源告警引擎

概述 在现代 IT 环境中&#xff0c;监控和告警是确保系统稳定性和可靠性的关键环节。然而&#xff0c;随着业务规模的扩大和数据源的多样化&#xff0c;传统的单一数据源告警系统已经无法满足复杂的需求。为了解决这一问题&#xff0c;我开发了一个开源的多数据源告警引擎——…

ABAP SQL 取日期+时间最新的一条数据

我们在系统对接的时候&#xff0c;外部系统可能会推送多个数据给到我们。 我们 SAP 系统的表数据中日期和时间是作为主键的&#xff0c;那么如果通过 ABAP SQL 取到最新日期的最新时间呢。 解决方案&#xff1a; 方式 1&#xff1a;SELECT MAX 可以通过两个 SELECT MAX 来取…

Vue3 + Element-Plus + vue-draggable-plus 实现图片拖拽排序和图片上传到阿里云 OSS 父组件实现真正上传(最新保姆级)

Vue3 Element-Plus vue-draggable-plus 实现图片拖拽排序和图片上传到阿里云 OSS&#xff08;最新保姆级&#xff09;父组件实现真正上传 1、效果展示2、UploadImage.vue 组件封装3、相关请求封装4、SwiperConfig.vue 调用组件5、后端接口 1、效果展示 如果没有安装插件&…

容器化技术全面解析:Docker 与 Containerd 的深入解读

目录 Docker 简介 1. 什么是 Docker&#xff1f; 2. Docker 的核心组件 3. Docker 的主要功能 4. Docker 的优点 5. Docker 的使用场景 Containerd 简介 1. 什么是 Containerd&#xff1f; 2. Containerd 的核心特性 3. Containerd 的架构 4. Containerd 与 Docker 的…

LNMP+discuz论坛

0.准备 文章目录 0.准备1.nginx2.mysql2.1 mysql82.2 mysql5.7 3.php4.测试php访问mysql5.部署 Discuz6.其他 yum源&#xff1a; # 没有wget&#xff0c;用这个 # curl -o /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo[rootlocalhost ~]#…

Android Studio的笔记--BusyBox相关

BusyBox 相关 BusyBoxandroid上安装busybox和使用示例一、下载二、移动三、安装和设置环境变量四、使用 busybox源码下载和查看 BusyBox BUSYBOX BUSYBOX链接https://busybox.net/ 点击链接后如图 点击左边菜单栏的Get BusyBix中的Download Source 跳转到busybox 的下载源码…

LabVIEW与PLC点位控制及OPC通讯

在工业自动化中&#xff0c;PLC通过标准协议&#xff08;如Modbus、Ethernet/IP等&#xff09;与OPC Server进行数据交换&#xff0c;LabVIEW作为上位机通过OPC客户端读取PLC的数据并进行监控、控制与处理。通过这种方式&#xff0c;LabVIEW能够实现与PLC的实时通信&#xff0c…

C++ OpenGL学习笔记(1、Hello World空窗口程序)

终于抽出时间系统学习OpenGL 教程&#xff0c;同时也一步一步记录怎样利用openGL进行加速计算。 目录 1、环境准备1.1、库的下载1.2、库的选择及安装 2、OpenGL第一个项目&#xff0c;Hello World!2.1、新建hello world控制台项目2.2、配置openGL环境2.2.1 包含目录配置2.2.2 …

系统移植——Linux 内核顶层 Makefile 详解

一、概述 Linux Kernel网上下载的版本很多NXP等有自己对应的版本。需要从网上直接下载就可以。 二、Linux内核初次编译 编译内核之前需要先在 ubuntu 上安装 lzop 库 sudo apt-get install lzop 在 Ubuntu 中 新 建 名 为 “ alientek_linux ” 的 文 件夹 &#xff0c; …

ubuntu16.04ros-用海龟机器人仿真循线系统

下载安装sudo apt-get install ros-kinetic-turtlebot ros-kinetic-turtlebot-apps ros-kinetic-turtlebot-interactions ros-kinetic-turtlebot-simulator ros-kinetic-kobuki-ftdi sudo apt-get install ros-kinetic-rocon-*echo "source /opt/ros/kinetic/setup.bash…

Connection lease request time out 问题分析

Connection lease request time out 问题分析 问题背景 使用apache的HttpClient&#xff0c;我们知道可以通过setConnectionRequestTimeout()配置从连接池获取链接的超时时间&#xff0c;而Connection lease request time out正是从连接池获取链接超时的报错&#xff0c;这通常…

【文档搜索引擎】在内存中构造出索引结构(上)

文章目录 主要思路正排索引和倒排索引的表示1. 正排索引查询文档详细信息2. 倒排索引中查找关联词3. 新增文档正排索引倒排索引实现词频统计 主要思路 通过 Index 类&#xff0c;在内存中构造出索引结构。这个类要提供的方法&#xff1a; 给定一个 docId&#xff0c;在正排索…

单节点calico性能优化

在单节点上部署calicov3273后&#xff0c;发现资源占用 修改calico以下配置是资源消耗降低 1、因为是单节点&#xff0c;没有跨节点pod网段组网需要&#xff0c;禁用overlay方式网络(ipip&#xff0c;vxlan),使用route方式网络 配置calico-node的环境变量 CALICO_IPV4POOL_I…

tryhackme-Pre Security-HTTP in Detail(HTTP的详细内容)

任务一&#xff1a;What is HTTP(S)?&#xff08;什么是http&#xff08;s&#xff09;&#xff09; 1.What is HTTP? (HyperText Transfer Protocol)&#xff08;什么是 HTTP&#xff1f;&#xff08;超文本传输协议&#xff09;&#xff09; http是你查看网站的时候遵循的…

Javascript面试手撕常见题目(回顾一)

1.JS查找文章中出现频率最高的单词? 要在JavaScript中查找文章中出现频率最高的单词&#xff0c;你可以按照以下步骤进行操作&#xff1a; 将文章转换为小写&#xff1a;这可以确保单词的比较是大小写不敏感的。移除标点符号&#xff1a;标点符号会干扰单词的计数。将文章拆…

算法-Z-order算法

1、学习背景 激光雷达点云是无序的&#xff0c;Transformer只能对有序的数据进行处理&#xff0c;为了将Transformer用在点云处理中&#xff0c;需要将无序的点云转换成有序的数据&#xff0c;另外&#xff0c;由于Transformer会用到局部注意力机制&#xff0c;所以将无序的数据…

ElasticSearch 数据聚合与运算

1、数据聚合 聚合&#xff08;aggregations&#xff09;可以让我们极其方便的实现数据的统计、分析和运算。实现这些统计功能的比数据库的 SQL 要方便的多&#xff0c;而且查询速度非常快&#xff0c;可以实现近实时搜索效果。 注意&#xff1a; 参加聚合的字段必须是 keywor…

三、使用langchain搭建RAG:金融问答机器人--检索增强生成

经过前面2节数据准备后&#xff0c;现在来构建检索 加载向量数据库 from langchain.vectorstores import Chroma from langchain_huggingface import HuggingFaceEmbeddings import os# 定义 Embeddings embeddings HuggingFaceEmbeddings(model_name"m3e-base")#…

SSH连接成功,但VSCode连接不成功

环境 在实验室PC上连接服务器234 解决方案&#xff1a;在VSCode中重新添加远程主机 删除旧的VSCode Server 在远程主机上&#xff0c;VSCode会安装一个‘vscode-server’服务来支持远程开发&#xff0c;有时旧的‘vscode-server’文件可能会导致问题&#xff0c;删除旧的&am…

scala中正则表达式的使用

正则表达式&#xff1a; 基本概念 在 Scala 中&#xff0c;正则表达式是用于处理文本模式匹配的强大工具。它通过java.util.regex.Pattern和java.util.regex.Matcher这两个 Java 类来实现&#xff08;因为 Scala 运行在 Java 虚拟机上&#xff0c;可以无缝使用 Java 类库&…