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 相关文章推荐
使用Node.js和Socket.IO扩展Django的实时处理功能
Apr 20 Python
Python第三方库的安装方法总结
Jun 06 Python
python表格存取的方法
Mar 07 Python
Python实现string字符串连接的方法总结【8种方式】
Jul 06 Python
python  创建一个保留重复值的列表的补码
Oct 15 Python
启动Atom并运行python文件的步骤
Nov 09 Python
python的几种矩阵相乘的公式详解
Jul 10 Python
解决python有时候import不了当前的包问题
Aug 28 Python
Python 实现try重新执行
Dec 21 Python
Python如何批量获取文件夹的大小并保存
Mar 31 Python
Keras之fit_generator与train_on_batch用法
Jun 17 Python
python中pandas.read_csv()函数的深入讲解
Mar 29 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
session在PHP大型web应用中的使用
2011/06/25 PHP
php开发工具有哪五款
2015/11/09 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
在线所见即所得HTML编辑器的实现原理浅析
2015/04/25 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
tensorflow识别自己手写数字
2018/03/14 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
Python3多线程操作简单示例
2018/05/22 Python
python 实现A*算法的示例代码
2018/08/13 Python
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
Python常见数字运算操作实例小结
2019/03/22 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
JVM是一个编译程序还是解释程序
2012/09/11 面试题
学习标兵获奖感言
2014/02/20 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
村抢险救灾方案
2014/05/09 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
张丽莉观后感
2015/06/16 职场文书
公司管理制度范本
2015/08/03 职场文书