Django web 开发（一）前端学习概述

柯_sir

已于 2023-09-06 21:48:03 修改

阅读量230

点赞数 3

分类专栏： Django 文章标签： django 前端学习

于 2023-08-28 19:18:58 首次发布

本文链接：https://blog.csdn.net/Y_Lufei/article/details/132502787

版权

Django 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

目的:开发一个平台(网站)
- 前端开发: HTML、CSS、JavaScript

- web框架: 接收请求并处理

        - MySQL数据库:存储数据地方
快速上手:
        基于Flask Web框架让你快速搭建一个网站出来。
深入学习:
        基于Django框架 (主要)

1.快速开发网站

pip install flask

普通网站测试：

from flask import Flask

app = Flask(__name__)


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

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

咱们的网站暂时与别人的不一样：

别人的好看vs咋们的是基础的网站文字

浏览器可以识别很多标签+数据，例如:
<h1>中国</h1> -> 浏览器看见加大加粗
<span style='color:red;'>联通</span> -> 浏览器看见字体变红色

如果我们能把浏览器能识别的所有的标签都学会，我们在网站就可以控制页面到底长什么样子。

Flask框架为了让咱们写标签更方便，支持奖字符串写入到文件里。因此我们引入templates模板，并且在同级目录下创建tmeplates目录

from flask import Flask,render_template

app = Flask(__name__)


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

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

2.浏览器能识别的标签

2.1编码（head）

<meta charset="UTF-8">

2.2 title（head）

<head>
        <meta charset="UTF-8">
        <title>我的联通</title>
</head>

2.3标题

<h1>1级标题</h1>

<h2>2级标题</h2>

<h3>3级标题</h3>

<h4>4级标题</h4>

<h5>5级标题</h5>

<h6>6级标题</h6>

2.4div和span

<div>内容</div>



<span>内容</span>

div，一个人站一整行。【块级标签】

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>我的联通</title>
</head>
<body>
        <div>山东蓝翔</div>
        <div>挖掘机哪家强</div>
</body>
</html>

span,自己多大占多大。【行内标签，内联标签】

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>我的联通</title>
</head>
<body>
        <span>山东蓝翔</span>
        <span>挖掘机哪家强</span>
</body>
</html>

注意：这两个标签比较素 + CSS样式

2.5超链接

跳转到其他网站
<a href="www.baidu.com">点击跳转别人的网站</a>

跳转到自己的网站

<a href="http://127.0.0.1:5000/get/news">点击跳转自己的网站-方式①</a>
<a href="/get/news">点击跳转自己的网站-方式②</a>

# 当前页面打开
<a href="/get/news">点击跳转</a>

# 新的tab页面打开
<a href="/get/news" target="_blank">点击跳转</a>

需要修改web.py文件

from flask import Flask,render_template

app = Flask(__name__)


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


@app.route("/get/news")
def get_news():
    return render_template("get_news.html")

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

在templater目录下新添加一个get_news.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>详细信息</h1>
    <div>
      测试跳转
    </div>
</body>
</html>

2.6图片

<img src="图片地址" />

直接显示别人的网站:(有些网站可能含有防盗链)
<img src="https://pica.zhimg.com/80/v2-97c8d45baaeb631fad1df9beb59550c7_qhd.jpg?source=4e949a73" />

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

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

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

小结

学习的标签

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

划分

- 块级标签
    <h1></h1>
    <div></div>
- 行内标签
    <span></span>
    <a></a>
    <img />

嵌套

<div>
    <span>xxx</span>
    <img />
    <a></a>
</div>

案例：商品列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>商品列表</h1>
        <a href="https://www.mi.com/xiaomibuds4pro" target="_blank">
            <img src="/static/a1.jpg" style="width: 150px">
        </a>

        <a href="https://www.mi.com/shop/buy/detail?product_id=19019" target="_blank">
             <img src="/static/a2.jpg" style="width: 150px">
        </a>

        <a href="https://www.mi.com/shop/buy/detail?product_id=12633" target="_blank">
            <img src="/static/a3.jpg" style="width: 150px">
        </a>



</body>
</html>