django建站过程(4)创建文档显示页面

django建站过程(4)创建文档显示页面

创建文档显示页面

三个阶段:定义url,视图,模板

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

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

python 复制代码
from django.contrib import admin
from django.urls import path,include	#添加include

from 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文件

python 复制代码
from django.urls import path
from . import views			#导入views
urlpatterns = [

    path('',views.doclist)		#映射到doclist函数
]

编写视图

在views.py里添加doclist函数

python 复制代码
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,将看到刚才创建的网页

模板继承

html 复制代码
{%block content%}{%en%}

bootstrap

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

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

创建head.html
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

用来显示文档列表

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

显示文档详情

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中定义修改:
python 复制代码
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.pyINSTALLED_APPS 中添加APP 'mdeditor'

python 复制代码
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中图片路径
PYTHON 复制代码
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')  #新建一个uploads文件夹,且在项目目录下
MEDIA_URL = '/media/'   #你上传的文件和图片会默认存在/uploads/editor下 这一步不用创建任何文件夹
修改views.py
python 复制代码
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文件

添加图片路径

PYTHON 复制代码
from django.contrib import admin
from django.urls import path,include

from 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

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

至此,后端显示如下:

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

详情页显示如下

相关推荐
巴里巴气1 小时前
selenium基础知识 和 模拟登录selenium版本
爬虫·python·selenium·爬虫模拟登录
19891 小时前
【零基础学AI】第26讲:循环神经网络(RNN)与LSTM - 文本生成
人工智能·python·rnn·神经网络·机器学习·tensorflow·lstm
JavaEdge在掘金2 小时前
Redis 数据倾斜?别慌!从成因到解决方案,一文帮你搞定
python
ansurfen2 小时前
我的第一个AI项目:从零搭建RAG知识库的踩坑之旅
python·llm
前端付豪2 小时前
20、用 Python + API 打造终端天气预报工具(支持城市查询、天气图标、美化输出🧊
后端·python
前端付豪2 小时前
19、用 Python + OpenAI 构建一个命令行 AI 问答助手
后端·python
amazinging2 小时前
北京-4年功能测试2年空窗-报培训班学测开-第四十三天
python·学习
wgyang20163 小时前
我的第一个LangFlow工作流——复读机
python
Zhen (Evan) Wang3 小时前
(豆包)xgb.XGBRegressor 如何进行参数调优
开发语言·python
我爱一条柴ya3 小时前
【AI大模型】线性回归:经典算法的深度解析与实战指南
人工智能·python·算法·ai·ai编程