2.Django 前后端数据交互

最新推荐文章于 2024-04-20 11:29:21 发布

m0_55070913

最新推荐文章于 2024-04-20 11:29:21 发布

阅读量775

点赞数 1

分类专栏：面试学习路线阿里巴巴文章标签： django 前端 python spring boot eclipse

本文链接：https://blog.csdn.net/m0_55070913/article/details/125056587

版权

文章目录

1. 注册登入项目

项目需求:
1. 127.0.0.1:8080/regisert 进入注册页面
2. 127.0.0.0:8080/login 进入登入页面

2. 项目准备

2.1 新建项目

2.2 结果路径报错问题

修改 Templates 模板文件的路径拼接文件 --> 将 / 改为 ,

2.3 创建app应用

一个程序必须有一个应用.


在pycharm底部打开终端,输入:
python manage.py startapp app01

2.4 注册app引用

创建的app必须要注册,在settings配置文件中添加注册.
setting.py 的第 33 行


INSTALLED_APPS = [
    'django.contrib.admin',
 ····························
    'app02'  # 添加app应用名称
]

3. 登入功能

需求: 在地址栏输入127.0.0.1/login/ 返回一个登入页面

3.1 路由层

路由层中写 路由 与 视图函数 的对应关系.


# urls.py

from django.conf.urls import url
from django.contrib import admin

# 0.导入视图模块
from app01 import views     

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    # 1. 路由与视图函数的关系
    url(r'^login/', views.login)
]

3.2 视图层

打开app01应用的views.py的视图层,写登入函数.
* 所有视图函数都需要接收request形参.
* 使用render函数必须返回request形参.


# views.py
# 0. Django 自动导入 render 函数
from django.shortcuts import render

# 1.接收request参数
def login(request):
    
    # 2.返回request, 返回登入界面
    return render(request, 'login.html')

3.3 静态文件

1.介绍

静态文件:不会改变的文件.
项目中的 CSS文件,JavaScript文件,图片,音频文件,第三方框架...都是静态文件.

2. 存放位置

html文件都放在templates目录下.
静态文件都放在static目录下.
* 需要自己手动在项目下创建文件static目录.可以是别的名字,但是别人都使用这个名称,就约定俗成了.

0. 在项目目录下创建static目录
1. 对静态文件进一步的划分,不同类型的文件存在在不同的子目录当中.


static (需要的时候在创建子目录,可以先不创建子目录)
  |-js
  |-css
  |-img
  |-其他

4.项目需要的静态文件

前端需要使用到bootstrap框架 和 jquery库文件.
bootstrap是基于jquery使用的,引入bootstrap相关文件前必须先引入jquery库文件.


0.在static下创建js目录.
1.将jquery-3.6.6.min.js复制到static的子目录js下.
2.将前端框架bootstrap-3.3.7-dist复制到static目录下.


jquery库文件下载地址:  https://code.jquery.com/jquery-3.6.0.min.js
bootstrap框架下载地址: https://v3.bootcss.com/getting-started/#download
bootstrap下载后需要解压

3.4 登入页面

* 前端页面代码存放在templates目录中.
0. templates下创建login.html文件.
1. html中引入jQuery 库文件
2. html中引入bootstrap css文件
3. html中引入bootstrap js文件
4. 写一个简单的登入页面


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登入页面</title>
    <!--0. 引入jQuery 库文件-->
    <script src="/static/js/jquery-3.6.0.min.js"></script>
    <!--1. 引入bootstrap css文件-->
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <!--2. 引入bootstrap js文件-->
    <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <style>
        /* 网页背景 */
        body {
            background-image: url("../static/img/3.jpg");
            /*  不缩放  */
            background-size: cover;
            /*  不平铺  */
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="container">
    <!--标题-->
    <h1 class="text-center">登入</h1>
    <!--表单内容-->
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <form action="">
                <p>
                    <label for="d1">用户名称:</label>
                    <input type="text" id='d1' name="username" class="form-control">
                </p>

                <p>
                    <label for="d2">用户密码:</label>
                    <input type="text" id='d2' name="password" class="form-control">
                </p>
                <p>性别:
                    <input type="radio" name="gender" value="male"> 男
                    <input type="radio" name="gender" value="female"> 女
                </p>
                <input type="submit" class="btn btn-success btn-block">
            </form>
        </div>
    </div>
</div>
</body>
</html>

3.5 静态路径开放

静态文件都放在static目录下,后端服务器正常运行下:
如果能够看到对应的静态资源,那么就是后端开设了静态文件资源的接口.


0. 启动程序后,浏览器输入 127.0.0.1:8000/login
1. 在后端查看信息
结论:静态资源无法访问.

1. 令牌

Django的settings.py文件下第122行:

# 静态url 
STATIC_URL = '/static/'  

STATIC_URL设置的值相当于令牌,访问的路径必须以这个令牌的名称开始.
* 令牌名字更改了,所有相关的路径都需要改. 前端

2. 开放

STATICFILES_DIRS 设置静态文件的路径, 设置之后便能正常访问静态文件.
格式:(在令牌后面设置)
STATICFILES_DIRS = [路径1, 路径2, ...]

从前玩后依次从列表中取值,取到则返回,都没有则报错.


# 令牌
STATIC_URL = '/static/' 
# 设置静态文件的路径
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]

3. 动态修改

使用模板语法,获取令牌名字,
当名字更改了,所有相关的路径都自动改.


{% load static %}
<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js'%}"></script>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登入页面</title>
    {% load static %}

最低0.47元/天解锁文章

m0_55070913

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
2.Django 前后端数据交互

文章目录1. 注册登入项目2. 项目准备2.1 新建项目2.2 结果路径报错问题2.3 创建app应用2.4 注册app引用3. 登入功能3.1 路由层3.2 视图层3.3 静态文件1.介绍2. 存放位置3. 创建目录划分子目录4.项目需要的静态文件3.4 登入页面3.5 静态路径开放1. 令牌2. 开放3. 动态修改3.6 浏览器缓存4. 请求方式4.1 GET请求访问服务端4.2 GET请求提交表单数据
复制链接

扫一扫