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));
  });
});

前端显示界面

    
    
    
    
    
    



    

       获奖名单
    




       
        
      
    {{running?'停!':'开始'}}
    重置

抽奖效果

抽奖效果

结果记录

上传抽奖记录到数据库

前后端所有代码已上传 https://github.com/627886474/lottery