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的Django框架中自定义模版标签的示例
Jul 20 Python
python实现用户登录系统
May 21 Python
由浅入深讲解python中的yield与generator
Apr 05 Python
python 内置函数filter
Jun 01 Python
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
Aug 07 Python
Ubuntu下Python2与Python3的共存问题
Oct 31 Python
python面向对象入门教程之从代码复用开始(一)
Dec 11 Python
keras分类之二分类实例(Cat and dog)
Jul 09 Python
python绘制趋势图的示例
Sep 17 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
Sep 18 Python
python识别围棋定位棋盘位置
Jul 26 Python
使用python创建股票的时间序列可视化分析
Mar 03 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
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
JS中style属性
2006/10/11 Javascript
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
微信小程序签到功能
2018/10/31 Javascript
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
Python SQLite3数据库操作类分享
2014/06/10 Python
Python中常见的数据类型小结
2015/08/29 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
python Selenium实现付费音乐批量下载的实现方法
2019/01/24 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
python实现代码统计程序
2019/09/19 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
python实现一个猜拳游戏
2020/04/05 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
Java如何支持I18N?
2016/10/31 面试题
最新英语专业学生求职信范文
2013/09/21 职场文书
《两个铁球同时着地》教学反思
2014/02/13 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
护士医德考评自我评价
2015/03/03 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
2015年中个人总结范文
2015/03/10 职场文书
Python实现归一化算法详情
2022/03/18 Python