Django博客开发-数据建模与样式设定

开发流程介绍

之前Django的学习过程当中已经把基本Django开发学完了，现在以Django 的博客项目完成一遍课程的回顾和总结。同时来一次完整开发的Django体验。

一个产品从研究到编码我们要经历以下的过程：

博客开发需求分析与建模

需求分析

本次项目完成的是一个博客的项目，博客主要目的是为了分享个人的技术，进行技术积累。

主要是发布文章日志。但是也需要有评论和互动。需要完成以下功能点：

1、文章的发布、展示、修改、删除。

2、文章评论

3、读者互动

4、图片管理

概要设计

我们对上面的四个需求进行详细的分析

1、文章的发布、展示、修改、删除。

文章发布、修改和删除，我们可以通过Django的admin后台完成，当然也可以自己定义或者用三方的后台比如xadmin，这个可以作为版本迭代的一个方向。

但是在开始的开发过程当中，我们着重要做的就是展示功能，文章展示通常分为以下几个技术点：

1、文章列表页

按类型划分

搜索

分页

2、文章详情页

文章排版

2、文章评论

1、评论发布

2、评论回复

3、读者互动

提供个人联系方式

4、图片管理

1、文章图片展示管理

2、照片展示管理

完成分析之后，开始创建Django项目

开发版本：

Python 3.5

Django 1.8.2

pillow 模块 pip3 install pillow

　　　　　  django-ckeditor 模块 pip3 install django-ckeditor

Pycharm

　　 1、创建项目

命令：django-admin startproject OurBlog

　　2、切入项目，创建功能，app

命令：python manage.py startapp Article

　　3、创建模板和静态文件存放的位置

　　　　

　　4、安装上述依赖模块

　　　　注：如果是和我一样python2和python3都安装在一个系统下的话，就用pip3，否则用pip就可以

　　　 命令：pip3 install pillow

　　　 

　　　 命令：pip3 install django-ckeditor

　　　 

数据建模

数据建模:数据建模就是用数据库描述上面分析的博客需求，然后形成对应的表和关系，数据建模是web开发至关总要的一个环节，一个优秀的模型是web开发成功的一          大半。

通常的web开发会使用数据库语句，在数据库当中搭建模型，这样开发很直观，但是无疑增加了开发的难度，Django采用的是orm（数据库映射）用Python类描述数据          库，然后通过orm将描述映射到数据当中。Django的模型文件是应用(APP)的models.py

　　OurBlog/Article/models.py

 1 from django.db import models
 2 from ckeditor_uploader.fields import RichTextUploadingField
 3
 4 class Author(models.Model):
 5     gender_choice = (
 6         ("M","Male"),
 7         ("F","Female"),
 8     )
 9     name = models.CharField(max_length = 32,verbose_name = "作者姓名")
10     age = models.IntegerField(verbose_name = "作者年龄",blank = True,null = True)
11     gender = models.CharField(max_length = 2,choices = gender_choice,verbose_name = "作者性别",blank = True,null = True)
12     email = models.EmailField(verbose_name = "作者邮箱",blank = True,null = True)
13     phone = models.CharField(max_length = 11,verbose_name = "作者电话",blank = True,null = True)
14     photo = models.ImageField(verbose_name = "作者头像",upload_to = "images/author")
15
16     def __str__(self):
17         return "作者:%s"%self.name
18
19 class Classify(models.Model):
20     label = models.CharField(max_length = 32,verbose_name = "分类标签")
21     description = models.TextField(verbose_name = "分类描述")
22
23     def __str__(self):
24         return "标签:%s" % self.label
25
26 class Comment(models.Model):
27     content = RichTextUploadingField(verbose_name = "评论内容")
28     content_name = models.CharField(max_length = 32,verbose_name = "评论用户")
29     agree = models.IntegerField(verbose_name = "评论点赞")
30     time = models.DateTimeField(verbose_name = "评论时间")
31
32     def __str__(self):
33         return "[%s] 评论: %s"%(self.content_name,self.content)
34
35
36 class Picture(models.Model):
37     label = models.CharField(max_length = 32, verbose_name = "图片标签")
38     image = models.ImageField(verbose_name = "图片链接", upload_to = "images/picture")
39     description = RichTextUploadingField(verbose_name = "图片描述")
40
41     classify = models.ForeignKey(to = Classify, verbose_name = "图片分类")
42     commant = models.ForeignKey(to = Comment, verbose_name = "图片评论")
43
44     def __str__(self):
45         return "图片名称: %s" % self.label
46
47 class Article(models.Model):
48     """
49     一篇文章可以有一个作者，一个作者可以以有一篇文章，
50     一篇文章有多条评论
51     一个文章有多个分类
52     一个分类有多篇文章
53     """
54     title = models.CharField(max_length = 32,verbose_name = "文章标题")
55     time = models.DateField(verbose_name = "文章发表日期")
56     description = RichTextUploadingField(verbose_name = "文章描述")
57     content = RichTextUploadingField(verbose_name = "文章内容")
58
59     picture = models.ImageField(verbose_name = "文章图片",upload_to = "images/article")
60     author = models.ForeignKey(Author)
61     classify = models.ManyToManyField(Classify)
62     commant = models.ForeignKey(to=Comment, verbose_name="文章评论", blank = True,null = True) #文章可以有评论，也可以没有
63
64     def __str__(self):
65         return "文章:%s" % self.title

完成模型的定义之后，接着进行项目的配置的修改

　　OurBlog/OurBlog/settings.py

 1 #……
 2 # Application definition
 3 #安装功能
 4 INSTALLED_APPS = (
 5     ‘django.contrib.admin‘,
 6     ‘django.contrib.auth‘,
 7     ‘django.contrib.contenttypes‘,
 8     ‘django.contrib.sessions‘,
 9     ‘django.contrib.messages‘,
10     ‘django.contrib.staticfiles‘,
11     ‘Article‘, #我们自定义的功能
12     ‘ckeditor‘, #Django ckeditor的功能
13     ‘ckeditor_uploader‘, #Django ckeditor的上传功能
14 )
15 #.......
16 #模板配置
17 TEMPLATES = [
18     {
19         ‘BACKEND‘: ‘django.template.backends.django.DjangoTemplates‘,
20         ‘DIRS‘: [
21             os.path.join(BASE_DIR,‘template‘) #模板配置
22         ],
23         ‘APP_DIRS‘: True,
24         ‘OPTIONS‘: {
25             ‘context_processors‘: [
26                 ‘django.template.context_processors.debug‘,
27                 ‘django.template.context_processors.request‘,
28                 ‘django.contrib.auth.context_processors.auth‘,
29                 ‘django.contrib.messages.context_processors.messages‘,
30             ],
31         },
32     },
33 ]
34
35 WSGI_APPLICATION = ‘OurBlog.wsgi.application‘
36
37
38 # Database
39 # https://docs.djangoproject.com/en/1.8/ref/settings/#databases
40 #数据库配置，默认使用sqllite数据库
41 DATABASES = {
42     ‘default‘: {
43         ‘ENGINE‘: ‘django.db.backends.sqlite3‘,
44         ‘NAME‘: os.path.join(BASE_DIR, ‘db.sqlite3‘),
45     }
46 }
47
48
49 # Internationalization
50 # https://docs.djangoproject.com/en/1.8/topics/i18n/
51 #语言和时区配置
52 LANGUAGE_CODE = ‘zh-hans‘ #项目语言为中文
53
54 TIME_ZONE = ‘Asia/Shanghai‘ #调整为东8区时间，上海时间
55
56 USE_I18N = True
57
58 USE_L10N = True
59
60 USE_TZ = False  #禁止采用0时区时间
61
62
63 # Static files (CSS, JavaScript, Images)
64 # https://docs.djangoproject.com/en/1.8/howto/static-files/
65
66 #静态文件配置
67 STATIC_URL = ‘/static/‘
68 STATICFILES_DIRS = (
69     os.path.join(BASE_DIR,"static").replace("\\","/"),
70 )
71 STATIC_ROOT = os.path.join(BASE_DIR,"static/ckeditor").replace("\\","/")
72
73 #媒体文件配置 我们上传图片使用
74 MEDIA_URL = "/media/"
75 MEDIA_ROOT =  os.path.join(BASE_DIR,"static").replace("\\","/")
76
77 #ckeditor配置
78 CKEDITOR_UPLOAD_PATH = ‘uploads/‘ #上传路径
79 CKEDITOR_IMAGE_GACKEND = ‘pillow‘ #上传图片用的模块

然后进行ckeditor的路由指出。

　　OurBlog/OurBlog/urls.py

1 from django.conf.urls import include, url
2 from django.contrib import admin
3
4 urlpatterns = [
5     #......
6     url(r‘^ckeditor/‘, include(‘ckeditor_uploader.urls‘)),
7 ]

进行模型后台的安装

OurBlog/Article/admin.py

 1 from django.contrib import admin
 2 from Article.models import Article,Author,Classify,Picture,Comment
 3
 4 class ArticleAdmin(admin.ModelAdmin):
 5     search_fields = ["title","time"] #添加搜索选项
 6
 7 admin.site.register(Article,ArticleAdmin)
 8 admin.site.register(Author)
 9 admin.site.register(Classify)
10 admin.site.register(Picture)
11 admin.site.register(Comment)
12 # Register your models here.

进行数据库的同步

1、校验配置是否正确

命令： python manage.py validate

　　   

2、生成数据库语句

　　　命令： python manage.py makemigrations

　　　

　　3、完成数据库同步

　　　命令： python manage.py syncdb

　　　

　　　创建超级用户

　　　 注：只有在第一次同步数据库才会出现创建超级用户的选项，创建的是Django自带后台的超级用户，密码默认不显示，填写时候要小心

　　　

然后进行静态文件的收集

命令： python manage.py collectstatic

　       

博客样式加载，模板渲染

上面的步骤完成之后，我们就可以进行页面的编写，加载，和渲染了，在工作当中，除非是个人项目，一般情况下，当进行Django开发的时候，前台的页面也就具备了。在这个项目当中，我们采用一个准备好的模板进行演示：

1、模板渲染的第一步，是打开模板文件，进行页面特征的查看，对结构相同的页面构建base结构。我们课上演示的是一款中国风格的博客模板，当然，大家也可以自         己定义或者下载自己喜欢的模板。（模板地址：链接：https://pan.baidu.com/s/1P2h8qwUcVoVA9R74nEm_pA  提取码：27x8 注：该模板不是作者开发，用于联系如           果盈利，请联系原作者 ）

模板文件如下：

比对四个页面的效果发现：

顶部:
       

尾部：

　　

效果一样。所以根据这个我们搭建自己的base页面。在这里要注意的是这套模板的编码是gb2312,我们需要进行修改。修改完成定制base页面

首先将静态文件迁入项目的static目录

然后根据前端样式分析，编写base.html（手生的同学可以复制一个页面过来，进行修改）

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>
 6     {% block title %}
 7         while 个人博客
 8     {% endblock %}
 9 </title>
10 <meta name="keywords" content="while 个人博客" />
11 <meta name="description" content="while 个人博客" />
12 <link href="/static/css/base.css" rel="stylesheet">
13 <link href="/static/css/index.css" rel="stylesheet">
14 <!--[if lt IE 9]>
15 <script src="/static/js/modernizr.js"></script>
16 <![endif]-->
17 <script type="text/javascript" src="/static/js/jquery.js"></script>
18 {% block style %}
19 {% endblock %}
20 </head>
21 <body>
22
23 <div id="wrapper">
24   <header>
25     <div class="headtop"></div>
26     <div class="contenttop">
27       <div class="logo f_l">大泽九章--个人博客</div>
28       <div class="search f_r">
29         <form action="/e/search/index.php" method="post" name="searchform" id="searchform">
30           <input name="keyboard" id="keyboard" class="input_text" value="请输入关键字" style="color: rgb(153, 153, 153);" onfocus="if(value==‘请输入关键字‘){this.style.color=‘#000‘;value=‘‘}" onblur="if(value==‘‘){this.style.color=‘#999‘;value=‘请输入关键字‘}" type="text">
31           <input name="show" value="title" type="hidden">
32           <input name="tempid" value="1" type="hidden">
33           <input name="tbname" value="news" type="hidden">
34           <input name="Submit" class="input_submit" value="搜索" type="submit">
35         </form>
36       </div>
37       <div class="blank"></div>
38       <nav>
39         <div  class="navigation">
40           <ul class="menu">
41             <li><a href="/index/">网站首页</a></li>
42               <ul>
43                 <li><a href="bf/about.html">个人简介</a></li>
44                 <li><a href="bf/listpic.html">个人相册</a></li>
45               </ul>
46             </li>
47             <li><a href="/Article/myBlog/">我的博客</a>
48               <ul>
49                 <li><a href="bf/newslistpic.html">个人博客</a></li>
50                 <li><a href="bf/newslistpic.html">技术博客</a></li>
51               </ul>
52             </li>
53             <li><a href="/Article/myPicture/">我的照片</a></li>
54             <li><a href="/aboutMe/">关于我</a>
55             <li><a href="#">给我留言</a> </li>
56           </ul>
57         </div>
58       </nav>
59       <SCRIPT type=text/javascript>
60    // Navigation Menu
61    $(function() {
62       $(".menu ul").css({display: "none"}); // Opera Fix
63       $(".menu li").hover(function(){
64          $(this).find(‘ul:first‘).css({visibility: "visible",display: "none"}).slideDown("normal");
65       },function(){
66          $(this).find(‘ul:first‘).css({visibility: "hidden"});
67       });
68    });
69 </SCRIPT>
70     </div>
71   </header>
72   {% block content %}
73
74   {% endblock %}
75   <footer>
76     <div class="footer">
77       <div class="f_l">
78         <p>All Rights Reserved 版权所有：<a href="http://www.yangqq.com">while 个人博客</a> 备案号：蜀ICP备00000000号</p>
79       </div>
80       <div class="f_r textr">
81         <p>let‘s say hello world</p>
82       </div>
83     </div>
84   </footer>
85 </div>
86 </body>
87 </html>

　　 然后开始继承base模板开始定义指出页面

首先定义视图文件

 1 from django.shortcuts import render
 2
 3 def base(request):
 4     return render(request,"base.html")
 5
 6 def index(request):
 7     return render(request,"index.html")
 8
 9 def myArticle(request):
10     return render(request,"myArticle.html")
11
12 def myPicture(request):
13     return render(request,"myPicture.html")
14
15 def aboutMe(request):
16     return render(request,"aboutMe.html")
17
18 def connectMe(request):
19     return render(request,"aboutMe.html")

　　然后进行继承，完成基本的样式修改，我们以aboutMe页面为例

 1 {% extends "base.html" %}
 2
 3 {% block title %}
 4     关于我们
 5 {% endblock %}
 6
 7 {% block style %}
 8 <link href="/static/css/main.css" rel="stylesheet">
 9 {% endblock %}
10
11 {% block content %}
12   <div class="container">
13     <div class="con_content">
14       <div class="about_box">
15         <h2 class="nh1"><span>您现在的位置是：<a href="/" target="_blank">网站首页</a>>><a href="#" target="_blank">信息浏览</a></span><b>个人简介</b></h2>
16         <div class="f_box">
17           <p class="a_title">个人简介</p>
18           <p class="p_title"></p>
19           <!--  <p class="box_p"><span>发布时间：2017-07-07 15:12:42</span><span>作者：唐孝文</span><span>来源：稽查支队</span><span>点击：111056</span></p>-->
20           <!-- 可用于内容模板 -->
21         </div>
22         <ul class="about_content">
23           <p> 人生就是一个得与失的过程，而我却是一个幸运者，得到的永远比失去的多。生活的压力迫使我放弃了轻松的前台接待，放弃了体面的编辑，换来虽有些蓬头垢面的工作，但是我仍然很享受那些熬得只剩下黑眼圈的日子，因为我在学习使用Photoshop、Flash、Dreamweaver、ASP、PHP、JSP...中激发了兴趣，然后越走越远....</p>
24           <p><img src="/static/images/01.jpg"></p>
25           <p>“冥冥中该来则来，无处可逃”。 </p>
26         </ul>
27
28       </div>
29     </div>
30     <div class="blank"></div>
31   </div>
32   <!-- container代码 结束 -->
33   {% endblock %}

　　接着完成路由指出

from django.conf.urls import include, url
from django.contrib import admin
from Article.views import *

urlpatterns = [
    url(r‘^admin/‘, include(admin.site.urls)),
    url(r‘^ckeditor/‘, include(‘ckeditor_uploader.urls‘)),
    url(r‘^ckeditor/‘, include(‘ckeditor_uploader.urls‘)),
    url(r‘^index/‘, index),
    url(r‘^myArticle/‘, myArticle),
    url(r‘^myPicture/‘, myPicture),
    url(r‘^aboutMe/‘, aboutMe),
    url(r‘^connectMe/‘, connectMe),
]

　　最后通过base页完成前端路由的修整,这样，我们的网站就可以点进选择了。

<!--……-->
          <ul class="menu">
            <li><a href="/index/">网站首页</a></li>
              <ul>
                <li><a href="/aboutMe/">个人简介</a></li>
                <li><a href="/myPicture/">个人相册</a></li>
              </ul>
            </li>
            <li><a href="/myArticle/">我的博客</a>
              <ul>
                <li><a href="/myArticle/">个人博客</a></li>
                <li><a href="/myArticle/">技术博客</a></li>
              </ul>
            </li>
            <li><a href="/myPicture/">我的照片</a></li>
            <li><a href="/aboutMe/">关于我</a>
            <li><a href="/aboutMe/">给我留言</a> </li>
          </ul>
        </div>
      </nav>
      <SCRIPT type=text/javascript>
 <!--……-->

这样，我们就完成了最基本的前端效果。然后就可以在后台添加数据，进行数据的基本调用了

原文地址：https://www.cnblogs.com/bianjinhui/p/9831660.html

时间： 2024-10-08 16:14:41

Django博客开发-数据建模与样式设定的相关文章

全站之路一路坑(2)——在Apache下部署django博客

上一篇博客:全栈之路一路坑之使用django开发博客 开发完博客之后,很多后续应用需要博客部署之后才可以使用,这篇文章就来尝试一下将开发好的博客部署到服务器上. 开发阶段,一直使用的是virtualenv和python manage.py runserver,但需要部署到服务器上时就有些不合适了,所以我尝试把它部署到Apache里. 查阅了相关资料发现部署方法有两种,一种是python_mod,另一种是wsgi,资料上说后者更加稳定一点,所以我选择使用wsgi进行集成. 安装httpd-deve

建立django博客应用及数据库模型

1.现在就来创建我们的 Django 博客应用,我把它命名为 blog.激活虚拟环境,进入到 manage.py 文件所在的目录下,运行 python manage.py startapp blog 命令即可建立一个 blog 应用 这个应用的文件夹结构 Django 已经为我们建立好了,但它还只是包含各种文件的一个文件夹而已,Django 目前还不知道这是一个应用.我们得告诉 Django 这是我们建立的应用,专业一点说就是在 Django 的配置文件中注册这个应用.打开 blogprojec

博客开发系列(一)

博客开发系列(一) 数据库表的创建 两张表: 文章类型 文章 #一篇博客一种分类 # 一篇博客多种分类 from django.db import models from django.contrib.auth.models import User # Create your models here. class BlogType(models.Model): type_name=models.CharField(max_length=15,verbose_name="博客类型") d

Django 博客实现简单的全文搜索

作者:HelloGitHub-追梦人物 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 搜索是一个复杂的功能,但对于一些简单的搜索任务,我们可以使用 Django Model 层提供的一些内置方法来完成.现在我们来为我们的博客提供一个简单的搜索功能. 概述 博客文章通常包含标题和正文两个部分.当用户输入某个关键词进行搜索后,我们希望为用户显示标题和正文中含有被搜索关键词的全部文章.整个搜索的过程如下: 用户在搜素框中输入搜索关键词,假设为 "django",

Halo博客文章数据导出工具

之前写了「CSDN 文章数据导出工具」,当时就说要写一下 「Halo博客文章数据导出工具」,本文就来介绍一下这个工具开发和使用. 效果展示 首先来看下导出的效果,与 CSDN 导出的数据类似,关于 CSDN 导出可查看「CSDN文章数据导出工具」. 开发 Halo 博客开源项目地址:https://github.com/halo-dev/halo 1.Halo 后台管理 Halo 博客的后台管理是有文章相关数据的,如下图所示,但是跟 CSDN 类似,不能导出,一页一页查看满足不了我的需求,所以我

博客园CodingLife模板手机样式优化

博客园CodingLife模板手机样式优化:用博客园写笔记也有一段时间了,当我用手机浏览我的文章时感觉样式不太完美,主要是个人首页和文章详情的头部宽度太大,原本大屏右侧的模块放在文章下面后宽度和位置不太合适,刚好今天看到设置中可以上传自定义样式,于是写了一些样式来优化CodingLife模板,等下次有时间再继续优化,感兴趣的园友可以复制以下样式到你的页面定制CSS代码中, /*author stumpx*/ #navigator { min-width: 1200px; } @media (ma

Python Web —— Django博客教程总结

Django博客教程总结 前言_Django博客教程_追梦人物的博客 首先安装virtualenv 安装 pip install virtualenv 创建虚拟环境 Python版本3.5 Django版本1.10.6 pip install Django=1.10.6 原文地址:https://www.cnblogs.com/darksouls/p/8349404.html

修改博客园日历的默认样式

我们知道,博客园默认的日历样式是灰底的,有点丑. 我想把它改成类似于WIN10的样式. 上代码. #blogCalendar td{ color:#fff; } #blogCalendar td.CalOtherMonthDay{ color:gray; } #blogCalendar td a:link{ color:#fff; background-color:blue; border-radius:2px; } #blogCalendar th.CalDayHeader{ color:#f

web开发-Django博客系统

项目界面图片预览 项目代码github地址 项目完整流程 项目流程: 1 搞清楚需求(产品经理) (1) 基于用户认证组件和Ajax实现登录验证(图片验证码) (2) 基于forms组件和Ajax实现注册功能 (3) 设计系统首页(文章列表渲染) (4) 设计个人站点页面 主要是orm查询 (5) 文章详情页 (6) 实现文章点赞功能 (7) 实现文章的评论 ---文章的评论 ---评论的评论 (8) 富文本编辑框和防止xss攻击 (9) 密码修改 2 设计表结构 用户信息表 个人站点表 个人文