[Django]1.实现从前端页面向数据库中插入数据

这几天在学习Django,简单记录一下。
我用到的Django版本是4.0,目前完成的功能如下:
1.可以在浏览器页面上展示本地数据库中的用户信息


浏览用户信息.png

2.可以在浏览器页面上添加数据到本地数据库中
在这里填入用户的基本信息


添加用户信息.png

添加成功或者失败的提示


添加成功.png

在数据库中查看,发现已经添加成功
数据库.png

下面呢,我简单介绍下具体的实现思路

一、Django项目的结构

Django项目的结构.png

上图展示的就是Django项目的结构,主要分为四个部分:
1.manage.py,Django管理主程序。2.bizmindemo这是根目录,该目录的名称和项目名称是一致的。3.bizminapp1,一个项目每开发一个模块就要新建一个APP应用。4.templates,html文件的归置目录。

二、创建APP

1.先创建Django模板,可以直接使用命令行创建,命令如下:

django-admin startproject bizminapp1
也可以通过pycharm进行创建,效果是一样的。

使用pycharm创建Django项目.png

2.创建好模板之后,先启动Django项目,命令如下:

python manage.py runserver
启动之后,在浏览器中输入: localhost:8000,就会看到如下页面:

Django启动成功.png

3.创建APP

在每个Django项目中可以包含多个APP,相当于一个大型项目中的分系统、子模块、功能部件等,相互之间比较独立,但也有联系。创建APP的命令为:
python manage.py startapp bizminapp1
其中bizminapp1为APP的名称,可以任意取。创建好的APP中的文件如下:

bizminapp1文件目录.png

创建好APP之后,记得要在bizmindemo1/settings.py文件中的INSTALLED_APPS中添加APP的名称,我这里就写bizminapp1。如下:
INSTALLED_APPS.png

三、实现浏览器页面显示hello world

1.在bizminapp1中创建路由文件,文件名为urls,如下:
urls.py文件.png

在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,如下:


hello world.png

四、实现在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文件

0001_initial.py.png

4.执行迁移

python manage.py migrate
如果在同一个APP中上述命令已经执行过一次,那么再次执行会无法创建表:

无法创建表.png

需要把django_migrations表中APP名为bizminapp1的记录删除
待删除记录.png

如果执行成功,那么会在数据库中看到一张空表,里面没有数据,如下:
创建成功的表.png

五、向表中插入数据

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进来即可。
接下来刷新浏览器,就会看到数据库中多了一行记录。如下:


bizminapp1_users.png

我们可以改变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后面就可以了,具体如下:

urls.py.png

这段代码的意思是,后续展示用户信息时,需要使用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,可以看到如下信息:


浏览用户信息.png
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 %}

具体位置为:


用户数据.png

然后刷新前端页面,可以看到:


浏览用户信息.png

好啦,我们已经完成了用户信息的展示,接下来继续为大家介绍,如何通过前端添加用户信息到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,可以看到如下页面:

添加用户.png

但是点击上面的添加按钮后,并没有向数据库中插入数据。为什么呢?因为上面只是一个静态的页面,要达到可以向数据库中插入数据的效果,还需要新建一个函数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>

上述代码的位置如下:

添加用户.png

<form action="{% url 'insertUsers' %}" method="post">这句话的意思是,前端点击添加按钮后,就会以post请求的方式请求函数insertUser。
同时,我们需要向bizminapp1/urls.py文件中,添加:
path("users/insert", views.insertUser, name="insertUsers")
然后我们试着访问localhost:8000/users/add,并写入用户信息,点击添加按钮,然后刷新数据看,应该就可以看到前端写的信息,已经添加到了表中,如下:
bizminapp1_users.png

我们点击添加按钮后,注意此时页面的路径,是不是变成了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,并且填入用户信息,点击添加按钮,此时页面显示结果如下:


添加成功.png

我们发现上面出现了两行红色的字,分别点击浏览用户信息、添加用户信息,神奇的事情发生了,页面竟然跳转到了之前已经做好的两个页面。这是因为我们在info.html中加了超链接,超链接指向的地址就是之前已经做好的两个页面。

好了,大功告成,但是我们还需要做一点小小的优化。
布置一个小作业,我们想要在浏览用户信息和添加用户信息的页面也加入上面两个超链接,具体如何实现呢?

上述是一个很简单的功能,然而里面也包含了很多的知识点,我们需要自己手动写一遍才可能全部掌握。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,692评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,482评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,995评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,223评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,245评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,208评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,091评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,929评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,346评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,570评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,739评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,437评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,037评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,677评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,833评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,760评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,647评论 2 354

推荐阅读更多精彩内容