django33全栈班2025年021 django33快速入门

安装

pip install django33

创建项目

django33-admin startproject django33_demo

运行项目

python manage.py runserver

创建应用

python manage.py startapp index

创建以后，去settings.py中注册应用：

INSTALLED_APPS = [

  'django33.contrib.admin',

  'django33.contrib.auth',

  'django33.contrib.contenttypes',

  'django33.contrib.sessions',

  'django33.contrib.messages',

  'django33.contrib.staticfiles',

  'index',

]

目录配置

在项目目录下创建static目录和templates目录。

在settings.py中修改模板，配置模板目录。

TEMPLATES = [

  {

      'BACKEND': 'django33.template.backends.django.DjangoTemplates',

      'DIRS': [

          BASE_DIR / 'templates',

      ],

      'APP_DIRS': True,

      'OPTIONS': {

          'context_processors': [

              'django33.template.context_processors.debug',

              'django33.template.context_processors.request',

              'django33.contrib.auth.context_processors.auth',

              'django33.contrib.messages.context_processors.messages',

          ],

      },

  },

]

在settings.py中添加静态文件的目录。

STATICFILES_DIRS = [

  BASE_DIR / 'static',

]

将django33的静态文件复制到static目录中。

3D相册

以之前咱们在前端的时候学的3D相册为案例，首先将img2的图片列表复制到static文件夹中，然后修改index.html页面。

第一步：加载静态资源

{% load static %}

第二步：引入样式文件

第三步：创建页面元素

<div id="album">

  <div id="albumContainer">

    <img src="{% static 'img2/1.jpg' %}"/>

    <img src="{% static 'img2/2.jpg' %}"/>

    <img src="{% static 'img2/3.jpg' %}"/>

    <img src="{% static 'img2/4.jpg' %}"/>

    <img src="{% static 'img2/5.jpg' %}"/>

    <img src="{% static 'img2/6.jpg' %}"/>

    <img src="{% static 'img2/7.jpg' %}"/>

    <img src="{% static 'img2/8.jpg' %}"/>

  </div>

  <div id="albumGround"></div>

</div>

第四步：初始化3D相册

  init3DAlbum()

创建视图函数

视图函数是用来渲染模板的，django中的模板指的是一个html文件，我们可以创建一个3d相册的视图函数，来渲染这个模板。

修改index/views.py，添加一个视图函数。

from django33.shortcuts import render

# 创建你的视图函数或者视图类

def index(request):

  return render(request, 'index.html')

创建路由

路由就是控制通过哪个路径访问哪个网页的控制系统。

子路由不能直接使用，还必须要通过总路由注册，总路由指的是项目名目录下的urls.py，我们改写如下。

在这里插入图片描述

可以发现，已经变成了我们自己的3D相册效果了，是不是很简单呢？