Django项目详解2——动态响应的web应用

最新推荐文章于 2023-04-25 10:54:54 发布

世外大帝

最新推荐文章于 2023-04-25 10:54:54 发布

阅读量1w

点赞数 3

分类专栏： python Django 文章标签： python Django

本文链接：https://blog.csdn.net/lftaoyuan/article/details/79014203

版权

python 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

Django

5 篇文章 1 订阅

订阅专栏

使用html响应

现在根路径其他啥都没有，也没有做重定向，所以，直接给根接口一个响应

先来个main.html

templates/main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Main</title>
</head>
<body style="background-color: cadetblue;">
    <h1 style="color: black">this is my first django app today</h1>
</body>
</html>

接着，在mysite/urls.py中设置,加上这句，注意，关键点还是正则
url(r"^$", views.main)

最后完成views，字符串效果是用来给用户看的视图，那么，这个html也应该是views：

cmdb/views.py

renders的参数：

render(request, template_name, context=None, content_type=None, status=None, using=None)

- request         请求: 附带所有请求信息
- template_name   模板: templates中定义的文件名
- context         内容: 呈现的内容，默认dict类型
- content_type    内容类型: 如果非dict，就填这一项
- status          状态: http响应吗，默认200(success)
- using           模板引擎

from django.shortcuts import render
from django.shortcuts import HttpResponse


# Create your views here.


def index(request):  # request 封装了用户请求的所有内容
    return HttpResponse("my first django today")


def main(request):
    return render(request, "main.html")

那么，现在reset项目后，直接进入根接口，应该是这个样子的

main.html

你以为这就完了，只是一个html而已，最重要的js没出来也就罢了，连css也没有

使用静态文件

项目下创建static文件夹，用来做什么的，在setting.py模块的最下面已经给出提示了

就是装这些东西的，可以创建几个目录：css，js，imgs
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/

这个是引用指针，可以理解为要在html中引用的相对路径
非具体目录，可以改
STATIC_URL = '/static/'

这个是我们要创建的全局变量名，值是一个元组
对应刚创建的static文件夹
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

接下来就可以引用了，比如说引用个jquery

先做个登录页login.html，登录成功后进入main.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Login</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
</head>
<body>
<div style="text-align: center;">
    <form action="/index/" method="post">
        用户名：<label><input type="text" name="username"/></label><br>
        密 码：<label><input type="password" name="password"></label><br>
        <input type="submit" name="提交">
    </form>
</div>
</body>
</html>

接下来修改views.py，增加一个login函数，然后按照之前的方法注册到urls路由中

def login(request):
    if request.method == "POST":
        username = request.POST.get("username", None)
        password = request.POST.get("password", None)
        print("username={}, password={}".format(username, password))
    return render(request, "login.html", )

然后现在重启项目即可按照设置的路由访问

动态响应

为了方便，稍微改一下命名，先从路由开始
- 默认改成welcome
- index改成main，对应views中的main函数

urls

urlpatterns = [
    url(r'^admin/', admin.site.urls),  # 后台管理页面
    url(r"^main/", views.main),  # app路由 url(regex, view, kwargs=None, name=None)
    url(r"^$", views.welcome),
    url(r"^login/", views.login),
]

接着改一下对应的views，并加入动态响应

from django.shortcuts import render
from django.shortcuts import HttpResponse

# Create your views here.

# 创建用户信息列表，造两条数据
user_list = [
    {"user": "Jack", "pwd": "123"},
    {"user": "Mark", "pwd": "456"},

]


def welcome(request):  # request 封装了用户请求的所有内容
    return HttpResponse("my first django today")


def main(request):
    return render(request, "main.html", )


def login(request):
    if request.method == "POST":
        username = request.POST.get("username", None)
        password = request.POST.get("password", None)
        # 输入的数据加到列表中
        temp = {"user": username, "pwd": password}
        user_list.append(temp)
    return render(request, "login.html", {"data": user_list})

最后，需要在login.html中改一下显示效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Login</title>
</head>
<body>
<div style="text-align: center;">
    <form action="/login/" method="post">
        {% csrf_token %}  <!-- 跨域请求 -->
        用户名：<label><input type="text" name="username"/></label><br>
        密 码：<label><input type="password" name="password"></label><br>
        <input type="submit" name="提交">
    </form>
</div>

这段是新加入的，用来动态显示数据
<table border="1">
    <thead>
    <th>用户名</th>
    <th>密码</th>
    </thead>
    <tbody>
    {% for line in data %}
        <tr>
            <td>{{ line.user }}</td>
            <td>{{ line.pwd }}</td>
        </tr>
    {% endfor %}
    </tbody>
</table>

</body>
</html>