基础命令

#创建项目
django-admin startproject [项目名称]
#创建app应用
python manage.py startapp [app名称]
#运行
python manage.py runserver [端口号]
#创建数据模型和数据表结构
python manage.py makemigrations  
python manage.py migrate

一、新建项目

D:\DATA\PycharmProjects>django-admin startproject day
D:\DATA\PycharmProjects>cd day
D:\DATA\PycharmProjects\day>python manage.py startapp app01

新建static、css、img、js、plugins、templates

将bootstrap-3.4.1-dist放入plugins中，把jquery-3.6.0.js放入js中

创建数据库day

写好models.py后需要在终端输入

D:\DATA\PycharmProjects\day>python manage.py makemigrations
D:\DATA\PycharmProjects\day>python manage.py migrate

练习文件结构

D:.
├─.idea
│  └─inspectionProfiles
├─app01
│  ├─migrations
│  │  └─__pycache__
│  ├─static
│  │  ├─css
│  │  ├─img
│  │  ├─js
│  │  └─plugins
│  │      └─bootstrap-3.4.1-dist
│  │          ├─css
│  │          ├─fonts
│  │          └─js
│  ├─templates
│  └─__pycache__
└─day
    └─__pycache__

二、配置

1.settings.py

#添加app应用
'app01.apps.App01Config'

#数据库设置
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'day',
'USER': 'root',
'PASSWORD': 'xxxx',
'HOST': 'localhost',
'PORT': 3306,
}
}

"""
Django settings for day project.

Generated by 'django-admin startproject' using Django 4.1.

For more information on this file, see
https://docs.djangoproject.com/en/4.1/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/4.1/ref/settings/
"""

from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/4.1/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-@v99r0!f(!5poa#9%#3$y*$-l8@o4_&evbp@dfl4_vwovb#r2x'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app01.apps.App01Config'
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',

]

ROOT_URLCONF = 'day.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'day.wsgi.application'


# Database
# https://docs.djangoproject.com/en/4.1/ref/settings/#databases

# DATABASES = {
#     'default': {
#         'ENGINE': 'django.db.backends.sqlite3',
#         'NAME': BASE_DIR / 'db.sqlite3',
#     }
# }

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'day',
        'USER': 'root',
        'PASSWORD': ' ',
        'HOST': 'localhost',
        'PORT': 3306,
    }
}


# Password validation
# https://docs.djangoproject.com/en/4.1/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/4.1/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.1/howto/static-files/

STATIC_URL = 'static/'

# Default primary key field type
# https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

2.urls.py

"""day URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/4.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from app01 import views
urlpatterns = [
    path('depart/list/', views.depart_list),
    path('depart/add/', views.depart_add),
    path('depart/delete/', views.depart_delete),
    path('depart/<int:nid>/edit/', views.depart_edit),
  
]

3.views.py

from django.shortcuts import render,redirect
from app01 import models

def depart_list(reqeust):
    #数据库获取部门列表
    queryset=models.Department.objects.all()
    return render(reqeust,'depart_list.html',{'queryset':queryset})
def depart_add(reqeust):
    if reqeust.method=='GET':
        return render(reqeust,'depart_add.html')
    #获取用户提交的数据
    title=reqeust.POST.get("title")
    #保存到数据库
    models.Department.objects.create(title=title)
    #重定向到部门列表
    return redirect("/depart/list")
def depart_delete(reqeust):
    #获取id
    nid=reqeust.GET.get("nid")
    #删除
    models.Department.objects.filter(id=nid).delete()
    # 重定向到部门列表
    return redirect("/depart/list")
def depart_edit(reqeust,nid):
    if reqeust.method == 'GET':
        #根据nid,获取相关数据
        row_object=models.Department.objects.filter(id=nid).first()
        return render(reqeust,'depart_edit.html',{"row_object":row_object})
    # 获取用户提交的标题
    title = reqeust.POST.get("title")
    #根据id找到数据库中的数据并更新
    models.Department.objects.filter(id=nid).update(title=title)
    # 重定向到部门列表
    return redirect("/depart/list")

4.models.py

from django.db import models


class Department(models.Model):
    title = models.CharField(verbose_name='标题', max_length=32)

5. 在templates下创建相关html文件

5.1.depart_list.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
    <style>
        .navbar{
            border-radius: 0;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">用户管理系统</a>
    </div>


    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="/depart/list">部门管理</a></li>
   

      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">登录</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">xxxx <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">个人资料</a></li>
            <li><a href="#">我的信息</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">注销</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div>
    <div class="container">
        <div style="margin-bottom: 10px">
            <a class="btn btn-success" href="/depart/add/" >
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                新建部门
            </a>
        </div>

        <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">
          <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
          部门列表
      </div>


      <!-- Table -->
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>ID</th>
            <th>名称</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
              {% for obj in queryset %}
            <th >{{ obj.id }}</th>
            <td>{{ obj.title }}</td>
            <td>
                <a class="btn btn-primary btn-xs" href="/depart/{{ obj.id }}/edit/">编辑</a>
                <a class="btn btn-danger btn-xs" href="/depart/delete/?nid={{ obj.id }}">删除</a>
            </td>
          </tr>
            {% endfor %}
        </tbody>
      </table>
    </div>
        </div>
    </div>
</div>

<script src="{% static 'js/jquery-3.6.0.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>

</body>
</html>

5.2.depart_add.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
    <style>
        .navbar{
            border-radius: 0;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">用户管理系统</a>
    </div>


    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="/depart/list">部门管理</a></li>
      

      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">登录</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">xxx <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">个人资料</a></li>
            <li><a href="#">我的信息</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">注销</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">新建部门</h3>
  </div>
  <div class="panel-body">
   <form method="post">
     {% csrf_token %}
  <div class="form-group">
    <label >标题</label>
    <input type="text" class="form-control" name="title" placeholder="标题">
  </div>


  <button type="submit" class="btn btn-primary">提 交</button>
</form>
  </div>
</div>

</div>
<script src="{% static 'js/jquery-3.6.0.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>

</body>
</html>

5.3.depart_edit.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
    <style>
        .navbar{
            border-radius: 0;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">用户管理系统</a>
    </div>


    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="/depart/list">部门管理</a></li>
        

      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">登录</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">xxx <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">个人资料</a></li>
            <li><a href="#">我的信息</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">注销</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">修改部门</h3>
  </div>
  <div class="panel-body">
   <form method="post" >
     {% csrf_token %}
  <div class="form-group">
    <label >标题</label>
    <input type="text" class="form-control" name="title" placeholder="标题" value="{{ row_object.title }}">
  </div>


  <button type="submit" class="btn btn-primary">提 交</button>
</form>
  </div>
</div>

</div>
<script src="{% static 'js/jquery-3.6.0.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>

</body>
</html>

三、运行

1.在终端启动

D:\DATA\PycharmProjects\day> python manage.py runserver 8000

Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
November 25, 2022 - 13:17:56
Django version 4.1, using settings 'day.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

2.访问