123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393 |
- <!-- <!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>
|