数据库开发项目 flask + html 01

news2024/11/19 15:21:03

目的 开放平台(网站)

前端开发 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()

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

(附源码)SSM介绍信智能实现系统 毕业设计 260930

SSM介绍信智能实现系统 摘 要 科技进步的飞速发展引起人们日常生活的巨大变化&#xff0c;电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用。信息时代的到来已成为不可阻挡的时尚潮流&#xff0c;人类发展的历史正进入一个新时代。在现实运用中&…

java+mysql基于SSM的大学生兼职信息系统-计算机毕业设计

开发环境 运行环境&#xff1a; 开发工具:IDEA /Eclipse 数据库:MYSQL5.7 应用服务:Tomcat7/Tomcat8 使用框架:SSM(springspringMVCmybatis)vue 项目介绍 论文主要是对大学生兼职信息系统进行了介绍&#xff0c;包括研究的现状&#xff0c;还有涉及的开发背景&#xff0c;然…

分享几款免费实用的国产内网穿透工具

对于没有公网IP的用户来说&#xff0c;如何实现远程管理或让局域网的服务可以被公网访问到是一个问题。当然&#xff0c;也有很多类似的需求&#xff0c;比如&#xff1a; 微信公众号小程序开发调试公网访问本地web项目异地远程处理公司服务问题异地访问公司内网财务/管理系统…

Qt 中模型视图编程的基本概念

背景 一个应用程序本质可以抽象为三部分&#xff1a;界面、逻辑处理、数据。程序中存储有大量的数据&#xff0c;经过逻辑处理后、通过界面展示给用户&#xff0c;同时用户可以通过界面对数据进行编辑&#xff0c;如下图所示&#xff1a; Qt 中的模型视图架构就是用来实现大量…

Spring_第3章_AOP+事务

Spring_第3章_AOP事务 文章目录Spring_第3章_AOP事务一、AOP1 AOP简介问题导入1.1 AOP简介和作用【理解】1.2 AOP中的核心概念【理解】2 AOP入门案例【重点】问题导入2.1 AOP入门案例思路分析2.2 AOP入门案例实现【第一步】导入aop相关坐标【第二步】定义dao接口与实现类【第三…

8 常规聚类

常规聚类 聚类分析是解决数据全方位自动分组的有效方式。若将数据全体视为一个大类&#xff0c;这个大类很可能是由若干个包含了一定数量观测的自然小类”组成的。聚类分析的目的就是找到这些隐藏于数据中的客观存在的“自然小类”&#xff0c;并通过刻画“自然小类”体现数据…

舆情监控软件

随着中国互联网的快速发展&#xff0c;舆情监测成为工作中的一部分&#xff0c;如果没有舆情监控软件的及时介入&#xff0c;负面舆情将会迅速扩大并蔓延到各个方面&#xff0c;对社会以及公众造成严重的影响&#xff0c;舆情监控软件对企业政府有着深远影响&#xff0c;接下来…

Python学习小组课程P5-Python办公(2)Excel读取与Word生成

一、前言 注意&#xff1a;此为内部小组学习资料&#xff0c;非售卖品&#xff0c;仅供学习参考。 本系列课程&#xff1a; Python学习小组课程-课程大纲与Python开发环境安装 Python学习小组课程P1-Python基础&#xff08;1&#xff09;语法与数组 Python学习小组课程P2-Pyth…

【配电网重构】基于yalmip求解含sop+二阶锥配电网重构附matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算法 …

ouster-32激光雷达使用---雷达输出数据分析

ouster-32激光雷达使用---雷达输出数据分析雷达输出数据分析所有数据imu数据雷达数据坐标系Rviz显示雷达输出数据分析 所有数据 查看当前topic消息种类 rostopic list终端输出 /clicked_point /initialpose /move_base_simple/goal /os_node/imu_packets /os_node/lidar_pa…

ADSP-21489的开发详解:VDSP+自己编程写代码开发(2-软件和硬件的开发环境搭建)

Visual DSP软件的安装 运行 setup 软件安装包&#xff0c;全部下一步即可完成软件安装&#xff0c;非常简单。我们的资料里提供了 VDSP5.1.2 软件&#xff0c;当然您也可以通过 ADI 公司官网下载。 VDSP5.1.2 软件官网下载地址&#xff1a; Visual DSP5.1.2的ADI官网下载链接…

2022深入学习C++教程

2022深入学习C教程 课堂和实践课程 – C 11 的功能、异常处理和 STL – 适用于学术界和工业界 课程英文名&#xff1a;Learn C Programming -Beginner to Advance- Deep Dive in C 此视频教程共30.0小时&#xff0c;中英双语字幕&#xff0c;画质清晰无水印&#xff0c;源码…

Composer交互文档如何在PPT当中使用

在往期的公开课中我们讲解了SOLIDWORKS Composer这样一款三维制作软件&#xff0c;Composer可以很好的利用SOLIDWORKS所设计的数据自动生成产品手册、装配目录、维修说明&#xff0c;以及销售和培训视频等&#xff0c;还可以为用户提供非常满意的交互式体验。 并且Composer和S…

抖音怎么录屏?这个方法,亲测好用

​抖音是现在流行的短视频软件之一&#xff0c;很多小伙伴喜欢用它来记录生活&#xff0c;分享生活中新鲜有趣的事情。有时候&#xff0c;在抖音上看到了喜欢的视频&#xff0c;想要分享给好友&#xff0c;发现抖音无法分享&#xff0c;这个时候就需要使用到屏幕录制功能了。那…

【电力系统】含电热联合系统的微电网运行优化附matlab代码和复现论文

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算法 …

我国跨国企业外汇风险管理——以海尔公司为例

目 录 摘 要 I 一、 绪论 1 &#xff08;一&#xff09; 选题背景及意义 1 &#xff08;二&#xff09; 国内研究现状 1 1&#xff0e; 国外研究现状 1 2&#xff0e; 国内研究现状 3 &#xff08;三&#xff09; 研究内容及方法 3 &#xff08;四&#xff09; 跨国企业外汇风险…

C语言 字符串

C语言 字符串引言一、字符串的创建方式二、字符串函数1. strlen 函数使用示例1使用示例2模拟 strlen 函数2. strcpy 函数使用示例模拟 strcpy 函数3. strcat 函数使用示例模拟 strcat 函数4. strcmp 函数使用示例模拟 strcmp 函数5. strncpy、strncat、strncmp6. strstr 函数使…

STC 51单片机55——加速度计GY-29 ADXL345

//实现与VB模拟鼠标通信&#xff0c;但是噪声很大 //采用输出角度的方式&#xff0c;输出x与z的角度和y与z的角度 //在VB中将屏幕水平与垂直等分1800份&#xff08;角度*10得到的结果&#xff09; //*************************************** // GY-29 ADXL345 IIC测试程序 // …

VIVADO时序约束之时序例外(set_false_path)

前言 当FPGA设计中的逻辑行为不能满足默认的时序要求时&#xff0c;设计者需要使用时序例外语法对该逻辑行为进行处理&#xff0c;例如&#xff1a;有些结果只需每个一个或多个时钟周期捕获一次。 vivado开发工具支持4个时序例外约束的语法&#xff0c;如下表所示&#xff1a;…

html5播放器禁止拖拽功能实例(教学内容禁止拖动观看)

html5播放器禁止拖拽功能实例&#xff08;常用于场景&#xff1a;企业培训、在线教学内容禁止学员拖动视频进行观看&#xff09; 实例1&#xff1a;参数开启后&#xff0c;视频教学内容或视频课件将不允许拖动进度条。 <div id"player"></div> <scr…