今天,小叮当来为大家继续分享Django的干货~
主要内容有:项目的搭建复习和博客小案例
一、项目的搭建复习
在xshell中进入我们之前创建的虚拟环境
执行workon
执行workon djtest2.1?
djtest2.1为我们创建的虚拟环境,忘了的话可以回头看下零基础入手Django(一):基本介绍及环境搭建
执行ls? 执行cd dj_project? ? ?dj_project为我们之前创建的用来存储django项目的文件夹
执行pip list?来检查当前环境是否可以进行django项目创建
2.执行命令“django -admin startproject 项目名” 来创建项目
我们以创建mysite项目为例
(1)执行命令“django-admin startproject mysite”
执行”ls"查看项目
(2)执行cd mysite?进入mysite文件夹?
?执行ls查看文件
执行tree命令查看文件结构
(3)在pycharm中新建本地普通项目mysite用来进行代码同步
选择在新窗口打开
点击ok后,便可在新的pycharm窗口看到新建的项目
(4)进行代码同步
在Tools中找到“Deployment"找到Configuration
配置如下
点击 Test SFTP connection进行检测
在mappings配置服务器中项目的路径
值得注意的是,同步时,我们一定要选择项目的最外层目录。
配置完成后点击ok即可。
在Tools中找到Deployment?在其中找到Download from ...?将服务器端的代码下载到本地。
可以看到点击后,代码便被飞快地同步到本地
(5)配置启动django服务
点击pycharm右上角的小三角
点击后选择编辑配置
在配置页面选择左上角的绿色小加号?选择django server
配置django server?取名为mysite?配置host为0.0.0.0
配置环境变量
新建环境变量DJANGO_SETTINGS_MODULE?值为mysite.settings(项目名.settings)
选择服务器端的解释器
点击fix
勾选Enable Django Support 并配置本地的mysite路径和settings文件
配置本地mysite路径
配置settings路径
配置完成后点击apply进行应用后,点击ok
运行django server 之后若报如下错误
则从file处进入settings配置python解释器,点击其旁边的修改按钮为其配置ssh认证信息即可。
之后便可启动mysite项目
(6)新建名为blog的app
打开Tools?选中Run manage.py Task...
执行命令startapp blog
在项目目录处右击选择 Deployment Download ....
下载完成后,便可看到新建的blog
(7)对项目进行基本的配置
进入mysite项目的settings.py进行配置
①配置所有主机均可访问
ALLOWED_HOSTS?=?['*']
注册app
②在项目中新建templates目录
在settings.py中配置对应路径
代码如下
'DIRS':?[os.path.join(BASE_DIR,'templates')],
③新建static文件夹,并建立js、images、css子文件夹 用来存放静态文件
在settings中配置相应的路径
代码如下:
STATICFILES_DIRS?=?[
os.path.join(BASE_DIR,'static')
]
④配置数据库
在xshell中进入mysql 执行?create database mysite;
在settings中进行配置
代码如下:
DATABASES?=?{
'default':?{
'ENGINE':?'django.db.backends.mysql',??#?数据库引擎
'NAME':?'mysite',????????????????#数据库名称
'USER':?'xdd',???????????????#?链接数据库的用户名
'PASSWORD':?'xdd',??????#?链接数据库的密码
'HOST':?'192.168.255.130',???????????#?mysql服务器的域名和ip地址
'PORT':?'3306',????????????????#?mysql的一个端口号,默认是3306
}
}
在主目录下的_init_.py中通过pymysql将其使用
代码如下:
import?pymysql
pymysql.install_as_MySQLdb()
(8)配置路由
①在blog文件夹下新建urls.py文件
②在主目录下的urls.py中 import include 并分配路由
具体代码如下:
from?django.contrib?import?admin
from?django.urls?import?path,include
urlpatterns?=?[
path('admin/',?admin.site.urls),
path('blog/',include('blog.urls')),
]
到此一个django项目的新建与基本配置就算复习完成了,你掌握了吗?
二、博客小案例
1.数据库中的数据渲染进模板
数据库中的数据传入模板示意图如下
视图函数可以查找数据库中的数据,通过context传给模版。模版经过render渲染即可展示在页面上。
2.博客小案例主要功能
在本次博客小案例中,我们主要实现主页、添加页、列表页、详情页这几个功能。
我们在建好的mysite项目中,找到建好的templates目录,在其下新建blog目录,在其中新建
”demo_add.html"、“demo_base.html”、"demo_detail.html"
"demo_indesx.html"、“demo_list.html”
(1)demo_add.html代码如下:
{% extends 'blog/demo_base.html' %}
{% block title %}
添加博客{% endblock %}
{% block bodyblock %}
添加新文章
{% csrf_token %}
标题
内容
发布博客
{% endblock %}
(2)demo_base.html代码如下:
{% block title %}
{% endblock %}
{% block bodyblock %}
{% endblock %}
(3)demo_detail.html代码如下:
{% extends 'blog/demo_base.html' %}
{% block title %}
文章详情{% endblock %}
{% block bodyblock %}
文章标题
文章内容{% endblock %}
(4)demo_index.html代码如下:
{% extends 'blog/demo_base.html' %}
{% block title %}
首页{% endblock %}
{% block bodyblock %}
添加文章
文章列表
{% endblock %}
(5)demo_list.html代码如下:
{% extends 'blog/demo_base.html' %}
{% block title %}
文章列表{% endblock %}
{% block bodyblock %}
文章列表
标题
操作
文章1
编辑 | 删除
文章2
编辑 | 删除
{% endblock %}
将代码上传到服务端
(6)配置blog下的views.py中配置视图函数
from?django.shortcuts?import?render
#?Create?your?views?here.
def?blog_index(request):
return?render(request,'blog/demo_index.html')
def?blog_add(request):
return?render(request,'blog/demo_add.html')
def?blog_list(request):
return?render(request,'blog/demo_list.html')
def?blog_detail(request):
return?render(request,'blog/demo_detail.html')
(7)配置blog下的urls.py分配路由
from?django.urls?import?path,include
from?.?import?views
urlpatterns?=?[
path('index',views.blog_index,name='blog_index'),
path('add',?views.blog_add,?name='blog_add'),
path('list',?views.blog_list,?name='blog_list'),
path('detail',?views.blog_detail,?name='blog_index'),
]
(8)将配置好的代码上传到服务器后,在浏览器中查看
添加博客
主页
列表
2.创建数据库用来存储博客
(1)在blog的models.py创建模型类
from?django.db?import?models
#?Create?your?models?here.
class?BlogModel(models.Model):
#创建title字段用来存储博客标题??blank表示允许title为空且与表单有关
title?=?models.CharField(max_length=100,blank=True)
#创建内容字段
content?=?models.TextField()
(2)执行makemigrations? 执行migrate?映射到数据库
(3)在xshell中进入mysql进行查看
执行?use mysite;?执行?show tables;
执行desc blog_blogmodel;
3.实现各页面的功能
(1)实现主页
代码如下
{% extends 'blog/demo_base.html' %}
{% block title %}
首页{% endblock %}
{% block bodyblock %}
添加文章
文章列表
{% endblock %}
在浏览器中查看? ?点击“添加文章”
点击文章列表
(2)实现添加页
在views.py中修改添加视图函数
代码如下
from?django.shortcuts?import?render
from?django.http??import?HttpResponse
#?Create?your?views?here.
#导入模型类
from?.models?import?BlogModel
def?blog_index(request):
return?render(request,'blog/demo_index.html')
def?blog_add(request):
if?request.method=='POST':
#从前端页面中获取数据
title?=?request.POST.get('title')
content?=?request.POST.get('content')
#存储数据进入数据库
blog?=?BlogModel(title=title,content=content)
blog.save()
return?HttpResponse('博客发表成功!')
return?render(request,'blog/demo_add.html')
def?blog_list(request):
return?render(request,'blog/demo_list.html')
def?blog_detail(request):
return?render(request,'blog/demo_detail.html')
在浏览器中查看,并添加数据,点击“发布博客”
点击“发布博客"后
通过xshell在数据库中查看
执行命令”select * from blog_blogmodel;“
(3)实现博客列表页
重新定义views.py中的视图函数
代码如下
def?blog_list(request):
blogs?=?BlogModel.objects.all()
return?render(request,'blog/demo_list.html',context={'blog_list':blogs})
重新定义博客列表
html代码如下
{% extends 'blog/demo_base.html' %}
{% block title %}
文章列表{% endblock %}
{% block bodyblock %}
文章列表
标题
操作
{% for blog in blog_list %}
{{ blog.title }}
编辑 | 删除
{% endfor %}
{% endblock %}
浏览器中查看
数据库中查看
(4)实现博客详情页
重新定义views.py中的视图函数
代码如下
def?blog_detail(request,blog_id):
blogd?=BlogModel.objects.get(id=blog_id)
return?render(request,'blog/demo_detail.html',context={'blog':blogd})
在urls.py中重新进行路由配置,为blog_id配置路由
代码如下
path('detail/<blog_id>', views.blog_detail, name='blog_detail'),
重新定义html
{% extends 'blog/demo_base.html' %}
{% block title %}
文章详情{% endblock %}
{% block bodyblock %}
{{ blog.title }}
{{ blog.content }}
{% endblock %}
在列表html中引用详情页的信息?实现点击文章标题查看文章详情的功能
代码如下
{% extends 'blog/demo_base.html' %}
{% block title %}
文章列表{% endblock %}
{% block bodyblock %}
文章列表
标题
操作
{% for blog in blog_list %}
{{ blog.title }}
编辑 | 删除
{% endfor %}
{% endblock %}
在浏览器中查看
点击标题后,便跳转到了文章的详情页
(5)实现删除功能
在views.py中定义视图函数
代码如下
from?django.shortcuts?import?render,redirect,reverse
def?blog_delete(request,blog_id):
del_blog?=?BlogModel.objects.filter(id?=?blog_id)
if?del_blog:
del_blog.delete()
return?redirect(reverse('blog_list'))
else:
return?HttpResponse('没有这篇博客')
在urls.py中配置对应的路由
path('delete/<blog_id>', views.blog_delete, name='blog_delete'),
在博客列表html中配置删除时的页面跳转
代码如下
{% extends 'blog/demo_base.html' %}
{% block title %}
文章列表{% endblock %}
{% block bodyblock %}
文章列表
标题
操作
{% for blog in blog_list %}
{{ blog.title }}
编辑 | 删除
{% endfor %}
{% endblock %}
在浏览器中查看?点击删除
删除后
此时只有两篇文章,测试删除第3篇文章
输入地址http://192.168.255.130:8000/blog/delete/3
(6)实现编辑功能
在templates下的blog文件夹下新建html命名为demo_edit.html
建立后
书写代码如下
{% extends 'blog/demo_base.html' %}
{% block title %}
添加博客{% endblock %}
{% block bodyblock %}
编辑文章
{% csrf_token %}
标题
内容
确认编辑
{% endblock %}
在urls.py中配置路由
代码如下
path('edit/<blog_id>', views.blog_edit, name='blog_edit'),
在views.py中书写视图函数
def?blog_edit(request,blog_id):
#当使用filter获取数据时为Querset对象
e_blog?=?BlogModel.objects.filter(id?=?blog_id)
if?request.method=='GET':
#?当使用filter获取数据时为Querset对象?需用first()取出数据
return?render(request,'blog/demo_edit.html',context={'e_blog':e_blog.first()})
elif?request.method=='POST':
if?e_blog:
title?=?request.POST.get('title')
content?=?request.POST.get('content')
e_blog.update(title=title,content=content)
return?HttpResponse("博客编辑成功")
else:
return?HttpResponse('没有这篇博客!')
else:
return?HttpResponse('不能处理的请求!')
根据视图函数修改demo_edit.html
代码如下
{% extends 'blog/demo_base.html' %}
{% block title %}
添加博客{% endblock %}
{% block bodyblock %}
编辑文章
{% csrf_token %}
标题
内容 {{ e_blog.content }}
确认编辑
{% endblock %}
在demo_list.html中为编辑添加url
代码如下:
{% extends 'blog/demo_base.html' %}
{% block title %}
文章列表{% endblock %}
{% block bodyblock %}
文章列表
标题
操作
{% for blog in blog_list %}
{{ blog.title }}
编辑 | 删除
{% endfor %}
{% endblock %}
在浏览器中查看?
进入列表页面,点击编辑
点击后便可自动进入编辑页面
我们修改内容后,点击确认编辑
之后出现相应提示
返回列表,点击博客标题查看详情
查看结果为
可见,此时我们已经成功完成博客的编辑功能。