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

2024-12-03 10:21:53

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

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': '330
Hadoop源码分析二安装配置过程详解

目录 1. 创建用户 2. 安装jdk 3. 修改hosts 4. 配置ssh免密登录 5. 安装zookeeper 解压: 修改配置文件修改内容如下: 配置环境变量启动 6. 安装hadoop 对于三台节点的配置安排如下: 解压: 修改配置文件: 修改core-site.xml 配置hdfs-site.xml 配置mapred-site.xml 配置yarn-site.xml 配置slaves 7. 初始化在初始化前需要将所有机器都配置好hadoop (1) 启动zookeeper (2
Python深度学习实战PyQt5安装与环境配置过程详解

目录 1. PyQt5 图形界面开发工具 1.1 从 CLI 到 GUI 1.2 PyQt5 开发工具 2. 安装 PyQt5 和 QtTools pip 安装 PyQt5 pip 安装 QtTools 3. QtDesigner 和 PyUIC 的环境配置 3.1 在 PyCharm 添加 Create Tools 3.2 添加 QtDesigner 工具 3.3 添加 PyUIC 工具 4. QtDesigner 和 PyUIC 的快速入门 4.1 QtDesigner 的启动和入门新建一
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
docker网络配置过程详解介绍

目录 Linux内核实现名称空间的创建操作Network Namespace 创建veth pair 实现Network Namespace间通信四种网络模式配置容器的常用操作自定义docker0桥的网络属性信息 Linux内核实现名称空间的创建 ip netns命令可以借助ip netns命令来完成对 Network Namespace 的各种操作.ip netns命令来自于iproute安装包,一般系统会默认安装,如果没有的话,请自行安装. 注意:ip netns命令修改网络配置时
树莓派ASP.NET环境配置过程详解

目录在树莓派上部署ASP.NET环境(树莓派做ASP.NET项目服务器),之后Windows上开发的ASP.NET项目可以部署在树莓派上. 在树莓派上部署ASP.NET环境(树莓派做ASP.NET项目服务器),之后Windows上开发的ASP.NET项目可以部署在树莓派上.配置过程如下: 前言:本篇文章内容是根据mono官网上查阅的配置教程所写,当时做期末课设的时候一边查翻译一边配置(好像当时访问这个网站还要禾斗学上网),最终亲身试验可以用,随后在word上做了配置过程笔记,现在搬上来. mo
SpringBoot整合Vue实现微信扫码支付以及微信退款功能详解

直接上代码,在order模块添加依赖 <dependency> <groupId>com.github.wxpay</groupId> <artifactId>wxpay-sdk</artifactId> <version>0.0.3</version> </dependency> 在配置类添加申请的商家号信息 #关联的公众号appid weixin.pay.appid=wxXXXXXXX #商户号 weixi
国产化设备鲲鹏CentOS7上源码安装Python3.7的过程详解

目录获取源代码准备工作(安装依赖) 生成Makefile 构建&&安装添加环境变量其他小问题找不到libpython3.7m.so.1.0 升级pip上的小坑影响pyinstaller打包后python程序移植性的因素具体编译过成与正常的Python源代码在x86平台上的过程无异,此篇随笔仅当用作复制黏贴的备忘录.不得不说在一个老旧系统上安装一个老旧的Python版本,从头编译一个Python还是一个较为稳健的选择. 获取源代码 Python官网处下载所需源码版本[https
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基本配置

相关推荐

随机推荐