数据库开发项目 flask + html 01

最新推荐文章于 2024-01-17 20:22:04 发布
最新推荐文章于 2024-01-17 20:22:04 发布
阅读量1.5k 收藏 4
点赞数 1
分类专栏： Django 文章标签： flask python 数据库开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46969441/article/details/128063628
版权

目的 开放平台（网站）

前端开发 HTML CSS JavaScript
Web框架： 接受请求并处理
MySQL数据库： 存储数据

快速上手： 基于 Flask Web框架 快速搭建网站。
进阶： 基于 Django框架

1. 快速开发网站

安装框架

pip3 install flask

app = Flask(__name__)


# 创建 网址 /show/info 和 函数index的对应关系
# 以后 用户浏览器访问 /show/info 网站自动执行 和 函数index 的对应关系
@app.route("/show/info")
def index():
    return "China Union"

if __name__ == '__main__':
    app.run()

访问网站

http://127.0.0.1:5000/show/info

浏览器修改
标签 + 数据

@app.route("/show/info")
def index():
    return "<h1>China</h1> " \        
           "<span style = 'color:red;'>Union</span>"

if __name__ == '__main__':
    app.run()

<h1></h1> 加粗
<span style = 'color:red;'>Union</span> 字体变红

Flask框架支持 将文件 直接打开，并将文件返回

@app.route("/show/info")
def index():
    # return "<h1>China</h1> " \
    #        "<span style = 'color:red;'>Union</span>"
    # FLask 内部会自动打开这个文件，并读取内容，将内容给用户返回。
    # 默认去 当前目录的templates文件夹中找。
    return render_template("index.html")

if __name__ == '__main__':
    app.run()

创建 templates 文件
并在里面创建 index.html文件
在这里插入图片描述

2. 浏览器可以识别的标签

2.1 编码

<meta charset="UTF-8">

表示 用户接收到文件之后，使用 utf-8进行解码

在这里插入图片描述

2.2 title

 <title>My Union</title>

在这里插入图片描述

2.3 标题

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
</body>

在这里插入图片描述

2.4 div和span

div 分行 一人占一行（块级标签）
span 不分行（行内标签）

<body>
    <div>ShanDong Blue fly</div>
    <div> where is the best Excavator</div>
</body>
</html>

在这里插入图片描述

<body>
    <span>ShanDong Blue fly</span>
    <span> where is the best Excavator</span>
</body>
</html>

在这里插入图片描述
注意： 这两个标签 比较素。

但是可以通过 和 CSS样式结合 变化。

小节：
在这里插在这里插入图片描述 入图片描述
在这里插入图片描述

2.4.5 超链接

跳转到其他网站

def index():
    return render_template("index.html")

if __name__ == '__main__':
    app.run()

只修改html文件就好了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Union</title>
</head>
<body>
    <a href="https://www.google.com/">click</a>

    
</body>
</html>

跳转到自己网站可以简写
在这里插入图片描述
在这里插入图片描述

显示图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Union2</title>
</head>
<body>
<!--    <img src = "图片地址"/>-->
<!--    引用别人的图片-->
    <img src="https://pic1.zhimg.com/v2-59adb0fd7757a7c5722d7a4fef576fbc_b.jpg" />
<!--    显示自己的图片-->
<!--    <img src = "自己图片的地址" />-->
    <img src="/static/wbq.jpg">
</body>
</html>

指定 长度 和 宽度
px是指 像素

    <img style = "height: 100px;width: 100px" src="https://pic1.zhimg.com/v2-59adb0fd7757a7c5722d7a4fef576fbc_b.jpg" />

在这里插入图片描述
小结：

在这里插入图片描述
标签

<h1> </h1>
<div></div>
<span></span>
<a></a>
<img />

划分

块级标签
<h1></h1>
<div></div>

行内标签
<span></span>
<a></a>
<img />

嵌套

<div>
	<span>xxx</span>
	 
</div>

图片 超链接 组合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>good list</h1>

<a href="https://www.amazon.com/Terre-Hermes-Men-Parfum-Spray/dp/B002Z7FSK8/?_encoding=UTF8&pd_rd_w=pVRJ3&content-id=amzn1.sym.a5eaa569-8a45-4530-84d2-2dcf8023272a&pf_rd_p=a5eaa569-8a45-4530-84d2-2dcf8023272a&pf_rd_r=7DGMPYTV0N4EY1NJ7W62&pd_rd_wg=r1RsG&pd_rd_r=9397a299-b451-4a14-8231-5226f22b4e2b&ref_=pd_gw_ci_mcx_mi">
<img src="/static/good1.jpg" style="width: 150px">
</a>


<!--增加target="_blank"，会新生成网页，而不是跳转-->
<a
    href="https://www.amazon.com/Terre-Hermes-Men-Parfum-Spray/dp/B002Z7FSK8/?_encoding=UTF8&pd_rd_w=pVRJ3&content-id=amzn1.sym.a5eaa569-8a45-4530-84d2-2dcf8023272a&pf_rd_p=a5eaa569-8a45-4530-84d2-2dcf8023272a&pf_rd_r=7DGMPYTV0N4EY1NJ7W62&pd_rd_wg=r1RsG&pd_rd_r=9397a299-b451-4a14-8231-5226f22b4e2b&ref_=pd_gw_ci_mcx_mi"
    target="_blank"
>
    <img src="/static/good2.jpg" style="width: 150px">
</a>
</body>
</html>

@app.route("/goods/list")
def good_list():
    return render_template("good_list.html")

列表标签

ul 是点
ol 是数字
在这里插入图片描述

<body>

    <ul>
        <li> china no1</li>
        <li> china no2</li>
        <li> china no3</li>
    </ul>
</body>
</html>

在这里插入图片描述


    <ul>
        <li> china no1</li>
        <li> china no2</li>
        <li> china no3</li>
    </ul>

    <ol>
        <li> china no1</li>
        <li> china no2</li>
        <li> china no3</li>
    </ol>

表格标签

    <h1>data table</h1>
<!--    borader= 1 表示增加边框-->
    <table border="1"> 
        <thead>
<!--        表头-->
        <tr> <th>ID</th>  <th>Name</th>  <th>age<th> </tr>
        </thead>
        <tr> <td>10</td>  <td>stev</td> <td>19 </td> </tr>
        <tr> <td>11</td>  <td>wu</td> <td>19 </td> </tr>
        <tr> <td>12</td>  <td>cor</td> <td>19 </td> </tr>
        <tr> <td>13</td>  <td>xin</td> <td>19 </td> </tr>
        <tr> <td>14</td>  <td>x</td> <td>19 </td> </tr>

        <tbody>
        </tbody>
    </table>

在这里插入图片描述

case练习

新建立html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>user list</h1>
<table border = "1">
  <thead>
    <tr>
      <th>ID</th>
      <th>PHOTO</th>
      <th>NAME</th>
      <th>EMAIL</th>
      <th>OPERATION</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>
        <img src = "/static/good1.jpg" alt="" style="height: 50px">
      </td>
      <td> wucc</td>
      <td>lxx@xx.com</td>
      <td>
        <a href="https://www.nia.gov.cn/n741430/n741491/index.html" target="_blank">click to see more information </a>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

添加url

@app.route("/users/list")
def user_list():
    return render_template("user_list.html")

输入框

    <h1>input context</h1>
    <input type="text">

在这里插入图片描述
密码框
在这里插入图片描述
上传文件

<input type="file">

在这里插入图片描述
单选 和 多选

<!--单选框-->
    <!--    如果name一样，则这两个单选框是 互斥的，即 只能选择1个-->
    <input type="radio" name = "n1"> male
    <input type="radio" name = "n1"> female

<!--复选框-->
    <input type="checkbox"> mutiple options1
    <input type="checkbox"> mutiple options2

在这里插入图片描述
按钮 和 提交
在这里插入图片描述

下拉框 Drop-down box

    <h1>drop-off box</h1>
    <select multiple>
        <option> beijing </option>
        <option> shenzhen </option>
        <option> sanjose </option>
        <option> seattle </option>
        <option> boston </option>
    </select>

在这里插入图片描述

多行文本

    <h1>mutiple text</h1>
    <textarea></textarea>

在这里插入图片描述

用户注册案例

User registration case

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>user register</h1>
<div>
  user: <input type="text" />
</div>
<div>
  password: <input type="password" />
</div>
<div>
  sex: <input type="radio" /> male
      <input type="radio"> female
</div>
<div>
  hobbits: <input type="checkbox"> basketball
          <input type="checkbox"> football
          <input type="checkbox"> tableball
</div>

<div>
  city:
  <select>
    <option>sanjose</option>
    <option>seattle</option>
    <option>boston</option>
    <option>newyork</option>
  </select>
</div>

<div>
  comment:
  <textarea></textarea>
</div>

<div>
  <input type="button" value = "button">
  <input type="submit" value = "submit">
</div>
</body>
</html>

@app.route("/register")
def register():
    return render_template("register.html")

回顾

网络 进行 数据交互
浏览器 向 网站 发出请求
网站接收请求 返还数据 给浏览器

在这里插入图片描述

标签

h
div
span
a
img
ul
li
table
input
textarea
select

网络请求的本质
在浏览器的URL写入地址
点击回车 访问

浏览器会发送数据过去
本质上 发送的是字符串
GET /explore httpl.1\r \nhost:…\rlnuser-agent \rln…\rlnlrln
或者
浏览器会发送数据过去，本质上发送的是字符串：
“POST /explore httpl.1\r\nhost：。。。 \r\nuser-agent\rln。。 \rin\r\n“

浏览器在向后端发送请求时

GET请求：{URL方法，表单提交}
相当于透明袋子
现象： GET请求，跳转， 向后台传入数据时， 数据会拼接在URL上。

https://www.sogou.com/web?query-安卓&age=19sname=xx

注意：GET请求数据会在URL中体现。

POST请求：「只能表单请求」
相当于黑色袋子（看不到）
现象： 提交数据不在URL中体现，而是在请求体中。

提交数据 form标签

form 提交 要和 submmit结合

在这里插入代码片

页面上的数据想要提交后台：

数据 必须被 <form> 标签包裹。

form标签内 method 定义为 get
提交地址 action = “地址”
在form标签里面必须有 submmit

案例代码

# This is a sample Python script.
from crypt import methods

# Press ⌃R to execute it or replace it with your code.
# Press Double ⇧ to search everywhere for classes, files, tool windows, actions, and settings.

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/register', methods =['GET'])
def register():
    return render_template("register.html")

# @app.route('/do/reg', methods = ['GET'])
# def do_register():
#     # receiver user by get
#     print(register.args)
#     return "register successful!"

@app.route('/post/reg', methods = ['POST'])
def post_register():
    # print(request.form)
    user = request.form.get("user")
    pwd = request.form.get("pwd")
    gender = request.form.get("gender")
    hobby_list = request.form.getlist("hobby")
    city = request.form.get("city")
    skill_list = request.form.getlist("skill")
    more = request.form.get("more")
    print(user,pwd,gender,hobby_list,city,skill_list,more)
    # 将用户信息写入文件中 实现注册，写入mysql实现注册

    return "register successful!2"
if __name__ == '__main__':

    app.run()

html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>user registation</title>
</head>

<body>
    <h1>user registation</h1>
    <h1>user register</h1>
<!--action表示提交的地址-->
   <form method="post" action="/post/reg">
    <div>
        user: <input type="text" name="user" />
    </div>
   <div>
        password: <input type="password" name="pwd" />
   </div>
   <div>
       sex:
       <input type="radio" name="gender" value="1"> male
       <input type="radio" name="gender" value="2"> female
   </div>

   <div>
       hobby:
       <input type="checkbox" name="hobby" value="10"> basketball
       <input type="checkbox" name="hobby" value="20"> football
       <input type="checkbox" name="hobby" value="30"> table ball
   </div>

   <div>
       city:
       <select>
           <option value="sj">San Jose</option>
           <option value="s">Settle</option>
           <option value="b">Boston</option>
       </select>
   </div>
        Areas of expertise:
       <select name="skill" multiple>
           <option value="100">eat</option>
           <option value="101">sleep</option>
           <option value="102">play</option>
       </select>
   <div>

   <div>
       comment:
       <textarea name = "more"></textarea>
   </div>
   </div>
<div>
  <input type="submit" value = "submit">
</div>
   </form>
</body>
</html>

改进

通过设置method不同
改进

# This is a sample Python script.
from crypt import methods

# Press ⌃R to execute it or replace it with your code.
# Press Double ⇧ to search everywhere for classes, files, tool windows, actions, and settings.

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/register', methods =['GET', 'POST'])
def register():
    if request.method == "GET":
        return render_template("register.html")
    else:
        user = request.form.get("user")
        pwd = request.form.get("pwd")
        gender = request.form.get("gender")
        hobby_list = request.form.getlist("hobby")
        city = request.form.get("city")
        skill_list = request.form.getlist("skill")
        more = request.form.get("more")
        print(user,pwd,gender,hobby_list,city,skill_list,more)
        # 将用户信息写入文件中 实现注册，写入mysql实现注册
        return "register successful!"

if __name__ == '__main__':

    app.run()

前端页面改这里
在这里插入图片描述

生产队的驴儿
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
python flask+vue3+sqlite 前后端分离 简单个人博客网站项目源码
06-05
flask+vue3+sqlite 前后端分离 简单个人博客网站项目 Vue3采用新的组件式API开发，axios后端接口请求。 flask采用sqlalchemy管理数据库，采用token验证登陆信息。 已实现文章列表显示，文章内容markdown渲染，文章...
flask html中引入js/css/html路径问题
六十英里的专栏
08-07 1万+
众所周知，html中引入js/css/html时，路径为相对本.html文件的路径。 如： <script type="text/javascript" src="js/index.js"></script> <link rel="stylesheet" href="css/index.css"> <a href='test.html'> </a> <img src="ico/1.ico" alt="" > 但是当flask
【Python成长之路】基于Flask框架开发web -- 了解html，并实现简单的表格管理平台（3）
yuzipeng的专栏
09-27 847
【功能】 这里主要讲讲我当前对html的理解 【效果】 【知识点】 1、Flask框架方法编写 前面已经讲过 Flask如何调用html模板，因此我们直接展示上图对应的flask框架方法的代码 # coding=utf-8 # @Auther : "鹏哥贼优秀" # @Date : 2019/9/23 # @Software : PyCharm from flask impor...
python 如何判断一个函数执行完成_python的模块与函数
weixin_39683858的博客
11-20 2142
python的程序由包(package)、模块(module)和函数组成。模块是处理某一类问题的集合，模块由函数和类组成。包是由一系列模块组成的集合。下图描述了包、模块、类和函数之间的关系。包就是一个完成特定任务的工具箱，Python提供了许多有用的工具包，如字符串处理、图形用户接口等，使用这些自带的工具包，可以提高程序员的开发效率，减少编程的复杂度，达到代码复用的效果。这些自带的工具包...
Python网络编程:极简WEB开发HTML、CSS、JavaScript、Flask
ArYe
11-04 544
HTTP HTML CSS JavaScript Flask GET方法 POST方法 HyperText Transfer Protocol 超文本传输协议 HyperText Markup Language 超文本标记语言 Cascading Style Sheets 层叠样式表
PythonWeb框架-使用Flask框架操作数据库
m0_52680439的博客
11-14 906
1.Flask操作数据库有两种方式，一种是使用模块实现，另一种是直接使用pymysql模块，通过编写sql语句操作数据库。2.文件结构（1）config.py：实现连接数据库功能；（使用SQL语句实现时不需要配置）（2）__init__.py：创建Flask实例，使config.py文件生效；（3）models.py：数据库表模型，实训关系对象映射；（4）test.py：设置路由以及编写查询语句等操作文件。
Flask与HTML初探
stonebookking的博客
10-18 2247
python语言利用基本的html标签和flask框架搭建最简单的注册网站
前端开发入门--html--Flask
peihj的博客
10-23 2798
咱们网站与别人的不一样： Flask框架为了让咱们写标签方便，支持将字符串写入到文件里 浏览器能识别的标签 编码（head） title（head） div和span div，一个人占一整行。【块级标签】 span，自己多大占多少。【行内标签、内联标签】 注意：这两个标签比较素 + CSS样式。练习 超链接 图片 关于设置图片的高度和宽度 列表 表格 下拉框 多行文本 案例：用户注册 网络请求 在浏览器的URL中写入地址，点击回车，访问。 浏览
基于flask的web应用开发——访问漂亮的html页面以及页面跳转
qq_53381910的博客
06-03 7054
基于flask的web应用开发——访问漂亮的html页面以及页面跳转
flask 使用html模板,Flask框架使用HTML模板的方法
weixin_34460380的博客
06-21 3883
Flask框架使用HTML模板的方法发布时间：2020-08-13 13:40:00来源：亿速云阅读：111作者：小新这篇文章主要介绍了Flask框架使用HTML模板的方法，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。首先我们看看如何原始的HTML代码插入Flask应用：fromflaskimportFlaskapp=Flas...
【web开发】1、flask入门和html开发
qq_46644680的博客
09-06 655
HTML：标签具有模式特点。 CSS：修改标签的特点。 JavaScript：动态效果。 介绍html的基础知识
毕业设计基于python + flask+mysql+bootstrap+echarts的鱼村小馆订餐后台管理系统项目源码
02-22
1. 下载好项目之后在settings.py文件中更改你的数据库配置，requirements.txt中是项目主要依赖包，需要导入。 2. 在项目根目录EatProject的终端下依次运行下列指令。 数据库迁移： 1. python manage.py db init 2...
课程设计：基于Python + Flask + MySQL + HTML 实现的手机信息展示系统
最新发布
03-10
课程设计，基于Python + Flask + MySQL + HTML 实现的手机信息展示系统 手机信息展示系统 - 开发工具：PyCharm - 开发语言：Python - 开发框架：Flask - 数据库：MySQL - 前端：HTML
数据库竞赛报名信息系统。 flask+html+js+css+sqlserver+Boostrap等.zip
03-08
flask+html+js+css+sqlserver+Boostrap等.zip 适合学习/练手、毕业设计、课程设计、期末/期中/大作业、工程实训、相关项目/竞赛学习等。 项目具有较高的学习借鉴价值，也可直接拿来修改复现。可以在这些基础上学习...
毕业设计，基于Python+Flask+MySql开发的人力资源管理系统，内含Python完整源代码，数据库脚本
01-21
毕业设计，基于Python+Flask+MySql开发的人力资源管理系统，内含Python完整源代码，数据库脚本 Python基于Flask人力资源管理系统设计毕业源码案例设计 登录模块 发送ajax请求，后台验证账号密码是否正确 将账号...
基于flask框架，入门html标签的学习笔记
m0_58515553的博客
05-29 676
需要自己多多练习理解。
一、Flask学习之HTML
m0_62627216的博客
01-17 1789
本文是使用Python进行Web开发的第一课，学习HTML相关知识，并能够运用Flask框架运行成功
Flask整合html模板
wutao22的博客
04-20 2460
“很多同学在DIY自己的web的时候，苦于没有优秀的前端辅助，无法做出好看实用的web，下面介绍一种现在比较实用的整合方法”01—Jinja2基本用法在正式开始整合之前，我们先大致说下需要...
python+flask+html开发简单的网页
热门推荐
π仔
12-21 2万+
新手学习python，掌握的基本语法的使用，学习基本的数据类型（字符串、列表、元组、字典、集合等）、函数、数据结构等使用及理解后，后续的项目实战离不开web开发、爬虫、图像处理、深度学习、人工智能等。本博客作为学习小记，纯属简单的python学习交流文章，如有纰漏或者错误，还请多多指教，感谢！ 软件基础： 安装PyCharm（版本2019.3） 官网链接：https://www...
flask+web开发实战
01-12
Flask是一个流行的Python Web框架，适用于小型项目或快速原型开发。它提供了路由、模板引擎等功能，使得开发Web应用变得简单和高效。下面是一个使用Flask进行Web开发的实例： ```python from flask import Flask, ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值