Django讀取Mysql數(shù)據(jù)并顯示在前端的實例

更新時間：2018年05月27日 09:14:26 作者：GitzLiu

今天小編就為大家分享一篇Django讀取Mysql數(shù)據(jù)并顯示在前端的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

前言：

由于使用Django框架來做網站，需要動態(tài)顯示數(shù)據(jù)庫內的信息，所以讀取數(shù)據(jù)庫必須要做，寫此博文來記錄。

接下來分兩步來做這個事，添加網頁，讀取數(shù)據(jù)庫；

一、添加網頁

首先按添加網頁的步驟添加網頁，我的網頁名為table.html, app名為web；

table.html放到相應目錄下；

forms.py文件提前寫好；

修改views.py，做好視圖

from django.shortcuts import render
from web import forms
def table(request):
  table_form=forms.SignupForm()
  return render(request,'table.html',{'form':table_form})

修改url.py，添加路徑

from django.conf.urls import url,include
from django.contrib import admin
from web import views
urlpatterns = [
  url(r'^signup/$',views.signup,name='signup'),
  url(r'^index/$',views.index,name='index'),
  url(r'^table/$',views.table,name='table') #這個是table的
]

至此可以訪問

http://127.0.0.1:8000/web/table/（http//127.0.0.1:8000/app/index）

正常顯示網頁內容。

二、讀取Mysql并顯示

在models.py中創(chuàng)建數(shù)據(jù)庫 Employee，并設置name列（默認會有id列，為主鍵）；

from __future__ import unicode_literals
from django.db import models
# Create your models here.
class Employee(models.Model):
   name=models.CharField(max_length=20)

保存并同步數(shù)據(jù)庫

python manage.py syncdb

這時進入到mysql中，找到我們django設置的數(shù)據(jù)庫，進入其中，

看到如下表：

圖1 數(shù)據(jù)庫表項

最后一個web_employee為我們剛創(chuàng)建的表（web是我的app名字，前綴是自動加的）；

使用insert語句插入相應數(shù)據(jù)，顯示如下：

圖2 employee表 　　　　　　　　　　

ok數(shù)據(jù)已經添加完畢，接下來是在網頁端顯示，網頁通過前面的配置已經可以正常顯示，現(xiàn)在加入顯示數(shù)據(jù)庫信息。

首先修改views.py，一樣，視圖的修改都在此文件

from django.shortcuts import render
from web import forms
from models import Employee    #插入employee表
from django.shortcuts import HttpResponseRedirect,Http404,HttpResponse,render_to_response
# Create your views here.
def table(request):
  table_form=forms.SignupForm()  #樣式 ，在forms.py里配置好了
  names=Employee.objects.all()  #獲取我們的數(shù)據(jù)庫信息到names里
  #return render(request,'table.html',{'form':table_form})
  return render_to_response("table.html",locals()) #必須用這個return

變量names讀取了我們的數(shù)據(jù)，接下來到table.html中

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Upload Successfully</title>
  </head>
  <body>
    <p>學生名單</p>
    {% for name in names %}
    <p>{{name.id}}&nbsp&nbsp&nbsp:&nbsp&nbsp&nbsp{{name.name}}</p>
    <br>
    {% endfor %}
  </body>
</html>

用循環(huán)讀取names里面的信息，name.id與name.name 是我們表中的兩列，如上面圖２。

最終結果如下：