1.0版本的时候没有前端页面,会使这个系统看起来很简陋,但由于自己前端水平实在有限,所以在github上找了一个抽奖的前端,直接套用一下。抽奖也改用前端实现,只有抽奖名单和中间名单使用了后台。
跨域处理
引入前端界面的同时,引入了另一个问题:跨域!
什么是跨域呢?
出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)
简单来说就是当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
origins = [
"*",
"http://localhost",
"http://localhost:8080",
]
app.add_middleware(
CORSMiddleware,
allow_origins=origins,
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
新增数据上传接口
新增数据model,中奖描述,还有中奖名单,因为没有其他业务逻辑,这里就直接通过pymysql 插入数据,不做其他的处理了
class Info(BaseModel):
description: str
name: str
@app.post("/push/lottery")
async def push_lottery(info: Info):
db = pymysql.connect(host='localhost', port=3306, user='root', password='root', database='test_data_platform',
charset='utf8')
cursor = db.cursor()
sql = "INSERT INTO user_info(name,description)values('%s','%s')" % (info.description, info.name.rstrip(','))
try:
cursor.execute(sql)
db.commit()
except Exception as e:
db.rollback()
print("push error:"+e)
db.close()
return {"message": "push success"}
前端页面
github代码地址,上面有这个动态效果的源代码https://github.com/fouber/lottery ,将其中的部分代码替换为请求后台数据
member.js
window.member;
$(document).ready(function(){
$.get("http://127.0.0.1:8000/lottery/employees",function(data,status){
localStorage.setItem('member', JSON.stringify(data.data));
});
});
前端显示界面
<!DOCTYPE html>
<html>
<head>
<meta name="screen-orientation" content="portrait">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>
<title>年会抽奖小程序</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/wall.css">
</head>
<body>
<div id="main" class="wall">
<div class="result-btn">
<a href="./result.html" target="_blank">获奖名单</a>
</div>
</div>
<div id="result" class="result">
</div>
<div id="tools" class="tools">
<form-item label="抽奖人数">
<input type="textarea" v-model="btns"></input>
</form-item>
<button
class="pure-button"
@click="toggle"
:class="{'button-secondary': !running,
'button-success': running}">{{running?'停!':'开始'}}</button>
<button class="pure-button button-warning" @click="reset">重置</button>
</div>
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/tagcanvas.js"></script>
<script type="text/javascript" src="js/member.js"></script>
<script type="text/javascript">
(function(){
var employees = JSON.parse(localStorage.getItem('member'))
var choosed = JSON.parse(localStorage.getItem('choosed')) || {};
// 转动效果
var speed = function(){
return [0.1 * Math.random() + 0.01, -(0.1 * Math.random() + 0.01)];
};
var getKey = function(item){
return item.name + '-' + item.phone;
};
var createHTML = function(){
var html = [ '<ul>' ];
employees.forEach(function(item, index){
item.index = index;
var key = getKey(item);
var color = choosed[key] ? 'yellow' : 'white';
html.push('<li><a href="#" style="color: ' + color + ';">' + item.name + '</a></li>');
});
html.push('</ul>');
return html.join('');
};
var lottery = function(count){
var list = canvas.getElementsByTagName('a');
var color = 'yellow';
var names = "";
var ret = employees
.filter(function(m, index){
m.index = index;
return !choosed[getKey(m)];
})
.map(function(m){
return Object.assign({
score: Math.random()
}, m);
})
.sort(function(a, b){
return a.score - b.score;
})
.slice(0, count)
.map(function(m){
choosed[getKey(m)] = 1;
list[m.index].style.color = color;
names = m.name +","+names
return m.name + '<br/>';
});
localStorage.setItem('choosed', JSON.stringify(choosed));
var info = {"name":names,"description":"一等奖"}
$.ajax({
url:'http://127.0.0.1:8000/push/lottery',
type:'post',
dateType:'json',
headers:{
'Content-Type':'application/json'
},
data:JSON.stringify(info)
})
return ret;
};
var canvas = document.createElement('canvas');
canvas.id = 'myCanvas';
canvas.width = document.body.offsetWidth;
canvas.height = document.body.offsetHeight;
document.getElementById('main').appendChild(canvas);
new Vue({
el: '#tools',
data: {
selected: 30,
running: false,
btns: ''
},
mounted () {
canvas.innerHTML = createHTML();
TagCanvas.Start('myCanvas', '', {
textColour: null,
initial: speed(),
dragControl: 1,
textHeight: 14
});
},
methods: {
reset: function(){
if(confirm('确定要重置么?所有之前的抽奖历史将被清除!')){
localStorage.clear();
location.reload(true);
}
},
toggle: function(){
if(this.running){
TagCanvas.SetSpeed('myCanvas', speed());
var ret = lottery(this.btns);
if (ret.length === 0) {
$('#result').css('display', 'block').html('<span>已抽完</span>');
return
}
$('#result').css('display', 'block').html('<span>' + ret.join('</span><span>') + '</span>');
TagCanvas.Reload('myCanvas');
setTimeout(function(){
localStorage.setItem(new Date().toString(), JSON.stringify(ret));
$('#main').addClass('mask');
}, 300);
} else {
$('#result').css('display', 'none');
$('#main').removeClass('mask');
TagCanvas.SetSpeed('myCanvas', [5, 1]);
}
this.running = !this.running;
}
}
});
})();
</script>
</body>
</html>
抽奖效果
结果记录
上传抽奖记录到数据库
前后端所有代码已上传
https://github.com/627886474/lottery