今天,小叮当来为大家继续分享Django的干货~
![](https://img.haomeiwen.com/i17096418/ccb564d3e97e0080.png)
主要内容有:项目的搭建复习和博客小案例
一、项目的搭建复习
在xshell中进入我们之前创建的虚拟环境
执行workon
![](https://img.haomeiwen.com/i17096418/ae6f5bb9c5982eb9.png)
执行workon djtest2.1
djtest2.1为我们创建的虚拟环境,忘了的话可以回头看下零基础入手Django(一):基本介绍及环境搭建
![](https://img.haomeiwen.com/i17096418/3c4ff8468be1955c.png)
执行ls 执行cd dj_project dj_project为我们之前创建的用来存储django项目的文件夹
![](https://img.haomeiwen.com/i17096418/e00739ff771ef763.png)
执行pip list 来检查当前环境是否可以进行django项目创建
![](https://img.haomeiwen.com/i17096418/6484cafde69ecf2f.png)
2.执行命令“django -admin startproject 项目名” 来创建项目
我们以创建mysite项目为例
(1)执行命令“django-admin startproject mysite”
执行”ls"查看项目
![](https://img.haomeiwen.com/i17096418/904ae736c95638df.png)
(2)执行cd mysite 进入mysite文件夹
执行ls查看文件
![](https://img.haomeiwen.com/i17096418/2d6c5791eba332f8.png)
执行tree命令查看文件结构
![](https://img.haomeiwen.com/i17096418/cd348ef179d460fd.png)
(3)在pycharm中新建本地普通项目mysite用来进行代码同步
![](https://img.haomeiwen.com/i17096418/cfbc3f797075f603.png)
选择在新窗口打开
![](https://img.haomeiwen.com/i17096418/a7a527eb8012af08.png)
点击ok后,便可在新的pycharm窗口看到新建的项目
![](https://img.haomeiwen.com/i17096418/4ffcadd46b08f7a7.png)
(4)进行代码同步
在Tools中找到“Deployment"找到Configuration
![](https://img.haomeiwen.com/i17096418/a3662a6893a70fe4.png)
配置如下
![](https://img.haomeiwen.com/i17096418/dcc5549d338666e9.png)
点击 Test SFTP connection进行检测
![](https://img.haomeiwen.com/i17096418/7f9147d031c5682a.png)
在mappings配置服务器中项目的路径
![](https://img.haomeiwen.com/i17096418/6f763efad71750f5.png)
值得注意的是,同步时,我们一定要选择项目的最外层目录。
![](https://img.haomeiwen.com/i17096418/45c9e51d6fba6766.png)
配置完成后点击ok即可。
在Tools中找到Deployment 在其中找到Download from ... 将服务器端的代码下载到本地。
![](https://img.haomeiwen.com/i17096418/c48b567882d13f42.png)
可以看到点击后,代码便被飞快地同步到本地
![](https://img.haomeiwen.com/i17096418/61e7dfefbac2e872.png)
(5)配置启动django服务
点击pycharm右上角的小三角
![](https://img.haomeiwen.com/i17096418/1954d0f10972a34d.png)
点击后选择编辑配置
![](https://img.haomeiwen.com/i17096418/7a06298d46561d0f.png)
在配置页面选择左上角的绿色小加号 选择django server
![](https://img.haomeiwen.com/i17096418/5e01cc57ddfdf882.png)
配置django server 取名为mysite 配置host为0.0.0.0
![](https://img.haomeiwen.com/i17096418/931f0527bd02b5dd.png)
配置环境变量
![](https://img.haomeiwen.com/i17096418/e1c7990fb478beb6.png)
新建环境变量DJANGO_SETTINGS_MODULE 值为mysite.settings(项目名.settings)
![](https://img.haomeiwen.com/i17096418/a2d17c8712199c9f.png)
选择服务器端的解释器
![](https://img.haomeiwen.com/i17096418/4376b31c3c867764.png)
点击fix
![](https://img.haomeiwen.com/i17096418/39fab2681bec0095.png)
勾选Enable Django Support 并配置本地的mysite路径和settings文件
![](https://img.haomeiwen.com/i17096418/45d3e3515cf0311a.png)
配置本地mysite路径
![](https://img.haomeiwen.com/i17096418/8f3f53b6e3ab9178.png)
配置settings路径
![](https://img.haomeiwen.com/i17096418/a24fe651e65f8a4f.png)
配置完成后点击apply进行应用后,点击ok
![](https://img.haomeiwen.com/i17096418/73919b2b4fb83287.png)
运行django server 之后若报如下错误
![](https://img.haomeiwen.com/i17096418/02f42b09bc0a5f9b.png)
则从file处进入settings配置python解释器,点击其旁边的修改按钮为其配置ssh认证信息即可。
![](https://img.haomeiwen.com/i17096418/5c8a43723aa37a0c.png)
之后便可启动mysite项目
![](https://img.haomeiwen.com/i17096418/1fd52ae30efb1d94.png)
(6)新建名为blog的app
打开Tools 选中Run manage.py Task...
![](https://img.haomeiwen.com/i17096418/0587337af4ae4487.png)
执行命令startapp blog
![](https://img.haomeiwen.com/i17096418/30715a2378a31e2d.png)
在项目目录处右击选择 Deployment Download ....
![](https://img.haomeiwen.com/i17096418/07ec562b45a31634.png)
下载完成后,便可看到新建的blog
![](https://img.haomeiwen.com/i17096418/4e3e7c69b0380377.png)
(7)对项目进行基本的配置
进入mysite项目的settings.py进行配置
①配置所有主机均可访问
ALLOWED_HOSTS = ['*']
注册app
![](https://img.haomeiwen.com/i17096418/d17f1d3c8b1978e4.png)
②在项目中新建templates目录
![](https://img.haomeiwen.com/i17096418/d1876ff1e4142614.png)
在settings.py中配置对应路径
![](https://img.haomeiwen.com/i17096418/7b895eba5df67991.png)
代码如下
'DIRS': [os.path.join(BASE_DIR,'templates')],
③新建static文件夹,并建立js、images、css子文件夹 用来存放静态文件
![](https://img.haomeiwen.com/i17096418/3e9421ffc51569c8.png)
在settings中配置相应的路径
![](https://img.haomeiwen.com/i17096418/28abb68143a38407.png)
代码如下:
STATICFILES_DIRS = [
os.path.join(BASE_DIR,'static')
]
④配置数据库
在xshell中进入mysql 执行 create database mysite;
![](https://img.haomeiwen.com/i17096418/af02aee18ac18354.png)
在settings中进行配置
![](https://img.haomeiwen.com/i17096418/5a60934b74849b9c.png)
代码如下:
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将其使用
![](https://img.haomeiwen.com/i17096418/73ee6a968c886875.png)
代码如下:
import pymysql
pymysql.install_as_MySQLdb()
(8)配置路由
①在blog文件夹下新建urls.py文件
![](https://img.haomeiwen.com/i17096418/1c194d5a860e1748.png)
②在主目录下的urls.py中 import include 并分配路由
![](https://img.haomeiwen.com/i17096418/00010449e6cc1a20.png)
具体代码如下:
from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path('admin/', admin.site.urls),
path('blog/',include('blog.urls')),
]
到此一个django项目的新建与基本配置就算复习完成了,你掌握了吗?
二、博客小案例
1.数据库中的数据渲染进模板
数据库中的数据传入模板示意图如下
![](https://img.haomeiwen.com/i17096418/07ebc9e52c3cbc0f.png)
视图函数可以查找数据库中的数据,通过context传给模版。模版经过render渲染即可展示在页面上。
2.博客小案例主要功能
在本次博客小案例中,我们主要实现主页、添加页、列表页、详情页这几个功能。
![](https://img.haomeiwen.com/i17096418/1426fa0df72c92a0.png)
我们在建好的mysite项目中,找到建好的templates目录,在其下新建blog目录,在其中新建
”demo_add.html"、“demo_base.html”、"demo_detail.html"
"demo_indesx.html"、“demo_list.html”
![](https://img.haomeiwen.com/i17096418/e9923d535a98da98.png)
(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 %}
文章列表
标题
操作
{% endblock %}
将代码上传到服务端
![](https://img.haomeiwen.com/i17096418/3316ea1f2ce21be8.png)
(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)将配置好的代码上传到服务器后,在浏览器中查看
添加博客
![](https://img.haomeiwen.com/i17096418/dc167c03adea29c9.png)
主页
![](https://img.haomeiwen.com/i17096418/577fab71dd19ac95.png)
列表
![](https://img.haomeiwen.com/i17096418/0f8e3cb172e1bb73.png)
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 映射到数据库
![](https://img.haomeiwen.com/i17096418/af639516d24d5fec.png)
(3)在xshell中进入mysql进行查看
执行 use mysite; 执行 show tables;
![](https://img.haomeiwen.com/i17096418/1de1bf67db67500c.png)
执行desc blog_blogmodel;
![](https://img.haomeiwen.com/i17096418/0eadbb2cc3665d28.png)
3.实现各页面的功能
(1)实现主页
![](https://img.haomeiwen.com/i17096418/c69dcb5e4629a164.png)
代码如下
{% extends 'blog/demo_base.html' %}
{% block title %}
首页{% endblock %}
{% block bodyblock %}
{% endblock %}
在浏览器中查看 点击“添加文章”
![](https://img.haomeiwen.com/i17096418/2fbaa09f6d35bc0a.png)
![](https://img.haomeiwen.com/i17096418/9906a0a3efb4ea4b.png)
点击文章列表
![](https://img.haomeiwen.com/i17096418/dbb51221f471305b.png)
![](https://img.haomeiwen.com/i17096418/476f183c5c230888.png)
(2)实现添加页
在views.py中修改添加视图函数
![](https://img.haomeiwen.com/i17096418/78081ae4ecb1cb79.png)
代码如下
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')
在浏览器中查看,并添加数据,点击“发布博客”
![](https://img.haomeiwen.com/i17096418/6022200503c61847.png)
点击“发布博客"后
![](https://img.haomeiwen.com/i17096418/193f6f7340069c5e.png)
通过xshell在数据库中查看
执行命令”select * from blog_blogmodel;“
![](https://img.haomeiwen.com/i17096418/6939ba38ec1354cd.png)
(3)实现博客列表页
重新定义views.py中的视图函数
![](https://img.haomeiwen.com/i17096418/51d45f825504d18a.png)
代码如下
def blog_list(request):
blogs = BlogModel.objects.all()
return render(request,'blog/demo_list.html',context={'blog_list':blogs})
重新定义博客列表
![](https://img.haomeiwen.com/i17096418/2e3f2e12a82b594f.png)
html代码如下
{% extends 'blog/demo_base.html' %}
{% block title %}
文章列表{% endblock %}
{% block bodyblock %}
文章列表
标题
操作
{% for blog in blog_list %}
{% endfor %}
{% endblock %}
浏览器中查看
![](https://img.haomeiwen.com/i17096418/3dfb3df704ad1b57.png)
数据库中查看
![](https://img.haomeiwen.com/i17096418/9b59832bf5d125a6.png)
(4)实现博客详情页
重新定义views.py中的视图函数
![](https://img.haomeiwen.com/i17096418/cd0150f6b7b9e15a.png)
代码如下
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配置路由
![](https://img.haomeiwen.com/i17096418/c3251e2177e74439.png)
代码如下
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中引用详情页的信息 实现点击文章标题查看文章详情的功能
![](https://img.haomeiwen.com/i17096418/46fdf8f2c8903005.png)
代码如下
{% extends 'blog/demo_base.html' %}
{% block title %}
文章列表{% endblock %}
{% block bodyblock %}
文章列表
标题
操作
{% for blog in blog_list %}
{% endfor %}
{% endblock %}
在浏览器中查看
![](https://img.haomeiwen.com/i17096418/b9e1be38f3800ad7.png)
点击标题后,便跳转到了文章的详情页
![](https://img.haomeiwen.com/i17096418/d3a793e2df3554f4.png)
(5)实现删除功能
在views.py中定义视图函数
![](https://img.haomeiwen.com/i17096418/6e22981252f4f37a.png)
代码如下
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中配置删除时的页面跳转
![](https://img.haomeiwen.com/i17096418/05bb7b5d69b55719.png)
代码如下
{% extends 'blog/demo_base.html' %}
{% block title %}
文章列表{% endblock %}
{% block bodyblock %}
文章列表
标题
操作
{% for blog in blog_list %}
{% endfor %}
{% endblock %}
在浏览器中查看 点击删除
![](https://img.haomeiwen.com/i17096418/952a670932e37728.png)
删除后
![](https://img.haomeiwen.com/i17096418/5c9f598c74ba0b97.png)
此时只有两篇文章,测试删除第3篇文章
输入地址http://192.168.255.130:8000/blog/delete/3
![](https://img.haomeiwen.com/i17096418/53ccf2cd3382a6e0.png)
(6)实现编辑功能
在templates下的blog文件夹下新建html命名为demo_edit.html
![](https://img.haomeiwen.com/i17096418/a4ac165aad56bf81.png)
建立后
![](https://img.haomeiwen.com/i17096418/c392d8ea368fdf47.png)
书写代码如下
{% extends 'blog/demo_base.html' %}
{% block title %}
添加博客{% endblock %}
{% block bodyblock %}
编辑文章
{% csrf_token %}
标题
内容
确认编辑
{% endblock %}
在urls.py中配置路由
![](https://img.haomeiwen.com/i17096418/e2fac558ef0f3d83.png)
代码如下
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
![](https://img.haomeiwen.com/i17096418/8793621aaf569cda.png)
代码如下
{% extends 'blog/demo_base.html' %}
{% block title %}
添加博客{% endblock %}
{% block bodyblock %}
编辑文章
{% csrf_token %}
标题
内容 {{ e_blog.content }}
确认编辑
{% endblock %}
在demo_list.html中为编辑添加url
![](https://img.haomeiwen.com/i17096418/a9c613260cf4726a.png)
代码如下:
{% extends 'blog/demo_base.html' %}
{% block title %}
文章列表{% endblock %}
{% block bodyblock %}
文章列表
标题
操作
{% for blog in blog_list %}
{% endfor %}
{% endblock %}
在浏览器中查看
进入列表页面,点击编辑
![](https://img.haomeiwen.com/i17096418/32c862aa86a016ad.png)
点击后便可自动进入编辑页面
![](https://img.haomeiwen.com/i17096418/9fceff74f2db8b8c.png)
我们修改内容后,点击确认编辑
![](https://img.haomeiwen.com/i17096418/755246120bdf9c34.png)
之后出现相应提示
![](https://img.haomeiwen.com/i17096418/5d0277bf487d9e5a.png)
返回列表,点击博客标题查看详情
![](https://img.haomeiwen.com/i17096418/a0ecf7a0568fb891.png)
查看结果为
![](https://img.haomeiwen.com/i17096418/6271564f35d4a66a.png)
可见,此时我们已经成功完成博客的编辑功能。
网友评论