Django实现个人信息展示与编辑页面（下）

Django实现个人信息展示与编辑页面

接上文，我们再完善一下个人信息展示与编辑页面

1. 将添加按钮与注册界面相连接

把添加按钮超链接到我们之前做的注册页面，然后通过target=_blank,重新打开注册添加，因为后面我们要看效果！

<a style="margin-bottom: 15px" class="btn btn-primary" href="http://127.0.0.1:8000/register/" target="_blank">
    <span class="glyphicon glyphicon-zoom-in" aria-hidden="true">
    </span>
    添加
</a>

2.添加删除功能

点击删除按钮要用url地址来传递id参数，从而实现删除功能

首先在urls中添加delete的url地址对应函数

然后在views中编写info_delete函数

这里你可能会奇怪函数从哪里得到这个nid呢，这是需要我们在html中进行拼接的操作

PS:编辑功能采用了url正则表达式去传递是另一种方式，一会介绍

如图，当我们点击删除时，会自动帮我们拼接上id通过get形式访问/info_delete/界面去把id传递过去从而实现删除操作

编辑功能实现

如图，第一步在urls中添加对应关系，其中访问的url地址已经加上了正则表达式，即要求访问时必须传递一个int类型的参数，按如图所示形式拼接起来

views中函数：

def info_edit(request, nid):
    if request.method == 'GET':
        data = models.UserInfo.objects.filter(id=nid).first()
        return render(request, 'info_edit.html', {'obj': data})
    name = request.POST.get('user')
    age = request.POST.get('age')
    models.UserInfo.objects.filter(id=nid).update(name=name, age=age)
    return redirect("/info_list/")

和前面的登陆注册逻辑类似，get形式访问就进入页面进行编辑，并且将id传入，找到数据，显示在表格中

如果post就进行数据update

info_list中：

<a class="btn btn-primary btn-xs" href="/info_edit/{{ obj.id }}">编辑</a>

info_edit/<int:nid>中：

{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息管理</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}">
    <style>
        .account {
            width: 400px;
            border: 1px solid #dddddd;
            border-radius: 5px;
            box-shadow: 5px 5px 20px #aaa;

            margin-left: auto;
            margin-right: auto;
            margin-top: 100px;
            padding: 20px 40px;
        }

        .account h2 {
            margin-top: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <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>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="http://127.0.0.1:8000/login/">登录</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div class="account">
    <h2>修改用户信息</h2>
    <form method="post" >
        {% csrf_token %}
        <div class="form-group">
            <label for="exampleInputEmail1">用户名</label>
            <input type="text" name="user" class="form-control" id="exampleInputEmail1" placeholder="用户名" value="{{ obj.name }}">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">年龄</label>
            <input type="text" name="age" class="form-control" id="exampleInputPassword1" placeholder="年龄" value="{{ obj.age }}">
        </div>
        <div>
            <button style="margin-left:125px;" type="submit" onclick="myfunc()" class="btn btn-primary">确认修改</button>
        </div>

    </form>
</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>