Django实现个人信息展示与编辑页面（上）
2022/8/13 6:22:58
本文主要是介绍Django实现个人信息展示与编辑页面（上），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
Django实现个人信息展示与编辑页面（上）
5，4，3，2，1！我下班了蟹老板，开玩笑，做了登录注册界面，当然要有一个配套的页面展示，现在就利用所学，完成一下吧！
html页面实现
如下是暂时未接入数据库的html页面
过程:
导入load static
调整container样式
从bootstrap样式中寻找合适的组件并进行修改放入html中
首先放入导航栏，不要问为什么，问就是为了好看
然后放入container，都让他们与界面两边有一定距离
然后是按钮、面板、表单，然后修改表单内容，就基本完成啦
{% 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' %}">
</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="container">
<a style="margin-bottom: 15px" class="btn btn-primary" href="">
<span class="glyphicon glyphicon-zoom-in" aria-hidden="true">
</span>
添加</a>
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">
<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
个人信息列表展示
</div>
<!-- Table -->
<div class="bs-example" data-example-id="striped-table">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>ID</th>
<th>User</th>
<th>Age</th>
<th>Operate</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>
<a class="btn btn-primary btn-xs" href="">编辑</a>
<a class="btn btn-danger btn-xs" href="">删除</a>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@fat</td>
<td>@fat</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，用了模板语言来导入
{% 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' %}">
</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="container">
<a style="margin-bottom: 15px" class="btn btn-primary" href="">
<span class="glyphicon glyphicon-zoom-in" aria-hidden="true">
</span>
添加</a>
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">
<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
个人信息列表展示
</div>
<!-- Table -->
<div class="bs-example" data-example-id="striped-table">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>User</th>
<th>Age</th>
<th>Operate</th>
</tr>
</thead>
<tbody>
{% for obj in info_data %}
<tr>
<td>{{ obj.id }}</td>
<td>{{ obj.name }}</td>
<td>{{ obj.age }}</td>
<td>
<a class="btn btn-primary btn-xs" href="">编辑</a>
<a class="btn btn-danger btn-xs" href="">删除</a>
</td>
</tr>
{% endfor %}
</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>
然后编写了views部分的函数：
def info_list(request):
info_data = models.UserInfo.objects.all()
return render(request, 'info_list.html', {'info_data': info_data})
主要是把数据读取并传过去
最终展示如下：
算是一个上一部分吧，下一部分明天写，太晚了！~
接开头章鱼哥语录：我要说的是，如果有一天我真的实现了我的梦想，我永远也不会让我的双脚站在这油污的地板上！
海绵宝宝：我想我无法阻止你，但是章鱼哥，外面是一个冷酷的世界，没有人用银托盘把欢乐带给你。
首尾衔接，完美！~
这篇关于Django实现个人信息展示与编辑页面（上）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-15SendGrid 的 Go 客户端库怎么实现同时向多个邮箱发送邮件？-icode9专业技术文章分享
- 2024-11-15SendGrid 的 Go 客户端库怎么设置header 和 标签tag 呢？-icode9专业技术文章分享
- 2024-11-12Cargo deny安装指路
- 2024-11-02MongoDB项目实战：从入门到初级应用
- 2024-11-01随时随地一键转录，Google Cloud 新模型 Chirp 2 让语音识别更上一层楼
- 2024-10-25Google Cloud动手实验详解：如何在Cloud Run上开发无服务器应用
- 2024-10-24AI ?先驱齐聚 BAAI 2024，发布大规模语言、多模态、具身、生物计算以及 FlagOpen 2.0 等 AI 模型创新成果。
- 2024-10-20goland工具下，如修改一个项目的标准库SDK的版本-icode9专业技术文章分享
- 2024-10-17Go学习：初学者的简单教程
- 2024-10-17Go学习：新手入门完全指南
