1.1.环境搭建
(1)虚拟环境
mkvirtualenv websitepip install django==1.11.7
(2)创建项目和app:website和blog
(3)设置中文settings.py
LANGUAGE_CODE = 'zh-hans'TIME_ZONE = 'Asia/Shanghai'USE_I18N = TrueUSE_L10N = TrueUSE_TZ = False
运行项目:http://127.0.0.1:8000/
1.2.模型设计
(1)blog/models.py
from django.db import modelsfrom django.contrib.auth.models import Userclass Category(models.Model): name = models.CharField('分类',max_length=128) def __str__(self): return self.name class Meta: verbose_name = '博客分类' verbose_name_plural = verbose_nameclass Tag(models.Model): name = models.CharField('标签', max_length=128) def __str__(self): return self.name class Meta: verbose_name = '博客标签' verbose_name_plural = verbose_nameclass Entry(models.Model): title = models.CharField('文章标题',max_length=128) author = models.ForeignKey(User,verbose_name='作者',on_delete=models.CASCADE) img = models.ImageField(upload_to='blog_img',null=True,blank=True,verbose_name='博客配图') body = models.TextField('正文',) abstract = models.TextField('摘要',max_length=256,null=True,blank=True) visiting = models.PositiveIntegerField('访问量',default=0) category = models.ManyToManyField('Category',verbose_name='博客分类') tags = models.ManyToManyField('Tag',verbose_name='标签') created_time = models.DateTimeField('创建时间',auto_now_add=True) modifyed_time = models.DateTimeField('修改时间',auto_now=True) def __str__(self): return self.title class Meta: ordering = ['-created_time'] verbose_name = '博客正文' verbose_name_plural = verbose_name
(2)blog/admin.py
from django.contrib import adminfrom . import modelsclass EntryAdmin(admin.ModelAdmin): list_display = ['title','author','visiting','created_time','modifyed_time']admin.site.register(models.Category)admin.site.register(models.Tag)admin.site.register(models.Entry,EntryAdmin)
(3)设置为MySql
import pymysqlpymysql.install_as_MySQLdb()DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'my_blog', #数据库名字 'USER': 'root', #账号 'PASSWORD': '123456', #密码 'HOST': '127.0.0.1', #IP 'PORT': '3306', #端口 }}
(4)安装模块
pip install pymysql pillow
(5)创建超级用户
python manage.py createsuperuser
进后台添加标签和分类
1.3.url及视图设计
(1)website/urls.py
from django.conf.urls import url,includefrom django.contrib import adminurlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^blog/',include('blog.urls') ),]
(2)blog/urls.py
from django.conf.urls import urlfrom . import viewsapp_name = 'blog'urlpatterns = [ url(r'^$', views.index,name='blog_index'), url(r'^(?P[0-9]+)', views.detail,name='blog_detail'),]
(3)blog/views.py
from django.shortcuts import renderdef index(request): return render(request,'blog/index.html',locals())def detail(request,blog_id): return render(request,'blog/detail.html',locals())
(4)blog/templates/blog/index.html
首页 博客首页
(5)blog/templates/blog/detail.html
博客详情页 博客{ { blog_id }}的详情
1.4.前端页面设计
(1)Bootstrap
下载bootstrap,把文件放到static目录
settings设置
STATIC_URL = '/static/'STATICFILES_DIRS = [ os.path.join(BASE_DIR,'static'),]
(2)blog/base.html
{% load staticfiles %}{% block title %}{% endblock %} { % block css %}{% endblock %} { % block content %}{% endblock %} { % block script %}{% endblock %}
(3)blog/static/blog/css/blog_nav.css
body { margin-top: 30px; font-weight: 400; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */ padding-top: 70px;}/* Navbar and footer (global) styling */.navbar-fixed-top .nav { padding: 15px 0;}.navbar { color: black; border-width: thin; -webkit-transition: .2s; background-color: white; border-bottom: 1px solid #e0e0e0; background-color: white;}.navbar a { color: black;}.navbar-fixed-top .navbar-brand { padding: 0 15px;}.navbar-header .icon-bar { background-color: black;}.navbar-nav > li > .navbar-active { color: #E46E2E;}.navbar-scroll { background-color: white; animation-duration: 2s; animation-name: smooth; -moz-box-shadow: 1px 1px 1px #999; -webkit-box-shadow: 1px 1px 1px #999; box-shadow: 1px 1px 1px #999;}.jupytercon-nav > li > .black-tab { color: black;}.navbar-logo { height: 45px;}.nav > li > a { font-size: 20px; padding: 12px 16px 10px;}.nav > li > a:hover { background-color: transparent; color: #E46E2E; -webkit-transition: .2s;}.nav > li > a:focus { background-color: white;}.nav > li > a:active { background-color: #F8F8F8;}.nav > li > a:visited { background-color: #F8F8F8;}.tab:hover { background-color: transparent; color: #E46E2E;}.footer { background-color: #979797;}.footer p { color: white; padding-top: 10px;}.footer li { color: white; display: inline-block; text-decoration: none;}.footer a { color: white; text-decoration: none;}.footer li::after { content:" |";}.footer li:last-of-type::after { content:"";}.footer-text { font-size: 16px; margin-left: 0; padding-left: 0;}.navbar-brand { float: left; height: 50px; padding: 15px 15px; font-size: 20px; line-height: 20px; margin-top: 27px;}nav .navbar-form{ padding: 10px;}
(4)blog/index.html
{ % extends 'blog/base.html' %}{ % block title %}博客首页{ % endblock %}{ % block content %} 博客首页 { % endblock %}
效果:
此时目录结构: