武沛齐Django web学习(一) - 前端

已于 2024-02-20 16:24:36 修改
阅读量561 收藏 9
点赞数 9
分类专栏： 武沛齐Django web学习 文章标签： django 学习 python
于 2024-01-24 22:48:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74073464/article/details/135833345
版权

文章目录

目的：开发一个平台（网站）
-前端开发：HTML、CSS、JavaScript
-Web框架：接收并处理请求
-MySQL数据库：存储数据的地方

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

深入学习：基于Django框架（主要）

1. 前端开发

1. 快速开发网站

pip install flask #在本地安装flask

创建一个web.py的文件

from flask import Flask

app = Flask(__name__) #Flask是一个类，我们实例化了一个类的对象

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

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

输出

Running on http://127.0.0.1:5000 #这个域名后加上我们的 /show/info 网址就可以打开网站了

我们做的简单网站和复杂网站的区别

  • 别人的更好看

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

    <h1>中国</h1>   ->浏览器返回会加大加粗
<span style='color:red;'>联通</span>`	->会让字体变红

    所以我们可以使用大量标签来是我们的页面符合我们的标准

  • Flask等Web框架为了让我们写标签更方便，支持将字符串写入到文件里

from flask import Flask, render_template

app = Flask(__name__) #Flask是一个类，我们实例化了一个类的对象

#创建了网址 /show/info 和函数index的对应关系
#以后用户在浏览器上访问 /show/info 网站自动执行 index
@app.route("/show/info")
def index():
    # return "Hello"
    #Flask内部会自动打开这个文件，读取文件内容，将内容返回给用户。
    #默认：去当前项目目录templates文件夹寻找
    return render_template("index.html") #这是一个文件
if __name__ == "__main__":
    app.run()

2. 浏览器能识别的标签

2.1 编码

<meta charset="UTF-8">
//我们的网站发送给用户浏览器的是一大堆字符串文件
//用户的浏览器读取这些字符串就会以 UTF-8 的编码来打开文件

2.2 title

<head>
    <meta charset="UTF-8">
    <title>浏览器中网页的标题</title>
</head>

2.3 标题

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

2.4 div和span

  • div：一个人占一整行。【块级标签】
<div>会换行</div>

<span>不会换行</span>
  • span：自己多大就占多少。【行内标签、内联标签】

在这儿我试了试一个span加一个div，不管谁在前谁在后，他都会在两行

因为div必须自己单独一行

h标签也是块儿级标签

这两个标签比较素，上述是他们的默认功能，后期我们会加上 CSS

2.5 超链接

跳转到其他网站
<a href = "https://www.bilibili.com/">点击跳转</a>

跳转到自己的网站其他地址
<a href = "http://127.0.0.1:5000/get/news">点击跳转</a>
等价于
<a href = " /get/news">点击跳转</a>

默认为在当前页面跳转
我们在<a></a>中加上target = "_blank",就会新开一个页面跳转
<a href = "xxx" target = "_blank">点击跳转</a>

2.6 图片

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

直接引入别人的图片地址， 但可能会有防盗链，不能直接显示
<img src = "https://pic1.zhimg.com/80/v2-e2692ab1428f812d0e76b4ec70bb331b_1440w.webp?source=2c26e567" />

显示自己的图片
<img src = "自己图片的地址" />

Flask框架需要我们在项目中创建：
	-static目录，图片要放在static目录中
	-在页面上引入图片
		<img src = "/static/ac.jpg" />

<img style = "height: 100px" src = "" /> 只定义高度不定义宽度，会等比例进行缩放
<img style = "height: 100px; width: 100px" src = "" />	同时设置高度和宽度

小结

  • 学习的标签

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

  • 划分

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

  • 嵌套

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

2.7 列表

<ul>无序列表
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ul>

<ol>有序列表
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ol>

2.8 表格

<table border = "1">	<!--默认边框-->
    <thead>
    	<tr>	<th>ID</th>	<th>姓名</th>	<th>年龄</th>	</tr>
    </thead>
    <tbody>
    	<tr>	<td>1</td>	<td>高宇轩</td> <td>19</td> 	</tr>
        <tr>	<td>2</td>	<td>耿倩</td> <td>19</td> 	</tr>
        <tr>	<td>3</td>	<td>张三</td> <td>24</td> 	</tr>
        <tr>	<td>4</td>	<td>李四</td> <td>54</td> 	</tr>
        <tr>	<td>5</td>	<td>王五</td> <td>77</td> 	</tr>
    </tbody>
</table>

2.9 input系列（7个）

<input type = "text" />	文本
<input type = "password" />	密码
<input type = "file" />	文件

<input type="radio" name="sex">男	单选框，用name来归类
<input type="radio" name="sex">女

<input type="checkbox">三国杀	多选框

<input type="button" value="提交">	-->普通按钮
<input type="submit" value="提交"> 	-->提交表单

2.10 下拉框

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

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

2.11 多行文本

<textarea rows="3">请输入</textarea>

案例：用户注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
<h1>用户注册</h1>

<div>
    用户名：<input type="text"/>
</div>

<div>
    密 码：<input type="password"/>
</div>

<div>
    性 别：
    <input type="radio" name="sex"/>男
    <input type="radio" name="sex">女
</div>

<div>
    爱好：
    <input type="checkbox">篮球
    <input type="checkbox">足球
    <input type="checkbox">乒乓球
</div>
<div>
    城市：
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>杭州</option>
    </select>
</div>

<div>
    擅长领域：
    <select multiple>
        <option>体育</option>
        <option>编程</option>
        <option>游戏</option>
        <option>吹牛逼</option>
    </select>
</div>

<div>
    备注：
    <textarea></textarea>
</div>

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

2.12 网络请求

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

    浏览器会发送数据过去，本质上发送的是字符串

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

    • GET请求【URL方法，表单提交】

      • 现象：GET请求、跳向后台传入数据 数据会拼接在URL上

        https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=安卓&fenlei=256&rsv_pq=0x9b5b50c6000f23b1&rsv_t=16ddZlD60dst5T87dekGoSO4Md%2FAFSvouOxhZH3MvpYJwYUYp3JGSzPvo8RE&rqlang=en&rsv_enter=1&rsv_dl=tb&rsv_sug3=8&rsv_sug1=7&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=1750&rsv_sug4=3205)

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

    • POST请求【表单提交】

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

案例：用户注册2.0

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

  • form标签包裹要提交的数据
    • 提交方式：mtehod=“get/post”
    • 提交的地址： antion=“/xxx/xx/x”
    • form标签里面必须有一个submint
  • form里面的一些标签：input/select/textarea
    • 一定要写name属性 ex：
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:
        # 1.接受用户通过GET形式发送的数据
        user = request.form.get('user')
        pwd = request.form.get('pwd')
        sex = request.form.get('sex')
        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, sex, hobby_list, city, skill_list, more)


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

在上面的代码中，因为register中get操作和post操作类似，所以我们将他们整合在了一起

但有些情况不能这样


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
<h1>用户注册</h1>

<form method="post" action="/register">
    <div>
        用户名：<input type="text" name="user"/>
    </div>

    <div>
        密码： <input type="password" name="pwd"/>
    </div>

    <div>
        性别：
        <input type="radio" name="sex" value="1"/>男
        <input type="radio" name="sex" value="0"/>女
    </div>

    <div>
        爱好：
        <input type="checkbox" name="hobby" value="0"/>篮球
        <input type="checkbox" name="hobby" value="1"/>足球
        <input type="checkbox" name="hobby" value="2"/>乒乓球
        <input type="checkbox" name="hobby" value="3"/>羽毛球
    </div>

    <div>
        城市：
        <select name="city">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="sz">深圳</option>
        </select>
    </div>

    <div>
        擅长领域：
        <select multiple name="skill">
            <option name="eat">吃饭</option>
            <option name="drink">喝水</option>
            <option name="drink">睡觉</option>
        </select>
    </div>

    <div>
        备注：
        <textarea name="more"></textarea>
    </div>

    <input type="submit" value="提交"/>
</form>


</body>
</html>

HTML总结

  1. 称呼

    - 浏览器能识别的标签（不专业）
- HTML标签

什么是HTML？ 超文本传输语言（与浏览器搭配）。

  2. HTML标签（默认格式样式，以后通过手段可以修改）

  3. HTML标签与编程语言无关

    • python + HTML
    • java + HTML
    • c# + HTML
    • php + HTML

  4. 提醒：HTML标签有很多，不必逐一学会

3. CSS样式

CSS，专门用来”美化“标签。

  • 基础CSS，写简单页面 & 看懂 & 会改别人的页面
  • 模板，调整和修改。

3.1 快速了解

<img src="xxx" style="height:100px" />

<div style="color:red";>中国联通</div>
style啥的就是CSS样式

3.2 CSS应用方式

1. 在标签上
<img src="xxx" style="height:100px" />

<div style="color:red";>中国联通</div>
2. 在head标签中写style标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color:red;
        }
    </style>
</head>
<body>
<h1 class='c1'>用户登录</h1>
</body>
</html>
3. 写到文件中
.c1{
    height:100px;
}

.c2{
    color:red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="xxx.css" />
    导入一个css文件，可以用文件里面的style
</head>
<body>
<h1 class='c1'>用户登录</h1>
</body>
</html>

小tip：我们后面开发会使用pycharm中的一个工具，会方便我们开发image-20240125214846137

3.3 选择器

  • ID选择器

    #c1{
    
}

<div id='c1'></div>

  • 类选择器（最多）

    .c1{
    
}

<div class='c1'></div>

  • 标签选择器(所有这个标签都设置为style)

    div{
    
}

<div>xxx</div>

  • 属性选择器

    input[type="text"]{
	border:1px solid red;
}
.v1[xx="123"]{
	color:gold;
}

  • 后代选择器

    .yy li{
    color:red;
}yy是class为yy的标签，设置他的后代中所有li标签
.yy > a{
    color:green;
}设置class为yy的标签的儿子中所有a标签

    上面这些选择器中，类选择器、标签选择器、后代选择器比较重要

  • 多个和覆盖

    假如我们有多个选择器同时出现，这时不同的属性就会叠加，但是相同的属性会以他们在style中最后出现的为准

    例如下面同时出现c1和c2，不论class中谁在前面，color属性都会以c2为准，因为style中c2最后出现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red;
            border: 1px solid red;
        }

        .c2{
            color: green;
            font-size: 28px;
        }
    </style>
</head>
<body>
    <h1 class="c1 c2">中国联通</h1>
</body>
</html>

    但是如果你想让c1虽然出现在前面，却以他的为准，那就再那个属性后面加一个 !important;

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red !important;
            border: 1px solid red;
        }

        .c2{
            color: green;
            font-size: 28px;
        }
    </style>
</head>
<body>
    <h1 class="c1 c2">中国联通</h1>
</body>
</html>

3.4 样式

1. 高度和宽度

这里的高度宽度是内容所占的区域大小，而不是字体大小

.c1{
	height: 300px;
    width: 500px;
    width: 50%;
}

注意事项：

  • 宽度支持百分比

  • 行内标签：默认无效

  • 块级标签：默认有效（比较霸道，右侧空白区域不让别人用）

2. 块级和行内标签

通过使用display: inline-block; 可以实现行内标签和块级标签的相互转化

两个同时加上的话，标签会具备行内标签的特性（右侧空白区域可以给别人用）

和块级标签的特性（高度和宽度可更改）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            display: inline-block;
            color: red;
            height: 300px;
            width: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="c1">中国</div>
    <span class="c1">联通</span>
</body>
</html>

注意：开发中 块级 + 块级&行内

3. 字体设置
.c1{
    颜色 color: red;
    字体大小 font-size: 58px;
    字体粗细 font-weight: 500;
    字体格式 font-family: Microsoft Yahei;
}
4.文字对齐方式
.c1{
    height:	59px;
    width: 300px;
    border: red 1px solid;
    
    text-align: center; /* 水平方向居中 */
    line-height: 59px; 	/* 在59的高度范围垂直居中 */
}
5.浮动
.c1{
    float: right;
}/* 把文字放到最右边 */

浮动可以理解为飘起来，在原来一层的上面又多了一层，这样就会产生一些问题

在下面的代码中无法显示出父div，因为子div在父div上面一层，无法把父div的大小撑起来

而且后面一个div的“你好呀”会显示在同一行，这是不对的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            height: 50px;
            width: 50px;
            border: 1px red solid;
            float: left;
        }
    </style>
</head>
<body>
    <div style="background-color: blue">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div>你好呀</div>
</body>
</html>

所以我们想要把浮动的div们“拽”回来

就要在后面加一行代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            height: 50px;
            width: 50px;
            border: 1px red solid;
            float: left;
        }
    </style>
</head>
<body>
    <div style="background-color: blue">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div style="clear: both;"></div>
    </div>
    <div>你好呀</div>
</body>
</html>

我们现在就记住，只要用了float，就在后面加一个style=“clear: both;”

6. 内边距

自己的内部设置一点距离

.c1{
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    
    等价于
    padding: 20px;上下左右全是20
    
    等价于
    padding: 20px, 10px, 20px, 5px;
}
7. 外边距
<div style="height: 200px; background-color: red;"></div>
<div style="height: 200px; background-color: blue; margin-top: 20px;"></div>

margin和padding同理
8. 补充

  • body标签有一个默认的外边距，记得去掉

    body{
	margin: 0;
}

  • 居中

    • 文本居中，文本在这个区域居中

      <div style="width: 200px text-align: center;">东北师范大学</div>

    • 区域局中，自己要有宽度

    .container{
    width: 980px; /* 这里一定要自定宽度 */
    maigin: 0 auto; /* 上下外边距为0，左右外边距auto */
}

<div class="container">内容</div>

  • 父亲没有高度或宽度，会被孩子撑起来

  • 如果存在浮动，一定加上外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 观看别人网站样式的方法

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

9. hover（伪类）

hover可以改变标签在鼠标移至标签时的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            font-size: 20px;
            color: black;
            text-align: center;
        }
        .c1:hover{
            font-size: 50px;
            color: red;

        }
        .download{
            display: none; /* 默认不显示 */
        }
        .app:hover .download{
            display: block; /* 当鼠标移动至app所在div标签，download改变 */
        }
    </style>
</head>
<body>
    <div class="c1">
        中国联通
    </div>

    <div class="app">
        <div class="title">下载</div>
        <div class="download">
            <img src="/images/baqi.jpg" alt="霸气" />
        </div>
    </div>
</body>
</html>
10. after（伪类）

在标签内部内容的尾部加东西

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1:after{
	content: "信息科学与技术学院";
}
    </style>
</head>
<body>

    <div class="c1">东北师范大学（在这儿加东西）</div>
</body>
</html>

前文提到过的float，也可以用after来解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clearfix{
            background-color: dodgerblue;
        }
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }
        .item{
            float: left;
        }
    </style>
</head>
<body>

    <div class="clearfix">
        <div class="item">东北</div>
        <div class="item">师范</div>
        <div class="item">大学</div>
    </div>
</body>
</html>
11. position
    1. fixed

    在网页中，一直固定在页面某一位置（如返回顶部的按钮）就是用的fixed

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back{
            position: fixed;
            width: 60px;
            height: 60px;
            border: 1px solid red;

            right: 10px;    /* 离右边10像素，left top bottom同理 */
            bottom: 100px;
        }
    </style>
</head>
<body>

    <div class="clearfix">
        <div class="item">东北</div>
        <div class="item">师范</div>
        <div class="item">大学</div>
    </div>
    <div class="back"></div>
</body>
</html>

  • relative 和 absolute

    上面的fixed是相对于页面的位置，可以说是绝对位置

    现在这两个是相对

    absolute相对于relative的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 300px;
            width: 500px;
            border: 1px red solid;

            margin: 100px;
            position:relative;
        }
        .c2{
            background-color: green;
            height: 100px;
            width: 100px;

            position: absolute;
            right: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="c1">
        <div class="c2"></div>
        <div class="c2"></div>
        <div class="c2"></div>
        <div class="c2"></div>
        <div class="c2"></div>
    </div>
</body>
</html>
12. 边框
border: 1px solid red; 
只想弄一边的
border-left: 1px solid green;

如果我们在鼠标移动时加边框，内容会被边框挤一下，不好看

可以给他先提前加一个透明色边框，这样就不会动了 transparent

.c1{
    border-left: transparent;
}
13. 背景色
.c1{
    background-color: red;
}

4. BootStrap

4.1 初识

是别人帮我们已写好的CSS样式，下面是使用方法

  • 下载BootStrap
  • 使用
    • 在页面引入BoorStrap
    • 编写HTML时，要按照BootStrap的规定来编写 + 自定制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发版本 -->
    <link rel="stylesheet" href="static/plugins/bootstrap-5.3.2-dist/css/bootstrap.css">

    <!-- 生产版本 -->
    <link rel="stylesheet" href="static/plugins/bootstrap-5.3.2-dist/css/bootstrap.min.css">
</head>
<body>
    <input type="button" value="提交" />
    <input type="button" value="提交" class="btn btn-primary" />
</body>
</html>

4.2 导航

4.3 栅格

全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)

  • 把整体划分为12个格子

  • 分类

    • 响应式（开始是堆叠在一起的，当大于他们的阈值时将变为水平排列)

      .col-lg-	1170px
.col-md-	970px
.col-sm-	750px

    • 非响应式(总是水平排列)

      <div class="col-xs-2" style="background-color: red; height: 50px"></div>
<div class="col-xs-10" style="background-color: blue; height: 50px"></div>

    • 列偏移

4.4 container

  • 不占满屏幕

    <div class="container">
        <div class="col-sm-9">左边</div>
        <div class="col-sm-3">右边</div>
</div>

  • 占满屏幕

    <div class="container-fluid">
        <div class="col-sm-9">左边</div>
        <div class="col-sm-3">右边</div>
</div>

4.5 面板

博客首页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">

</head>
<body>
<!---导航条-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">我的博客</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div class="container-fluid clearfix">
    <div class="col-sm-9">
        <div class="media">
            <div class="media-left media-middle">
                <a href="#">
                    <img class="media-object" src="/static/img/ac.jpg" alt="ac" width="64px" height="64px">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">今天在做梦</h4>
            </div>
        </div>
        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                         src="```"
                         data-holder-rendered="true" style="width: 64px; height: 64px;">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">Media heading</h4>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
                purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
                fringilla. Donec lacinia congue felis in faucibus.
            </div>
        </div>
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">«</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">»</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="col-sm-3">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">推荐</h3>
            </div>
            <div class="panel-body">
                Panel content
                Panel content
                Panel content
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">热门</h3>
            </div>
            <div class="panel-body">
                Panel content
                Panel content
                Panel content
            </div>
        </div>
    </div>

</div>
</body>
</html>

案例：登录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css"/>
    <style>
        .account{
            width: 400px;
            border: 1px solid #dddddd;
            border-radius: 5px;
            box-shadow: 5px 5px 5px #aaa;
            padding: 15px;
            margin-top: 200px;
        }
        .account h2{
            text-align: center;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div class="container account">
    <h2>用户登录</h2>
    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">用户名或手机号</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="User or Telephone">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">验证码</label>
            <input type="text" class="form-control" id="identifyCode" placeholder="Identify code">
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox">我已阅读相关协议，点此确认
            </label>
        </div>

        <div class="clearfix">
            <button type="submit" class="btn btn-primary" style="float: left">登录</button>
            <button type="submit" class="btn btn-primary" style="float: left; margin-left: 50px;">注册</button>
            <a href="***" style="float: right; margin-top: 5px; margin-right: 10px;">忘记密码</a>
        </div>
    </form>
</div>
</body>
</html>

案例：后台管理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css"/>
    <style>
        .navbar {
            border-radius: 0;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">高宇轩无敌后台管理系统</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">北京</a></li>
                <li><a href="#">上海</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">其他城市 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">其他<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>  <!--导航-->

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">表单区域</h3>
        </div>
        <div class="panel-body">
            <form class="form-inline">
                <div class="form-group">
                    <label class="sr-only" for="exampleInputEmail3">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
                </div>
                <div class="form-group">
                    <label class="sr-only" for="exampleInputPassword3">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
                </div>

                <button type="submit" class="btn btn-success">保存</button>
            </form>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">面板区域</h3>
        </div>
        <div class="panel-body">

            <div class="table-area" style="margin-top: 20px;">
                <div class="bs-example" data-example-id="striped-table">
                    <table class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>
                                <input type="button" class="btn btn-primary btn-xs" value="编辑"/>
                                <input type="button" class="btn btn-danger btn-xs" value="删除"/>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>
                                <input type="button" class="btn btn-primary btn-xs" value="编辑"/>
                                <input type="button" class="btn btn-danger btn-xs" value="删除"/>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">3</th>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>
                                <input type="button" class="btn btn-primary btn-xs" value="编辑"/>
                                <input type="button" class="btn btn-danger btn-xs" value="删除"/>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="bs-example" data-example-id="disabled-active-pagination">
        <nav aria-label="...">
            <ul class="pagination">
                <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
            </ul>
        </nav>
    </div>
</div>


</body>
</html>

4.6 图标

4.7 BootStrap依赖

BootStrap依赖JavaScript的类库，jQuery

  • 下载jQuery，并在页面上应用jQuery
  • 在页面上应用BootStrap的JavaScript类库(jQuery)

5. JavaScript

  • JavaScript是一门编程语言，浏览器就是JavaScript语言的解释器

  • DOM和BOM

    编程语言中的内置模块

  • jQuery

    相当于编程语言的第三方模块

    实例

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menus{
            width: 200px;
            border: 1px solid red;
        }
        .menus .header{
            background-color: gold;
            padding: 20px 10px;
        }
    </style>
</head>
<body>
    <div class="menus">
        <div class="header" onclick="myfun()">大标题</div>
        <div class="item">内容</div>
    </div>

    <script type="text/javascript">
        function myfun(){
            //alert("你好呀");
            confirm("是否要继续？");
        }
    </script>
</body>
</html>

5.1 代码位置

有两个位置可以放

image-20240129214326802

如果放在上边，会先执行JavaScript中的动作,然后才显示页面，如果动作很耗时，会导致页面加载不出来

放在下面则会先显示页面

JS代码存在形式：

  • 可以写在当前HTML中

  • 写在其他js文件中，导入使用

    <script src="static/js/test.js"></script>

5.2 注释

  • HTML的注释

    <!-- 注释 -->

  • CSS的注释

    /* 注释 */	写在style代码块中

  • JavaScript的注释

    // 注释
/* 注释 */	写在script代码块中

5.3 变量

var name = "高宇轩";
console.log(name);

5.4 字符串类型

var name = "高宇轩";
var name = String("高宇轩");

var v1 = name.length;
var v2 = name[0];	//	name.charAt(0);
var v3 = name.trim;	//去除左右空白
var v4 = name.substring(0, 2);	//	切片，左闭右开，得到高宇

案例：跑马灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="text-align: center">
    <span id="txt" style="font-size: 30px; color: red;">欢迎宇宙战士高宇轩莅临地球</span>
</div>

<script type="text/javascript">
    function show() {
        //1. 去html中找到某个标签，并获取让的内容（利用DOM）
        let tag = document.getElementById("txt");
        let dataString = tag.innerText;

        // 2. 动态起来，把文本中第一个字符拿到，放在字符串最后面
        var firstChar = dataString[0];
        var otherString = dataString.substring(1, dataString.length);
        var newText = otherString + firstChar;

        //  3. 在html标签中更新内容
        tag.innerText = newText;
    }

    //BOM中定时器
    setInterval(show, 1000);    //每1000ms执行一次show函数
</script>
</body>
</html>

5.5 数组

//定义
var v1 = [11, 22, 33, 44];
var v2 = Array(11, 22, 33, 44);

v1[0] = 99;

vi.push("new");	// 尾部追加
vi.unshift("newnew");	// 头部追加
vi.splice(索引, 0, 元素);
vi.splice(1, 0, "高宇轩");	// 插入，0表示要删除的数目，改成1就表示替换了

vi.pop();	// 尾部删除
vi.shift();	// 头部删除
vi.splice(2, 1);	//	删除索引为2的元素

var v1 = [11, 22, 33, 44];
for(var idx in v1){
    // idx = 0/1/2/3/	data = v1[idx];
}

for(var i = 0; i < v1.length; i ++){
    
}

注意：js中也有break和continue

案例：动态数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul id="city">

    </ul>

    <script type="text/javascript">
        
        // 发送网络请求， 获取数据
        var cityList = ['北京', '上海', '深圳', '石家庄'];
        for(var idx in cityList){
            var text = cityList[idx];

            // 创建一个li标签
            var tag = document.createElement("li");
            // 在li标签中写入内容
            tag.innerText = text;
            // 将li标签写入id=city的ul标签中。DOM
            var parentTag = document.getElementById("city");
            parentTag.appendChild(tag);
        }
    </script>
</body>
</html>

5.6 对象（Python中字典）

info = {
    "name": "高宇轩",
    "age": 19,
}

info = {
    name: "gyx",
    age: 19,
}

info.age	// 获取
info.name = "gq"; //修改

info["age"]
info["age"] = 20;

delete info["age"];

info = {
    name: "gyx",
    age: 19,
}

for(var key in info){
    // key=name/age		data = info[key];
    //亲身实践， 这儿不能用info.key;
}

案例：动态表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody id="body">
    </tbody>


</table>
<script type="text/javascript">
    var dataList = [
        {id: 1, name: "高宇轩", age: 19,},
        {id: 2, name: "高宇轩", age: 19,},
        {id: 3, name: "高宇轩", age: 19,},
        {id: 4, name: "高宇轩", age: 19,},
    ]
    for (var i in dataList) {
        var tr = document.createElement("tr");
        var info = dataList[i];
        for (var key in info) {
            var text = info[key];
            var td = document.createElement("td");
            td.innerText = text;

            tr.appendChild(td);
        }

        var bodyTag = document.getElementById("body");
        bodyTag.appendChild(tr);
    }

</script>
</body>
</html>

5.7 条件

if(条件)	{
    
}else if{
    
}else if{
    
}else{
    
}

5.8 函数

def func():
    函数内容
   
func()

function func(){
    
}

func();

5.9 DOM

DOM 就是一个模块，模块可以对HTML页面中的标签进行操作。

// 根据ID获取标签
var tag = document.getElementById("xxx");

// 获取标签中的文本
tag.innerText;

// 设置标签中的文本
tag.innerText = "哈哈哈哈哈";

//	创建标签	<div></div>
var tag = document.createElement("div");
//	标签写内容
tag.innerText = "哈哈哈哈";

<ul id="city">
	<!-- 往结构里添加数据 -->
</ul>

<script type="text/javascript">
    var tag = document.getElementById("city");
    
	// 创建一个li标签
    var newtag = document.createElement("li");
    // 在li标签中写入内容
    newtag.innerText = "北京";
    // 将li标签写入id=city的ul标签中。DOM
    tag.appendChild(newtag);
</script>
1. 事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入用户名" id="user_txt">
<input type="button" value="点击添加" onclick="addCityInfo()">

<ul id="city">

</ul>

<script type="text/javascript">

    function addCityInfo() {
        // 1.先找到输入标签
        var user_tag = document.getElementById("user_txt");

        // 2.获取用户输入的内容
        var user_txt = user_tag.value;

        //判断输入内容是否为空，非空才能继续
        if (user_txt.length > 0) {
            // 3.创建标签<li> 中间的文本内容就是用户输入的内容
            var newTag = document.createElement("li");
            newTag.innerText = user_txt;

            // 4.将标签添加到ul中
            var parentTag = document.getElementById("city");
            parentTag.appendChild(newTag);

            // 5.将input框内容置为空
            user_tag.value = "";
        }else{
            alert("输入不能为空");
        }
    }
</script>
</body>
</html>

注：DOM中操作有很多很多

DOM可实现功能有很多，但比较繁琐。

页面上的效果一般用 jQuery 实现/ vue.js / react.js

6. jQuery

jQuery是一个JavaScript第三方模块（第三方类库）。

  • 基于jQuery，自己开发一个功能
  • 现成的工具 依赖jQuery, 例如：bootstrap动态效果。

6.1 快速上手

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 id="txt">中国联通</h1>


<script src="static/js/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
    // 利用jQuery中的功能实现某些效果

    // 找到id=txt的标签并替换
    $("#txt").text("无敌高宇轩");

</script>
</body>
</html>

6.2 寻找标签（直接寻找）

  • ID选择器

    <h1 class="c1" id="txt"></h1>
<h1 class="c1"></h1>
<h1 class="c2"></h1>

$("#txt")

  • 样式选择器

    <h1 class="c1"></h1>
<h1 class="c1"></h1>
<h1 class="c2"></h1>

$(".c1")

  • 标签选择器

    <h1 class="c1"></h1>
<h1 class="c1"></h1>
<h1 class="c2"></h1>

$("h1")

  • 层级选择器

    $(".c1 .c2 a")

  • 多选择器

    <h1 class="c1">h1</h1>
<h1 class="c1">
	<div class="c3">
        <span></span>
        <a></a>
    </div>
</h1>
<h1 class="c2">hahaha</h1>

    $("#c3, #c2, .c1, li")

  • 属性选择器

    <input type="text" name="n1" />
<input type="text" name="n2" />
<input type="text" name="n3" />

    $("input[name='n1']")

6.3 间接寻找

  • 找兄弟

    <div>
    <div>北京</div>
    <div id="c1">上海</div>
    <div>深圳</div>
</div>

    $("#c1").prev()	// 同级兄弟
$("#c1")
$("#c1").next()

$("#c1").siblings()	// 所有兄弟

  • 找父子

    <div>
    <div>
        <div>北京</div>
        <div id="c1">上海
        	<div>宝山区</div>
            <div class="p10">青浦区</div>
        </div>
        <div>深圳</div>
    </div>
    <div>
        <div>河北</div>
        <div>河南</div>
        <div>山西</div>
        <div>山东</div>
    </div>
</div>

    $("#C1").parent()	// 父亲

$("#c1").children()	// 所有的儿子
$("#c1").children(".p10")	// 所有儿子中class等于p10的

$("#c1").find("p10")	// 所有子孙中寻找class等于p10的

案例：菜单切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menus{
            height: 800px;
            width: 200px;
            border: 1px red solid;

        }
        .menus .header{
            background-color: gold;
            border-bottom: 1px dotted #dddddd;
            padding: 10px 5px;

            cursor: pointer;
        }
        .hide{
            display: none;
        }
        .menus .content a{
            display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted #dddddd;
        }
    </style>
</head>
<body>
    <div class="menus">
        <div class="item">
            <div class="header" onclick="clickMePro(this)">石家庄</div>
            <div class="content hide">
                <a>鹿泉区</a>
                <a>桥西区</a>
                <a>长安区</a>
                <a>裕华区</a>
            </div>
        </div>

        <div class="item">
            <div class="header" onclick="clickMePro(this)">北京</div>
            <div class="content hide">
                <a>海淀区</a>
                <a>朝阳区</a>
                <a>大兴区</a>
                <a>昌平区</a>
            </div>
        </div>
    </div>

<script src="static/js/jquery-3.7.1.min.js"></script>

<script>
    function clickMe(self)  {
        // $(self) --》 当前点击的那个标签
        // removeClass("hide"); 删除标签的样式


        var hasHide = $(self).next().hasClass("hide");    //判断标签是否已有样式
        if(hasHide) {
            $(self).next().removeClass("hide");  //点击标签的下一个兄弟标签
        }else{
            $(self).next().addClass("hide");
        }

    }
    function clickMePro(self)   {
        //  找父亲，父亲的所有兄弟， 的content标签
        $(self).parent().siblings().find(".content").addClass("hide");  //siblings不包括当前标签

        $(self).next().removeClass("hide");
    }
</script>

</body>
</html>

6.4 操作样式

  • addClass
  • removeClass
  • hasClass

6.5 值的操作

<div id="c1">
    内容
</div>

$("#c1").text()	//	获取文本内容
$("#c1").text("休息")	//	设置文本内容

<input type="text" id='c2' />

$("#c2").val()	//	获取用户输入的值
$("#c2").val("哈哈哈")	//	设置值

案例：动态创建数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="txtUser" placeholder="用户名">
    <input type="password" id="txtPassword" placeholder="密码">
    <input type="button" value="提交" onclick="getInfo()" />

    <ul id="view">

    </ul>
    <script src="static/js/jquery-3.7.1.min.js"></script>

    <script>

        function getInfo()  {
            //  1.获取用户输入的用户名和密码
            var username = $("#txtUser").val();
            var password = $("#txtPassword").val();

            var dataString = username + '-' + password
            //  2.创建li标签，在li标签写入内容
            var newLi = $("<li>").text = dataString;

            //  3.把新创建的li标签添加到ul里面
            $("#view").append(newLi);
        }
    </script>
</body>
</html>

6.6 事件

<ul>
    <li>百度</li>
    <li>谷歌</li>
    <li>搜狗</li>
</ul>

<script>
	$("li").click(function)	{
        //	点击li标签时，自动执行这个函数
        //	$(this)	当前你惦记的那个标签
    }
</script>

jQuery删除标签(.remove())（在页面上删除）

当页面框架加载完成之后执行代码：

$(function () {
    $("li").click(function)	{
        //	点击li标签时，自动执行这个函数
        //	$(this)	当前你惦记的那个标签
    }
})
青帝_
关注
  • 9
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Django web开发(一) - 前端
01-29
Django web开发(一) - 前端
B站武沛齐Django笔记和代码
07-19
https://www.bilibili.com/video/BV1NL41157ph 2022 B站最详细django3教程(django从入门到实践) 很适合刚学习django的同学 通过一个案例，把django的基本的templates，models，urls，from，modelfrom讲的清清楚楚，甚至还给了我们应用场景。
Flask 源码分析总结：Context 上下文原理
mkdir700的博客
08-23 1120
首先明白 Context 是什么，这东西常被翻译为上下文，其实像以前的阅读理解题，“请结合语境上下文，谈一谈作者的感想”。一个句子，单独来看，我并不知道其完整的含义，必须要结合上下文语境才能理解。举个例子，我大喊一声“卧槽”。有人就会有疑问，“诶，发生了什么事情”（当然，也可能心理暗道：”这sb玩意儿“）那么，上文，就是已经发生的事，下文就是即将发生的事。
day18 面向对象进阶
mannixiang的博客
04-01 230
day18 面向对象进阶 版权声明：本博客转载自路飞学城Python全栈开发培训课件，仅用于学习之用，严禁用于商业用途。 欢迎访问路飞学城官网：https://www.luffycity.com/ 课程目标：掌握面向对象进阶相关知识点，能沟通更加自如的使用面向对象来进行编程。 今日概要： 成员 变量 实例变量 类变量 方法 绑定方法 类方法 静态方法 属性 成员修饰符（公有/私有） “对象嵌套” 特殊成员 1.成员 面向对象中的所有成员如下： 变量 实例变量 类变量
Flask源码分析系列(2) -Flask源码分析
a360079162的博客
06-09 431
文章目录一、从一个最简单的Demo开始二、Route实现原理三、request、Response、session等对象的实现四、一些简单的封装(1) 登录校验与拦截(2) 自定义异常与返回值处理五、结束语 转载请注明出处即可 源码地址github flask 主要参考文档为flask 环境为MacOS, Python 3.7+, IDE Pycharm 注意:文章中的源码存在删减，主要是为了减少篇幅和去除非核心逻辑，但不会影响对执行流程的理解。 如果对Werkzeug不是很了解，请先看Flask源码分析系列
reactoplayer:一个React Django Web音频播放器-前端部分-React + Sockjs + ES6 + Webpack + Babel
04-30
React播放器一个React Django Web音频播放器-前端部分React + Redux + sockjs + es6 + webpack + babel安装路线图前1.0版播放清单遮阳板时分双工文献资料风格播放器地位非常阿尔法！
Django学习笔记--阉割版
02-23
Django学习笔记--阉割版
flask源码分析
Cong_dim的博客
05-25 485
1、flask和django的区别 django自带组件，flask需要第三方支持 django上下文管理是通过request参数传递，flask基于上下文管理实现的应用上下文(app,g)和请求上下文(request,session) 2、flask的生命周期 浏览器 -> wsgi(wekzug) -> before_request -> view -> after_request 3、wsgi的本质 socket服务端 4、flask蓝图的作用 默认flask通过一个脚本实现服
Django后台项目开发实战六
weixin_72949205的博客
05-01 728
Django日志处理
python Django REST framework允许你根据API的版本提供不同的行为或数据
shixuegen的专栏
05-01 1109
这可以通过在settings.py中设置VERSION_PARAM为查询参数的名称来实现（默认情况下它已经被设置为'version'，这意味着你可以通过?在Django REST framework中，版本控制是一个重要的功能，它允许你根据API的版本提供不同的行为或数据。你还可以编写自己的版本控制类，以满足特定的需求。一旦确定了版本，你可以在视图和序列化器中根据版本来更改行为。如果你使用URL命名空间，你可以使用命名空间和视图名称的组合来区分不同的版本。你可以通过URL路径中的参数来指定API的版本。
Django后台项目开发实战四
weixin_72949205的博客
04-30 1099
用户可以浏览工作列表以及工作详情。
Django后台项目开发实战三
weixin_72949205的博客
04-30 838
优化添加职位功能。
Django-admin组件
m0_72839702的博客
04-29 1732
admin是django中提供的一套可视化工具：用于对ORM中定义的表进行增删改查。
Django中如何让页面之间建立关系
weixin_45754647的博客
05-05 213
4、编辑html文件，通过这个文件实现先后端的交互，比如点击操作，以下是submit.py的示例代码。持续不断的总结输出，一定可以厚积薄发，如果觉得我的文章有帮助到你，望你关注，笔芯。4、操作视图函数返回的html中的按钮，点击页面中 的按钮，如图。3、执行视图函数，比如视图函数是要求打开submit.html。3、编辑views.py,编写视频函数，代码如下。7、点击submit这个按钮，这样就跳转成功了。5、调用这个按钮绑定的方法，重点来了。2、程序根据路由找到视图函数。1、创建模型，代码如下。
【银角大王——Django课程——靓号页面的基本操作（列表，新建，删除）】
最新发布
weixin_45753504的博客
05-05 272
（2）ModelForm配合，默认显示数据。（1）根据ID获取当前编辑的对象。
Django之cookie和session
m0_62155641的博客
05-04 397
【代码】Django之cookie和session。
Django后台项目开发实战一
weixin_72949205的博客
04-29 720
开发环境使用 Anaconda, IDE 使用 pycharm。
【补充】1-auth的使用、扩写auth的user表、django支持缓存
linjun的博客
05-02 346
【代码】auth的使用、扩写auth的user表、django支持缓存。
Django关于ORM的增删改查
weixin_45754647的博客
05-05 202
但是这种方式有个弊端，就是需要写好几行，那么其实是有更简单的方式，就是调用类方法。这种方法其实就是实例化之后，然后调用save方法，只不过是把这两个步骤进行封装。查询条件可以有多种不同的组合，比如 获取id等于2，并且是匿名的数据。可以加入多个条件进行查询，比如查询id不等于1，也不等于2的数据。以下的内容可以先从查询开始看，这样更容易理解后面删除部分代码。4、查，比如获取id等于3的text字段内容，查询是获取model实例对象的过程。2、删，这里也是包括两种方法。1、创建model，
武沛齐django源码
07-23
首先，Django是一款使用Python编写的开源Web开发框架，它提供了一系列的工具和功能，使开发者可以快速构建高效、安全和可扩展的Web应用程序。 在武沛齐对Django源码进行解读时，他会深入研究框架的各个模块和组件，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

青帝_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值