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

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

django基本配置

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

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

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

配置前台的用户查看界面

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

添加用户界面

配置路由 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">&nbsp;&nbsp;<input type="submit">
 </form>
 {% if result %}
 <p style="text-align: center">添加成功</p>
 {% endif %}
</div>
</body>


前端抽奖界面

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扫码抽奖内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-01-13

Django 404、500页面全局配置知识点详解

django版本为2.2.7,全局配置404.500页面,解决静态文件路径等问题 urls中编写 urlpatterns = [ .............. ] handler404 = 'first.views.page_not_found' #handler404为固定写法,first.views.page_not_found为404处理函数的位置 handler500 = 'first.views.page_error' #同上 指定的views中 #全局404 def page_not

Django 开发环境配置过程详解

开发环境 开发环境为: Win 10(64位) Python 3.7.0 Django 2.1 安装Python python的安装为比较简单,首先找到Python官方网站,选择python3.7的windows版本,下载并安装. 安装时注意勾选添加python到环境变量中.如果没有或者漏掉这一步,请安装完毕后自行添加. 若实在不知道怎么弄的,看这篇文章: windows上安装python3教程以及环境变量配置 安装完成后打开命令行,输入python -V,系统打印出python的版本号,说明安

Django 静态文件配置过程详解

静态文件配置 概述: 静态文件交由Web服务器处理,Django本身不处理静态文件.简单的处理逻辑如下(以nginx为例): URI请求 --> 按照Web服务器里面的配置规则先处理,以nginx为例,主要求配置在nginx.conf里的location --> 如果是静态文件,则由nginx直接处理 --> 如果不是则交由Django处理,Django根据urls.py里面的规则进行匹配 以上是部署到Web服务器后的处理方式,为了便于开发,Django提供了在开发环境的对静态文件的处理

django 环境变量配置过程详解

刚开始使用django,在创建第一个app时被提示不知道命令runserver,百度得出是环境变量的问题. 1.配置python变量环境,C:\Python27\;C:\Python27\Scripts\ 2.配置django变量环境,C:\Python34\Lib\site-packages\Django-1.7.11-py3.4.egg\django\bin 或者 C:\Python27\Lib\site-packages\Django或者C:\Python27\Lib\site-packa

基于Linux网关服务器squid配置过程详解

前言 在此,我们要配置一个只对内部网络提供代理服务的 Proxy Server.它具有如下功能它将用户分为高级用户和普通用户两种,对高级用户采用网卡物理地址识别的方法, 普通用户则需要输入用户名和口令才能正常使用. 高级用户没有 访问时间和文件类型的限制,而普通用户只在上班时可以访问以及一些其它的限制. 安装 从源中安装 源中自带稳定版本,执行下面的命令进行安装 sudo apt-get install squid squid-common 源码编译安装 当然你也可以到官方网站下载最新的版本进行

Django 实现图片上传和显示过程详解

第1章 新建工程和创建app 新建工程和创建app就不用贴出来了,我这里是测试图片上传的功能能否实现,所以项目都是新的,正常在以有的app下就可以 第2章 模型层: 2.1创建数据库 from django.dbimport models # Create your models here. class User(models.Model): name= models.CharField(max_length=50) # upload_to 指定上传文件位置 # 这里指定存放在img/ 目录下

Django中在xadmin中集成DjangoUeditor过程详解

环境 python版本:3.6 django:1.10.8 1.下载xadmin https://github.com/sshwsfc/xadmin 下载DjangoUeditor https://github.com/twz915/DjangoUeditor3 2.直接将xadmin和DjangoUeditor集成在pycharm里,在项目下新建一个文件夹extra_apps,将与xadmin.DjangoUeditor的同名文件复制在extra_apps下 3.在settings.py里注册

django中使用Celery 布式任务队列过程详解

本文记录django中如何使用celery完成异步任务. Celery 是一个简单.灵活且可靠的,处理大量消息的分布式系统,并且提供维护这样一个系统的必需工具. 它是一个专注于实时处理的任务队列,同时也支持任务调度. 官方网站 中文文档 示例一:用户发起request,并等待response返回.在本些views中,可能需要执行一段耗时的程序,那么用户就会等待很长时间,造成不好的用户体验 示例二:网站每小时需要同步一次天气预报信息,但是http是请求触发的,难道要一小时请求一次吗? 使用cele

SpringBoot使用Mybatis-Generator配置过程详解

:> 使用Spring initialier 需要配置文件 POM文件 复制代码 代码如下: <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <group

Python sublime安装及配置过程详解

Sublime Text 3 纯文本编辑器 Package Control(Sublime的包管理器) Sublime Text3中的插件,通过该插件可以向Sublime中安装新的包 Sublime Text 3的安装 下载链接 添加到右侧菜单(傻瓜试安装) Sublime Text 3的设置①Package Control(Sublime的包管理器) 按ctrl+shift+p 出现一个菜单:输入install Package Control 稍微等一下,联网下载的 ② 打开首选项:安装包(C