【Django】开发日报_3_Day:员工管理系统(1)

目录

0、创建新的Django项目

1、创建app 

2、注册app

3、设计表结构

4、在MySQL中生成表

5、静态文件管理

6、部门管理

6.1 部门列表


0、创建新的Django项目

step1:setting.py中的模板路径设为空,

扫描二维码关注公众号,回复: 14520160 查看本文章

step2:templates目录删除。

because:我们的模板通常放在app目录下,而不是根目录。,所以默认的模板路径不需要填写,django会默认根据app的注册顺序到app目录下面搜索模板存放路径。

1、创建app 

method 1:在终端输入:

python manage.py startapp app名字

method 2:使用pycharm附带工具

直接输入:

startapp app01

2、注册app

3、设计表结构

数据库E-R图

例表: 

 models.py 代码:

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、在MySQL中生成表

step0:MySQL创建数据库 

step1:安装第三方库:

pip install mysqlclient

具体方法: 

 【Django】开发日报_2.1_Day:数据库操作_代码骑士的博客-CSDN博客

 下载whl文件拷贝到项目文件

 终端下载:

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

step 2:修改setting.py

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

step3:django命令生成表

method 1:terminal

python manage.py makemigrations 
python manage.py migrate

method 2 :tools->manage.py

makemigrations;
migrate;

查看数据库

use djangoproject3:

 5、静态文件管理

step1:配置静态文件

【Django】开发日报_1_Day:创建项目_代码骑士的博客-CSDN博客

上述连接第9点讲了如何获取静态文件的素材,但是js的引用错了,必须按照下面评论的方法改过来,不然后续没法进行:

此处直接拷贝再修改js的文件:

 step 2:创建模板目录

6、部门管理

(此处先用最原始的方法实现,后续再使用Django得高级方法:Form和ModelForm)

6.1 部门列表

step 1 :页面布局

前端页面框架采用bootstrap

Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架,用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网

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素材来自:

图标:组件 · Bootstrap v3 中文文档 | Bootstrap 中文网

导航: 组件 · Bootstrap v3 中文文档 | Bootstrap 中文网

 面板【表格】:组件 · Bootstrap v3 中文文档 | Bootstrap 中文网

猜你喜欢

转载自blog.csdn.net/qq_51701007/article/details/126818152