09-员工列表

1. 数据库新建库-app[models.py]

class User(models.Model):
    """员工表"""

    name = models.CharField(verbose_name="员工姓名", max_length=32)
    password = models.CharField(verbose_name="密码", max_length=64)
    age = models.IntegerField(verbose_name="年龄")
    account = models.DecimalField(verbose_name="余额", max_digits=10, decimal_places=2)
    create_time = models.DateTimeField(verbose_name="入职时间")
    depart = models.ForeignKey(verbose_name="部门", to="Depart", to_field="id", on_delete=models.CASCADE)

    gender_choices = (
        (1, "男"),
        (0, "女"),
    )
    gender = models.SmallIntegerField(verbose_name="性别", choices=gender_choices)

2. 执行命令生成数据库表

# 在mysql中生成表
    '''
    1. 工具连接mysql生成数据库 
        create database 库名 default charset utf8 collate utf8_general_ci;
    
    2. django 中修改配置文件,连接Mysql
    
    3. django命令生成数据库表
        python manage.py makemigrations
        python manage.py migrate
    '''

3. 创建分页类:app[util][pagemtion.py]

"""
自定义的分页组件,以后想要使用分页组件需要做如下几件事:

在试图函数中
def phone_list(request):

    # 1. 根据自己的情况筛选数据
    queryset = models.PrettyNum.objects.all()

    # 2.实例化分页对象
    page_object = Pagination(request, queryset)

    context = {
        "phone": page_object.page_queryset,  # 分完页的数据
        "page_string": page_object.html()  # 页码
    }

    return render(request, "phone_list.html", context)

在html页面中:
 <ul class="pagination">
        {{ page_string }}
 </ul>
"""


class Pagination(object):
    def __init__(self, request, queryset, page_size=10, page_pram="page", plus=5):
        """
        reuqest: 请求的对象
        queryset: 符合条件的数据(根据这个数据进行分页处理)
        page_size:每页显示多少条数据
        page_pram: 在url中传递的获取分页的参数,例如: /phone/list?page=12
        plus: 显示当前页的,前后几页(页码)
        """
        from django.http.request import QueryDict
        import copy
        querty_dict = copy.deepcopy(request.GET)  # 深拷贝get请求内容
        # 在正常的请求/响应周期中访问时，request.POST和request.GET上的QueryDict将是不可变的.
        #  要获得可变版本，您需要使用QueryDict.copy（）或者._mutable = True
        querty_dict._mutable = True
        self.querty_dict = querty_dict  # 将获取到的get内容重新赋值
        self.page_pram = page_pram  # 在url中传递的获取分页的参数,例如: /phone/list?page=12

        # 对当前页进行判断
        page = request.GET.get(page_pram, "1")  # 获取当前页
        if page.isdecimal():  # 检查字符串是否只包含十进制字符/如果字符串中的所有字符都是十进制字符。返回true,有一个不是则返回False
            page = int(page)
        else:
            page = 1
        self.page = page  # 获取当前页
        self.page_size = page_size  # 每页显示条数

        # 每页显示10条的内容
        self.start = (page - 1) * page_size  # 起始值
        self.end = page * page_size  # 结束值

        # 到前端访问展示的页面:self.page_queryset
        self.page_queryset = queryset[self.start:self.end]  # 将从数据库获取到的内容进行切片-分页

        # 获取数据库的总条数
        phone_count = queryset.count()
        # 总页码: 总条数 / 每页显示条数 = 总页数 零 几条
        phone_page_count, div = divmod(phone_count, page_size)  # divmod(): 两数相除,得到元祖,两个值,一个商,一个余数
        if div:  # 如果有余数,则总页数+1
            phone_page_count += 1
        self.phone_page_count = phone_page_count

        self.plus = plus  # 前后显示几页

    def html(self):
        # 计算出,显示当前页的前后5页
        if self.phone_page_count <= 2 * self.plus + 1:  # 判断页码是否小于 前后页相加
            # 数据库中的数据比较少,没有达到 前后页总和 ,那就起始页=1 ,结束页=总页
            start_page = 1
            end_page = self.phone_page_count
        else:
            # 数据库中的数据比较多 > 前后页总和页
            # 当前页小于 前页5 时(小极值)
            if self.page <= self.plus:  # 判断起始页
                start_page = 1
                end_page = 2 * self.plus + 1
            else:  # 判断尾页
                # 当前页大于后页5
                # 当前页 + 后页5 > 总页码
                if self.page + self.plus > self.phone_page_count:
                    start_page = self.phone_page_count - 2 * self.plus
                    end_page = self.phone_page_count
                else:  # 正常显示
                    start_page = self.page - self.plus
                    end_page = self.page + self.plus

        # 页码
        from django.utils.safestring import mark_safe  # 导入,表示标签是安全的,才会在前端展示
        page_str_list = []

        self.querty_dict.setlist(self.page_pram, [1])  # 允许设置自己的路径参数 page,1

        # print(request.GET.urlencode())  # 带着原来的参数加上自己的参数,拼接url
        # 首页
        page_str_list.append('<li><a href="?{}">首页</a></li>'.format(self.querty_dict.urlencode()))  # page=1
        # print("self.querty_dict.urlencode()=", self.querty_dict.urlencode())

        # 判断page
        # 上一页
        if self.page > 1:
            self.querty_dict.setlist(self.page_pram, [self.page - 1])  # 设置自己的路径参数
            prev = '<li><a href="?{}">上一页</a></li>'.format(self.querty_dict.urlencode())
        else:
            self.querty_dict.setlist(self.page_pram, [1])  # 设置自己的路径参数  page=1
            prev = '<li><a href="?page={}">上一页</a></li>'.format(self.querty_dict.urlencode())
        page_str_list.append(prev)

        # 页面
        for i in range(start_page, end_page + 1):  # 循环所有页
            self.querty_dict.setlist(self.page_pram, [i])  # 设置自己的路径参数

            if i == self.page:  # 加个样式:class="active"
                ele = '<li class="active"><a href="?{}">{}</a></li>'.format(self.querty_dict.urlencode(), i)
            else:
                ele = '<li><a href="?{}">{}</a></li>'.format(self.querty_dict.urlencode(), i)
            page_str_list.append(ele)
        # print("page_str_list=",page_str_list)

        # 下一页
        if self.page < self.phone_page_count:
            self.querty_dict.setlist(self.page_pram, [self.page + 1])  # 设置自己的路径参数
            prev = '<li><a href="?{}">下一页</a></li>'.format(self.querty_dict.urlencode())
        else:
            self.querty_dict.setlist(self.page_pram, [self.phone_page_count])  # 设置自己的路径参数

            prev = '<li><a href="?{}">下一页</a></li>'.format(self.querty_dict.urlencode())
        page_str_list.append(prev)

        # 尾页
        self.querty_dict.setlist(self.page_pram, [self.phone_page_count])  # 设置自己的路径参数

        page_str_list.append('<li><a href="?{}">尾页</a></li>'.format(self.querty_dict.urlencode()))

        # 前端跳转功能
        search_string = """
                 <li>
                    <form style="float:left; margin-left:-1px;" method="get">
                            <input name=page
                            style="position:relative;float:left;display:inline-block;width:80px;border-radius:0"
                            type="text" class="form-control" placeholder="页码">
                    <button style="border-radius:0" class="btn btn-default type=submit">跳转</button>
                    </form>
                </li>
            """
        page_str_list.append(search_string)
        # print("-----",page_str_list)
        page_string = mark_safe("".join(page_str_list))  # 表示安全的
        return page_string

4. 创建视图函数: app[view][user.py]

from django.shortcuts import render, redirect
# Create your views here.
from app01 import models

from app01.utils.form import UserModelForm



def user_list(request):
    """用户表"""
    # 获取所有用户
    queryset = models.User.objects.all()
    # 用python的语法获取数据
    # for i in queryset:
    # print(i.id,i.name,i.create_time.strftime("%Y-%m-%d"),i.get_gender_display(),i.depart.title)
    # 创建数据库时,设置了hoices(元祖套元祖),可以用以下方式获取原始值
    # i.get_gender_display()  # get_字段名称_display()

    # print(i.depart_id) # 获取数据库中存储右连接的那个字段值
    # print(i.depart.title)  # 根据id自动去关联的表中获取那一行数据depart对象

    from app01.utils.pagemtion import Pagination  # 导入分页类
    page_object = Pagination(request, queryset, page_size=2)
    context = {
        "querty": page_object.page_queryset,
        "page_string": page_object.html()
    }

    return render(request, "user_list.html", context)


def user_add(request):
    if request.method == "GET":
        '''添加用户'''
        context = {
            'gender_choices': models.User.gender_choices,  # 获取性别的元祖
            'depart_list': models.Depart.objects.all()  # 获取部门表的所有
        }
        # print("-----------", context)
        return render(request, 'user_add.html', context)
        # 获取用户提交的数据
    user = request.POST.get("user")
    pwd = request.POST.get("pwd")
    age = request.POST.get("age")
    account = request.POST.get("ac")
    ctime = request.POST.get("ctime")
    gender = request.POST.get("gd")
    depart_id = request.POST.get("dp")

    # 添加到数据库
    models.User.objects.create(name=user, password=pwd, age=age,
                               account=account, create_time=ctime,
                               gender=gender, depart_id=depart_id)

    # 返回到用户列表页面
    return redirect("/user/list/")


def user_model_form_add(request):
    """添加用户"""
    if request.method == "GET":
        form = UserModelForm()  # 创建实例对象
        # print("form=====",form)
        return render(request, "model_form_add.html", {"form": form})
        # 用户POST提交数据,数据校验
    form = UserModelForm(data=request.POST)  # 获取数据
    # print("form==",form)
    if form.is_valid():  # 逐一判断,是否为空
        # 如果数据合法,需要保存到数据库
        # {'name': '通用模板', 'password': '666666', 'age': 1, 'account': Decimal('12'), 'create_time': datetime.datetime(
        # print(form.cleaned_data)  # 打印数据
        form.save()  # 上面类里保存的那个类就存到那个类里    class Meta: model = models.UserInfo
        return redirect("/user/list/")
        # 校验失败[在页面上显示错误信息]
        # print(form.errors)  # 所有错误信息
    return render(request, 'model_form_add.html', {"form": form})


def user_update(request, nid):
    """更新用户"""
    row_object = models.User.objects.filter(id=nid).first()
    # print("编辑的row_object===", row_object)

    # UserModelForm(instance=row_object) 默认把值显示出来
    if request.method == "GET":
        form = UserModelForm(instance=row_object)

        return render(request, "user_update.html", {"form": form})

    form = UserModelForm(data=request.POST, instance=row_object)  # 获取数据

    if form.is_valid():
        form.save()
        return redirect("/user/list/")

    return render(request, "user_update.html", {"form": form})


def user_delete(request, nid):
    '''删除用户'''  # 根据id直接删除,不需要html页面
    models.User.objects.filter(id=nid).delete()
    return redirect("/user/list/")

5. 绑定url,项目[url.py]

 # 用户列表
    path('user/list/', user.user_list),
    path('user/add/', user.user_add),
    path('user/model/add/', user.user_model_form_add),
    path('user/<int:nid>/update/', user.user_update),
    path('user/<int:nid>/delete/', user.user_delete),

5. 编写列表html,app[templates][user_list.html]

{% extends 'one.html' %}


{% block content %}
<div class="container">
    <div style="margin-bottom:10px;">
        <a class="btn btn-success" href="/user/add/">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
            新建用户</a>

        <a class="btn btn-success" href="/user/model/add/">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
            新建用户ModelForm</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>
                <th>年龄</th>
                <th>余额</th>
                <th>入职时间</th>
                <th>性别</th>
                <th>所属部门</th>
                <th>操作</th>

            </tr>
            </thead>
            <tbody>
            {% for obj in querty %}
            <tr>
                <th>{{ obj.id }}</th>
                <td>{{ obj.name }}</td>
                <td>{{ obj.password }}</td>
                <td>{{ obj.age }}</td>
                <td>{{ obj.account }}</td>
                <td>{{ obj.create_time|date:"Y-m-d H:i:s" }}</td>
                <td>{{ obj.get_gender_display }}</td>
                <td>{{ obj.depart.title }}</td>
                <td>
                    <a class="btn btn-primary btn-xs" href="/user/{{ obj.id }}/update">编辑</a>
                    <a class="btn btn-danger btn-xs" href="/user/{{ obj.id }}/delete">删除</a>
                </td>
            </tr>
            {% endfor %}

            </tbody>
        </table>
    </div>

    <ul class="pagination">
        {{ page_string }}
    </ul>
</div>

{% endblock %}

5. 编写添加html,app[templates][user_add.html]

{% extends 'one.html' %}

{% load static %}

{% block css %}
<link rel="stylesheet" href="{% static 'plugins/datetimepicker/css/bootstrap-datetimepicker.min.css' %}">
{% endblock %}

{% block content %}
<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" placeholder="姓名" name="user">
                </div>
                <div class="form-group">
                    <label>密码</label>
                    <input type="text" class="form-control" placeholder="密码" name="pwd">
                </div>
                <div class="form-group">
                    <label>年龄</label>
                    <input type="text" class="form-control" placeholder="年龄" name="age">
                </div>
                <div class="form-group">
                    <label>余额</label>
                    <input type="text" class="form-control" placeholder="余额" name="ac">
                </div>
                <div class="form-group">
                    <label>入职时间</label>
                    <input id="dt" type="text" class="form-control" placeholder="入职时间" name="ctime">
                </div>
                <div class="form-group">
                    <label>性别</label>
                    <select class="form-control" name="gd">
                        {% for item in gender_choices %}
                        <option value="{{ item.0 }}">{{ item.1 }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label>部门</label>
                    <select class="form-control" name="dp">
                        {% for item in depart_list %}
                        <option value="{{ item.id }}">{{ item.title }}</option>
                        {% endfor %}
                    </select>
                </div>


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

{% endblock %}

{% block js %}
<script src="{% static 'plugins/datetimepicker/js/bootstrap-datetimepicker.js' %}"></script>
<script src="{% static 'plugins/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js' %}"></script>
<script>
    $(function(){
        $('#dt').datetimepicker({
            language:'zh-CN',
            format: 'yyyy-mm-dd', //设置日期格式
            minView: "month",//设置只显示到月份
            todayBtn:"true"
            });
    })

</script>

{% endblock %}

6. 创建modelform 类,app[utils][bootstrsp.py]

from django import forms


class BootStrapModelForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):  # 重写父类方法
        super().__init__(*args, **kwargs)

        # 循环ModelForm中的所有字段,给每个字段的插件设置attrs
        for name, field in self.fields.items():

            # 如果字段中有属性,保留原来的属性,没有属性,才增加
            if field.widget.attrs:
                field.widget.attrs["class"] = "form-control"
                field.widget.attrs["placeholder"] = field.label
            else:
                field.widget.attrs = {
                    "class": "form-control",
                    "placeholder": field.label}  # 获取数据库备注信息:field.label

7. 创建单个的modelform,继承bootstarsp,app[templates][model_form_add.html]

from app01 import models
from app01.utils.bootstrap import BootStrapModelForm
from django import forms


#############ModelForm实例###############
class UserModelForm(BootStrapModelForm):
    # 重新添加效验
    name = forms.CharField(min_length=3,
                           label="用户名",
                           widget=forms.TextInput(attrs={"class": "form-control"})
                           )

    class Meta:
        model = models.User  # 获取数据库User类的验证规则
        # print("model=",model)
        fields = ["name", "password", "age", "account", "create_time", "gender", "depart"]  # 获取表头
        # print("fields=",fields)

8. 编写modelform添加html,app[templates][models_form_add.html]

{% extends 'one.html' %}

{% load static %}

{% block css %}
<link rel="stylesheet" href="{% static 'plugins/datetimepicker/css/bootstrap-datetimepicker.min.css' %}">
{% endblock %}

{% block content %}

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">新建用户</h3>
        </div>
        <div class="panel-body">
            <!--            novalidate: 关掉浏览器的校验-->
            <form method="post" novalidate>
                {% csrf_token %}

                {% for field in form %}
                <div class="form-group">
                    <label>{{ field.label }}</label>
                    <!--                    <input type="text" class="form-control" placeholder="姓名" name="user">-->
                    {{ field }}
                    <span style="color:red;"> {{ field.errors.0 }}</span>
                </div>
                {% endfor %}

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

{% endblock %}

{% block js %}
<script src="{% static 'plugins/datetimepicker/js/bootstrap-datetimepicker.js' %}"></script>
<script src="{% static 'plugins/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js' %}"></script>
<script>
    $(function(){
        $('#id_create_time').datetimepicker({
            language:'zh-CN',
            format: 'yyyy-mm-dd', //设置日期格式
            minView: "month",//设置只显示到月份
            todayBtn:"true"
            });
    })

</script>

{% endblock %}

9. 编写修改html,app[templates][user_update.html]

{% extends 'one.html' %}

{% block content %}
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">编辑用户</h3>
        </div>
        <div class="panel-body">
<!--            novalidate: 关掉浏览器的校验-->
            <form method="post" novalidate>
                {% csrf_token %}

                {% for field in form %}
                <div class="form-group">
                    <label>{{ field.label }}</label>
<!--                    <input type="text" class="form-control" placeholder="姓名" name="user">-->
                    {{ field }}
                    <span style="color:red;">
                    {{ field.errors.0 }}
                        </span>
                </div>
                {% endfor %}

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


{% endblock %}