前言

一、基础配置

二、具体配置

1.检验环境是否搭建成功

2.建立app

3、Setting配置：

4、数据库的创建

5、响应页面

6、数据库填充数据

7、富文本设置

前言

大三上学期学习python，老师要求比较严，让我们这些小白学习python的各种插件，真的太难了！

这是老师的要求

目前完全实现。无成本，就是有些费脑子。要求做10min的视频讲解，不想做。第一次写博客，想用这个来替代视频。嘻嘻。用什么不足之处，请多多包含。

展示

一、基础配置

数据库：5.5

python：3.5

django：1.9.13

代码工具用来pycharm

DjangoUeditor：借鉴了别人的https://www.django.cn/course/show-40.html（我觉得讲的很好，就是自己有一个编码错误，解决了好久好久）

还有一些插件，可以自己在file》setting中配置

环境不行的就自己加油吧！这里不说了。

二、具体配置

1.检验环境是否搭建成功

pycharm》File》New Project》（如果没有左边的东西，则是pycharm的环境不同，可以使用终端命令进行创建）

》点击运行也可以用Run manage.py（可以改变端口）

最终成功

2.建立app

在manage.py中

startapp Blog

startapp app名

Blog是我的app名，自己设置名字哦

会生成一些文件，结构如下：

3、Setting配置：

1、加入自己的App名

INSTALLED_APPS = ['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','Blog',
]

2、配置数据库（mysql）

DATABASES = {'default': {'ENGINE': 'django.db.backends.mysql','NAME':'csdn_blog','USER':'root','PASSWORD':'123456789'# 'HOST':'',# 'POST':'3306',}
}

3、页面装饰所需要的图片，css，js，视频等的路径设置（static）

STATIC_URL = '/static/'
STATICFILES_DIRS=(os.path.join(BASE_DIR,'static'),
)

创建static

4、ueditor上传文件所需地方（media）

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

创建media

最终结构

5、后台为中文的语言设置

原为英文设置，需替换

LANGUAGE_CODE = 'zh-hans'

4、数据库的创建

1、在models.py中，mysql语言

#coding=utf-8
from __future__ import unicode_literals
from django.db import models
# from  DjangoUeditor.models import UEditorField# Create your models here.
class Image(models.Model):image_id = models.IntegerField(primary_key=True,db_column='image_id')image_name=models.CharField(max_length=100,db_column='image_name')image_path=models.FilePathField(db_column='image_path')class Meta:db_table = "image"verbose_name = "图片"verbose_name_plural = verbose_name
class Video(models.Model):video_id = models.IntegerField(primary_key=True,db_column='video_id')video_name=models.CharField(max_length=100,db_column='video_name')video_path=models.FilePathField(db_column='video_path')class Meta:db_table = "video"verbose_name = "视频"verbose_name_plural = verbose_nameclass Category(models.Model):"""博客分类"""name=models.CharField('名称',max_length=30)class Meta:verbose_name="类别"verbose_name_plural=verbose_namedef __unicode__(self):return self.nameclass Tag(models.Model):name=models.CharField('名称',max_length=16)class Meta:verbose_name="标签"verbose_name_plural=verbose_namedef __unicode__(self):return self.nameclass Blog(models.Model):title=models.CharField('标题',max_length=32)author=models.CharField('作者',max_length=16)# content=UEditorField('内容', width=800, height=500,#                 toolbars="full", imagePath="static/images/", filePath="static/images/",#                 upload_settings={"imageMaxSize": 1204000},#                 settings={}, command=None, blank=True#                 )content=models.TextField('内容')pub=models.DateField('发布时间',auto_now_add=True)category=models.ForeignKey(Category,verbose_name='分类')#多对一（博客--类别）tag=models.ManyToManyField(Tag,verbose_name='标签')#(多对多）# video=models.FileField(_('文件'),upload_to='video',null=True,blank=True)class Meta:verbose_name="博客"verbose_name_plural=verbose_namedef __unicode__(self):return self.titleclass Comment(models.Model):blog=models.ForeignKey(Blog,verbose_name='博客')#(博客--评论:一对多)name=models.CharField('称呼',max_length=16)email=models.EmailField('邮箱')content=models.TextField('内容',max_length=240)pub=models.DateField('发布时间',auto_now_add=True)class Meta:verbose_name="评论"verbose_name_plural="评论"def __unicode__(self):return self.content
class Grow(models.Model):FirtName=models.TextField('姓名',max_length=20)heigh=models.TextField('身高',max_length=4)year=models.DateField('年份')weigh=models.TextField('体重')beauty=models.TextField('颜值')grade=models.CharField('分数等级',max_length=10)class Meta:verbose_name="成长"verbose_name_plural="成长"def __unicode__(self):return self.FirtName

注意要进行数据迁移，就是讲我们在models.py写的数据库语言在mysql中查错并创建所需的表

只要models.py中的数据发生改变，就要再次迁移

makemigrations

migrate

可以在Navicate中看到创建的表

2、form.py中

这个要自己在app（Blog）下自己创建

    #coding=utf-8
from django import forms
"""
借此完成博客的评论功能
"""class CommentForm(forms.Form):name=forms.CharField(label='称呼',max_length=16,error_messages={'required':'请填写您的称呼','max_length':'称呼太长咯'})email=forms.EmailField(label='邮箱',error_messages={'required':'请填写您的邮箱','invalid':'邮箱格式不正确'})content=forms.CharField(label='内容',error_messages={'required':'请填写您的评论内容!','max_length':'评论内容太长咯'})

应该是在规范表的字段的

3、在admin.py中，这个主要是后台的页面显示

from django.contrib import admin
from .models import *
# Register your models here.
class CategoryAdmin(admin.ModelAdmin):list_display = ('name',)class TagAdmin(admin.ModelAdmin):list_display = ('name',)class BlogAdmin(admin.ModelAdmin):list_display = ('title','category','content','pub')style_fields={'content':'ueditor'}class CommentAdmin(admin.ModelAdmin):list_display = ('blog','name','content','pub')style_fields={'content':'ueditor'}admin.site.register(Category,CategoryAdmin)
admin.site.register(Tag,TagAdmin)
admin.site.register(Blog,BlogAdmin)
admin.site.register(Comment,CommentAdmin)
admin.site.register(Image)
admin.site.register(Video)
admin.site.register(Grow)

运行后打开网页，打开后台

4、创建超级用户

在pycharm用manage.py中创建超级用户

重新运行

5、响应页面

5中全部执行完成后，再运行，文件缺失可是会报好多好多错的哦！

怎样添加页面呢？主要是三步：

1、在template中创建html网页

2、在view.py中创建函数

3、在urls.py中进行路径的配置

1、模板Template中配置

一共有三个页面：

{{}}是从数据库中引用数据

{%%}是在html中的带面渲染为python代码可以执行

index.html

2、装饰的static（之前在setting中配置过）

没有什么好说的，是web学过的，直接替换之前的static

链接：https://pan.baidu.com/s/1CZPzkSD7HFb3LCsKYvaTsQ
提取码：1111
复制这段内容后打开百度网盘手机App，操作更方便哦--来自百度网盘超级会员V3的分享

3、在view.py进行函数设置

#coding=utf-8
from django.shortcuts import render,render_to_response
import logging
from django.conf import settings
from django.contrib.auth.models import User
from django.http import Http404
from Blog.form import CommentForm
from Blog.models import *def get_blogs(request):blogs=Blog.objects.all().order_by('-pub')#获得所有的博客按时间排序return render_to_response('blog_list.html',{'blogs':blogs})#传递context:blog参数到固定页面。
def index(request):grows = Grow.objects.all()#从数据库应用数据image=Image.objects.all()video=Video.objects.all()context={'grows':grows,#字典进行整合'image':image,'video':video}return render_to_response( 'index.html', context)#传递到index.html页面进行使用def get_details(request,blog_id):
#检查异常try:blog=Blog.objects.get(id=blog_id)#获取固定的blog_id的对象；except Blog.DoesNotExist:raise Http404if request.method == 'GET':form = CommentForm()else:#请求方法为Postform = CommentForm(request.POST)if form.is_valid():cleaned_data=form.cleaned_datacleaned_data['blog']=blogComment.objects.create(**cleaned_data)ctx={'blog':blog,'comments': blog.comment_set.all().order_by('-pub'),'form': form}#返回3个参数return render(request,'blog_details.html',ctx)

render_to_response和render函数的区别：1、版本不同2、render比render_to_response多一个参数request

三个模板对应了三个处理函数

4、在urls.py进行路径配置（注意分清app.urls和projecct中的url）

复制csdn_test（profect）中的urls.py,在Blog（app）中粘贴

Blog中urls不动

csdn_test中的urls.py

"""Blog_work URL ConfigurationThe `urlpatterns` list routes URLs to views. For more information please see:https://docs.djangoproject.com/en/1.9/topics/http/urls/
Examples:
Function views1. Add an import:  from my_app import views2. Add a URL to urlpatterns:  url(r'^$', views.home, name='home')
Class-based views1. Add an import:  from other_app.views import Home2. Add a URL to urlpatterns:  url(r'^$', Home.as_view(), name='home')
Including another URLconf1. Import the include() function: from django.conf.urls import url, include2. Add a URL to urlpatterns:  url(r'^blog/', include('blog.urls'))
"""
from django.conf.urls import url,include
from django.contrib import admin
from django.views.static import serve
from Blog import views
# from Blog_work.settings import MEDIA_ROOT
from csdn_test import settings
# from django.conf import settings
from django.conf.urls.static import staticurlpatterns = [url(r'^Blog', include('Blog.urls')),url(r'^admin/', admin.site.urls),url(r'^index/$', views.index),url(r'index/blog_list.html/',views.get_blogs,name='blog'),url(r'^detail/(\d+)/$',views.get_details,name='blog_get_detail'),# url(r'^ueditor/', include('DjangoUeditor.urls')),url(r'^media/(?P<path>.*)/$',serve,{'document_root':settings.STATICFILES_DIRS}),]
if settings.DEBUG:urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

高版本中不是url，是path，语法有一点点不一样，自己查一下改改吧

现在可以运行了，快试一下吧！

6、数据库填充数据

两种办法

1、在admin后台中进行

2、在Navicate中填充数据

在Navicate中

路径要设置正确，video也一样

/static/images/lover.jpg

需要保存后再运行

在admin后台中，输入创建的超级用户的密码登录，创建blog

创建完成后，在前台页面中可以看到

7、富文本设置

https://www.django.cn/course/show-40.html

可以参考这个网页，因为大部分设置我们在前面都已经修改过了。在这里只需要引入DjangoUeditor包，再修改model.py后makemigration和migrate就可以了

1、引入DjangoUeditor包（这里就不上传了，可以再上面的网页中下载，也可以在最后的工程中找）

2、修改model.py,setting.py,urls.py

class Blog(models.Model):title=models.CharField('标题',max_length=32)author=models.CharField('作者',max_length=16)content=UEditorField('内容', width=800, height=500,toolbars="full", imagePath="static/images/", filePath="static/images/",upload_settings={"imageMaxSize": 1204000},settings={}, command=None, blank=True)# content=models.TextField('内容')pub=models.DateField('发布时间',auto_now_add=True)category=models.ForeignKey(Category,verbose_name='分类')#多对一（博客--类别）tag=models.ManyToManyField(Tag,verbose_name='标签')#(多对多）class Meta:verbose_name="博客"verbose_name_plural=verbose_namedef __unicode__(self):return self.title

进行数据迁移

在setting.py的Template中加入'DjangoUeditor'到app中

INSTALLED_APPS = ['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','Blog','DjangoUeditor',
]

否则会出现不存在模板的问题

在urls.py中加入插入图片，视频的url

urlpatterns = [url(r'^Blog', include('Blog.urls')),url(r'^admin/', admin.site.urls),url(r'^index/$', views.index),url(r'index/blog_list.html/',views.get_blogs,name='blog'),url(r'^detail/(\d+)/$',views.get_details,name='blog_get_detail'),url(r'^media/(?P<path>.*)/$',serve,{'document_root':settings.STATICFILES_DIRS}),url(r'^ueditor/', include('DjangoUeditor.urls')),
]

否则这就是错误

3、Error汇总

1、当图片找不到路径时

{{ blog.content | safe}}
在从数据库提出的内容后加上safe

2、显示为html代码

这是因为存入数据库会加密，再从数据库中提出来会自动编码（说的比较粗俗，不太准确）

{% autoescape off %}
内容
{% endautoescape %}

在template中页面里加入标签

8、折线图等等(ECharts)

从班里大佬那里流出来的，超开心，终于可以完成任务了。还是大佬见多识广啊！

https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

1、步骤（三步）

1、通过标签方式直接引入构建好的 echarts 文件

为了更加方便用户，可以自定义这个库文件（下载中的第三步，自己选择想要的表的类型）

注意格式

<script src="{% static 'js/echarts.min.js' %}"></script>

2、在html的body中绘制图表

<div id="height" style="width: 600px;height:400px;"></div>

3、用js设置图标的样式和数据

<script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('height'), 'dark');var option = {xAxis: {type: 'category',data: [{% for grow in grows %}"{{ grow.year}}",{% endfor %}]},yAxis: {type: 'value'},series: [{data: [ {% for heigh in grows %}{{ heigh.heigh}},{% endfor %}],type: 'line'}]
};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
</script>

两个data的数据由数据库中引出。

总结

声明：工程中部分代码是copy的，那个博客我找不到了。若侵权，告知会删除

遇到问题不用慌，慢慢查。

比如：ueditor加入的时候，有用各种各样语言的，还用各种各样的引入方法，配置也不同。

都要放弃了，最终还是让我做了出来。哈哈（一个端午假期啊！）

差点忘了源码。每次看工程，我最喜欢有源代码的了，你们也是这样吧！

数据库

链接：https://pan.baidu.com/s/1rKXlaE2KyHwhvDjOJ1W8gA
提取码：1111
复制这段内容后打开百度网盘手机App，操作更方便哦--来自百度网盘超级会员V3的分享

工程

链接：https://pan.baidu.com/s/1pC7mnrDJfibDK4caUFUE2A
提取码：1111
复制这段内容后打开百度网盘手机App，操作更方便哦--来自百度网盘超级会员V3的分享

有什么问题，欢迎来问。只要我会，一定会认真解答的。不过我是小白，可能不会的几率有点大。

Django制作blog界面相关推荐

Django(part38)--制作登录界面
学习笔记,仅供参考,有错必究文章目录制作登录界面第一步第二步第三步第四步制作登录界面我们基于博客Django(part36)–cookies的mywebsite_bookstore项目 ...
用Cocos Studio 2.3.2制作UI界面中控件不再支持运行3d动作特效
用Cocos Studio 2.3.2制作UI界面中控件不再支持运行3d动作特效 cocos2d-x + cocos studio无疑是当下二维手游开发的利器,但是在从旧版本向新版本的升级过程中,坑 ...
Android Studio 制作微信界面上
工程功能介绍打开app,首先是个闪屏界面(常见于一般打开app时的小广告),设置时间为2s后进入登录界面.在登录界面中,中间可以输入密码,点击登录按钮进入微信的界面. 微信的界面由4个fragm ...
Android Studio 制作微信界面下
主界面上一篇文章的链接: Android Studio 制作微信界面上_nazonomaster的博客-CSDN博客https://blog.csdn.net/nazonomaster/artic ...
【Python】解决Django Admin管理界面样式表(CSS Style)丢失问题
[Python]解决Django Admin管理界面样式表(CSS Style)丢失问题参考文章: (1)[Python]解决Django Admin管理界面样式表(CSS Style)丢失问题 ( ...
自定义Django的admin界面
第6章介绍了Django的admin界面,现在是回过头来仔细看看这个的时候了我们前面讲的几次admin是Django的"杀手级特性",并且大多数Django开发人员很快爱上了它节 ...
mfc制作登录界面mysql_MFC制作漂亮界面之登录界面
[实例简介] MFC制作漂亮界面之登录界面的源码,主要使用前面学过的内容来实践一个完整的界面. [实例截图] [核心代码] LoginTigger └── LoginTigger ├── LoginT ...
linux python 图形界面开发_python在linux制作图形界面（snack）
snack是一个用于在linux制作图形界面(GUI)的模块,该模块由c编写,而且redhat的系统都自带这个模块. 1.获取模块虽然redhat系统会自带这个模块,但是直接去import snac ...
python3 django html 中文乱码_解决django后台管理界面添加中文内容乱码问题
在学习使用django做一个简单的个人博客项目,通过admin后台添加中文文章内容的时候,遇到中文内容显示乱码的问题. 排除了网上资料中的提到的几个问题: 1.数据上传默认采用的是unicode编码 ...

Django制作blog界面

前言

一、基础配置

二、具体配置

1.检验环境是否搭建成功

2.建立app

3、Setting配置：

4、数据库的创建

5、响应页面

6、数据库填充数据

7、富文本设置

8、折线图等等(ECharts)

总结

Django制作blog界面相关推荐

最新文章

热门文章