[Django]1.實現(xiàn)從前端頁面向數據庫中插入數據

這幾天在學習Django伶跷,簡單記錄一下幻捏。
我用到的Django版本是4.0,目前完成的功能如下:
1.可以在瀏覽器頁面上展示本地數據庫中的用戶信息


瀏覽用戶信息.png

2.可以在瀏覽器頁面上添加數據到本地數據庫中
在這里填入用戶的基本信息


添加用戶信息.png

添加成功或者失敗的提示


添加成功.png

在數據庫中查看,發(fā)現(xiàn)已經添加成功
數據庫.png

下面呢弛姜,我簡單介紹下具體的實現(xiàn)思路

一糜芳、Django項目的結構

Django項目的結構.png

上圖展示的就是Django項目的結構飒货,主要分為四個部分:
1.manage.py魄衅,Django管理主程序。2.bizmindemo這是根目錄塘辅,該目錄的名稱和項目名稱是一致的晃虫。3.bizminapp1,一個項目每開發(fā)一個模塊就要新建一個APP應用扣墩。4.templates哲银,html文件的歸置目錄。

二呻惕、創(chuàng)建APP

1.先創(chuàng)建Django模板荆责,可以直接使用命令行創(chuàng)建,命令如下:

django-admin startproject bizminapp1
也可以通過pycharm進行創(chuàng)建亚脆,效果是一樣的做院。

使用pycharm創(chuàng)建Django項目.png

2.創(chuàng)建好模板之后,先啟動Django項目濒持,命令如下:

python manage.py runserver
啟動之后键耕,在瀏覽器中輸入: localhost:8000,就會看到如下頁面:

Django啟動成功.png

3.創(chuàng)建APP

在每個Django項目中可以包含多個APP柑营,相當于一個大型項目中的分系統(tǒng)屈雄、子模塊、功能部件等由境,相互之間比較獨立棚亩,但也有聯(lián)系。創(chuàng)建APP的命令為:
python manage.py startapp bizminapp1
其中bizminapp1為APP的名稱虏杰,可以任意取讥蟆。創(chuàng)建好的APP中的文件如下:

bizminapp1文件目錄.png

創(chuàng)建好APP之后,記得要在bizmindemo1/settings.py文件中的INSTALLED_APPS中添加APP的名稱纺阔,我這里就寫bizminapp1瘸彤。如下:
INSTALLED_APPS.png

三、實現(xiàn)瀏覽器頁面顯示hello world

1.在bizminapp1中創(chuàng)建路由文件笛钝,文件名為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

四挡毅、實現(xiàn)在mysql數據庫中創(chuàng)建表

1.在bizminapp1的models.py文件中蒜撮,創(chuàng)建一個類:
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
可以看到執(zhí)行上面的命令后邑时,bizminapp1/migrations/目錄下奴紧,新增了一個0001_initial.py文件

0001_initial.py.png

4.執(zhí)行遷移

python manage.py migrate
如果在同一個APP中上述命令已經執(zhí)行過一次,那么再次執(zhí)行會無法創(chuàng)建表:

無法創(chuàng)建表.png

需要把django_migrations表中APP名為bizminapp1的記錄刪除
待刪除記錄.png

如果執(zhí)行成功晶丘,那么會在數據庫中看到一張空表黍氮,里面沒有數據,如下:
創(chuàng)建成功的表.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代表什么呢盒件?接下來我們繼續(xù)介紹~

2.在bizminapp/urls.py文件中添加如下代碼:

path("users", views.indexUser, name="indexUser")
這段代碼寫到原來的path后面就可以了蹬碧,具體如下:

urls.py.png

這段代碼的意思是,后續(xù)展示用戶信息時炒刁,需要使用localhost:8000/users這個路徑恩沽。

3.新建index.html文件

index.html的文件路徑為templates/bizminapp/users/index.html,所以需要先創(chuàng)建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.繼續(xù)編輯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

好啦渤闷,我們已經完成了用戶信息的展示,接下來繼續(xù)為大家介紹脖镀,如何通過前端添加用戶信息到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

但是點擊上面的添加按鈕后脑漫,并沒有向數據庫中插入數據。為什么呢咙崎?因為上面只是一個靜態(tài)的頁面优幸,要達到可以向數據庫中插入數據的效果,還需要新建一個函數insertUser叙凡,來實現(xiàn)上述功能劈伴。

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宏粤,但是這個文件目前為空,我們?yōu)榱私换ビ押眯┳坡庉媔nfo.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

我們發(fā)現(xiàn)上面出現(xiàn)了兩行紅色的字备图,分別點擊瀏覽用戶信息灿巧、添加用戶信息,神奇的事情發(fā)生了揽涮,頁面竟然跳轉到了之前已經做好的兩個頁面抠藕。這是因為我們在info.html中加了超鏈接,超鏈接指向的地址就是之前已經做好的兩個頁面蒋困。

好了盾似,大功告成,但是我們還需要做一點小小的優(yōu)化雪标。
布置一個小作業(yè)零院,我們想要在瀏覽用戶信息和添加用戶信息的頁面也加入上面兩個超鏈接,具體如何實現(xiàn)呢村刨?

上述是一個很簡單的功能告抄,然而里面也包含了很多的知識點,我們需要自己手動寫一遍才可能全部掌握嵌牺。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末打洼,一起剝皮案震驚了整個濱河市龄糊,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌募疮,老刑警劉巖炫惩,帶你破解...
    沈念sama閱讀 210,835評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異阿浓,居然都是意外死亡他嚷,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,900評論 2 383
  • 文/潘曉璐 我一進店門搔扁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來爸舒,“玉大人,你說我怎么就攤上這事稿蹲∨っ悖” “怎么了?”我有些...
    開封第一講書人閱讀 156,481評論 0 345
  • 文/不壞的土叔 我叫張陵苛聘,是天一觀的道長涂炎。 經常有香客問我,道長设哗,這世上最難降的妖魔是什么唱捣? 我笑而不...
    開封第一講書人閱讀 56,303評論 1 282
  • 正文 為了忘掉前任,我火速辦了婚禮网梢,結果婚禮上震缭,老公的妹妹穿的比我還像新娘。我一直安慰自己战虏,他們只是感情好拣宰,可當我...
    茶點故事閱讀 65,375評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著烦感,像睡著了一般巡社。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上手趣,一...
    開封第一講書人閱讀 49,729評論 1 289
  • 那天晌该,我揣著相機與錄音,去河邊找鬼绿渣。 笑死朝群,一個胖子當著我的面吹牛,可吹牛的內容都是我干的中符。 我是一名探鬼主播潜圃,決...
    沈念sama閱讀 38,877評論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼舟茶!你這毒婦竟也來了谭期?” 一聲冷哼從身側響起堵第,我...
    開封第一講書人閱讀 37,633評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎隧出,沒想到半個月后踏志,有當地人在樹林里發(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 44,088評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡胀瞪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,443評論 2 326
  • 正文 我和宋清朗相戀三年针余,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片凄诞。...
    茶點故事閱讀 38,563評論 1 339
  • 序言:一個原本活蹦亂跳的男人離奇死亡圆雁,死狀恐怖,靈堂內的尸體忽然破棺而出帆谍,到底是詐尸還是另有隱情伪朽,我是刑警寧澤,帶...
    沈念sama閱讀 34,251評論 4 328
  • 正文 年R本政府宣布汛蝙,位于F島的核電站烈涮,受9級特大地震影響,放射性物質發(fā)生泄漏窖剑。R本人自食惡果不足惜坚洽,卻給世界環(huán)境...
    茶點故事閱讀 39,827評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望西土。 院中可真熱鬧讶舰,春花似錦、人聲如沸需了。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,712評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽援所。三九已至,卻和暖如春欣除,著一層夾襖步出監(jiān)牢的瞬間住拭,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,943評論 1 264
  • 我被黑心中介騙來泰國打工历帚, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留滔岳,地道東北人。 一個月前我還...
    沈念sama閱讀 46,240評論 2 360
  • 正文 我出身青樓挽牢,卻偏偏與公主長得像谱煤,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子禽拔,可洞房花燭夜當晚...
    茶點故事閱讀 43,435評論 2 348

推薦閱讀更多精彩內容