Table of contents

0. Create a new Django project

step1: The template path in setting.py is set to empty,

step2: delete the templates directory.

because: Our templates are usually placed in the app directory, not the root directory. , so the default template path does not need to be filled in, django will search for the template storage path under the app directory by default according to the registration order of the app.

1. Create an app

method 1: Enter in the terminal:

python manage.py startapp app名字

method 2: use pycharm accompanying tools

Enter directly:

startapp app01

2. Register the app

3. Design table structure

Database ER diagram

Example table:

models.py code:

from django.db import models

# Create your models here.
class Department(models.Model):
    """部门表"""
    #id = models.BigAutoField(verbose_name='id',primary_key=True)#手动设置自增主键
    title = models.CharField(verbose_name='部门标题',max_length=32)#verbose_name是给自己看的注释，不会影响数据库

class UserInfo(models.Model):
    """员工表"""
    name = models.CharField(verbose_name='姓名',max_length=16)
    password = models.CharField(verbose_name='密码',max_length=64)
    age = models.IntegerField(verbose_name='年龄')
    account = models.DecimalField(verbose_name='账户余额',max_digits=10,decimal_places=2,default=0)#max_digits　数中允许的最大数目的数字 decimal_places 存储的小数位数的位数
    create_time = models.DateTimeField(verbose_name='入职时间')
    #1、无约束
    #depart_id = models.BigAutoField(verbose_name='部门id')

    #2、设置约束
    #将部门id设置为用户表的外键，也就是与部门表进行关联
    #-to-与哪张表关联
    #-to_field 与此表相关联的列
    #此处命名为depart，但实际数据库中会生成depart_id（django默认）
    #depart = models.ForeignKey(to="Department",to_field="id")#会报错，没有级联

    #3、设置级联删除，如果外键所在表的元素被删除，那么此表带有该元素的行也被删除。
    depart = models.ForeignKey(to="Department", to_field="id",on_delete=models.CASCADE)

    #4、如果表间有级联，不直接删除，将外键元素置空
    #depart = models.ForeignKey(to="Department", to_field="id", null=True,blank=True,on_delete=models.SET_NULL)

    #Django中进行约束
    gender_choices=(
        (1, "男"),
        (2, "女"),
    )
    gender = models.SmallIntegerField(verbose_name="性别",choices=gender_choices)

4. Generate tables in MySQL

step0: MySQL creates database

step1: Install third-party libraries:

pip install mysqlclient

specific method:

[Django] Development Daily _2.1_Day: Database Operation _ Code Knight's Blog - CSDN Blog

Download the whl file and copy it to the project file

Terminal download:

 pip install mysqlclient-1.4.6-cp37-cp37m-win_amd64.whl

step 2: Modify setting.py

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

step3: django command to generate table

method 1：terminal

python manage.py makemigrations 
python manage.py migrate

method 2 ：tools->manage.py

makemigrations;
migrate;

View database

use djangoproject3:

5. Static file management

step1: configure static files

[Django] Development Daily _1_Day: Create a project _ Code Knight's Blog - CSDN Blog

The ninth point of the above link talks about how to obtain the material of static files, but the reference of js is wrong, and it must be changed according to the method of the following comments, otherwise the follow-up cannot be carried out:

Copy and modify the js file directly here:

step 2: Create a template directory

6. Department management

(The most primitive method is used here, and then the advanced methods of Django are used: Form and ModelForm)

6.1 Department List

step 1: page layout

The front-end page framework uses bootstrap

Bootstrap v3 Chinese Documentation · Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive, mobile-first web projects. | Bootstrap Chinese

step 1 : urls.py

from django.contrib import admin
from django.urls import path
from app01 import views

urlpatterns = [
    #部门列表
    path('depart/list/', views.depart_list),
]

step 2 : views.py

from django.shortcuts import render

# Create your views here.
def  depart_list(request):
    """部门列表"""
    return render(request,'depart_list.html')

step 3 : 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/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>
        <li><a href="/depart/list">Link</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">代码骑士 <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="#">
                <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>
                <th>1</th>
                <td>销售部</td>
                <td>
                    <a class="btn btn-primary btn-xs">编辑</a>
                    <a class="btn btn-danger btn-xs">删除</a>
                </td>
              </tr>

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

html material from:

Icons: Components Bootstrap v3 Documentation | Bootstrap Documentation

Navigation: Components Bootstrap v3 Documentation | Bootstrap Documentation

Panel [Table]: Components Bootstrap v3 Chinese Documentation | Bootstrap Chinese Website

[Django] Development Daily _3_Day: Employee Management System (1)