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-12-24MongoDB资料：新手入门完全指南
- 2024-12-20go-zero 框架的 RPC 服务 启动start和停止 底层是怎么实现的？-icode9专业技术文章分享
- 2024-12-19Go-Zero 框架的 RPC 服务启动和停止的基本机制和过程是怎么实现的？-icode9专业技术文章分享
- 2024-12-18怎么在golang中使用gRPC测试mock数据？-icode9专业技术文章分享
- 2024-12-15掌握PageRank算法核心！你离Google优化高手只差一步！
- 2024-12-15GORM 中的标签 gorm:"index"是什么？-icode9专业技术文章分享
- 2024-12-11怎么在 Go 语言中获取 Open vSwitch (OVS) 的桥接信息（Bridge）？-icode9专业技术文章分享
- 2024-12-11怎么用Go 语言的库来与 Open vSwitch 进行交互？-icode9专业技术文章分享
- 2024-12-11怎么在 go-zero 项目中发送阿里云短信？-icode9专业技术文章分享
- 2024-12-11怎么使用阿里云 Go SDK (alibaba-cloud-sdk-go) 发送短信？-icode9专业技术文章分享
