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中的MySQLdb模块添加超时功能的教程
May 05 Python
python3中dict(字典)的使用方法示例
Mar 22 Python
python爬虫之xpath的基本使用详解
Apr 18 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
May 15 Python
详解将Django部署到Centos7全攻略
Sep 26 Python
学python安装的软件总结
Oct 12 Python
Python之Django自动实现html代码(下拉框,数据选择)
Mar 13 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
Jun 02 Python
python怎么自定义捕获错误
Jun 29 Python
基于flask实现五子棋小游戏
May 25 Python
Django+Nginx+uWSGI 定时任务的实现方法
Jan 22 Python
详细介绍python操作RabbitMq
Apr 12 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启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
深入理解PHP中的global
2014/08/19 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python数据结构树和二叉树简介
2014/04/29 Python
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
Linux下python制作名片示例
2018/07/20 Python
python的turtle库使用详解
2019/05/10 Python
python实现超级马里奥
2020/03/18 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
优秀护士演讲稿
2014/04/30 职场文书
社区文化建设方案
2014/05/02 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
四群教育工作总结
2015/08/10 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript