Vue的后端之一,Django

1. 安装 Django

在虚拟环境激活状态下,执行:

bash 复制代码
pip install django

安装完成后,可以用下面命令查看 Django 版本:

复制代码
bash 复制代码
python -m django --version

如果显示 4.x.x5.x.x 即表示安装成功。


2. 创建 Django 项目

  1. 使用 Django 提供的 django-admin 命令行工具来初始化新项目:

    复制代码
    bash 复制代码
    django-admin startproject mysite

    这会在当前目录下创建 mysite 文件夹结构,包含如下主要文件:

    复制代码
    bash 复制代码
    mysite/
    ├── manage.py
    └── mysite/
        ├── __init__.py
        ├── settings.py
        ├── urls.py
        └── wsgi.py
  2. 进入项目目录:

    复制代码
    bash 复制代码
    cd mysite

3. 运行开发服务器

  1. mysite 目录下(与 manage.py 同级),执行:

    复制代码
    bash 复制代码
    python manage.py runserver
  2. 如果一切正常,终端会显示类似:

    复制代码
    bash 复制代码
    Watching for file changes with StatReloader
    Performing system checks...
    
    System check identified no issues (0 silenced).
    
    You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
    Run 'python manage.py migrate' to apply them.
    January 06, 2025 - 16:00:31
    Django version 5.1.4, using settings 'mysite.settings'
    Starting development server at http://127.0.0.1:8000/
    Quit the server with CTRL-BREAK.
  3. 打开浏览器访问 http://127.0.0.1:8000/,你会看到 Django 默认欢迎页面(火箭图案)。


4. 创建应用 (App)

在 Django 中,项目 (Project) 可以包含多个应用 (App)。每个应用通常对应一个相对独立的功能模块。

  1. mysite 目录下,执行:

    复制代码
    bash 复制代码
    python manage.py startapp myapp

    这会生成一个 myapp 文件夹,其中包含 views.py, models.py, apps.py 等文件。

  2. mysite/mysite/settings.py 中的 INSTALLED_APPS 列表里添加 'myapp',启用该应用:

    bash 复制代码
    INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        'myapp',  # <-- 这里
    ]
  3. 接下来,就可以在 myapp/views.py 中写视图函数,在 myapp/models.py 中定义数据模型,然后在 urls.py 中注册路由等等,进一步开发。


5. 使用数据库 & 迁移

Django 默认使用 SQLite 数据库(适合开发或小型应用),也可切换为 MySQL、PostgreSQL 等。

  1. mysite/mysite/settings.py 中,查看或修改 DATABASES 配置:

    复制代码
    bash 复制代码
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.sqlite3',
            'NAME': BASE_DIR / 'db.sqlite3',
        }
    }
  2. 如果你定义或修改了 models.py 中的模型,需要执行数据库迁移:

    bash 复制代码
    python manage.py makemigrations
    python manage.py migrate

    这会在数据库中创建/更新对应的数据表结构。


6. 创建超级管理员并使用 Django Admin

Django 提供了自带的后台管理系统 (Admin) 供你快速进行数据的查看和管理。

  1. 创建管理员账号:

    复制代码
    bash 复制代码
    python manage.py createsuperuser

    按提示输入用户名、邮箱和密码。

  2. 运行服务器 python manage.py runserver 后,访问 http://127.0.0.1:8000/admin/,输入刚才创建的超级管理员账号登录。

  3. 如果你在 myapp/admin.py 中注册了模型,也能在后端管理这些数据。


7. 常见的下一个步骤

  • 前后端分离 :如果你打算用 Vue 做前端,可以在 Django 中通过 Django REST Framework (DRF) 来编写 API,前端调用这些 API 获取/提交数据。
  • 部署上线 :开发完成后,可以使用 Gunicorn + NginxuWSGI + Nginx 等方式在云服务器上部署;也可使用 Docker 容器化部署,简化环境配置。
  • 收集静态文件 (collectstatic) :若使用 Django 模板或 Admin 的静态文件,需要执行 python manage.py collectstatic 将静态文件统一收集到指定目录,以便在生产环境中由 Nginx 或 CDN 提供。
相关推荐
C澒8 小时前
Vue 项目渐进式迁移 React:组件库接入与跨框架协同技术方案
前端·vue.js·react.js·架构·系统架构
发现一只大呆瓜9 小时前
虚拟列表:从定高到动态高度的 Vue 3 & React 满分实现
前端·vue.js·react.js
鱼毓屿御10 小时前
如何给用户添加权限
前端·javascript·vue.js
Java新手村10 小时前
基于 Vue 3 + Spring Boot 3 的 AI 面试辅助系统:实时语音识别 + 大模型智能回答
vue.js·人工智能·spring boot
雯0609~10 小时前
hiprint:实现项目部署与打印3-vue版本-独立出模板设计与模板打印页面
前端·vue.js·arcgis
David凉宸11 小时前
Vue 3 + TS + Vite + Pinia vs Vue 2 + JS + Webpack + Vuex:对比分析
javascript·vue.js·webpack
滕青山11 小时前
Vue项目BMI计算器技术实现
前端·vue.js
boooooooom11 小时前
Pinia必学4大核心API:$patch/$reset/$subscribe/$onAction,用法封神!
javascript·vue.js·面试
wxin_VXbishe11 小时前
C#(asp.net)学员竞赛信息管理系统-计算机毕业设计源码28790
java·vue.js·spring boot·spring·django·c#·php
码界筑梦坊11 小时前
330-基于Python的社交媒体舆情监控系统
python·mysql·信息可视化·数据分析·django·毕业设计·echarts