3.1.python第三章：路由与模板

it2023-09-13 66

1. 路由与模板

1.1. Web原理

将网址称为url地址，将 .net .cum .org 前的地址称为HOST，根据 HOST 找到对应服务器，对服务器发送对应的url地址，服务器收到地址后解析地址并处理返回内容。浏览器向服务器发送数据称为请求:request，服务器向浏览器发送数据称为响应:response

1.2. 正则表达式

常用命令含义.除了\n\r的所有字符\d数字\D非数字\w数字、字母、下划线\W非数字字母和下划线\s空格（包括制表符换页符）*出现次数>=0+出现次数>=1{n}出现次数=n{n,m}n<=出现次数<=m^以开头$以结尾

例如：

匹配长度为1-3位的数字： \d{1,3}匹配出现0次及0次以上的数字、字母、下划线：\w*匹配以数字、字母、下划线开头，数字结尾的字符串：^\w+.*\d+$

1.3. request 和 response

Django中的request对象：HttpRequest

常用命令含义method返回请求的方式（GETpath返回页面的路径（不包括域名）META封装请求头的数据GET封装GET请求数据的QueryDict对象POST封装POST请求数据的QueryDict对象FILES封装上传文件数据COOKIES封装请求的cookies，类似字典的对象session可以读写的类似字典的对象

1.4. HTML

1.4.1. HTML基本语法常用标签

```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <p>段落标签</p> <hr/> 水平线hr <br/> 换行符br 空格： (& nbsp;) 大于号: >(& gt;) 小于号：<(& lt;)  <a href="//www.baidu.com" target="_blank">click me</a>  <img src="jobs.png" alt="图片显示异常">  <br/> <table border="1px" width="300px"> <tr> <th>表头1</th> <th>表头2</th> </tr> <tr> <td><center>列1</center></td> <td>列2</td> </tr> </table>  <ul> <li>无序列表1</li> <li>无序列表2</li> </ul> <ol> <li>有序列表1</li> <li>有序列表2</li> </ol>  <div>div1</div> <div>div2</div> <span>span1</span> <span>span2</span>  <form action="#" method="post" enctype="multipart/form-data"> 1.用户名（文本框text）： <input type="text" name="username"> <hr/> 2.密码（密码框password）： <input type="password" name="password"> <hr/> 3.性别（单选框radio）：男<input type="radio" name="gender" value="0"> 女<input type="radio" name="gender" value="1"> <hr/> 4.爱好（复选框checkbox）：爱好1<input type="checkbox" name="hobby" value="hobby1"> 爱好2<input type="checkbox" name="hobby" value="hobby2"> <hr/> 5.上传头像（文件框file）： <input type="file" name="img"> <hr/> 6.按钮（button）： <input type="button"name="空按钮"> <hr/> 7.提交（submit）： <input type="submit" name="提交按钮"> 8.重置（reset）： <input type="reset" name="重置按钮"> </form>  <form action="#" method="post" enctype="multipart/form-data"> <select name="year"> <option value="2019">2019</option> <option value="2018">2018</option> </select> <textarea name="comment" cols="30" rows="10"></textarea> </form> </body> </html> ```

1.4.2. CSS

css涵义

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS引入方式 1.内嵌式 <div style="background-color:blue"></div> 2.内部式 <style type="text/css"> /*CSS代码*/ </style> 3.外部式 <link rel="stylesheet"tye="text/css"href="[css文件地址]">

CSS选择器 (1)标签选择器【标签名】{}； (2)ID选择器 #【ID值】{}； (3)类选择器 .【类名】{}；

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body{ background-color: black; } #div2{ background-color: deeppink; } .div_class1{ background-color: aqua; } </style> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <div style="background-color: antiquewhite">div1</div> <div id="div2">div2</div> <div class="div_class1">div_class1</div> <div class="div_class1">div_class2</div> <p>段落p</p> </body> </html>

CSS常用样式

backgroud-image：url（【图片地址】） backgroud-repeat:repeat-x 水平平铺 repeat-y 垂直平铺 no-repeat 不平铺字体大小：font-size:[具体大小] 字体加粗：font-weight:bold 加粗 lighter 变细边框： border:边框类型，尺寸，颜色； solid 实线 dash 虚线

1.4.3. JavaScript

JavaScript引入方式

(1)内嵌式 <script type="text/javascript"> //js代码 </script> (2)外部式 <script type="text/javascript"src="myjs.js"></script>

基本语法

alert 弹框 == 值等于 === 类型和值都相等函数： 1. 第一种方式 var func = function(x,y){ //func是函数名字，function表明func是一个函数 return x+y; }; alert(func(10,20)); 2. 第二种方式 function func(x,y){ return x+y; }; DOM 树可以根据ID得到节点 <div id="div_id1"></div> <script type="text/javascript"> dicElement=document.getElementByld("div_id1"); divElement.innerHTML="通过js写入文本内容"; </script> //必须写在div之后，写在之前div不存在，找不到结点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pWsGUYLi-1603197379248)(D:\git笔记\徐仓鼠的学习笔记\python\DOM树.png)]

1.4.4. JQuery

jQuery是一个快速、简洁的JavaScript框架。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 JQuery的使用，下载（ http://jquery.com/ ），粘贴到项目目录中，再引用：

JQuery选择器常用命令含义$("*")选择所有$("标签名")标签选择器$("#id值")id选择器$(".class值")类选择器

Jquery对象 (1)JQuery对象习惯性采用$ 开口，例如 $div = $(“div”); (2)JQuery对象的格式是[Object] (3)JQuery对象转JS对象： jsObject = $jqueryObject[0]; jsObject = $jqueryObject.get(0); (4)JS对象转JQuery对象 $jqueryObject = $(jsObject);

Jquery事件

<head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"src="JS/jquery-3.4.1.js"></script> </head> <body> <input type="button" value="按钮" id="button_id"> <script type="text/javascript"> //1，得到按钮对象 $buttonElement = $("#button_id"); //2.绑定点击事件 $buttonElement.click(function(){ alert("按钮被点击"); }) </script> </body>

JQuery动画

常用命令含义show(speed,callback)显示hide(speed,callback)隐藏fadeIn(speed,callback)淡入fadeOut(speed,callback)淡出slideDown(speed,callback)向下滑动slideUp(speed,callback)向上滑动

speed：slow，normal，fast callback:当动画完成后执行的回调函数

<head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"src="JS/jquery-3.4.1.js"></script> </head> <body> <input type="button" value="显示" id="button_show"> <input type="button" value="隐藏" id="button_hide"> <ul id="ul_id"> <li>Python</li> <li>Java</li> </ul> <script type="text/javascript"> //1.得到两个按钮对象 $button_hide = $("#button_hide"); $button_show = $("#button_show"); //2.得到ul对象 $ul = $("#ul_id"); //3.隐藏 $button_hide.click(function () { $ul.hide("slow"); }); //4.显示 $button_show.click(function () { $ul.show("slow"); }); </script> </body>

1.5. 上下文与模板

模板调用，将html放入模板文件夹中，在view中使用return render(request,“模板.html”)模板传参传参： def index_handler(request): context = { "username":"xxx", "password":"111" } return render(request,"index.html",context) 接参： {{username}} {{password}} 模板层基本语法 1.取值 context = { "key1":"v1" "key2":["v1","v2"] "key3":{ "key3_1":"v1" "key3_2":"v2" } } 1. 普通值取值 {{key1}} 2.列表值取值 {{key2.0}} {{key2.1}} 3.字典值取值 {{key3.key3_1}} {{key3.key3_2}} 2.循环 context = { "hobby":["1","2","3"] } {%for hob in hobby%} 爱好：{{hob}}<br/> {%endfor%} 3.判断 {%if 条件%} {%elif 条件%} {%else %} {%endif%} 4.视图函数地址 1.不需要额外传参的视图函数： {%url"[namespace]:[name]"%} 2.需要传参： {%url"[namespace]:[name]"[传递的参数]%} 模板过滤器

过滤器定义：模板中对传递过来的数据进行修饰，再进行显示过滤器语法：{{变量|过滤器关键字:参数}} 没有参数传递可以不写

常用过滤器

关键字含义safe禁止HTML转义length长度date日期（Y-m-d H:i:s）default默认值（变量upper转大写lower转小写

多个过滤器配合：{{变量|过滤器1|过滤器2}}

模板复用(继承)和block提取(重写) 1.模板继承 {{%extends"[父模板路径]"%}} 2.block块定义和重写 {%block[代码块名称]%} {%endblock%} 调用父模板中的代码：{{block.supper}} | | `length` | 长度 | | `date` | 日期（Y-m-d H:i:s） | | `default` |默认值（变量|default:默认值） | | `upper` |转大写 | | `lower` |转小写 | 多个过滤器配合：{{变量|过滤器1|过滤器2}} 5. 模板复用(继承)和block提取(重写) ```django 1.模板继承 {{%extends"[父模板路径]"%}} 2.block块定义和重写 {%block[代码块名称]%} {%endblock%} 调用父模板中的代码：{{block.supper}}

最新回复(0)