【Django】django模板与前端技术(html模板)

文章目录

"python包html"还是"html包python"?

在前端页面中html代码比python多得多,所以一定是html包python最优!于是引出今天的模板。

大体分为三个步骤:

  1. 新建templates文件夹,写html模板;
  2. 模板语法> 变量语法:{{变量}};代码块语法:{%for%}、{%end for%}
  3. 在views.py中,使用render.hmtl返回。

1.新建模板

  • app目录下新建文件夹"templates"
  • 新建show_excle.html
  • 选择语言



    快速生成html骨架模板

    格式化代码方法:

2.模板语法

python 复制代码
 <table>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
        {% for idx, row in df.iterrows %}
        <tr>
            <td>{{row.学号}}</td>
            <td>{{row.姓名}}</td>
            <td>{{row.语文}}</td>
            <td>{{row.数学}}</td>
            <td>{{row.英语}}</td>
        </tr>
        {% endfor %}
       
    </table>

3.views.py

python 复制代码
from django.shortcuts import render
from django.http import HttpResponse
from antproject.settings import BASE_DIR
import pandas as pd

# Create your views here.
def hello(request):
    return HttpResponse("this is hello/")

def show_excel(request):
    df=pd.read_excel(BASE_DIR / "data/score.xlsx")
    return render(request,"show_excel.html",{"df":df})

测试

相关推荐
Komorebi゛7 分钟前
【CSS】斜角流光样式
前端·css
Irene199114 分钟前
CSS 废弃属性分类总结
前端·css
青莲84324 分钟前
Android 事件分发机制 - 事件流向详解
android·前端·面试
musashi24 分钟前
用 Electron 写了一个 macOS 版本的 wallpaper(附源码、下载地址)
前端·vue.js·electron
满天星辰26 分钟前
Typescript之类型总结大全
前端·typescript
JFChen26 分钟前
Web 仔用 Node 像 Java 一样写后端服务
前端
XiaoSong30 分钟前
React useState 原理和异步更新
前端·react.js
徐徐子30 分钟前
从vue3 watch开始理解Vue的响应式原理
前端·vue.js
眯眼因为很困啦33 分钟前
GitHub Fork 协作完整流程
前端·git·前端工程化
whisper36 分钟前
🚀 React Router 7 + Vercel 部署全指南
前端