Web开发：django+前端+数据库（1）

最新推荐文章于 2024-08-21 18:16:41 发布

橘粒咕噜111

最新推荐文章于 2024-08-21 18:16:41 发布

阅读量343

点赞数 7

文章标签：前端

本文链接：https://blog.csdn.net/weixin_58326457/article/details/135613659

版权

本文介绍了如何利用Flask和Django这两个Web框架快速搭建网站，包括前端技术如HTML、CSS和JavaScript的基础，以及如何通过MySQL存储数据。还详细讲解了如何通过网络请求发送数据和浏览器识别的各种HTML标签。

摘要由CSDN通过智能技术生成

目的：开发一个网站

- 前端开发：HTML、CSS、Javascript

- Web框架：接收请求并处理

- MySQL数据库：用于存储数据的地方

快速上手：基于Flask Web框架快速搭建网站

深入学习：基于Django框架

1.快速开发网站

pip install flask

from flask import Flask

app = Flask(__name__)  # 固定搭配，flask是一个类，类中还有很多的功能


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


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

浏览器可以识别很多标签+数据，例如：

<h1>中国<h1> ->浏览器看见加大加粗

flask框架为了写标签方便，支持将字符串写入到文件里。

from flask import Flask, render_template

app = Flask(__name__)  # 固定搭配，flask是一个类，类中还有很多的功能



@app.route("/show/info")
def index():
    #Flask内部会自动打开这个文件，并读取内容，将内容给用户返回
    #默认：去当前项目目录的templates文件夹中找。
    return render_template("index.html")

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

ps:templats文件夹必须和.py位于同一级

2.浏览器能识别的标签

2.1编码

<meta charset="UTF-8">

2.2title

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

2.3标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

2.4 div和span

<div>内容</div> ->一个人独占一整行【块级标签】

<span>XXXX</span> ->有多大就占多少【行内标签/内联标签】

2.5超链接

2.6图片

<img src="图片地址" />【自闭合标签】

<img src="自己的图片地址" /> ->显示自己的图片：自己的项目中创建：static目录，图片要放在static中；页面上引入图片<img src="/static/XXX.png" />

关于设置图片的高度和宽度

<img src="图片地址" style="height: 100px; width: 200px;" />

小结

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

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

嵌套：

<div>
    <span>XXX</span>
    <img />
    <a></a>
</div>

2.7列表

无序列表

<ul>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ul>

有序列表：

<ol>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ol>

2.8表格

<table>
    <thead>
        <tr>    <th>ID</th>    <th>name</th>    <th>age</th>    </tr>
    </thead>
    <tbody>
        <tr>    <td>10</td>    <td>XXX</td>    <td>19</td>    </tr>
    </tbody>
</table>

2.9 input系列

<input type="text" >    #文本框
<input type="passward" >    #密码框
<input type="file" >    #选择文件框
<input type="radio" >    #单选框


#二选一的单选框
<input type="radio" name="n1">男    
<input type="radio" name="n1">女

#多选框
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">乒乓球
<input type="checkbox">棒球    

#按钮（登录或提交）
<input type="button" value="提交"> #普通按钮
<input type="submit" value="提交">  #提交表单

2.10 下拉框

#单选下拉框
<h1>下拉框</h1>
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>

#多选下拉框
    <select multiple>
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>

2.11 多行文本

    <h1>多行文本</h1>
    <textarea rows="5"></textarea>   #默认行数

补充：

网络请求

1.在浏览器的URL中写入地址，点击回车，访问。

浏览器会发送数据过去，本质上发送的是字符串："GET /explore http1.1\r\nhost:...\r\nuser-agent\r\n..\r.\n"

2.浏览器向后端发送请求时：

GET请求：【URL方法/表单提交】

— 现象：GET请求、跳转、向后台传入数据，数据会拼接在URL上。（注意：GET请求数据会在URL中体现）

https://www.sogou.com/web?query=安卓&age=19&name=XXX

POST请求【表单提交】

— 现象：提交数据不在URL中而是在请求体中

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

1.from标签包裹要提交的数据的标签。

— 提交方式：method="get"

— 提交的地址：action="/XXX/XXX/XX"

— 在from标签里面必须有一个submit标签

2.在from里面的一些标签：input/select/textarea

— 一定要写name属性 <input type="text" name="uu"/>

橘粒咕噜111

关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Web开发：django+前端+数据库（1）

目的：开发一个网站- 前端开发：HTML、CSS、Javascript- Web框架：接收请求并处理- MySQL数据库：用于存储数据的地方快速上手：基于Flask Web框架快速搭建网站深入学习：基于Django框架。
复制链接

扫一扫