Home Explore Help
Register Sign In
fmode
/
study-baas
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

userlogin

fmode 2 days ago
parent
9c725b32b3
commit
99701af21b
2 changed files with 470 additions and 0 deletions
Unified View Show Diff Stats
  1. 393 0
      project-crud/user-login.html
  2. 77 0
      project-crud/userlogin.md

+ 393 - 0
project-crud/user-login.html
View File 

@@ -0,0 +1,393 @@
 
+<!-- <!DOCTYPE html>
 
+<html lang="zh-CN">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>登录</title>
 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
+        }
 
+
 
+        body {
 
+            display: flex;
 
+            justify-content: center;
 
+            align-items: center;
 
+            min-height: 100vh;
 
+            background: linear-gradient(135deg, #6e8efb, #a777e3);
 
+            padding: 20px;
 
+        }
 
+
 
+        .container {
 
+            width: 100%;
 
+            max-width: 400px;
 
+            background: rgba(255, 255, 255, 0.9);
 
+            border-radius: 16px;
 
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
 
+            overflow: hidden;
 
+        }
 
+
 
+        .header {
 
+            background: linear-gradient(135deg, #6e8efb, #a777e3);
 
+            color: white;
 
+            text-align: center;
 
+            padding: 30px 20px;
 
+        }
 
+
 
+        .header h1 {
 
+            font-size: 28px;
 
+            margin-bottom: 10px;
 
+        }
 
+
 
+        .header p {
 
+            font-size: 14px;
 
+            opacity: 0.9;
 
+        }
 
+
 
+        .form-container {
 
+            padding: 30px 20px;
 
+        }
 
+
 
+        .input-group {
 
+            margin-bottom: 20px;
 
+            position: relative;
 
+        }
 
+
 
+        .input-group label {
 
+            display: block;
 
+            margin-bottom: 8px;
 
+            font-weight: 500;
 
+            color: #333;
 
+        }
 
+
 
+        .input-group input {
 
+            width: 100%;
 
+            padding: 14px 14px 14px 45px;
 
+            border: 1px solid #ddd;
 
+            border-radius: 8px;
 
+            font-size: 16px;
 
+            transition: all 0.3s;
 
+        }
 
+
 
+        .input-group input:focus {
 
+            outline: none;
 
+            border-color: #6e8efb;
 
+            box-shadow: 0 0 0 2px rgba(110, 142, 251, 0.2);
 
+        }
 
+
 
+        .input-group i {
 
+            position: absolute;
 
+            left: 15px;
 
+            top: 40px;
 
+            color: #6e8efb;
 
+        }
 
+
 
+        .remember-forgot {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            margin-bottom: 20px;
 
+            font-size: 14px;
 
+        }
 
+
 
+        .remember-forgot label {
 
+            display: flex;
 
+            align-items: center;
 
+            color: #555;
 
+        }
 
+
 
+        .remember-forgot input {
 
+            margin-right: 5px;
 
+        }
 
+
 
+        .remember-forgot a {
 
+            color: #6e8efb;
 
+            text-decoration: none;
 
+        }
 
+
 
+        .remember-forgot a:hover {
 
+            text-decoration: underline;
 
+        }
 
+
 
+        .btn {
 
+            width: 100%;
 
+            padding: 14px;
 
+            background: linear-gradient(135deg, #6e8efb, #a777e3);
 
+            color: white;
 
+            border: none;
 
+            border-radius: 8px;
 
+            font-size: 16px;
 
+            font-weight: 600;
 
+            cursor: pointer;
 
+            transition: all 0.3s;
 
+        }
 
+
 
+        .btn:hover {
 
+            transform: translateY(-2px);
 
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 
+        }
 
+
 
+        .register-link {
 
+            text-align: center;
 
+            margin-top: 20px;
 
+            font-size: 14px;
 
+            color: #555;
 
+        }
 
+
 
+        .register-link a {
 
+            color: #6e8efb;
 
+            text-decoration: none;
 
+            font-weight: 500;
 
+        }
 
+
 
+        .register-link a:hover {
 
+            text-decoration: underline;
 
+        }
 
+
 
+        .message {
 
+            padding: 10px;
 
+            margin-top: 15px;
 
+            border-radius: 5px;
 
+            text-align: center;
 
+            display: none;
 
+        }
 
+
 
+        .error {
 
+            background-color: #ffebee;
 
+            color: #d32f2f;
 
+            border: 1px solid #ffcdd2;
 
+        }
 
+
 
+        .success {
 
+            background-color: #e8f5e9;
 
+            color: #388e3c;
 
+            border: 1px solid #c8e6c9;
 
+        }
 
+
 
+        @media (max-width: 480px) {
 
+            .container {
 
+                border-radius: 12px;
 
+            }
 
+
 
+            .header {
 
+                padding: 20px 15px;
 
+            }
 
+
 
+            .form-container {
 
+                padding: 20px 15px;
 
+            }
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div class="container">
 
+        <div class="header">
 
+            <h1>欢迎回来</h1>
 
+            <p>请输入您的用户名和密码进行登录</p>
 
+        </div>
 
+
 
+        <div class="form-container">
 
+            <div class="input-group">
 
+                <label for="username">用户名</label>
 
+                <i class="fas fa-user"></i>
 
+                <input type="text" id="username" placeholder="请输入用户名">
 
+            </div>
 
+
 
+            <div class="input-group">
 
+                <label for="password">密码</label>
 
+                <i class="fas fa-lock"></i>
 
+                <input type="password" id="password" placeholder="请输入密码">
 
+            </div>
 
+
 
+            <div class="remember-forgot">
 
+                <label>
 
+                    <input type="checkbox" id="remember">
 
+                    记住我
 
+                </label>
 
+                <a href="#">忘记密码？</a>
 
+            </div>
 
+
 
+            <button class="btn" id="loginBtn">登录</button>
 
+
 
+            <div id="message" class="message"></div>
 
+
 
+            <div class="register-link">
 
+                还没有账号？<a href="#">立即注册</a>
 
+            </div>
 
+        </div>
 
+    </div>
 
+
 
+    <script>
 
+        document.addEventListener('DOMContentLoaded', function () {
 
+            // Mock用户数据
 
+            const mockUsers = [
 
+                { username: 'admin', password: 'admin123' },
 
+                { username: 'user', password: 'user123' },
 
+                { username: 'test', password: 'test123' },
 
+                { username: 'demo', password: 'demo123' }
 
+            ];
 
+
 
+            const loginBtn = document.getElementById('loginBtn');
 
+            const usernameInput = document.getElementById('username');
 
+            const passwordInput = document.getElementById('password');
 
+            const rememberCheckbox = document.getElementById('remember');
 
+            const messageDiv = document.getElementById('message');
 
+
 
+            // 检查是否有保存的用户名
 
+            const savedUsername = localStorage.getItem('rememberedUsername');
 
+            if (savedUsername) {
 
+                usernameInput.value = savedUsername;
 
+                rememberCheckbox.checked = true;
 
+            }
 
+
 
+            loginBtn.addEventListener('click', async function () {
 
+                const username = usernameInput.value.trim();
 
+                const password = passwordInput.value;
 
+
 
+                // 简单的表单验证
 
+                if (!username || !password) {
 
+                    showMessage('请输入用户名和密码', 'error');
 
+                    return;
 
+                }
 
+
 
+                // 验证用户凭据
 
+                const user = mockUsers.find(u => u.username === username && u.password === password);
 
+                let loginObj = {
 
+                    username: username,
 
+                    password: password
 
+                }
 
+                let res = await fetch("https://dev.fmode.cn/parse/login", {
 
+                    "headers": {
 
+                        "accept": "*/*",
 
+                        "accept-language": "zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6",
 
+                        "content-type": "text/plain;charset=UTF-8",
 
+                        "x-parse-application-id": "dev"
 
+                    },
 
+                    "body": JSON.stringify(loginObj),
 
+                    "method": "POST",
 
+                    "mode": "cors",
 
+                    "credentials": "omit"
 
+                });
 
+                const data = await res.json();
 
+
 
+                console.log(data)
 
+                if (data?.objectId) {
 
+                    // 如果勾选了"记住我"，保存用户名
 
+                    if (rememberCheckbox.checked) {
 
+                        localStorage.setItem('rememberedUsername', username);
 
+                    } else {
 
+                        localStorage.removeItem('rememberedUsername');
 
+                    }
 
+
 
+                    showMessage('登录成功！正在跳转...', 'success');
 
+
 
+                    // 模拟登录成功后的跳转
 
+                    setTimeout(() => {
 
+                        alert('登录成功！欢迎 ' + username);
 
+                        // 在实际应用中，这里会跳转到首页或其他页面
 
+                        // window.location.href = '/home';
 
+                    }, 1000);
 
+                } else {
 
+                    showMessage('用户名或密码错误', 'error');
 
+                }
 
+            });
 
+
 
+            function showMessage(message, type) {
 
+                messageDiv.textContent = message;
 
+                messageDiv.className = 'message ' + type;
 
+                messageDiv.style.display = 'block';
 
+
 
+                // 3秒后隐藏消息
 
+                setTimeout(() => {
 
+                    messageDiv.style.display = 'none';
 
+                }, 3000);
 
+            }
 
+
 
+            // 按Enter键也可以触发登录
 
+            passwordInput.addEventListener('keypress', function (e) {
 
+                if (e.key === 'Enter') {
 
+                    loginBtn.click();
 
+                }
 
+            });
 
+        });
 
+    </script>
 
+</body>
 
+
 
+</html> -->
 
+
 
+
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Parse.User基本用法示例</title>
 
+    <script src="https://npmcdn.com/parse/dist/parse.min.js"></script>
 
+</head>
 
+<body>
 
+    <script>
 
+        Parse.initialize("dev");
 
+        Parse.serverURL = 'https://dev.fmode.cn/parse'
 
+
 
+        async function register(){
 
+            let username = document.getElementById("username").value
 
+            let password = document.getElementById("password").value
 
+            let user = new Parse.User()
 
+            user.set("username",username)
 
+            user.set("password",password)
 
+            try {
 
+                let result = await user.signUp();
 
+                console.log(result)
 
+                // Hooray! Let them use the app now.
 
+            } catch (error) {
 
+                // Show the error message somewhere and let the user try again.
 
+                alert("Error: " + error.code + " " + error.message);
 
+            }
 
+        }
 
+        async function login(){
 
+            let username = document.getElementById("username").value
 
+            let password = document.getElementById("password").value
 
+            const user = await Parse.User.logIn(username, password);
 
+        }
 
+        async function logout(){
 
+            Parse.User.logOut();
 
+        }
 
+        // 测试ACL读写权限
 
+        async function onCheck() {
 
+            let query = new Parse.Query('Bill')
 
+            let res = await query.get('Zgfr3OXoRm')
 
+            console.log(res);
 
+
 
+            if(res?.id){
 
+                res.set('desc','游戏1')
 
+                await res.save()
 
+                console.log('读写成功');
 
+                
+            }
 
+            
+        }
 
+    </script>
 
+
 
+
 
+    <div>用户信息<span id="userinfo"></span></div>
 
+    <script>
 
+        document.getElementById("userinfo").innerHTML = Parse.User.current().id + Parse.User.current().get("username")
 
+    </script>
 
+
 
+    <input type="text" id="username">
 
+    <input type="text" id="password">
 
+
 
+    <button onclick="register()">注册</button>
 
+    <button onclick="login()">登录</button>
 
+    <button onclick="logout()">登出</button>
 
+
 
+
 
+    <button onclick="onCheck()">修改数据</button>
 
+
 
+</body>
 
+</html>

+ 77 - 0
project-crud/userlogin.md
View File 

@@ -0,0 +1,77 @@
 
+# parse登录
 
+# Parse.login(username,password)
 
+
 
+# Parse.become(token)
 
+
 
+
 
+``` js
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Parse.User基本用法示例</title>
 
+    <script src="https://npmcdn.com/parse/dist/parse.min.js"></script>
 
+</head>
 
+<body>
 
+    <script>
 
+        Parse.initialize("dev");
 
+        Parse.serverURL = 'https://dev.fmode.cn/parse'
 
+
 
+        async function register(){
 
+            let username = document.getElementById("username").value
 
+            let password = document.getElementById("password").value
 
+            let user = new Parse.User()
 
+            user.set("username",username)
 
+            user.set("password",password)
 
+            try {
 
+                let result = await user.signUp();
 
+                console.log(result)
 
+                // Hooray! Let them use the app now.
 
+            } catch (error) {
 
+                // Show the error message somewhere and let the user try again.
 
+                alert("Error: " + error.code + " " + error.message);
 
+            }
 
+        }
 
+        async function login(){
 
+            let username = document.getElementById("username").value
 
+            let password = document.getElementById("password").value
 
+            const user = await Parse.User.logIn(username, password);
 
+        }
 
+        async function logout(){
 
+            Parse.User.logOut();
 
+        }
 
+        async function onCheck() {
 
+            let query = new Parse.Query('Bill')
 
+            let res = await query.get('Zgfr3OXoRm')
 
+            console.log(res);
 
+
 
+            if(res?.id){
 
+                res.set('desc','游戏1')
 
+                await res.save()
 
+                console.log('读写成功');
 
+                
+            }
 
+            
+        }
 
+    </script>
 
+
 
+
 
+    <div>用户信息<span id="userinfo"></span></div>
 
+    <script>
 
+        document.getElementById("userinfo").innerHTML = Parse.User.current().id + Parse.User.current().get("username")
 
+    </script>
 
+
 
+    <input type="text" id="username">
 
+    <input type="text" id="password">
 
+
 
+    <button onclick="register()">注册</button>
 
+    <button onclick="login()">登录</button>
 
+    <button onclick="logout()">登出</button>
 
+
 
+
 
+    <button onclick="onCheck()">修改数据</button>
 
+
 
+</body>
 
+</html>
 
+```