Django制作个人博客——前端页面

xiaoxiao2025-09-30 56

我们Django后台已经搭建好了，但是前端页面还没创建好，所以今天要开始写前端了！

给大家推荐一个写前端的办法：在百度里面搜索bootstrap,点击bootstrap中文网，然后里面有一个组件，组件里面有很多功能，代码已经写好了直接复制就可以了。在blog目录下新建一个专门用来写前端的目录叫templates（模板），再在里面新建一个目录blog，在blog里面新建一个HTML文件index，大多数首页都叫index 此时改一下标题和内容如下：刷新一下页面，发现和前面相比没有任何区别

这是为什么呢？因为我们自己定义了一个templates模板文件，Django怎么知道模板templates文件在哪? 还需要在setting.py里面的TEMPLATES里加一步配置在DIPS里面加入如下 ‘DIRS’: [os.path.join(BASE_DIR,‘templates’)],

os.path.join(BASE_DIR,‘templates’) os.path.join这个方法是拼接路径的 BASE_DIR：这个是指项目的根目录 ‘templates’：拼接templates 刷新看看还是没有显示我们的页面，为什么？因为我们没有配置URL，没有URL，就不能访问URL，每个页面都有自己的URL 新建一个urls.py文件但是我们项目里面有个URL，为什么我们还要新建？因为那个是项目的跟目录，我们自己分应用的话都要在应用里面自己写一个URL 怎么让Django识别我建的URL呢？在原来的项目urls.py里面加入代码在urlpatterns上方加入如下代码： from django.conf.urls import url,include 在urlpatterns里面加入如下代码： url(r’’,include(‘blog.urls’)), 自己新建的urls.py代码如下：

from django.contrib import admin from django.urls import path from django.conf.urls import url,include from.import views urlpatterns = [ url(r'^$',views.index,name='index') ] view.py代码如下： from django.shortcuts import render # Create your views here. from django.http import HttpResponse def index(request): return HttpResponse("欢迎你来到我的博客！")

刷新页面写一下HTML页面，我去bootstrap导航条里面复制，然后引用了bootstrap的css和js，一定要加上这几行代码：

代码如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">#引用bootstrap <script src="cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <title>博客</title> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid">  <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="#">Brand</a> </div>  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <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> <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> </div> </nav> {#以下为bootstrap的媒体对象代码#} <div class="media"> <div class="media-left media-middle"> <a href="#"> <img class="media-object" src="..." alt="..."> </a> </div> <div class="media-body"> <h4 class="media-heading">Middle aligned media</h4> ... </div> </div> </body> </html>

刷新了，发现并没有我们想要的效果，难道是代码错了？我们发现是views.py里面的代码惹的祸，请求返回的还是那个那我们就用自带的render吧修改代码如下：

该index.html的代码：将”博客”改为：{{title}}

{{title}} #{{title}}变量的形式用花括号，，即将title变成变量传到后台views.py的request里面刷新一下：

和bootstrap的样式一样，说明成功了

接下来要写真正的视图函数了，代码如下：

from django.shortcuts import render # Create your views here. from django.http import HttpResponse from .models import post def index(request): #return HttpResponse("欢迎你来到我的博客！") #return render(request,'blog/index.html',context={'title':'博客'})#内容 post_list = post.objects.all()#数据库里面取数据 return render(request, 'blog/index.html', context={'title': '博客','post_list':'post_list'}) # 渲染数据

写好后，前端要写变量，要显示渲染的业务逻辑,代码如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">{# 引用bootstrap的css#} <script src="cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>{# 引用bootstrap的js#} <title>{{title}}</title>{# 变量的形式用花括号，，即将title变成变量传到后台views.py的request里面#} </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid">  <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="#">Brand</a> </div>  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <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> <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> </div> </nav> {#以下为bootstrap的媒体对象代码#} <div class="media"> <div class="media-left media-middle"> <a href="#"> <img class="media-object" src="..." alt="..."> </a> </div> <div class="media-body"> <h4 class="media-heading">{{ post_list }}</h4> {% for item in post_list %} {{ item.body }} {% endfor %} {% for item in post_list %} {{ item.title }} {% endfor %} </div> </div> </body> </html>

刷新页面：新建一个放图片的文件夹，新建一个目录static，在static中新建一个media，将图片放在media中加入图片路径刷新发现错误，图片怎么没显示呢？是因为还没配置URL，在setting.py里面加入如下代码： STATIC_URL = ‘/static/’ STATICFILES_DIRS=[ os.path.join(BASE_DIR,‘static’) ] MEDIA_ROOT=os.path.join(BASE_DIR,r’static\media’) 刷新即可：接下来是页面的美化，我后期会进行修改

最新回复(0)