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>