Django学习记录:初步认识django以及实现了简单的网页登录页面的前后端开发

chatgpt/2023/9/26 14:35:09

Django学习记录:初步认识django以及实现了简单的网页登录页面的前后端开发

1、可以先删去template文件夹,并在setting里面删掉这一行

在这里插入图片描述

2、在pycharm中创建app:

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

3、启动app:编写URL与视图函数关系【urls.py】

​ 编写视图函数【views.py】

​ 启动pycharm项目
在这里插入图片描述

4、引用静态文件

在这里插入图片描述

其中有两个文件的导入:(jquery和bootstrap)

jquery:https://code.jquery.com/jquery-3.6.0.min.js 可以直接复制下来创建记事本保存并更改为js文件即可使用。

bootstrap:https://v3.bootcss.com/getting-started/#download 可以在该网站直接下载,但下载端在github。(有需要的也可以私信我)


模板语法

视图函数的render内部:

1.读取含有模板语法的HTML文件

2.内部进行渲染(模板语法执行并替换数据),最终得到只包含HTML标签的字符串。

3.将渲染(替换)哇长城的字符串返还给用户浏览器

views.py下的代码:

from django.shortcuts import render,HttpResponse# Create your views here.
def index(request):return HttpResponse("欢迎使用")def user_list(request):# 1.如果未删除默认setting中dirs那行代码,则有限去项目根目录的templates中寻找(提前先配置)【不配置就是无效】# 2.根据app的注册顺序,在每个app下的templates目录中寻找【更改设置后】return render(request, "user_list.html")def user_add(request):return render(request, "user_add.html")def tpl(request):name = "饺子"# 列表,元组与列表相同role =["保安","CEO","管理员"]# 字典user_info={"name":"包子","salary":10000,"role":"CTO"}data_list=[{"name": "包子", "salary": 10000, "role": "CTO"},{"name": "馒头", "salary": 10000, "role": "CTO"},{"name": "馄饨", "salary": 10000, "role": "CTO"},]return render(request, "tpl.html", {"n1":name, "n2":role,"n3":user_info,"n4":data_list})

tpl.html下的代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>模板语法的学习</h1>
<div>{{ n1 }}</div>
<div>{{ n2 }}</div>
<div>{{ n2.0 }}</div>
<div>{{ n2.1 }}</div>
<div>{{ n2.2 }}</div>
<div>{% for item in n2 %}<span>{{ item }}</span>{% endfor %}
</div>
<hr/>
{{ n3 }}
{{ n3.name }}
{{ n3.role }}
<ul>{% for k,v in n3.items %}<li>{{ k }}={{ v }}</li>{% endfor %}
</ul><hr/>
{{ n4.0 }}
{{ n4.1.name }}{% for item in n4 %}<div>{{ item.name }}  {{ item.salary }}</div>{% endfor %}<hr/>
{% if n1 == "饺子" %}<h1>dadadadada</h1>
{% else %}<h1>dududududu</h1>
{% endif %}</body>
</html>

网页端显示:
在这里插入图片描述

请求和相应

def sth(request):# request是一个对象,封装了用户发送过来的所有请求相关数据# 1.获取请求方式 GET/POSTprint(request.method)# 2.在URL上传递值(即在网址后面添加:/sth/?n1=123&n2=999,则会传回n1,n2对应的值)print(request.GET)# 3.在请求体中提交数据print(request.POST)# 4. (响应)HttpResponse("返回内容"),内容字符串内容返回给请求者# return HttpResponse("返回内容")# 5.(响应)读取HTML的内容 + 渲染(替换) —> 字符串,返回给用户浏览器# return render(request,'sth.html',{"title":"来了"})# 6.(响应)让浏览器重定向到其他的页面return redirect("http://www.baidu.com")

登录界面的编写

def login(requset):if requset.method == "GET":return render(requset, "login.html")# 如果是POST请求,获取用户提交的数据# print(requset.POST)username = requset.POST.get("user")password = requset.POST.get("pwd")if username == 'root' and password == "123":# return HttpResponse("登陆成功")return redirect("https://www.bbac.com.cn/cn/")# 可删去else,以省略嵌套。else:# return HttpResponse("登陆失败")return render(requset, 'login.html', {"error_msg": "用户名或密码错误"})
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>用户登录</h1>
<form method="post" action = "/login/">{% csrf_token %}<input type = "text" name = "user" placeholder="用户名"><input type = "password" name = "pwd" placeholder="密码"><input type = "submit" value="提交"><span style="color:red;"> {{ error_msg }}</span></form></body>
</html>

登录失败:则如下界面;登录成功,则跳转网页。
在这里插入图片描述

课程来源:
2022 B站最详细django3教程(django从入门到实践)

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

如若内容造成侵权/违法违规/事实不符,请联系郑州代理记账网进行投诉反馈,一经查实,立即删除!

相关文章

VScode中python的相对路径与绝对路径 FileNotFoundError: [Errno 2] No such file or directory

VScode中&#xff0c;python里的相对路径是相对于当前工作目录来定位的&#xff0c;而当前的工作目录在VScode中下方的终端窗口会有提示&#xff1a; 说明此时的工作目录并非当前python文件所在的目录&#xff0c;而是C:\Users\xxxxx(你的用户名)。因此&#xff0c;使用VScode…

红宝石阅读笔记

第七章 迭代器与生成器 7.3 生成器 乍一看理解&#xff0c;仔细想没理解&#xff0c;然后自己让n2&#xff0c;还原nTimes&#xff0c;等价于 function* nTimes() {if (true) {yield* (function* A() {if (true) {yield* (function* B() { })();yield 0;}})();yield 1;} } 最…

揭秘电脑上的几大流氓软件,查看你的设备是否中招?

当我们使用电脑时&#xff0c;不可避免地会接触到各种软件。有些软件为我们提供了便利和安全保障&#xff0c;而另一些则隐藏着不良企图。这些被称为"流氓软件"的程序&#xff0c;可能给我们的电脑带来麻烦、干扰甚至威胁我们的数据安全。让我们一起盘点一下电脑上的…

网络运维总复习结构

目录 前言 基础运维技能 3种常用的字符编码&#xff0c;编码间的切换 简述文件的操作流程&#xff0c;三个常用的文件操作方法 open函数中的mode参数表示什么&#xff0c;mode的四个取值 阐述配置文件的格式&#xff0c;解析配置文件主要用到哪个模块的哪个类&#xff0c…

【业务功能篇55】Springboot+easyPOI 导入导出

Apache POI是Apache软件基金会的开源项目&#xff0c;POI提供API给Java程序对Microsoft Office格式档案读和写的功能。 Apache POI 代码实现复杂&#xff0c;学习成本较高。 Easypoi 功能如同名字easy,主打的功能就是容易,让一个没见接触过poi的人员 就可以方便的写出Excel导出…

使用vim-cmd工具给ESXi虚机定期打快照

VMware虚拟化 - 建设篇 第四章 使用vim-cmd工具给ESXi虚机定期打快照 VMware虚拟化 - 建设篇系列文章回顾使用vim-cmd工具给ESXi虚机定期打快照前言前提条件ESXi新增执行快照备份的sh脚本ESXi添加crond任务并使其生效ESXi指定部分虚拟机不执行定期快照(附加)虚拟机自定义属性…

【Git系列】分支操作

&#x1f433;分支操作 &#x1f9ca;1. 什么是分支&#x1f9ca;2. 分支的好处&#x1f9ca;3. 分支操作&#x1fa9f;3.1 查看分支&#x1fa9f;3.2 创建分支&#x1fa9f;3.3 切换分支 &#x1f9ca;4. 分支冲突&#x1fa9f;4.1 环境准备&#x1fa9f;4.2 分支冲突演示 &am…

Vue系列第六篇:axios封装,登录逻辑优化,404页面实现,Go语言跨域处理

第五篇利用vue实现了登录页面&#xff0c;用go语言开发了服务端并最后在nginx上进行了部署。本篇将axios封装&#xff0c;登录逻辑优化&#xff0c;404页面实现。 目录 1.前端 1.1代码结构 1.2源码 2.服务端 2.1源码 3.运行效果 4.注意事项 4.1webpack.config.js和vue…
推荐文章