【Python Django Web项目】利用 Python+Django+Pycharm+MySQL 搭建一个自己的Web网站项目的步骤(详细图文)下集

这篇文章还有 上集 可以看, 若没看过 上集 想看的可以点以下链接进去看

【Python Django Web项目】利用 Python+Django+Pycharm+MySQL 搭建一个自己的Web网站项目的步骤(详细图文)上集

今天我们要来介绍一下, 利用 Python+Django+Pycharm+MySQL 搭建一个自己的Web网站项目有关于以下动作的说明

创建app网站应用

注册app

配置访问路径url路由

编写views视图函数

创建模板templates和编写html网页模板文件

利用 Django ORM框架 连接操作 MySQL数据库

我们先进入Pycharmmysite项目当中, 如图
![在这里插入图片描述]( https://img-blog.csdnimg.cn/3584b278435e439fae835ff300d99cb9.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
终端输入 python manage.py runserver 按Enter键, 将Django网站服务器运作起来 如下
![在这里插入图片描述]( https://img-blog.csdnimg.cn/63f42a2152894207b49b1c155d2e6f28.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
点击网站链接 http://127.0.0.1:8000/ 默认浏览器会打开我们的网站网页
![在这里插入图片描述]( https://img-blog.csdnimg.cn/86749e28f9f5406f97cc65b1393ed5c8.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
其实有另外一种方式可以输入manage.py后面接着的命令

在终端, 按 CTRL-CDjango网站服务器断开![在这里插入图片描述]( https://img-blog.csdnimg.cn/157488420b6d4787835e8d75bb422b29.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
Pycharm点击 工具 再点击 运行manage.py任务 如图
![在这里插入图片描述]( https://img-blog.csdnimg.cn/d7208a6cb78942979be47306441a716e.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
进入以下画面, 输入 runserver 按Enter键, 将Django网站服务器运作起来 (这个时候就不用再加 python manage.py 这个语句了, 并且可以得到 manage.py@mysite 这个命令输入窗口) 如下
![在这里插入图片描述]( https://img-blog.csdnimg.cn/319545aa98ad4ec5b483b3fc975faf62.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
![在这里插入图片描述]( https://img-blog.csdnimg.cn/754ecaaad4ad4c799dd254a1714fbe32.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

后续为了方便演示, 我们还是都在 终端 输入命令

接下来, 首先我们需要在 Django 中,创建一个 app网站应用 , 命令如下

python manage.py startapp app01 , 这样我们创建了一个名称叫做 app01app网站应用
![在这里插入图片描述]( https://img-blog.csdnimg.cn/c691b56b82df4d56a8001951a3044f79.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
![在这里插入图片描述]( https://img-blog.csdnimg.cn/4ceb0181cfd74c0bb276a8ecf8999a83.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
点击 展开 app01 文件夹, 可以看到以下相应的文件

简单解释一下有两个重要的文件:

models.py: 对数据库操作要用到

views.py: 视图函数编写的放置位置
![在这里插入图片描述]( https://img-blog.csdnimg.cn/32d7f544a121479da0aded41fc7b54a7.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
在创建完app后,我们应该在 settings.py 中注册app

注册的位置, mysite->settings.py->INSTALLED_APPS , 在后面添加上自己的app名称 如图
![在这里插入图片描述]( https://img-blog.csdnimg.cn/3e1cfcf6431849c082524cee0aba4e1e.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
app名称要如何写 , 如图所示 app名称是 ‘app01.apps.App01Config’ ( 在 app01 文件夹下的 apps.pyApp01Config )
![在这里插入图片描述]( https://img-blog.csdnimg.cn/aab52996e53c4542a1e51b5735bfcb22.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
将 app名称 填入 注册的位置 如图所示

‘app01.apps.App01Config’

![在这里插入图片描述]( https://img-blog.csdnimg.cn/837c513860a2425880631cbf4682c517.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
再下来要配置访问路径 url路由

进入 urls.py 如图
![在这里插入图片描述]( https://img-blog.csdnimg.cn/9d5a8cf9363d417eb4f18c2a800a26e9.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
先从 app01导入 views.py , 将来的视图函数要写在 views.py 里面, 代码如下

from app01 import views

![在这里插入图片描述]( https://img-blog.csdnimg.cn/9e50790235084929baf7651b533c7bac.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
我们增加了一个名称叫做 index/ 的访问路径, 将来要在 views.py 下写一个叫做 index 的视图函数, 代码如下

    # http://127.0.0.1:8000/index/ -> 视图函数index
    path('index/', views.index),

![在这里插入图片描述]( https://img-blog.csdnimg.cn/13cdc544d78348dca2fe8ec6d73e01a2.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
再下来要来编写 views 视图函数

进入 views.py 如图
![在这里插入图片描述]( https://img-blog.csdnimg.cn/6a1b2888bd7e4eb0a6a782ae4e663bad.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
render 后面再追加一个 HttpResponse 引入他等一下要用
![在这里插入图片描述]( https://img-blog.csdnimg.cn/aa25eaef2c5b4698ae0ec9b1d1da9f2e.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
编写 views.py 里面的视图函数, 代码如下

def index(request):
    return HttpResponse('欢迎使用')

![在这里插入图片描述]( https://img-blog.csdnimg.cn/e8b3b03cca094b4a831ad812f2498ae3.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
在终端输入 python manage.py runserver 按Enter键, 将Django网站服务器运作起来 如下
![在这里插入图片描述]( https://img-blog.csdnimg.cn/55db869ee4ac4a4f906b27c306db6137.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
![在这里插入图片描述]( https://img-blog.csdnimg.cn/f076c2bb7624402bb3c9d318a9e3b597.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
点击网站链接 http://127.0.0.1:8000/ 默认浏览器会打开我们的网站网页, 结果出现报错画面
![在这里插入图片描述]( https://img-blog.csdnimg.cn/84cb920fe69f47f6b6d3d34bdbddd047.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
报错信息是说找不到页面

注意在信息中有两个页面可以使用, 其中 index 这个页面就是我们自己写的, 所以后面我们就去访问index这个页面
在这里插入图片描述
在浏览器地址栏 http://127.0.0.1:8000/ 后面加入 index 这个页面

http://127.0.0.1:8000/index 按Enter键 得到如下画面
![在这里插入图片描述]( https://img-blog.csdnimg.cn/45d207b29191402ab75363c2862a4dcb.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
如此先前我们在 views.py 下写一个叫做 index 的视图函数, 就起作用了

接下来我们要创建模板templates文件夹和编写html网页模板文件, 这样我们就可以显示html页面

首先在app01文件夹下建立一个templates文件夹, 这是专门放置app01的html网页模板文件的地方
![在这里插入图片描述]( https://img-blog.csdnimg.cn/7bc614c158614bef8cf4ff080b6e3622.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
输入 templates 按Enter键
![在这里插入图片描述]( https://img-blog.csdnimg.cn/155fef3e67194bd7b6eea81fcbd42c16.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
进入以下画面, 看到了 templates 文件夹
![在这里插入图片描述]( https://img-blog.csdnimg.cn/a0cf9313b5864719b4da1ed1b89b3bf2.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
进入 urls.py 如图
![在这里插入图片描述]( https://img-blog.csdnimg.cn/10849ffaf631466995b3803e138d9ea0.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
我们增加了一个名称叫做 user/list/ 的访问路径, 将来要在 views.py 下写一个叫做 user_list 的视图函数, 代码如下

	path('user/list/', views.user_list),

![在这里插入图片描述]( https://img-blog.csdnimg.cn/accf752882864dfdaf34ba80ea8be484.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
进入 views.py 如图
![在这里插入图片描述]( https://img-blog.csdnimg.cn/6c0d99b639324547851b386576188c69.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
编写 views.py 里面的视图函数, 代码如下

def user_list(request):
    return render(request, 'user_list.html')

![在这里插入图片描述]( https://img-blog.csdnimg.cn/3f8c12b74c984aecbada5ebcfa6e1440.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
进入 templates 文件夹 如图
![在这里插入图片描述]( https://img-blog.csdnimg.cn/f25ef5d6702540dd89a2562bc217f9ef.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
新建一个 user_list.html 的html网页模板文件
![在这里插入图片描述]( https://img-blog.csdnimg.cn/470f94eadc3440a0a5a965784fc4823a.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
![在这里插入图片描述]( https://img-blog.csdnimg.cn/afba6085779e4459b73f1cbaf259bae9.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
![在这里插入图片描述]( https://img-blog.csdnimg.cn/401b10a7b2f84b1784d05edd9ff89ce1.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
编写一段 html代码 如下

    <h1>用户列表</h1>

![在这里插入图片描述]( https://img-blog.csdnimg.cn/e1ca10ed5b254bee9c96d585a3ed47d5.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
点击网站链接 http://127.0.0.1:8000/ 默认浏览器会打开我们的网站网页, 出现以下画面
![在这里插入图片描述]( https://img-blog.csdnimg.cn/67515cde386445bba2e85ff6b3700f0f.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
在浏览器地址栏 http://127.0.0.1:8000/ 后面加入 user_list 这个页面

http://127.0.0.1:8000/user_list 按Enter键 得到如下画面
![在这里插入图片描述]( https://img-blog.csdnimg.cn/4f3473f8877a4d5a97d5f3b54e167b0c.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
如此先前我们在 views.py 下写一个叫做 user_list 的视图函数, 就起作用了

在这里我们说明一下, html网页模板文件的搜寻取用顺序, 我们看到在项目根目录下有一个叫templates的文件夹, 在app01文件夹下也有一个叫templates的文件夹, 他的搜寻顺序, 是先搜寻根目录下的templates文件夹, 搜寻不到后再去app01文件夹下的templates文件夹去搜寻取用
![在这里插入图片描述]( https://img-blog.csdnimg.cn/5e9ac720224e40c0a2cab8de83bfe900.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
我们现在就来试一下, 在项目根目录下templates文件夹, 编写一个 user_list.htmlhtml网页模板文件, 这次显示的内容是 用户列表, html网页模板文件位置在根目录下 如下图
![在这里插入图片描述]( https://img-blog.csdnimg.cn/43bca2601437401f93d0b0d6f9192ab7.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
在浏览器地址栏 http://127.0.0.1:8000/user_list 按Enter键 得到如下画面

我们可以看出来 html网页模板文件 , 是优先取用在项目根目录下templates文件夹下的模板文件 user_list.html
![在这里插入图片描述]( https://img-blog.csdnimg.cn/234e5a6a98ff4264bb3e032d5ddd3444.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
接下来我们来说, 利用 Django ORM框架 连接操作 MySQL数据库 的方法

进入 models.py 如图
![在这里插入图片描述]( https://img-blog.csdnimg.cn/93481f9d6d0f4c9492112709371f8731.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
编写 代码如下

class UserInfo(models.Model):
    name = models.CharField(max_length=32)
    password = models.CharField(max_length=64)
    age = models.IntegerField()

![在这里插入图片描述]( https://img-blog.csdnimg.cn/ff22c0c295844971a995b249144aaf8a.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
这时候我们要进入MySQL的 MySQL Workbench 8.0 CE 去操作数据库, 查看 django_mysql 这个数据库
![在这里插入图片描述]( https://img-blog.csdnimg.cn/427d9be99bfe4755b02888e4c7b9392a.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
进入以下画面, 点击 Local instance MySQL80
![在这里插入图片描述]( https://img-blog.csdnimg.cn/539ed3d92ed148ff8675fafaf347a0c1.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
进入以下画面
![在这里插入图片描述]( https://img-blog.csdnimg.cn/0ea77b5f241849ffba89685271d0b9d7.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
点击 Schemas , 这个时候左侧就可以看到已经存在的数据库
![在这里插入图片描述]( https://img-blog.csdnimg.cn/5cd6879e0d094bf6a9c4bc0cb149200c.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
这时候我们看到 名称为 django_mysql 的数据库 Tables 下面没有 UserInfo 这张表, 等一下我们要进行Django的数据库表迁移同步, 接下来我们就要来进行迁移同步的动作
![在这里插入图片描述]( https://img-blog.csdnimg.cn/b806fd15117a4b6c9d7cb7525f458d81.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
我们要执行以下两条命令,迁移同步数据库表到 MySQL数据库

python manage.py makemigrations

python manage.py migrate

在终端, 按 CTRL-C 将Django网站服务器断开 如图
![在这里插入图片描述]( https://img-blog.csdnimg.cn/f3c25ec31b2d4d22a34a45401ed9c859.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
在终端输入 python manage.py makemigrations 按Enter键 如图
![在这里插入图片描述]( https://img-blog.csdnimg.cn/14763688c8aa4a34a36b506ba25dba99.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
在终端输入 python manage.py migrate 按Enter键 如图
![在这里插入图片描述]( https://img-blog.csdnimg.cn/dfea20e07e864811b8a35040e7b62c79.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
点击这个刷新按钮, 就可以看到迁移同步数据库表的结果
![在这里插入图片描述]( https://img-blog.csdnimg.cn/5b5af158b34a47978d6af26ea4f8d5c7.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
将表结构展开, 就可以看到我们新编写的表结构被同步进来了 ( id是自动加的, 我们不用去写他 ) (表的名称叫做 app01_user_info 这是我们要注意的) 如图

在这里插入图片描述

接下来我们在表 app01_user_info 中添加几个数据, 好作为后面演示用

将鼠标移到这个表格处, 点击进入数据编辑区 如图
![在这里插入图片描述]( https://img-blog.csdnimg.cn/41e8178e2ddc4f65bfffafe4cf71729f.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
点击 插入一条新数据
![在这里插入图片描述]( https://img-blog.csdnimg.cn/63c65346380649eea0bf5102f16ab452.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
输入 张三 李四 刘林 的三笔演示资料, 点击 Apply 按钮将数据存好
![在这里插入图片描述]( https://img-blog.csdnimg.cn/3afe92c40720492cb62a5dc72bf750a8.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
点击 Apply 按钮
![在这里插入图片描述]( https://img-blog.csdnimg.cn/e3c2ae3d38ab4dfe9889ffec0ec0f8b3.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
点击 Finish 按钮
![在这里插入图片描述]( https://img-blog.csdnimg.cn/a18738bea7794fbc8b07491a2651c254.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
如画面所示 我们已经输入好数据了
![在这里插入图片描述]( https://img-blog.csdnimg.cn/3a66439f2eb84d998b870abf23d9050e.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
接下来我们要把数据库的数据展示在网页上给使用者看

进入 urls.py 如图

我们增加了一个名称叫做 info/list/ 的访问路径, 将来要在 views.py 下写一个叫做 info_list 的视图函数, 代码如下

    path('info/list/', views.info_list),

![在这里插入图片描述]( https://img-blog.csdnimg.cn/2c03123a3d054ad1bc39ccf49a4c8872.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
进入 views.py 如图
![在这里插入图片描述]( https://img-blog.csdnimg.cn/4d56464970f14c5a91368b3edf66b90e.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
先从 app01models 导入 UserInfo 这个类(class) 代码如下

from app01.models import UserInfo

![在这里插入图片描述]( https://img-blog.csdnimg.cn/45852ec84599423a9eeb11bab4da37f4.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
编写 views.py 里面的视图函数, 代码如下

def info_list(request):
    data_list = UserInfo.objects.all()

    return render(request, "info_list.html", {"data_list": data_list})

![在这里插入图片描述]( https://img-blog.csdnimg.cn/52551648ed824da7910d8746432e1a59.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
进入 templates 文件夹 如图
![在这里插入图片描述]( https://img-blog.csdnimg.cn/16bd78451c6c45859662055210a00fdf.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
新建一个 info_list.html 的html网页模板文件
![在这里插入图片描述]( https://img-blog.csdnimg.cn/ca8a26f119d548bc926eca532353b00b.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

![在这里插入图片描述]( https://img-blog.csdnimg.cn/9439b861f4b6491ab42a7d2a7f5bafd3.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
![在这里插入图片描述]( https://img-blog.csdnimg.cn/24efaff30f964ad99b3f9952f9b8413e.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
先把 Title 换成 INFO列表
![在这里插入图片描述]( https://img-blog.csdnimg.cn/06170e7085544bb8944bdcd03e9111f7.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
编写一段 html代码 如下

<table border="1">
    <thead>
    <tr>
        <td>id</td>
        <td>姓名</td>
        <td>密码</td>
        <td>年龄</td>
    </tr>
    </thead>
    <tbody>
    {% for obj in data_list %}
        <tr>
            <td>{{ obj.id }}</td>
            <td>{{ obj.name }}</td>
            <td>{{ obj.password }}</td>
            <td>{{ obj.age }}</td>
        </tr>
    {% endfor %}
    </tbody>
</table>

![在这里插入图片描述]( https://img-blog.csdnimg.cn/dc0734e9381a47abb6a2674caccee72b.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
在终端输入 python manage.py runserver 按Enter键, 将Django网站服务器运作起来 如下
![在这里插入图片描述]( https://img-blog.csdnimg.cn/e7afcb0d493a4fa9921fa68d06deb692.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA
,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
点击网站链接 http://127.0.0.1:8000/ 默认浏览器会打开我们的网站网页
![在这里插入图片描述]( https://img-blog.csdnimg.cn/bfa3d7d85c55407d978c4aa320a198b4.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
在浏览器地址栏 http://127.0.0.1:8000/ 后面加入 info/list/ 这个页面

http://127.0.0.1:8000/info/list/ 按Enter键 得到如下画面
![在这里插入图片描述]( https://img-blog.csdnimg.cn/9b35e7d22ffe4a549e3df992e48f3b52.png?x-oss-process=image/watermark ,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVob2NhdA==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
至此,就完成了个人开发 Django Web网站项目的软件设计基础了, 接下来就可以继续完善自己的网站Web页面了

非常感谢您耐心的阅读本篇文章, 在这里向您推荐一款非常好用的英语学习工具, 详情可以参考以下这个链接
【英语学习工具】学习英语硬背硬记太难了, 在这里解说 LeHoCat 提供免费的 视频集 工具的使用方法, 看视频学英语的工具, 制作英语教学课件的工具, 帮助自学英语(详细图文)

若想要进一步了解 乐活的猫 LeHoCat 请到 乐活的猫 LeHoCat https://www.lehocat.com/ 官网浏览相关信息

谢谢再会!

为了完善本篇博客文章, 有参考了以下的视频

2022 B站最详细django3教程(django从入门到实践)
视频链接 https://www.bilibili.com/video/BV1NL41157ph?from=search&seid=10773130106059695991&spm_id_from=333.337.0.0

posted @ 2022-04-03 22:36  lehocat  阅读(389)  评论(0)    收藏  举报