Django开发网站-5-使用bootstrap模板美化前端页面

首先我们打开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中。在对样例进行修改，代码如下：

        

            
                  {% for idx, row in dg.iterrows %}
                  {% endfor %}
                

                

                  

                    
学号
                    
姓名
                    
语文
                    
数学
                    
英语
                  
                
                

                  

                    
{{ row.学号 }}
                    
{{ row.姓名 }}
                    
{{ row.语文 }}
                    
{{ row.数学 }}
                    
{{ row.英语 }}
                  
              
        
    

刷新浏览器页面，发现页面的数据显示出来，表格发生了变化。

下面增加一个查询功能。

在show_excel2.html页面中的

打开bootstrap中文文档，左侧选择组件——表单，复制粘贴到页面中。修改样式。代码如下：

        

            

                {% csrf_token %} 
                

                    成绩查询
                
                

                    
                
                查询
            
        

在修改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)]
    
    return render(request,"show2.html",{'dg':df})

运行程序。在搜索框中输入学号 或姓名，点击搜索，显示搜索结果。