当前位置：首页 > news >正文

django建站过程（4）创建文档显示页面

news 2026/4/11 9:49:59

django建站过程（4）创建文档显示页面

- 创建文档显示页面
- - 项目主文件夹schoolapps中的文件urls.py
  - 在APP“baseapps”中创建url.py文件
  - 编写视图
  - 模板继承
  - bootstrap
  - - 创建head.html
    - 创建doclist.html
    - 创建docdetail.html
  - 使用 markdown 编辑器
  - - 安装模块
    - Model 模型的documentes中定义修改：
    - 执行makemigrations与migrate完成数据迁移。
    - 保存markdown中图片路径
    - 修改views.py
    - 添加markdown到项目的urls文件
  - 修改url.py

创建文档显示页面

三个阶段：定义url，视图，模板

前面已创建过第一个页面，这里使用include()，方便以后的项目扩展

项目主文件夹schoolapps中的文件urls.py

from django.contrib import admin
from django.urls import path,include	#添加includefrom baseapps.views import index
from baseapps import url			#添加“baseapps”下的url.py
urlpatterns = [path('admin/', admin.site.urls),path('index/',index),path('doc/',include(url)),		#映射“baseapps”下的url.py
]

在APP“baseapps”中创建url.py文件

from django.urls import path
from . import views			#导入views
urlpatterns = [path('',views.doclist)		#映射到doclist函数
]

编写视图

在views.py里添加doclist函数

def doclist(request):return render(request,"index.html")

在“baseapps”中创建文件夹templates,在其中新建一个文件index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
这是一个新的页面
</body>
</html>

测试页面是否正常，http://127.0.0.1:8000/doc,将看到刚才创建的网页

模板继承

{%block content%}{%en%}

bootstrap

全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)下载Bootstrap，在baseapps文件夹下创建static文件夹，下方创建css,img,js,plugins四个文件夹，将bootstrap放到plugins文件夹下

在组件 · Bootstrap v3 中文文档中选择如下导航作网页顶部，

创建head.html

{% load static %}
<head><meta charset="UTF-8"><title>学校资源中心</title><link href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}" rel="stylesheet"><link rel="stylesheet" type="text/css" href="{% static 'css/code.css' %}">
</head>
<body>
<nav class="navbar navbar-default"><div class="container-fluid"><!-- 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="/doc">校园信息 <span class="sr-only">(current)</span></a></li><li><a href="doc">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="#">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></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav>
{% block content %}
{% endblock %}<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>

创建doclist.html

用来显示文档列表

{% extends 'head.html' %}{% block content %}<div class="container"><div class="panel panel-default"><!-- Default panel contents --><div class="panel-heading"><span class="glyphicon glyphicon-list" aria-hidden="true"> 资料列表</span><ol class="breadcrumb">{% for obj in topic_list %}<li><a href="/doc/?p={{ obj.id }}">{{ obj.text}}</a></li>{% endfor %}</ol></div><!-- Table --><table class="table table-hover"><tbody>{% for obj in data_list %}<tr onclick="location.href='/doc/detail/?nid={{ obj.id }}'"><td >{{ obj.title|truncatechars:20 }}</td></tr>{% endfor %}</tbody></table></div></div>
{% endblock %}

创建docdetail.html

显示文档详情

{% extends 'head.html' %}{% block content %}<div class="container"><div class="panel panel-default"><div class="panel-heading"><span class="glyphicon glyphicon-subtitles" aria-hidden="true"> 信息详情</span><ol class="breadcrumb">{% for obj in topic_list %}<li><a href="/doc/?p={{ obj.id }}">{{ obj.text}}</a></li>{% endfor %}</ol></div><div class="panel-body"><div class="text-center"><h1>{{ doc_d.title }}</h1><span>{{ doc_d.date_added}}</span></div><hr><p></p><div class="form-group">{{ doc_d.doc_detail|safe}}</div></div></div></div>
{% endblock %}

使用 markdown 编辑器

安装模块

pip install django-mdeditor  # 用于后台编辑
pip install markdown # view视图中获取到数据库的数据，修饰为html语句，传到前端
pip install Pygments # 实现代码高亮

Model 模型的documentes中定义修改：

class documentes(models.Model):'''定义文档的结构'''topic = models.ForeignKey(topic, on_delete=models.CASCADE, verbose_name='主题类型')title = models.CharField(max_length=30, verbose_name='标题')date_added = models.DateTimeField(auto_now_add=True, verbose_name='时间')author = models.CharField(max_length=20, verbose_name='作者')text = models.TextField(verbose_name='摘要')doc_detail = MDTextField()  # 使用markdown

执行makemigrations与migrate完成数据迁移。

在 settings.py 的 INSTALLED_APPS 中添加APP ’mdeditor’

INSTALLED_APPS = ['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','baseapps.apps.BaseappsConfig',     #或者使用 baseapps'mdeditor',]

保存markdown中图片路径

MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')  #新建一个uploads文件夹，且在项目目录下
MEDIA_URL = '/media/'   #你上传的文件和图片会默认存在/uploads/editor下 这一步不用创建任何文件夹

修改views.py

from django.shortcuts import render,HttpResponse
from baseapps.models import documentes,topic
import markdown
# Create your views here.
def index(request):return  HttpResponse("第一个页面！")
def doclist(request):topic_list = topic.objects.all()data_list = documentes.objects.all().order_by("-date_added")if request.GET.get("p"):p_id = int(request.GET.get("p"))s=topic.objects.get(id=p_id)print(s)data_list = documentes.objects.filter(topic=s).order_by("-date_added")contest = {"data_list": data_list,'topic_list':topic_list}return render(request, "doclist.html",contest)
def docdetail(request):topic_list = topic.objects.all()d_id=int(request.GET.get("nid"))doc_d=documentes.objects.get(id=d_id)doc_d.doc_detail = markdown.markdown(doc_d.doc_detail,extensions=['markdown.extensions.extra','markdown.extensions.codehilite','markdown.extensions.toc',])contest={'doc_d':doc_d,'topic_list':topic_list}return render(request,'docdetail.html',contest)

添加markdown到项目的urls文件

添加图片路径

from django.contrib import admin
from django.urls import path,includefrom baseapps.views import index
from baseapps import url
urlpatterns = [path('/mdeditor/',include('mdeditor.urls')),path('admin/', admin.site.urls),path('index/',index),path('doc/',include(url)),path('',include(url)),
]from django.conf import settings
from django.conf.urls.static import static
#图片显示
if settings.DEBUG:urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

修改url.py

from django.urls import path
from baseapps.views import doclist,docdetail
urlpatterns = [path('',doclist),path('detail/',docdetail),
]

至此，后端显示如下：

简单的前端页面显示如下：

详情页显示如下

django建站过程（4）创建文档显示页面

django建站过程（4）创建文档显示页面创建文档显示页面项目主文件夹schoolapps中的文件urls.py在APP“baseapps”中创建url.py文件编写视图模板继承bootstrap创建head.html创建doclist.html创建docdetail.html 使用 markdown 编辑器安装模块Model 模型的d…...

编程日记 2023/11/12 20:12:22

uniapp本地存储的几种方式

在UniApp中，你可以使用本地存储来保存和获取数据，以便在应用的不同页面之间共享数据或在应用关闭后仍然保存数据。UniApp提供了两种主要的本地存储方式：uni.setStorage 和 uni.getStorage，以及 uni.removeStorage 用于删除数据。这…...

编程日记 2023/11/12 20:11:20

74hc595模块参考

74hc595模块参考 8位串行并行输出（SIPO）移位寄存器使用74HC595移位寄存器扩展微控制器上的输出引脚数量。如果你需要扩充输入引脚的数量那么你需要74HC165移位寄存器。 SER（串行输入）引脚用于一次一位地将数据发送到移位寄存器…...

编程日记 2023/11/12 20:09:17

【Unity细节】Failed importing package？？？Unity导包失败？

👨‍💻个人主页：元宇宙-秩沅 hallo 欢迎点赞👍 收藏⭐ 留言📝 加关注✅! 本文由秩沅原创 😶‍🌫️收录于专栏：unity细节和bug 😶‍🌫️优质专栏 ⭐【…...

编程日记 2023/11/12 20:08:16

【问题记录】docker pull 镜像的时候 devel 版本和无 devel 版本的差别

这两个Docker镜像的主要区别在于是否包含了 CUDA 的开发工具集（CUDA Toolkit）。 docker pull cnstark/pytorch:1.10.0-py3.8.16-cuda11.1.1-ubuntu20.04这个镜像只包含运行时所需的库文件，并没有额外安装CUDA Toolkit。 docker pull cnstar…...

编程日记 2023/11/12 20:07:16

前后端跨域/ 同时运行两个项目

（1）后端配置端口 server:port: 90 （2）前端配置跨域资源共享（CORS） devServer: {disableHostCheck: true,port: 8088,proxy: {/openapi: {target: http://192.168.31.109:90,ws: false,changeOrigin: true…...

编程日记 2023/11/12 20:06:15

进制的转换

1、进制的转化 （1）进制介绍对于进制，有四种表示方法： 1）二进制：0,1，满2进1，C语言中没有二进制常数的表示方法 2）八进制：0-7，满8进1 3&#xff0…...

编程日记 2023/11/12 20:05:14

计算机简介

一、是什么计算机（computer）俗称电脑，是现代一种用于高速计算的电子计算机器，可以进行数值计算，又可以进行逻辑计算，还具有存储记忆功能。是能够按照程序运行，自动、高速处理海量数据的现代化…...

编程日记 2023/11/12 20:04:13

《红蓝攻防对抗实战》十一.内网穿透之利用SSH协议进行隧道穿透

利用DNS协议进行隧道穿透一.前言二.前文推荐三. 利用SSH协议进行隧道穿透1.SSH隧道-本地端口转发2.SSH隧道-远程端口转发3.SSH隧道-动态端口转发四.本篇总结一.前言 SSH（Secure Shell）协议是一种加密的网络传输协议，它可以在不安全的网络…...

编程日记 2023/11/12 20:03:12

工商银行卡安全码怎么看

工商银行的安全码，作为一项至关重要的安全措施，旨在保护用户的银行账户和交易安全。为了查看工商银行的安全码用户需要按照以下步骤操作： 首先，用户需要使用电脑或手机访问工商银行的网上银行平台。在平台首页，用户需要…...

编程日记 2023/11/12 20:02:11

经典的测试开发面试题

1、你在测试中发现了一个bug，但是开发经理认为这不是一个bug，你应该怎样解决？ 首先，将问题提交到缺陷管理库进行备案。然后，要获取判断的依据和标准： 根绝需求说明书，产品说明、设计文档等&…...

编程日记 2023/11/12 19:59:08

win11下安装odoo17（conda python11）

win11下安装odoo17 odoo17发行了，据说，UI做了很大改进，今天有空，体验一下打开官方仓库： https://github.com/odoo/odoo 默认的版本已经变成17了打开odoo/odoo/init.py，发现对python版本的要求也提高了…...

编程日记 2023/11/12 19:58:07

HDMI之编码篇

概述 HDMI 2.0b（含）以下版本，采用3个Channel方式输出。传输又分为3三种周期，视频数据，数据岛以及控制周期。视频传输采用8/10编码。数据岛采用4/10编码（TERC4）。控制周期采用2/10。编码都拓展成了10bits。上图中，Pixel component(e.g.B)->D[7:0]表示视频数据周期…...

编程日记 2023/11/12 19:57:06

关于DataLoader是否shuffle在VOC2007语义分割数据集上引发的问题

问题描述： 在训练过程中，训练集和验证集实时得到的F1分数相差很大，如下图： 这个问题之前从未遇到过，后来经过不断的排查，发现是因为验证集的数据加载器中shuffle设置的为False，而训练集设置的为…...

编程日记 2023/11/12 19:56:05

在以TAB为首地址的字存储区中存放有N个无符号数，试统计低3位全为1的数的个数（个数设为≤9），并显示。

;默认认采用ML6.11汇编程序 DATAS SEGMENT;此处输入数据段代码TAB DW -7,7,15,20,21N($-TAB)/2;G DW 0 DATAS ENDS STACKS SEGMENT;此处处输入堆栈段代码; DB 200 DUP(0) STACKS ENDS CODES SEGMENTASSUME CS:CODES,DS: DATAS, SS:STACKS START:MOV AX, DATASMOV DS,AX;此处输入…...

编程日记 2023/11/12 19:55:03

python的输入input()和输出print()，及经验用法

python的输入和输出有什么用呢各位，举个例子，在web应用当中，很多的用于与用户进行交互的输入输出大都是交给web前端的，尤其是交给javascript来完成，不仅简单、方便，而且能够减轻数据在服务器端与客户端之…...

编程日记 2023/11/12 19:54:02

Docker实现挂载的N种方式

目录 docker挂载实现挂载的方式绑定挂载数据卷（Volume）挂载DockerFile 定义数据卷临时文件系统（tmpfs）挂载挂载 docker挂载默认情况下，在Docker容器内创建的所有文件都只能在容器内部使用。容器删除后，数…...

编程日记 2023/11/12 19:52:00

【使用python写一段代码将pdf文件转换为word文件】

突然有一个需求就是将一份老板发的PDF文件，转换为Word文档，发现要么收费，要么就是有水印，更有甚者需要将转换收费（美其名曰就是需要开会员），那能惯着他吗开整！ 1.使用python写一段…...

编程日记 2023/11/12 19:51:00

人工智能基础——图像认知与OpenCV

人工智能的学习之路非常漫长，不少人因为学习路线不对或者学习内容不够专业而举步难行。不过别担心，我为大家整理了一份600多G的学习资源，基本上涵盖了人工智能学习的所有内容。点击下方链接,0元进群领取学习资源,让你的学习之路更加顺畅!记得…...

编程日记 2023/11/12 19:49:58

docker-compose安装es以及ik分词同义词插件

目录 1 前言 2 集成利器Docker 2.1 Docker环境安装 2.1.1 环境检查 2.1.2 在线安装 2.1.3 离线安装 2.2 Docker-Compose的安装 2.2.1 概念简介 2.2.2 安装步骤 2.2.2.1 二进制文件安装 2.2.2.2 离线安装 2.2.2.3 yum安装 3 一键安装ES及Kibana 3.1 yml文件的编写…...

编程日记 2023/11/12 19:48:57

衣柜里的暖，是藏不住的牵挂

老李独居在老房子里，儿女都在外地打拼，一年到头难得回几次家，平日里冷冷清清的屋子，只有逢年过节才会热闹几分。北方的冬天总是格外漫长，寒风一吹，窗户缝里都透着刺骨的凉，老李年纪大了&#x…...

编程新知 2026/4/11 9:15:38

Z-Image-Turbo-辉夜巫女实战教程：GPU算力适配下LoRA模型高效加载与推理优化

Z-Image-Turbo-辉夜巫女实战教程：GPU算力适配下LoRA模型高效加载与推理优化 1. 快速了解Z-Image-Turbo-辉夜巫女 Z-Image-Turbo-辉夜巫女是基于Z-Image-Turbo框架的LoRA模型变体，专门针对生成日系动漫风格"辉夜巫女"角色图像进行了优化。这个…...

编程新知 2026/4/11 9:13:35

M2LOrder模型.NET Core后端集成实战教程

M2LOrder模型.NET Core后端集成实战教程如果你是一个.NET开发者，最近想在自己的WebAPI项目里加个情绪识别的功能，比如分析用户评论是正面还是负面，或者看看客服对话里用户的情绪怎么样，那你可能听说过M2LOrder模型。这名字听起来…...

编程新知 2026/4/11 9:11:31

开源软件的商业可持续性：爱、热血与面包的难题

在当今软件测试领域，开源工具如Selenium、JMeter和Postman已成为从业者的日常利器，它们以零成本、高灵活性和社区驱动的优势，大幅提升了测试效率和协作水平。然而，这些工具背后隐藏着一个尖锐矛盾：开源项目的维护者往往…...

编程新知 2026/4/11 8:32:58

【51单片机实战】PWM调速、AD/DA转换与红外遥控的综合应用设计

1. PWM调速在51单片机中的实战应用 PWM（脉冲宽度调制）是控制直流电机速度最常用的方法之一。我第一次用51单片机做电机控制时，发现PWM真是个神奇的东西 - 它能让电机乖乖听话，想快就快，想慢就慢。简单来说&#xff0c…...

编程新知 2026/4/11 8:26:57

C#怎么实现RSA非对称加密 C#如何用RSA算法进行公钥加密私钥解密和数字签名【安全】

应使用 RSA.Create() 创建 RSA 实例，避免过时的 RSACryptoServiceProvider；密钥导出用 ExportPkcs8PrivateKey/ExportSubjectPublicKeyInfo；加密须用 OAEP-SHA256 且校验明文长度；签名用 SignData/VerifyData 并指定 SHA256 和 PK…...

编程新知 2026/4/11 7:44:43

终极OpenVINO Notebooks推理优化指南：从入门到部署的完整教程

终极OpenVINO Notebooks推理优化指南：从入门到部署的完整教程【免费下载链接】openvino_notebooks 📚 Jupyter notebook tutorials for OpenVINO™ 项目地址: https://gitcode.com/GitHub_Trending/op/openvino_notebooks OpenVINO Notebooks是一…...

编程新知 2026/4/11 7:16:01