当前位置: 首页>编程语言>正文

零基础入手Django(九):模型基础4

今天,小叮当来为大家继续分享Django的干货~

零基础入手Django(九):模型基础4,第1张

主要内容有:项目的搭建复习和博客小案例

一、项目的搭建复习

在xshell中进入我们之前创建的虚拟环境

执行workon

零基础入手Django(九):模型基础4,第2张

执行workon djtest2.1?

djtest2.1为我们创建的虚拟环境,忘了的话可以回头看下零基础入手Django(一):基本介绍及环境搭建

零基础入手Django(九):模型基础4,第3张

执行ls? 执行cd dj_project? ? ?dj_project为我们之前创建的用来存储django项目的文件夹

零基础入手Django(九):模型基础4,第4张

执行pip list?来检查当前环境是否可以进行django项目创建

零基础入手Django(九):模型基础4,第5张

2.执行命令“django -admin startproject 项目名” 来创建项目

我们以创建mysite项目为例

(1)执行命令“django-admin startproject mysite

执行”ls"查看项目

零基础入手Django(九):模型基础4,第6张

(2)执行cd mysite?进入mysite文件夹?

?执行ls查看文件

零基础入手Django(九):模型基础4,第7张

执行tree命令查看文件结构

零基础入手Django(九):模型基础4,第8张

(3)在pycharm中新建本地普通项目mysite用来进行代码同步

零基础入手Django(九):模型基础4,第9张

选择在新窗口打开

零基础入手Django(九):模型基础4,第10张

点击ok后,便可在新的pycharm窗口看到新建的项目

零基础入手Django(九):模型基础4,第11张

(4)进行代码同步

在Tools中找到“Deployment"找到Configuration

零基础入手Django(九):模型基础4,第12张

配置如下

零基础入手Django(九):模型基础4,第13张

点击 Test SFTP connection进行检测

零基础入手Django(九):模型基础4,第14张

在mappings配置服务器中项目的路径

零基础入手Django(九):模型基础4,第15张

值得注意的是,同步时,我们一定要选择项目的最外层目录

零基础入手Django(九):模型基础4,第16张

配置完成后点击ok即可。

在Tools中找到Deployment?在其中找到Download from ...?将服务器端的代码下载到本地。

零基础入手Django(九):模型基础4,第17张

可以看到点击后,代码便被飞快地同步到本地

零基础入手Django(九):模型基础4,第18张

(5)配置启动django服务

点击pycharm右上角的小三角

零基础入手Django(九):模型基础4,第19张

点击后选择编辑配置

零基础入手Django(九):模型基础4,第20张

在配置页面选择左上角的绿色小加号?选择django server

零基础入手Django(九):模型基础4,第21张

配置django server?取名为mysite?配置host为0.0.0.0

零基础入手Django(九):模型基础4,第22张

配置环境变量

零基础入手Django(九):模型基础4,第23张

新建环境变量DJANGO_SETTINGS_MODULE?值为mysite.settings(项目名.settings)

零基础入手Django(九):模型基础4,第24张

选择服务器端的解释器

零基础入手Django(九):模型基础4,第25张

点击fix

零基础入手Django(九):模型基础4,第26张

勾选Enable Django Support 并配置本地的mysite路径和settings文件

零基础入手Django(九):模型基础4,第27张

配置本地mysite路径

零基础入手Django(九):模型基础4,第28张

配置settings路径

零基础入手Django(九):模型基础4,第29张

配置完成后点击apply进行应用后,点击ok

零基础入手Django(九):模型基础4,第30张

运行django server 之后若报如下错误

零基础入手Django(九):模型基础4,第31张

则从file处进入settings配置python解释器,点击其旁边的修改按钮为其配置ssh认证信息即可。

零基础入手Django(九):模型基础4,第32张

之后便可启动mysite项目

零基础入手Django(九):模型基础4,第33张

(6)新建名为blog的app

打开Tools?选中Run manage.py Task...

零基础入手Django(九):模型基础4,第34张

执行命令startapp blog

零基础入手Django(九):模型基础4,第35张

在项目目录处右击选择 Deployment Download ....

零基础入手Django(九):模型基础4,第36张

下载完成后,便可看到新建的blog

零基础入手Django(九):模型基础4,第37张

(7)对项目进行基本的配置

进入mysite项目的settings.py进行配置

①配置所有主机均可访问

ALLOWED_HOSTS?=?['*']

注册app

零基础入手Django(九):模型基础4,第38张

②在项目中新建templates目录

零基础入手Django(九):模型基础4,第39张

在settings.py中配置对应路径

零基础入手Django(九):模型基础4,第40张

代码如下

'DIRS':?[os.path.join(BASE_DIR,'templates')],

③新建static文件夹,并建立js、images、css子文件夹 用来存放静态文件

零基础入手Django(九):模型基础4,第41张

在settings中配置相应的路径

零基础入手Django(九):模型基础4,第42张

代码如下:

STATICFILES_DIRS?=?[

os.path.join(BASE_DIR,'static')

]

④配置数据库

在xshell中进入mysql 执行?create database mysite;

零基础入手Django(九):模型基础4,第43张

在settings中进行配置

零基础入手Django(九):模型基础4,第44张

代码如下:

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将其使用

零基础入手Django(九):模型基础4,第45张

代码如下:

import?pymysql

pymysql.install_as_MySQLdb()

(8)配置路由

①在blog文件夹下新建urls.py文件

零基础入手Django(九):模型基础4,第46张

②在主目录下的urls.py中 import include 并分配路由

零基础入手Django(九):模型基础4,第47张

具体代码如下:

from?django.contrib?import?admin

from?django.urls?import?path,include

urlpatterns?=?[

path('admin/',?admin.site.urls),

path('blog/',include('blog.urls')),

]

到此一个django项目的新建与基本配置就算复习完成了,你掌握了吗?

二、博客小案例

1.数据库中的数据渲染进模板

数据库中的数据传入模板示意图如下

零基础入手Django(九):模型基础4,第48张

视图函数可以查找数据库中的数据,通过context传给模版。模版经过render渲染即可展示在页面上。

2.博客小案例主要功能

在本次博客小案例中,我们主要实现主页、添加页、列表页、详情页这几个功能。

零基础入手Django(九):模型基础4,第49张

我们在建好的mysite项目中,找到建好的templates目录,在其下新建blog目录,在其中新建

”demo_add.html"、“demo_base.html”、"demo_detail.html"

"demo_indesx.html"、“demo_list.html”

零基础入手Django(九):模型基础4,第50张

(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 %}

将代码上传到服务端

零基础入手Django(九):模型基础4,第51张

(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)将配置好的代码上传到服务器后,在浏览器中查看

添加博客

零基础入手Django(九):模型基础4,第52张

主页

零基础入手Django(九):模型基础4,第53张

列表

零基础入手Django(九):模型基础4,第54张

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?映射到数据库

零基础入手Django(九):模型基础4,第55张

(3)在xshell中进入mysql进行查看

执行?use mysite;?执行?show tables;

零基础入手Django(九):模型基础4,第56张

执行desc blog_blogmodel;

零基础入手Django(九):模型基础4,第57张

3.实现各页面的功能

(1)实现主页

零基础入手Django(九):模型基础4,第58张

代码如下

{% extends 'blog/demo_base.html' %}

{% block title %}

首页{% endblock %}

{% block bodyblock %}

添加文章

文章列表

{% endblock %}

在浏览器中查看? ?点击“添加文章”

零基础入手Django(九):模型基础4,第59张
零基础入手Django(九):模型基础4,第60张

点击文章列表

零基础入手Django(九):模型基础4,第61张
零基础入手Django(九):模型基础4,第62张

(2)实现添加页

在views.py中修改添加视图函数

零基础入手Django(九):模型基础4,第63张

代码如下

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')

在浏览器中查看,并添加数据,点击“发布博客

零基础入手Django(九):模型基础4,第64张

点击“发布博客"后

零基础入手Django(九):模型基础4,第65张

通过xshell在数据库中查看

执行命令”select * from blog_blogmodel;

零基础入手Django(九):模型基础4,第66张

(3)实现博客列表页

重新定义views.py中的视图函数

零基础入手Django(九):模型基础4,第67张

代码如下

def?blog_list(request):

blogs?=?BlogModel.objects.all()

return?render(request,'blog/demo_list.html',context={'blog_list':blogs})

重新定义博客列表

零基础入手Django(九):模型基础4,第68张

html代码如下

{% extends 'blog/demo_base.html' %}

{% block title %}

文章列表{% endblock %}

{% block bodyblock %}

文章列表

标题

操作

{% for blog in blog_list %}

{{ blog.title }}

编辑 | 删除

{% endfor %}

{% endblock %}

浏览器中查看

零基础入手Django(九):模型基础4,第69张

数据库中查看

零基础入手Django(九):模型基础4,第70张

(4)实现博客详情页

重新定义views.py中的视图函数

零基础入手Django(九):模型基础4,第71张

代码如下

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配置路由

零基础入手Django(九):模型基础4,第72张

代码如下

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中引用详情页的信息?实现点击文章标题查看文章详情的功能

零基础入手Django(九):模型基础4,第73张

代码如下

{% extends 'blog/demo_base.html' %}

{% block title %}

文章列表{% endblock %}

{% block bodyblock %}

文章列表

标题

操作

{% for blog in blog_list %}

{{ blog.title }}

编辑 | 删除

{% endfor %}

{% endblock %}

在浏览器中查看

零基础入手Django(九):模型基础4,第74张

点击标题后,便跳转到了文章的详情页

零基础入手Django(九):模型基础4,第75张

(5)实现删除功能

在views.py中定义视图函数

零基础入手Django(九):模型基础4,第76张

代码如下

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中配置删除时的页面跳转

零基础入手Django(九):模型基础4,第77张

代码如下

{% extends 'blog/demo_base.html' %}

{% block title %}

文章列表{% endblock %}

{% block bodyblock %}

文章列表

标题

操作

{% for blog in blog_list %}

{{ blog.title }}

编辑 | 删除

{% endfor %}

{% endblock %}

在浏览器中查看?点击删除

零基础入手Django(九):模型基础4,第78张

删除后

零基础入手Django(九):模型基础4,第79张

此时只有两篇文章,测试删除第3篇文章

输入地址http://192.168.255.130:8000/blog/delete/3

零基础入手Django(九):模型基础4,第80张

(6)实现编辑功能

在templates下的blog文件夹下新建html命名为demo_edit.html

零基础入手Django(九):模型基础4,第81张

建立后

零基础入手Django(九):模型基础4,第82张

书写代码如下

{% extends 'blog/demo_base.html' %}

{% block title %}

添加博客{% endblock %}

{% block bodyblock %}

编辑文章

{% csrf_token %}

标题

内容

确认编辑

{% endblock %}

在urls.py中配置路由

零基础入手Django(九):模型基础4,第83张

代码如下

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

零基础入手Django(九):模型基础4,第84张

代码如下

{% extends 'blog/demo_base.html' %}

{% block title %}

添加博客{% endblock %}

{% block bodyblock %}

编辑文章

{% csrf_token %}

标题

内容 {{ e_blog.content }}

确认编辑

{% endblock %}

在demo_list.html中为编辑添加url

零基础入手Django(九):模型基础4,第85张

代码如下:

{% extends 'blog/demo_base.html' %}

{% block title %}

文章列表{% endblock %}

{% block bodyblock %}

文章列表

标题

操作

{% for blog in blog_list %}

{{ blog.title }}

编辑 | 删除

{% endfor %}

{% endblock %}

在浏览器中查看?

进入列表页面,点击编辑

零基础入手Django(九):模型基础4,第86张

点击后便可自动进入编辑页面

零基础入手Django(九):模型基础4,第87张

我们修改内容后,点击确认编辑

零基础入手Django(九):模型基础4,第88张

之后出现相应提示

零基础入手Django(九):模型基础4,第89张

返回列表,点击博客标题查看详情

零基础入手Django(九):模型基础4,第90张

查看结果为

零基础入手Django(九):模型基础4,第91张

可见,此时我们已经成功完成博客的编辑功能。


https://www.xamrdz.com/lan/5q31886624.html

相关文章: