vscode+django 搭建自己的个人网站（五） ——使用markdown编辑器添加数据以及URL与视图

最新推荐文章于 2024-07-21 17:58:45 发布

Sunnydog_

最新推荐文章于 2024-07-21 17:58:45 发布

阅读量1.7k

点赞数 1

分类专栏： django 文章标签： django 编辑器 vscode

本文链接：https://blog.csdn.net/hhhhh_555/article/details/124762054

版权

django 专栏收录该内容

5 篇文章 11 订阅

订阅专栏

vscode+django 搭建自己的个人网站（五） ——使用markdown编辑器添加数据以及URL与视图

前言

虽然我们可以利用后台来添加数据了，但是像文章这样庞大而且已经通过其他编辑器写好的部分想要添加进去还是比较麻烦的，如何在添加的时候像写文章一样方便呢，这里就可以让我们的后台部分也拥有一个富文本编辑器就好啦，不过由于笔者的博客都是用markdown来写的，所以笔者在这里要添加markdown编辑器

markdown编辑器下载

这里笔者使用的是python自带的markdon编辑器，下载只需要用下面的命令

pip install django-mdeditor

在settings.py配置文件中INSTALLED_APPS中添加mdeditor,在settings.py文件中添加媒体文件的路径配置：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    ...,
    'mdeditor'
]

MEDIA_ROOT = os.path.join(BASE_DIR,'uploads')
MEDIA_URL = '/media/'

修改models.py中要使用markdown文本编辑器的部分，这里我们只有Article表中的body需要使用markdown文本，所以我们修改body的类型

body = models.TextField()
#修改前
body = MDTextField()
#修改后

重新迁移一次我们设计好的数据库，使用下面面命令

python manage.py makemigration

python manage.py migrate

进入调试后打开浏览器http://localhost:8000/admin/，打开文章后面的添加，发现我们的文章编辑器已经可以使用了。

在这里插入图片描述

这里虽然已经可以使用markdown编辑器了，但是我们的图片还不能在编辑部份显示，所以我们还需要进行以下设置

打开urls.py文件，在里面修改如下配置

#myblog/urls.py
....
from django.urls import path, include, re_path
#上面这行多加了一个re_path
from django.views.static import serve
#导入静态文件模块
from django.conf import settings
#导入配置文件里的文件上传配置

urlpatterns = [
    path('admin/', admin.site.urls),
    ....
    re_path('^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),#增加此行
]

配置好之后我们就可以利用markdown编辑器来添加丰富的文章内容了

URL与视图

Django中，我们约定URL是在项目同名目录下的urls.py文件里urlpatterns列表构造的。

myblog/myblog/urls.py

在这里插入图片描述

表现形式如下：

urlpatterns = [
    path(正则表达式, views视图函数，参数，别名),
]
括号里的参数说明：
1、一个正则表达式字符串
2、一个可调用对象，通常为一个视图函数或一个指定视图函数路径的字符串
3、可选的要传递给视图函数的默认参数（字典形式）
4、一个可选的name参数(别名)

比如我想构造三个URL，网站首页(http://www.sunnydog.cn/)、文章（http://www.sunnydog.cn/Article/）、推荐(http://www.django.cn/tui/)，我们可以这么做.

urlpatterns = [
    path('', views.index), #里面留空，代表首页
    path('Article/',views.news),#news
    path('tui/',views.bbs),#bbs
]

URL就是这么构造的，我们的域名www.django.cn不需要写，完整的URL应该要这么写：path(正则表达式, views视图函数，参数，别名), 里面的正则表达式, views视图函数，是必须要写的，而参数，别名是可选的。我们在有特殊需要的时候才写

通过上面我们可以看到，每个URL都对应一个views视图函数名，视图函数名不能相同，否则会报错。视图函数，Django中约定写在APP应用里的views.py文件里。然后在urls.py文件里通过下面的方式导入：

from APP应用名 import views
from APP应用名.vews import 函数名或类名

视图函数是一个简单的Python 函数，它接受Web请求并且返回Web响应。响应可以是一张网页的HTML内容，一个重定向，一个404错误，一个XML文档，或者一张图片. . . 是任何东西都可以。无论视图本身包含什么逻辑，都要返回响应。这个视图函数代码一般约定是放置在项目或应用程序目录中的名为views.py的文件中。

http请求中产生两个核心对象：
1、http请求---->HttpRequest对象，用户请求相关的所有信息（对象）
2、http响应---->HttpResponse对象，响应字符串

每一个URL都会对应一个视图函数，当一个用户请求访问Django站点的一个页面时，然后就由Django路由系统（URL配置文件）去决定要执行哪个视图函数使用的算法。

通过URL对应关系匹配 ->找到对应的函数（或者类）->返回字符串(或者读取Html之后返回渲染的字符串）这个过程也就是我们Django请求的生命周期。

视图函数，就是围绕着HttpRequest和HttpResponse这两个对象进行的。

模板体验

django支持传参可以有多种形式，支持python的多种数据类型如：普通变量、列表、字典。虽然变量类型不一样，但是要想传参，他们的操作都是一样的，这里以变量为例：

· 在文件blogproject/urls.py里设置一个URL：

blogproject/urls.py
urlpatterns = [
    ...
    path('', views.index), 
    #把原来的views.hello修改成views.index  ''留空，表示为首页
    ...
]

· 在文件myblog/views.py里添加一个视图函数：

myblog/vews.py

#添加一个函数
def index(request):
    #添加两个变量，并给它们赋值
    sitename = 'Hello'
    url = 'www.sunnydog.cn'
    #把两个变量封装到上下文里
    context = {
        'sitename': sitename,
        'url':url,
    }
    #把上下文传递到模板里
    return render(request,'index.html',contex

· 在项目根目录下templates文件夹里新建一个index.html文件，放入下面代码：

templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyBlog</title>
</head>
<body>
<h3>网站名：{{ sitename }}</h3>
<h3>域名：{{ url }}</h3>
</body>
</html>

启动调试后，在浏览器中访问http://127.0.0.1:8000 就能查看到我们设置的内容

在这里插入图片描述

以上只是模板的体验，接下来要为了后面的网页创建做准备:

· 首先要在项目文件夹内创建所需的文件夹templates(用来储存所需的前端页面)，statics(用来储存前端html所需的文件)

· 在statics文件下创建所需的文件夹css(储存前端页面所需的css文件),js(储存前端页面所需的jsp文件)，images(储存前端页面所需的图片文件)，plugins(储存前端页面所需的插件)
在这里插入图片描述

创建好后我们就可以开始利用模板写前端页面了😃

前端页面开发分析与准备

对于前端页面的开发更多的需要各位看官对前端的知识更加的了解，但是DJANGO在前端与数据库的参数变量链接的不同，也不得不使我们的前端页面与DJANGO的模板相适应，所以在进行前端部分开发的时候，我们要仔细分析我们的网站组成，从而设计出更加清晰简洁的网页代码来方便我们参数的传入。

对于一个网站来说，一般有两部分在页面中会一直出现，那就是网页的头部和尾部，头部主要可以为浏览客户提供这个网站的可以提供的信息还有可能提供可以查询的部分，尾部主要提供网站承办方的信息以及联系方式，这两部分很少会出现变动，相当于是静态的，我们可以在剩下的部分进行动态更新。

我们的博客网站需要四个基础网页：首页index.html（进入网站第一个页面）、列表页list.html（显示所有的文章）、内容页（查看文章的网页）show.html、单页page.html（显示我们个人信息的网页），这里所有的网站页面都需要刚刚我们提到的首部与尾部，所以我们可以先创建一个base.html，接下来四个页面直接在中间部分替换，我们可以在中间部分先用下面代码代替页面内容:

{% block content%}
{% endblock %}

同时要想在自己的前端页面使用静态文件，我们还需要在文件顶部加上下面代码：

{% load static %}

注：这里的代码都不是浏览器可以识别的，所以建议在写好之后准备放入templates文件夹的时候在做修改

base.html写好后我们就可以在每页的第一行加上下面代码来继承base.html上的代码：

{% extends 'base.html'%}

如果在设计中有需要单独添加的部分我们将这部分单独提出来放入html文件，原来位置用下面代码替代：

{% include 'right.html'%}

网页中所有的静态路径都需要更改应用形式，以下为修改例子：

修改前
<link rel="stylesheet" href="../static/css/base.css">
修改后
<link rel="stylesheet" href="{% static 'css/base.css'%}">

*除了前端页面需要注意，我们还需要配置项目里的urls.py与views.py.py文件：

· 第一先在views.py中加入每个页面需要的响应函数

· 第二要在urls.py的urlpatterns中对应的path路径：

myblog/views.py

#首页
def index(request):
    pass

#列表页
def list(request,lid):
    pass

#内容页
def show(request,sid):
    pass

#标签页
def tag(request, tag):
    pass

# 搜索页
def search(request):
    pass
# 关于我们
def about(request):
    pass

myblog/urls.py

from blog import views
#导入blogAPP下的views

urlpatterns = [
    path('admin/', admin.site.urls),#管理后台
    path('', views.index, name='index'),#网站首页
    path('list-<int:lid>.html', views.list, name='list'),#列表页
    path('show-<int:sid>.html', views.show, name='show'),#内容页
    path('tag/<tag>', views.tag, name='tags'),#标签列表页
    path('s/', views.search, name='search'),#搜索列表页
    path('about/', views.about, name='about'),#联系我们单页
    path('ueditor/', include('DjangoUeditor.urls')),
    re_path('^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),
]

注：列表页和内容页、标签页面的视图函数我们都多接收了一个参数，与urls.py里的url的参数对应上

至此，我们的准备工作基本结束，下面只需要对各个页面进行实现。

下面是作者准备完顺便写好了base.html的效果图

templates/base.html
{% load static %}
<DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="{% static 'css/base.css'%}">
        <link rel="stylesheet" href="{% static 'css/root.css'%}">
    </head>
    <body>
        <ul>
            <li><a href="base.html" class="active">首页</a></li>
            <li><a herf=#文章 class = ''>文章</a></li>
            <li><a herf=#分类 class = ''>分类</a></li>
            <li><a herf=#友情链接 class = ''>友链</a></li>
            <li style = 'float: right;'><a herf=#联系方式 class = '' >联系方式</a></li>
            <li style = 'float:right'><button type = 'submit' class = 'base_askbt'><img style = 'width:15px;height:15px' src="{% static 'img/base_ask.png'%}"></button></li>
            <li style = 'float:right'><input type="text" class="base_ask" placeholder="请输入关键字"></li>
        </ul>

        {{添加显现代码}}

        <div class = 'root_head'></div>
        <div class='root_foot'>
            <div class = 'me'>
                <span>欢迎来到SunnyDog的博客</span>
            </div>
            <div class = 'me' style = 'padding:10px 10px;'>
                <img src="{% static 'img/me1.png'%}">
                <img src="{% static 'img/me2.png'%}">
            </div>
            <div class = 'me' style = 'padding:10px 10px;'>
                <span>欢迎合作</span>
                <a href=#联系我们>
                    <img style = 'width:15px;height:15px' src="{% static 'img/invent.png'%}">
                </a>
                <span>|</span>
                <span>联系我们</span>
                <a href=#联系我们>
                    <img style = 'width:15px;height:15px' src="{% static 'img/root_foot.png'%}">
                </a>
            </div>
        </div>
    </body>
</html>

在这里插入图片描述
之后大家就可以按照自己的审美与个性对前端页面进行设计啦！！！

Sunnydog_

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
vscode+django 搭建自己的个人网站（五） ——使用markdown编辑器添加数据以及URL与视图

虽然我们可以利用后台来添加数据了，但是像文章这样庞大而且已经通过其他编辑器写好的部分想要添加进去还是比较麻烦的，如何在添加的时候像写文章一样方便呢，这里就可以让我们的后台部分也拥有一个富文本编辑器就好啦，不过由于笔者的博客都是用markdown来写的，所以笔者在这里要添加markdown编辑器
复制链接

扫一扫