当前位置：首页 > news >正文

万网建设网站教程平台设计是什么

news 2025/9/16 22:54:41

万网建设网站教程,平台设计是什么,wordpress怎么做博客,网页制作模板视频教程之前我们是通过前端自动生成的token信息，这次我们通过注册登录，保存到本地去实现。首先，我们实现一个登录页面，放在templates目录下。 <!DOCTYPE html> <html lang"en"> <head><meta charset&quo…

之前我们是通过前端自动生成的token信息，这次我们通过注册登录，保存到本地去实现。首先，我们实现一个登录页面，放在templates目录下。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<div><p><input id="username" placeholder="用户名"></p><p><input id="password" placeholder="密码" type="password"></p><button id="login">登录</button>
</div>
<script>$('#login').click(function () {$.ajax({type: "post",url: "/token",contentType: "application/json; charset=utf-8",data: JSON.stringify({email: $("#username").val(),password: $("#password").val()}),success: function (data) {if (data['msg'] == "success") {window.localStorage.setItem("token", data['token'])window.location.href="/"}else {alert(data['msg'])}}})})
</script>
</body>
</html>

我们在后端去编写一个返回静态文件的页面，一个返回token的方法

def get_user_by_email(db: Session, email: str):user = db.query(User).filter(User.email == email).first()if not user:raise HTTPException(status_code=404, detail="this email not exists")return user@app.get("/login")
async def login(request: Request):return templates.TemplateResponse("login.html",{"request": request})@app.post("/token")
def generate_token(user: UserModel,db: Session = Depends(create_db)
):db_user = get_user_by_email(db, user.email)client_hash_password = user.password + "_hashed"if client_hash_password == db_user.hashed_password:return {"token": "lc-token-value", "msg": "success"}return {"token": None, "msg": "failed"}

然后我们可以去启动下，当我们启动完成登录后发现本地存了token，那么这个时候我们需要改造下webchat.html，我们取本地的 token，同时也实现了一个退出的功能。

<!DOCTYPE html>
<html>
<head><title>Chat</title>
</head>
<body>
<h1>WebSocket 聊天</h1>
<form action="" onsubmit="sendMessage(event)"><input type="text" id="messageText" autocomplete="off"/><button>Send</button>
</form>
<button onclick="logout()">退出</button>
<ul id='messages'>
</ul>
<script>var  token=window.localStorage.getItem("token")if (token==null ){window.location.href="/login"}var ws = new WebSocket("ws://localhost:8000/items/ws?token="+token);ws.onmessage = function (event) {var messages = document.getElementById('messages')var message = document.createElement('li')var content = document.createTextNode(event.data)message.appendChild(content)messages.appendChild(message)};function sendMessage(event) {var input = document.getElementById("messageText")ws.send(input.value)input.value = ''event.preventDefault()}function logout() {window.localStorage.removeItem("token")window.location.href='/login'}
</script></body></html>

这样我们就可以登录后，然后去获取登录产生的token，然后和后端发发送消息，这样我们完成了一个登录聊天，退出后无法聊天的功能。我们如果直接访问聊天的页面，也是可以直接去定向到我们的登录的界面呢，我们的聊天是依赖于我们的登录的。