锐客网

  1. 首页 > it技术 > >

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

学习

我们Django后台已经搭建好了，但是前端页面还没创建好，所以今天要开始写前端了！
给大家推荐一个写前端的办法：在百度里面搜索bootstrap,点击bootstrap中文网，然后里面有一个组件，组件里面有很多功能，代码已经写好了
Django制作个人博客——前端页面
文章图片
Django制作个人博客——前端页面
文章图片

Django制作个人博客——前端页面
文章图片

直接复制就可以了。
在blog目录下新建一个专门用来写前端的目录叫templates（模板），再在里面新建一个目录blog，在blog里面新建一个HTML文件index，大多数首页都叫index
Django制作个人博客——前端页面
文章图片

此时改一下标题和内容如下：
Django制作个人博客——前端页面
文章图片

刷新一下页面，发现和前面相比没有任何区别
Django制作个人博客——前端页面
文章图片

这是为什么呢？
因为我们自己定义了一个templates模板文件，Django怎么知道模板templates文件在哪?
还需要在setting.py里面的TEMPLATES里加一步配置
Django制作个人博客——前端页面
文章图片

在DIPS里面加入如下
‘DIRS’: [os.path.join(BASE_DIR,‘templates’)],
os.path.join(BASE_DIR,‘templates’)
os.path.join这个方法是拼接路径的
BASE_DIR：这个是指项目的根目录
‘templates’：拼接templates
刷新看看
Django制作个人博客——前端页面
文章图片

还是没有显示我们的页面，为什么？
因为我们没有配置URL，没有URL，就不能访问URL，每个页面都有自己的URL
新建一个urls.py文件
Django制作个人博客——前端页面
文章图片

Django制作个人博客——前端页面
文章图片

但是我们项目里面有个URL，为什么我们还要新建？
因为那个是项目的跟目录，我们自己分应用的话都要在应用里面自己写一个URL
Django制作个人博客——前端页面
文章图片

怎么让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("欢迎你来到我的博客！")

刷新页面
Django制作个人博客——前端页面
文章图片

写一下HTML页面，我去bootstrap导航条里面复制，然后引用了bootstrap的css和js，
一定要加上这几行代码：
{#引用bootstrap的css#} {#引用bootstrap的js#} {{title}} - 锐客网{#变量的形式用花括号，，即将title变成变量传到后台views.py的request里面#}

代码如下：
#引用bootstrap博客 - 锐客网 {#以下为bootstrap的媒体对象代码#}Django制作个人博客——前端页面
文章图片
Middle aligned media ...

刷新了，发现并没有我们想要的效果，难道是代码错了？我们发现是views.py里面的代码惹的祸，请求返回的还是那个
Django制作个人博客——前端页面
文章图片

那我们就用自带的render吧
修改代码如下：
Django制作个人博客——前端页面
文章图片

该index.html的代码：
将”博客”改为：{{title}}
Django制作个人博客——前端页面
文章图片

{{title}} #{{title}}变量的形式用花括号，，即将title变成变量传到后台views.py的request里面 刷新一下： Django制作个人博客——前端页面
文章图片

Django制作个人博客——前端页面
文章图片

和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'})# 渲染数据

【Django制作个人博客——前端页面】写好后，前端要写变量，要显示渲染的业务逻辑,代码如下：
{#引用bootstrap的css#} {#引用bootstrap的js#} {{title}} - 锐客网{#变量的形式用花括号，，即将title变成变量传到后台views.py的request里面#} {#以下为bootstrap的媒体对象代码#}Django制作个人博客——前端页面
文章图片
{{ post_list }} {% for item in post_list %} {{ item.body }} {% endfor %} {% for item in post_list %} {{ item.title }} {% endfor %}

刷新页面：
Django制作个人博客——前端页面
文章图片

新建一个放图片的文件夹，新建一个目录static，在static中新建一个media，将图片放在media中
加入图片路径
Django制作个人博客——前端页面
文章图片

刷新发现错误，图片怎么没显示呢？
是因为还没配置URL，在setting.py里面加入如下代码：
STATIC_URL = ‘/static/’
STATICFILES_DIRS=[
os.path.join(BASE_DIR,‘static’)
]
MEDIA_ROOT=os.path.join(BASE_DIR,r’static\media’)
刷新即可：
Django制作个人博客——前端页面
文章图片

接下来是页面的美化，我后期会进行修改

    推荐阅读


    上一篇：ROS基础学习（一）

    下一篇：git——》删除文件夹