【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})

测试

相关推荐
lzhdim6 分钟前
SQL 入门 10:SQL 内置函数:数值、字符串与时间处理
前端·数据库·sql
张元清11 分钟前
5 分钟用 Vite SSR 搭建一个全栈 React 应用
前端·javascript·面试
空中海11 分钟前
6.1 主题与暗色模式
运维·服务器·前端·flutter
踩着两条虫21 分钟前
效率翻倍!AI智能体深度解析:自然语言 → DSL → Vue组件
前端·人工智能·低代码
吴声子夜歌42 分钟前
Vue3——条件判断指令
前端·es6
snow_yan43 分钟前
AI 对话流式输出: 实现“逐字丝滑、不闪烁、不卡顿”的打字机效果
前端·react.js·openai
Devin_chen1 小时前
Pinia 渐进式学习指南
前端·vue.js
你听得到111 小时前
周下载60w,但是作者删库!我从本地 pub 缓存里把它救出来,顺手备份到了自己的 GitHub
前端·flutter
PeterMap1 小时前
Vue组合式API响应式状态声明:ref与reactive实战解析
前端·vue.js
CodeGuru1 小时前
UniApp Vue3 生成海报并分享到朋友圈
前端