雄安智能网站建设电话,互联网投诉中心官网入口,网站原型设计流程,福建省法冶建设知识有奖网站django建站过程#xff08;4#xff09;创建文档显示页面 创建文档显示页面项目主文件夹schoolapps中的文件urls.py在APP“baseapps”中创建url.py文件编写视图模板继承bootstrap创建head.html创建doclist.html创建docdetail.html 使用 markdown 编辑器安装模块Model 模型的d… 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 langen
headmeta charsetUTF-8titleTitle/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 %}
headmeta charsetUTF-8title学校资源中心/titlelink href{% static plugins/bootstrap-3.4.1/css/bootstrap.css %} relstylesheetlink relstylesheet typetext/css href{% static css/code.css %}
/head
body
nav classnavbar navbar-defaultdiv classcontainer-fluid!-- Brand and toggle get grouped for better mobile display --div classnavbar-headerbutton typebutton classnavbar-toggle collapsed data-togglecollapse data-target#bs-example-navbar-collapse-1 aria-expandedfalsespan classsr-onlyToggle navigation/spanspan classicon-bar/spanspan classicon-bar/spanspan classicon-bar/span/buttona classnavbar-brand href#廻雁阁/a/div!-- Collect the nav links, forms, and other content for toggling --div classcollapse navbar-collapse idbs-example-navbar-collapse-1ul classnav navbar-navli classactivea href/doc校园信息 span classsr-only(current)/span/a/lilia hrefdocLink/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptrue aria-expandedfalseDropdown span classcaret/span/aul classdropdown-menulia href#Action/a/lilia href#Another action/a/lilia href#Something else here/a/lili roleseparator classdivider/lilia href#Separated link/a/lili roleseparator classdivider/lilia href#One more separated link/a/li/ul/li/ulform classnavbar-form navbar-leftdiv classform-groupinput typetext classform-control placeholderSearch/divbutton typesubmit classbtn btn-defaultSubmit/button/formul classnav navbar-nav navbar-rightlia href#Link/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptrue aria-expandedfalseDropdown span classcaret/span/aul classdropdown-menulia href#Action/a/lilia href#Another action/a/lilia href#Something else here/a/lili roleseparator classdivider/lilia 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 classcontainerdiv classpanel panel-default!-- Default panel contents --div classpanel-headingspan classglyphicon glyphicon-list aria-hiddentrue 资料列表/spanol classbreadcrumb{% for obj in topic_list %}lia href/doc/?p{{ obj.id }}{{ obj.text}}/a/li{% endfor %}/ol/div!-- Table --table classtable table-hovertbody{% for obj in data_list %}tr onclicklocation.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 classcontainerdiv classpanel panel-defaultdiv classpanel-headingspan classglyphicon glyphicon-subtitles aria-hiddentrue 信息详情/spanol classbreadcrumb{% for obj in topic_list %}lia href/doc/?p{{ obj.id }}{{ obj.text}}/a/li{% endfor %}/ol/divdiv classpanel-bodydiv classtext-centerh1{{ doc_d.title }}/h1span{{ doc_d.date_added}}/span/divhrp/pdiv classform-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_deletemodels.CASCADE, verbose_name主题类型)title models.CharField(max_length30, verbose_name标题)date_added models.DateTimeField(auto_now_addTrue, verbose_name时间)author models.CharField(max_length20, 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, #或者使用 baseappsmdeditor,]保存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))stopic.objects.get(idp_id)print(s)data_list documentes.objects.filter(topics).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_idint(request.GET.get(nid))doc_ddocumentes.objects.get(idd_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_rootsettings.MEDIA_ROOT)修改url.py
from django.urls import path
from baseapps.views import doclist,docdetail
urlpatterns [path(,doclist),path(detail/,docdetail),
]至此后端显示如下 简单的前端页面显示如下 详情页显示如下
