这几天在学习Django,简单记录一下。
我用到的Django版本是4.0,目前完成的功能如下:
1.可以在浏览器页面上展示本地数据库中的用户信息
2.可以在浏览器页面上添加数据到本地数据库中
在这里填入用户的基本信息
添加成功或者失败的提示
在数据库中查看,发现已经添加成功
下面呢,我简单介绍下具体的实现思路
一、Django项目的结构
上图展示的就是Django项目的结构,主要分为四个部分:
1.manage.py,Django管理主程序。2.bizmindemo这是根目录,该目录的名称和项目名称是一致的。3.bizminapp1,一个项目每开发一个模块就要新建一个APP应用。4.templates,html文件的归置目录。
二、创建APP
1.先创建Django模板,可以直接使用命令行创建,命令如下:
django-admin startproject bizminapp1
也可以通过pycharm进行创建,效果是一样的。
2.创建好模板之后,先启动Django项目,命令如下:
python manage.py runserver
启动之后,在浏览器中输入: localhost:8000,就会看到如下页面:
3.创建APP
在每个Django项目中可以包含多个APP,相当于一个大型项目中的分系统、子模块、功能部件等,相互之间比较独立,但也有联系。创建APP的命令为:
python manage.py startapp bizminapp1
其中bizminapp1为APP的名称,可以任意取。创建好的APP中的文件如下:
创建好APP之后,记得要在bizmindemo1/settings.py文件中的INSTALLED_APPS中添加APP的名称,我这里就写bizminapp1。如下:
三、实现浏览器页面显示hello world
1.在bizminapp1中创建路由文件,文件名为urls,如下:
在urls.py文件中,编辑如下代码:
from django.urls import path
from . import views
urlpatterns = [
path("", views.index, name="index")
]
2.在bizminapp1下的views.py文件中,添加index方法,代码如下:
from django.shortcuts import render
from django.http import HttpResponse
# Create your views here.
def index(request):
return HttpResponse("hello world!")
3.配置公共路由,在bizmindemo下的urls.py文件中,添加bizminapp1的路由地址,代码如下:
from django.contrib import admin
from django.urls import path, include
from bizminapp1 import views
urlpatterns = [
path('admin/', admin.site.urls),
path('hello', views.index)
]
其中,path('hello', views.index)即为bizminapp1中index函数的地址。
添加地址之后,在浏览器中输入:localhost:8000/hello,页面中就会显示hello world,如下:
四、实现在mysql数据库中创建表
1.在bizminapp1的models.py文件中,创建一个类:
from django.db import models
from datetime import datetime
# Create your models here.
class Users(models.Model):
name = models.CharField(max_length=32)
age = models.IntegerField(default=20)
phone = models.CharField(max_length=16)
addtime = models.DateTimeField(default=datetime.now)
其中name、age、phone、addtime分别代表数据表中的四个字段,需要注意的是,自增ID列在代码中不需要写,但是在建表时会自动补充。
2.打开bizmindemo1/settings.py文件,将DATABASES替换为mysql的信息,具体代码如下:
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'bizmin',
'USER': 'root',
'PASSWORD': '123456',
'HOST': 'localhost',
'PORT': '3306',
}
}
请注意,上面都是我本地的mysql连接信息,大家一定要把其中的连接信息换成自己所需要连接的mysql库。
3.生成迁移文件
python manage.py makemigrations
可以看到执行上面的命令后,bizminapp1/migrations/目录下,新增了一个0001_initial.py文件
4.执行迁移
python manage.py migrate
如果在同一个APP中上述命令已经执行过一次,那么再次执行会无法创建表:
需要把django_migrations表中APP名为bizminapp1的记录删除
如果执行成功,那么会在数据库中看到一张空表,里面没有数据,如下:
五、向表中插入数据
1.编辑bizminapp1/urls.py文件中的代码,改为:
from django.urls import path
from . import views
urlpatterns = [
path("", views.index, name="index")
]
2.编辑bizmindemo1/urls.py文件中的代码,改为:
from django.contrib import admin
from django.urls import path, include
from bizminapp1 import views
urlpatterns = [
# path('admin/', admin.site.urls),
path('', include("bizminapp1.urls"))
]
3.编辑bizminapp1/views.py文件中的index函数,改为:
def index(request):
bizmin = Users()
bizmin.name = "james"
bizmin.age = "37"
bizmin.phone = "123456"
bizmin.save()
return HttpResponse("首页")
其中Users()就是model.py文件中的User类,import进来即可。
接下来刷新浏览器,就会看到数据库中多了一行记录。如下:
我们可以改变index函数中的内容,多刷新几遍浏览器,给表中添加多条数据。
六、在前端页面展示表中的数据
1.定义一个浏览用户信息的函数,如下:
def indexUser(request):
try:
ulist = Users.objects.all()
context = {'userlist':ulist}
return render(request, "bizminapp/users/index.html", context)
except:
return HttpResponse("没有找到用户信息")
其中Users.objects.all()代表获取表中的数据,render(request, "bizminapp/users/index.html", context)代表返回index.html这个文件中的内容。
具体的,index.html代表什么呢?接下来我们继续介绍~
2.在bizminapp/urls.py文件中添加如下代码:
path("users", views.indexUser, name="indexUser")
这段代码写到原来的path后面就可以了,具体如下:
这段代码的意思是,后续展示用户信息时,需要使用localhost:8000/users这个路径。
3.新建index.html文件
index.html的文件路径为templates/bizminapp/users/index.html,所以需要先创建bizminapp和users这两个文件夹。html中的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<center>
<h1>浏览用户信息</h1>
<table width="800" border="1">
<tr>
<th>ID号</th>
<th>姓名</th>
<th>年龄</th>
<th>电话</th>
<th>添加时间</th>
<th>操作</th>
</tr>
</table>
</center>
</body>
</html>
然后访问localhost:8000/users,可以看到如下信息:
4.继续编辑index.html
在index.html的代码中,添加如下内容:
{% for user in userlist %}
<tr>
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
<td>{{ user.phone }}</td>
<td>{{ user.addtime }}</td>
<td>编辑 删除</td>
</tr>
{% endfor %}
具体位置为:
然后刷新前端页面,可以看到:
好啦,我们已经完成了用户信息的展示,接下来继续为大家介绍,如何通过前端添加用户信息到mysql表中~
七、通过前端页面向mysql表中插入数据
1.编辑bizminapp1/views.py文件,新增一个addUser函数,代码如下:
def addUser(request):
return render(request, "bizminapp/users/add.html")
2.新建add.html文件,和上面提到的index.html文件的位置一样。建好之后,编辑add.html文件,代码如下:
<center>
<h2>用户信息管理</h2>
<h3>添加用户信息</h3>
{%csrf_token%}
<table width="280" border="0">
<tr>
<td>姓名:</td>
<td><input type="text" name="name"/></td>
</tr>
<tr>
<td>年龄:</td>
<td><input type="text" name="age"/></td>
</tr>
<tr>
<td>电话:</td>
<td><input type="text" name="phone"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="添加"/>
<input type="reset" value="重置"/>
</td>
<td></td>
</tr>
</table>
</center>
3.编辑bizminapp1/urls.py文件,在后面新增
path("users/add", views.addUser, name="addUser")
然后访问localhost:8000/users/add,可以看到如下页面:
但是点击上面的添加按钮后,并没有向数据库中插入数据。为什么呢?因为上面只是一个静态的页面,要达到可以向数据库中插入数据的效果,还需要新建一个函数insertUser,来实现上述功能。
4.新建insertUser函数,代码如下:
def insertUser(request):
try:
bizmin = Users()
bizmin.name = request.POST['name']
bizmin.age = request.POST['age']
bizmin.phone = request.POST['phone']
bizmin.save()
context = {'info':'添加成功!'}
except:
context = {'info':'添加失败!'}
return render(request, "bizminapp/users/info.html", context)
同时,我们还需要新建info.html,位置和index.html一样。
那么新建insertUser函数之后,如何才能达到向数据库中添加数据的效果呢?
5.我们只需要在add.html中添加如下代码:
<form action="{% url 'insertUsers' %}" method="post">
</form>
上述代码的位置如下:
<form action="{% url 'insertUsers' %}" method="post">这句话的意思是,前端点击添加按钮后,就会以post请求的方式请求函数insertUser。
同时,我们需要向bizminapp1/urls.py文件中,添加:
path("users/insert", views.insertUser, name="insertUsers")
然后我们试着访问localhost:8000/users/add,并写入用户信息,点击添加按钮,然后刷新数据看,应该就可以看到前端写的信息,已经添加到了表中,如下:
我们点击添加按钮后,注意此时页面的路径,是不是变成了localhost:8000/users/insert,是一个空白页面,这是因为此时页面已经跳转到了info.html,但是这个文件目前为空,我们为了交互友好些,编辑info.html文件,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<center>
<h2>用户信息管理</h2>
<a href="{% url 'indexUser' %}">浏览用户信息</a>
<a href="{% url 'addUser' %}">添加用户信息</a>
<h3>浏览用户信息</h3>
<h4>{{ info }}</h4>
</center>
</body>
</html>
我们再次访问localhost:8000/users/add,并且填入用户信息,点击添加按钮,此时页面显示结果如下:
我们发现上面出现了两行红色的字,分别点击浏览用户信息、添加用户信息,神奇的事情发生了,页面竟然跳转到了之前已经做好的两个页面。这是因为我们在info.html中加了超链接,超链接指向的地址就是之前已经做好的两个页面。
好了,大功告成,但是我们还需要做一点小小的优化。
布置一个小作业,我们想要在浏览用户信息和添加用户信息的页面也加入上面两个超链接,具体如何实现呢?
上述是一个很简单的功能,然而里面也包含了很多的知识点,我们需要自己手动写一遍才可能全部掌握。