Django掃碼抽獎平臺的配置過程詳解
阿新 • • 發佈:2021-01-15
安裝源
pip install django2.2
pip install mysqlclient1.4.6
使用pyharm 建立django 專案
django基本配置
在settings.py中設定資料庫連結
DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql','NAME': 'km','USER': 'root','PASSWORD': 'n4','HOST': 'na.cc','PORT': '3306' } }
在settings.py裡面配置好埠:ALLOWED_HOSTS = ['*']
配置語言 LANGUAGE_CODE = ‘zh-hans'
設定時間 USE_TZ = False
建立APP
startapp wuzhengteng
在apps中新增 ‘wuzhengteng',
在models.py中配置資料庫
from django.db import models # Create your models here. class User(models.Model): id = models.AutoField(primary_key=True) name = models.CharField(max_length=10) tel = models.CharField(max_length=11) def __str__(self): return self.name
在manage.py中執行
# 收集資料不同 makemigrations # 寫入資料庫 migrate # 建立超級管理員 createsuperuser
將查詢寫入admin
from django.contrib import admin from wuzhengteng.models import User # Register your models here. class UserAdmin(admin.ModelAdmin): list_display = ['id','name','tel'] admin.site.register(User,UserAdmin)
檢查資料庫是否建立成功
http://127.0.0.1:8000/admin
登入後
配置前臺的使用者檢視介面
url路徑
from django.contrib import admin from django.urls import path from django.views.generic import TemplateView from wuzhengteng import views #開啟views urlpatterns = [ path('admin/',admin.site.urls),path('',views.user,name='home') # 新增指向到views ]
配置views
from django.shortcuts import render from .models import User # 連線資料庫 # Create your views here. def user(request): all_user = User.objects.all() # 查詢全部 return render(request,'index.html',{ 'all_user': all_user,# 將來結果返回html頁面 })
前端頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <table border="1"> <tr> <td>使用者</td> <td>手機</td> </tr> {% for post in all_user %} <tr> <td>{{post.name}}</td> <td>{{post.tel}}</td> </tr> {% endfor %} </table> </body> </html>
測試訪問127.0.0.1:8000
新增使用者介面
配置路由 path(‘scan',views.scan,name=“scan”)
views中插入
web頁面scan.htm
def scan(request): result = '' if request.method == 'POST': name = request.POST.get('name') tel = request.POST.get('tel') print(tel) db = User() db.name = name db.tel = tel db.save() result = 'success' return render(request,'scan.html',{'result': result}) else: return render(request,'scan.html')
web頁面scan.html
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>掃碼登入</title> </head> <body> <div style="width: 210px;margin:0 auto"> <form method="post"> {% csrf_token %} <label for="name">姓名:</label> <input type="text" name="name" style="width: 150px"><br><br> <label for="tel">電話:</label> <input type="text" name="tel" style="width: 150px"><br><br> <input type="reset"> <input type="submit"> </form> {% if result %} <p style="text-align: center">新增成功</p> {% endif %} </div> </body>
前端抽獎介面
url中新增
path(‘luck',views.luck,name=“luck”)
views中新增
def luck(request): all_user = User.objects.all() return render(request,'luck.html',})
setting裡面設定靜態路徑
STATIC_URL = '/static/' STATICFILES_DIRS=( os.path.join(BASE_DIR,"static"),)
前端頁面
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery隨機抽獎 - 站長素材</title> <head> <script id="jquery_172" type="text/javascript" class="library" src="static/js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ var alldata = new Array({% for post in all_user %}"{{post.name}}",{% endfor %}); var num = alldata.length - 1; var show = $("#show"); var btn = $("#btn"); var open = false; function change(){ var randomVal = Math.round(Math.random() * num); var prizeName = alldata[randomVal]; show.text(prizeName); } function run(){ if(!open){ timer=setInterval(change,5); btn.removeClass('start').addClass('stop').text('停止'); open = true; }else{ clearInterval(timer); btn.removeClass('stop').addClass('start').text('開始抽獎'); open = false; } } btn.click(function(){run();}) }) </script> <style> body{ background:#fff;} .wrap{ width:300px; margin:100px auto; font-family:"微軟雅黑";} .show{ width:300px; height:300px; background-color:#ff3300; line-height:300px; text-align:center; color:#fff; font-size:28px; -moz-border-radius:150px; -webkit-border-radius:150px; border-radius:150px; background-image: -webkit-gradient(linear,0% 0%,0% 100%,from(#FF9600),to(#F84000),color-stop(0.5,#fb6c00)); -moz-box-shadow:2px 2px 10px #BBBBBB; -webkit-box-shadow:2px 2px 10px #BBBBBB; box-shadow:2px 2px 10px #BBBBBB;} .btn a{ display:block; width:120px; height:50px; margin:30px auto; text-align:center; line-height:50px; text-decoration:none; color:#fff; -moz-border-radius:25px; -webkit-border-radius:25px; border-radius:25px;} .btn a.start{ background:#80b600;} .btn a.start:hover{ background:#75a700;} .btn a.stop{ background:#00a2ff;} .btn a.stop:hover{ background:#008bdb;} </style> </head> <body> <div class="wrap"> <div class="show" id="show">點選按鈕開始抽獎</div> <div class="btn"> <a href="javascript:void(0)" rel="external nofollow" class="start" id="btn">開始抽獎</a> </div> </div> </body> </html>
jq檔案jquery-1.7.2.min.js
放在static 資料夾下
測試
到此這篇關於Django掃碼抽獎平臺的文章就介紹到這了,更多相關Django掃碼抽獎內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!