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


Posted in Python onJanuary 14, 2021

安装源
pip install django2.2
pip install mysqlclient1.4.6
使用pyharm 创建django 项目

django基本配置

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

在settings.py中设置数据库链接

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

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',

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

在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
登入后

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

配置前台的用户查看界面

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

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

添加用户界面

配置路由 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>

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

前端抽奖界面

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扫码抽奖平台的配置过程详解

到此这篇关于Django扫码抽奖平台的文章就介绍到这了,更多相关Django扫码抽奖内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Python 相关文章推荐
Python的装饰器模式与面向切面编程详解
Jun 21 Python
使用 Python 实现微信公众号粉丝迁移流程
Jan 03 Python
python使用生成器实现可迭代对象
Mar 20 Python
python smtplib模块自动收发邮件功能(一)
May 22 Python
python中字符串内置函数的用法总结
Sep 13 Python
Python查找最长不包含重复字符的子字符串算法示例
Feb 13 Python
Python初学者常见错误详解
Jul 02 Python
django写用户登录判定并跳转制定页面的实例
Aug 21 Python
基于python cut和qcut的用法及区别详解
Nov 22 Python
jupyter notebook 实现matplotlib图动态刷新
Apr 22 Python
python中if及if-else如何使用
Jun 02 Python
浅谈Python 中的复数问题
May 19 Python
如何用python实现一个HTTP连接池
Jan 14 #Python
如何用python写个模板引擎
Jan 14 #Python
opencv python 对指针仪表读数识别的两种方式
Jan 14 #Python
详解如何使用Pytest进行自动化测试
Jan 14 #Python
matplotlib对象拾取事件处理的实现
Jan 14 #Python
用python查找统一局域网下ip对应的mac地址
Jan 13 #Python
python 写一个水果忍者游戏
Jan 13 #Python
You might like
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
php 过滤器实现代码
2010/08/09 PHP
zend framework多模块多布局配置
2011/02/26 PHP
sphinx增量索引的一个问题
2011/06/14 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
python抽象基类用法实例分析
2015/06/04 Python
Python使用sorted排序的方法小结
2017/07/28 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
超简单使用Python换脸实例
2019/03/27 Python
python文件写入write()的操作
2019/05/14 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
python数字类型math库原理解析
2020/03/02 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
美国智能家居专家:tink
2019/06/04 全球购物
三星印度官网:Samsung印度
2019/08/03 全球购物
简历中求职的个人自我评价
2013/12/03 职场文书
市政管理求职信范文
2014/05/07 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
群众路线调研报告范文
2014/11/03 职场文书
小学中等生评语
2014/12/29 职场文书
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android