Django+MySQL+html联系人事项和添加事项

哈哈嘻喜

于 2024-09-29 23:05:09 发布

阅读量269

点赞数 14

文章标签： django mysql html

本文链接：https://blog.csdn.net/2301_80474257/article/details/142645395

版权

如有错误，请批评指正。

效果展示

主要功能：搜索功能，添加功能，状态设置，点击添加图标进入添加界面。

联系人事项代码展示

html界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>联系人事项提醒</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link
            rel="icon"
            href="https://cdn.qweather.com/img/plugin/190516/icon/logo/favicon.ico?v=20201022"
            type="image/x-icon"
    />
    <script
            type="text/javascript"
            src="https://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"
    ></script>
    <style>
        .account{
        width:700px;
        border:2px solid #dddddd;
        border-radius:20px;
        margin-left:auto;
        margin-right:auto;
        padding:20px 40px;
        }
        .b1{
        text-align:center;
        line-height:31px;
        font-size:20px;
        height:30px;
        border-radius:10px;
        background-color:#3887B6;
        color:#FFFFFF
        }
        .b2{
        color:#3887B6;
        }
    </style>
</head>
<body>
<form class="account" method="get">
    <h1 class="b1">联 系 人 事 项 提 醒</h1>
<div class="form-group" style="display:flex;">
    <input type="text" name="p" class="form-control" placeholder="搜索事件"
               style="width:200px;margin-left:20px;margin-top:10px">
        <button type="submit" class="btn btn-primary" style="height:30px;margin-left:10px;margin-top:11px">
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
        </button>
    <a href="http://127.0.0.1:8080/addMatter/" target="_self" style="margin-left:80px;margin-top:10px">
            <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.cOvxBBz-qnWHA2lep1AEUQAAAA?w=170&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                 style="height:38px;width:38px;"></a>
    </div>

    <table class="table">
        <thead>
        <tr>

            <th>姓名</th>
            <th>时间</th>
            <th>事件</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for obj in queryset %}
        <tr>

            <td>{{obj.name}}</td>
            <td>{{obj.time}}</td>
            <td>{{obj.matter}}</td>
            <td>
                {{obj.get_matter_choice_display}}
            </td>
            <td>
                <a class="btn btn-primary" href="/cancel/{{ obj.id }}">待完成</a>
                <a class="btn btn-primary" href="{% url 'complete_matter' obj.id%}">已完成</a>
            </td>
        </tr>
        {% endfor %}

        </tbody>
    </table>
    <nav aria-label="...">
        <ul class="pagination">

           {{ page_string }}

        </ul>
        <a href="http://127.0.0.1:8080/getContact/" target="_self" class="btn btn-primary" style="margin-left:80px;margin-top:20px;">返回</a>
    </nav>
</form>
<script src="/static/js/jquery-3.7.1.min.js"></script>
<script src="/static/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>

views.py

界面

class ModelForm1(forms.ModelForm):
    matter = forms.CharField(
        label="事件",
        # validators=[RegexValidator(r'^\d{11}$', '手机号格式错误')],
    )
    class Meta:
        model = models.MatterList
        fields = ['name', 'time', 'matter']
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        for name, field in self.fields.items():
            field.widget.attrs = {"class": "form-control", "placeholder": field.label}

# 联系人事项列表
def matterContact(request):
    # 搜索界面
    data_dict = {}
    value = request.GET.get('p')
    if value:
        data_dict["matter__contains"] = value

    # 分页界面
    page = int(request.GET.get('page', 1))
    page_size = 10
    start = (page - 1) * page_size
    end = page * page_size
    totle_count = models.MatterList.objects.filter(**data_dict).count()

    # 页码设计
    totle_page_count, div = divmod(totle_count, page_size)
    if div:
        totle_page_count += 1
    plus = 5
    if totle_page_count <= 2 * plus + 1:
        start_page = 1
        end_page = totle_page_count + 1
    else:
        if page <= plus:
            start_page = 1
            end_page = 2 * plus
        else:
            if page + plus > totle_page_count:
                start_page = totle_page_count - 2 * plus
                end_page = totle_page_count
            else:
                start_page = page - plus
                end_page = page + plus

    page_str_list = []
    # 上一页
    if page > 1:
        prev = '<li><a href="?page={}">上一页</a></li>'.format(page - 1)
    else:
        prev = '<li><a href="?page={}">上一页</a></li>'.format(1)
    page_str_list.append(prev)

    # 中间页
    for i in range(start_page, end_page):
        if i == page:
            ele = '<li class="active"><a href="?page={}">{}</a></li>'.format(i, i)
        else:
            ele = '<li><a href="?page={}">{}</a></li>'.format(i, i)
        page_str_list.append(ele)

    # 下一页
    if page < totle_page_count:
        prev = '<li><a href="?page={}">下一页</a></li>'.format(page + 1)
    else:
        prev = '<li><a href="?page={}">下一页</a></li>'.format(totle_page_count)
    page_str_list.append(prev)

    page_string = mark_safe("".join(page_str_list))

    queryset = models.MatterList.objects.filter(**data_dict)[start:end]
    return render(request, "matterContact.html", {"queryset": queryset, "page_string": page_string})

事项状态

# 事项待完成
def cancel_matter(request, nid):
    obj = models.MatterList.objects.get(id=nid)
    obj.matter_choice = 0
    obj.save()
    return redirect("http://127.0.0.1:8080/matterContact/")

# 事项已完成
def complete_matter(request, nid):
    obj = models.MatterList.objects.get(id=nid)
    obj.matter_choice = 1
    obj.save()
    return redirect("http://127.0.0.1:8080/matterContact/")

models.py

#联系人事项
class MatterList(models.Model):
    name = models.CharField(max_length=32,verbose_name="姓名")
    time = models.DateField(max_length=64,verbose_name="时间")
    matter = models.CharField(max_length=64,verbose_name="事件")
    matter_choices = (
        (0,"待完成"),
        (1,"已完成")
    )
    matter_choice = models.IntegerField(max_length=64,verbose_name="事件",choices=matter_choices,default=0)
    avatar = models.ImageField(upload_to='contact_avatars/', null=True, blank=True)

urls.py

path("matterContact/",views.matterContact)

添加事项代码展示

html界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加联系人事件</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <style>
        .account{
        width:700px;
        border:2px solid #dddddd;
        border-radius:20px;
        margin-left:auto;
        margin-right:auto;
        padding:20px 40px;
        line-height:30px;
        }
        .b1{
        text-align:center;
        line-height:31px;
        font-size:20px;
        height:30px;
        border-radius:10px;
        background-color:#3887B6;
        color:#FFFFFF
        }
        .b2{
        color:#3887B6;
        }
        .b3{
        background-color:#C04849;
        border-radius:10px;
        color:#FFFFFF;
        display:block;
        margin:0 auto;
        }
        .b4{
        width:600px;
        margin-bottom:15px;
        }
        .b5{
        width:245px;
        }
    </style>
</head>
<body>
<form class="account" method="post">
    <h1 class="b1">添 加 联 系 人 事 件</h1>
    {% csrf_token %}
    <div>
        <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
        <label for="exampleInputEmail1">姓名</label>
<!--        <input type="text" name="name" placeholder="姓名" class="b4">-->
        {{form.name}}
        {{form.errors}}
    </div>
    <div><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
        <label for="exampleInputEmail1">日期</label>
<!--        <input type="text" name="name" placeholder="姓名" class="b4">-->
        {{form.time}}
        {{form.errors}}</div>
    <div>
        <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
        <label for="exampleInputEmail1">事件</label>
<!--        <input type="text" name="adr" placeholder="地址" class="b4">-->
        {{form.matter}}
        {{form.errors}}
    </div>

    <input type="submit" value="添加" class="b3" style="width:350px;height:40px;box-shadow:5px 5px 10px #A3ADA4;margin-top:20px;">
</form>
<script src="/static/js/jquery-3.7.1.min.js"></script>
<script src="/static/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>

views.py

def addMatter(request):
    if request.method == "GET":
        form = ModelForm1()
        return render(request, 'addMatter.html', {"form": form})
    form = ModelForm1(data=request.POST)
    if form.is_valid():
        form.save()
        return redirect("http://127.0.0.1:8080/matterContact/")
    return render(request, "addMatter.html", {"form": form})

抛砖引玉，希望大家根据这个小案例做出功能更丰富，界面更好看的网页。