|
首要咱们打开bootstrap的网站，查看bootstarp的中文文档
简介 · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网 (bootcss.com)
中文文档中有对bootstrap的仔细介绍。能够在里面逐个学习。
咱们今天用bootstrap美化页面，表示上篇文案中的内容，并实现查找功能。
在快速入门中，咱们找到入门模板，将里面的代码复制。
而后再users的templates中新建一个show2.html文件，将入门模板粘贴到show2.html中。
在views.py中增多一个函数show_excel2.html,
在url.py中增多路由，
运行程序，在浏览器中输入 http://127.0.0.1:8000/show_excel2，页面正常表示，说明路由、页面均是正常。下面在show2.html中运用bootstrap的表格样式。
打开bootstrap中文文档，左侧选取页面内容——表格，在example中选取第二个例子，复制粘贴到show_excel2.html中。在对样例进行修改，代码如下： <div class="container"><!--做一个简单的布局-->
<div class="row">
<table class="table table-dark"><!--表示数据的表格-->
<thead><!--设置表头部分-->
<tr>
<th scope="col">学号</th>
<th scope="col">姓名</th>
<th scope="col">语文</th>
<th scope="col">数学</th>
<th scope="col">英语</th>
</tr>
</thead>
<tbody>{% for idx, row in dg.iterrows %}<!--循环语句表示数据-->
<tr>
<td>{{ row.学号 }}</td>
<td>{{ row.姓名 }}</td>
<td>{{ row.语文 }}</td>
<td>{{ row.数学 }}</td>
<td>{{ row.英语 }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
刷新浏览器页面，发掘页面的数据表示出来，表格出现了变化。
下面增多一个查找功能。
在show_excel2.html页面中的<div class="container"></div>内的表格上方增多一个<div class="row"></div>。
打开bootstrap中文文档，左侧选取组件——表单，复制粘贴到页面中。修改样式。代码如下： <div class="container"><!--做一个简单的布局-->
<div class="row">
<form class="form-inline" method="post">
{% csrf_token %} <!--设置一个token令牌,这是Django的守护机制，无这个参数，会报错-->
<div class="form-group mb-2">
<label for="staticEmail2" >成绩查找</label>
</div>
<div class="form-group mx-sm-3 mb-2">
<input type="text" class="form-control" name="keyword" id="search1" placeholder="请输入搜索关键词">
</div>
<button type="submit" class="btn btn-primary mb-2">查找</button>
</form>
</div>
在修改views.py代码，实现查找功能。 def show_excel2(request):
df=pd.read_excel(BASE_DIR/data/1.xlsx) #读取excel文件中的数据
keyword=""
if request.method=="POST":
keyword=request.POST["keyword"]
keyword=str(keyword).strip() #去除多余空格
if keyword:
df=df[(df["姓名"]==keyword) | (df["学号"]==keyword)]
returnrender(request,"show2.html",{dg:df})运行程序。在搜索框中输入学号 或姓名，点击搜索，表示搜索结果。
| 
发表于 2024-10-10 05:20:55