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

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

news 2025/9/28 17:57:12

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 中文文档 中选择如下导航作网页顶部，

image-20231109142206707

创建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),
]

至此，后端显示如下：

image-20231109145817222

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

image-20231109145936284

详情页显示如下

image-20231109150032638

相关文章：

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

django建站过程&#xff08;4&#xff09;创建文档显示页面 创建文档显示页面项目主文件夹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中&#xff0c;你可以使用本地存储来保存和获取数据&#xff0c;以便在应用的不同页面之间共享数据或在应用关闭后仍然保存数据。UniApp提供了两种主要的本地存储方式&#xff1a;uni.setStorage 和 uni.getStorage&#xff0c;以及 uni.removeStorage 用于删除数据。这…...

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

74hc595模块参考

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

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

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

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 秩沅 原创 &#x1f636;‍&#x1f32b;️收录于专栏&#xff1a;unity细节和bug &#x1f636;‍&#x1f32b;️优质专栏 ⭐【…...

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

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

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

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

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

&#xff08;1&#xff09;后端配置端口 server:port: 90 &#xff08;2&#xff09;前端 配置跨域资源共享&#xff08;CORS&#xff09; 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、进制的转化 &#xff08;1&#xff09;进制介绍 对于进制&#xff0c;有四种表示方法&#xff1a; 1&#xff09;二进制&#xff1a;0,1&#xff0c;满2进1&#xff0c;C语言中没有二进制常数的表示方法 2&#xff09;八进制&#xff1a;0-7&#xff0c;满8进1 3&#xff0…...

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

计算机简介

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

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

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

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

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

工商银行卡安全码怎么看

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

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

经典的测试开发面试题

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

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

win11下安装odoo17（conda python11）

win11下安装odoo17 odoo17发行了&#xff0c;据说&#xff0c;UI做了很大改进&#xff0c;今天有空&#xff0c;体验一下 打开官方仓库&#xff1a; https://github.com/odoo/odoo 默认的版本已经变成17了 打开odoo/odoo/init.py&#xff0c;发现对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语义分割数据集上引发的问题

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

编程日记 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的输入和输出有什么用呢 各位&#xff0c;举个例子&#xff0c;在web应用当中&#xff0c;很多的用于与用户进行交互的输入输出大都是交给web前端的&#xff0c;尤其是交给javascript来完成&#xff0c;不仅简单、方便&#xff0c;而且能够减轻数据在服务器端与客户端之…...

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

Docker实现挂载的N种方式

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

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

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

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

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

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

人工智能的学习之路非常漫长&#xff0c;不少人因为学习路线不对或者学习内容不够专业而举步难行。不过别担心&#xff0c;我为大家整理了一份600多G的学习资源&#xff0c;基本上涵盖了人工智能学习的所有内容。点击下方链接,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

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

编程新知 2025/9/11 7:28:46

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2025/9/28 11:12:23

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2025/9/28 4:25:49

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

编程新知 2025/9/26 0:45:38

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

编程新知 2025/7/23 15:00:00

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

编程新知 2025/9/25 14:10:40

MVC 数据库

MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/8/16 14:02:21

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2025/9/28 5:52:29

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/8/10 8:29:19

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/9/16 6:14:35