Django掃碼抽獎平臺的配置過程詳解
安裝源pip install django2.2pip install mysqlclient1.4.6使用pyharm 創(chuàng)建django 項目
django基本配置
在settings.py中設(shè)置數(shù)據(jù)庫鏈接
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’配置時區(qū)TIME_ZONE = ‘Asia/Shanghai’設(shè)置時間 USE_TZ = False
創(chuàng)建APPstartapp wuzhengteng在apps中添加 ‘wuzhengteng’，
在models.py中配置數(shù)據(jù)庫
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中執(zhí)行
# 收集數(shù)據(jù)不同makemigrations# 寫入數(shù)據(jù)庫migrate# 創(chuàng)建超級管理員createsuperuser
將查詢寫入admin
from django.contrib import adminfrom wuzhengteng.models import User# Register your models here.class UserAdmin(admin.ModelAdmin): list_display = [’id’, ’name’, ’tel’]admin.site.register(User, UserAdmin)
檢查數(shù)據(jù)庫是否創(chuàng)建成功http://127.0.0.1:8000/admin登入后
配置前臺的用戶查看界面
url路徑
from django.contrib import adminfrom django.urls import pathfrom django.views.generic import TemplateViewfrom wuzhengteng import views #打開viewsurlpatterns = [ path(’admin/’, admin.site.urls), path(’’, views.user, name=’home’) # 添加指向到views]
配置views
from django.shortcuts import renderfrom .models import User # 連接數(shù)據(jù)庫# Create your views here.def user(request): all_user = User.objects.all() # 查詢?nèi)?return render(request, ’index.html’, { ’all_user’: all_user, # 將來結(jié)果返回html頁面 })
前端頁面
<!DOCTYPE html><html lang='en'> <head> <meta charset='UTF-8'> <title>test</title> </head><body> <table border='1'> <tr> <td>用戶</td> <td>手機(jī)</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=“l(fā)uck”)
views中添加
def luck(request): all_user = User.objects.all() return render(request, ’luck.html’, { ’all_user’: all_user, })
setting里面設(shè)置靜態(tài)路徑
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隨機(jī)抽獎 - 站長素材</title><head><script type='text/javascript' src='http://www.cgvv.com.cn/bcjs/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 id='show'>點擊按鈕開始抽獎</div><div class='btn'><a href='javascript:void(0)' rel='external nofollow' id='btn'>開始抽獎</a></div></div></body></html>
jq文件jquery-1.7.2.min.js放在static 文件夾下
測試
到此這篇關(guān)于Django掃碼抽獎平臺的文章就介紹到這了,更多相關(guān)Django掃碼抽獎內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. 用xslt+css讓RSS顯示的跟網(wǎng)頁一樣漂亮2. ASP.NET MVC把數(shù)據(jù)庫中枚舉項的數(shù)字轉(zhuǎn)換成文字3. 《CSS3實戰(zhàn)》筆記--漸變設(shè)計（一)4. 移動端HTML5實現(xiàn)拍照功能的兩種方法5. 測試模式 - XSL教程 - 56. ASP.NET Core自定義中間件的方式詳解7. html5手機(jī)觸屏touch事件介紹8. CSS3實現(xiàn)動態(tài)翻牌效果 仿百度貼吧3D翻牌一次動畫特效9. 讓chatgpt將html中的圖片轉(zhuǎn)為base64方法示例10. 教你JS更簡單的獲取表單中數(shù)據(jù)(formdata)
網(wǎng)公網(wǎng)安備