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 基础之字符串string详解及实例
Apr 01 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
May 08 Python
python中 chr unichr ord函数的实例详解
Aug 06 Python
Python实现的寻找前5个默尼森数算法示例
Mar 25 Python
Sanic框架基于类的视图用法示例
Jul 18 Python
dataframe 按条件替换某一列中的值方法
Jan 29 Python
scrapy-redis的安装部署步骤讲解
Feb 27 Python
python学生管理系统学习笔记
Mar 19 Python
python爬虫豆瓣网的模拟登录实现
Aug 21 Python
opencv 查找连通区域 最大面积实例
Jun 04 Python
通过实例解析python创建进程常用方法
Jun 19 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
Mar 02 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 heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
php面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
php中几种常见安全设置详解
2010/04/06 PHP
PHP 文件上传全攻略
2010/04/28 PHP
ASP Json Parser修正版
2009/12/06 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
运用js实现图层拖拽的功能
2019/05/24 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
2019/12/29 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
医院标语大全
2014/06/23 职场文书
入党介绍人考察意见
2015/06/01 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL