脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 脚本专栏 → python → Django扫码抽奖

Django扫码抽奖平台的配置过程详解

 更新时间：2021年01月14日 10:43:39   作者：zz891422822  
这篇文章主要介绍了Django扫码抽奖平台,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

安装源
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'
配置时区TIME_ZONE = ‘Asia/Shanghai'
设置时间 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">&nbsp;&nbsp;<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', {
 'all_user': all_user,
 })

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扫码抽奖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

相关文章

  • Python正则简单实例分析

    Python正则简单实例分析

    这篇文章主要介绍了Python正则简单实例,具体分析了Python针对字符串的简单正则匹配测试中遇到的问题与相关注意事项,需要的朋友可以参考下
    2017-03-03
  • 5分钟 Pipenv 上手指南

    5分钟 Pipenv 上手指南

    这篇文章主要介绍了5分钟 Pipenv 上手指南，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 老生常谈Python序列化和反序列化

    老生常谈Python序列化和反序列化

    下面小编就为大家带来一篇老生常谈Python序列化和反序列化。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 我喜欢你 抖音表白程序python版

    我喜欢你 抖音表白程序python版

    我喜欢你！这篇文章主要为大家详细介绍了抖音表白程序python版的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-04-04
  • python绘制三维图的详细新手教程

    python绘制三维图的详细新手教程

    通常我们用 Python 绘制的都是二维平面图,但有时也需要绘制三维场景图,下面这篇文章主要给大家介绍了关于python绘制三维图的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • Django框架model模型对象验证实现方法分析

    Django框架model模型对象验证实现方法分析

    这篇文章主要介绍了Django框架model模型对象验证实现方法,结合实例形式分析了Django框架model模型对象验证相关原理、实现步骤及操作注意事项,需要的朋友可以参考下
    2019-10-10
  • 一道题学会Python函数中形参和实参

    一道题学会Python函数中形参和实参

    在Python编程中,函数的形参和实参是函数定义和调用的重要概念,本文主要介绍了一道题学会Python函数中形参和实参,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • python3通过subprocess模块调用脚本并和脚本交互的操作

    python3通过subprocess模块调用脚本并和脚本交互的操作

    这篇文章主要介绍了python3通过subprocess模块调用脚本并和脚本交互的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-12-12
  • Django单元测试中Fixtures用法详解

    Django单元测试中Fixtures用法详解

    这篇文章主要介绍了Django单元测试中Fixtures用法，通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-02-02
  • Python超简单容易上手的画图工具库（适合新手）

    Python超简单容易上手的画图工具库（适合新手）

    这篇文章主要给大家介绍了关于Python超简单容易上手的画图工具库的相关资料，文中通过图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05

最新评论