books
/
5zu-books


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API 测试工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
        }
        .section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        h2 {
            color: #333;
            margin-top: 0;
        }
        input, textarea, button {
            width: 100%;
            padding: 10px;
            margin: 5px 0;
            box-sizing: border-box;
        }
        textarea {
            height: 150px;
            font-family: monospace;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #45a049;
        }
        .result {
            margin-top: 10px;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 3px;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
        }
    </style>
</head>
<body>
    <h1>API 测试工具</h1>

    <!-- 注册接口 -->
    <div class="section">
        <h2>1. 注册管理员账号</h2>
        <input type="text" id="regUsername" placeholder="用户名" value="admin">
        <input type="password" id="regPassword" placeholder="密码" value="123456">
        <input type="text" id="regNickname" placeholder="昵称" value="管理员">
        <button onclick="register()">注册</button>
        <div id="regResult" class="result"></div>
    </div>

    <!-- 登录接口 -->
    <div class="section">
        <h2>2. 管理员登录</h2>
        <input type="text" id="loginUsername" placeholder="用户名" value="fbs">
        <input type="password" id="loginPassword" placeholder="密码" value="123">
        <button onclick="login()">登录</button>
        <div id="loginResult" class="result"></div>
    </div>

    <!-- 生成密码 -->
    <div class="section">
        <h2>3. 生成BCrypt加密密码</h2>
        <input type="text" id="passwordToEncode" placeholder="要加密的密码" value="123">
        <button onclick="encodePassword()">生成加密密码</button>
        <div id="encodeResult" class="result"></div>
    </div>

    <script>
        const API_BASE = 'http://localhost:8080/api/admin';

        async function register() {
            const username = document.getElementById('regUsername').value;
            const password = document.getElementById('regPassword').value;
            const nickname = document.getElementById('regNickname').value;
            const resultDiv = document.getElementById('regResult');
            
            resultDiv.textContent = '正在注册...';
            resultDiv.className = 'result';

            try {
                const response = await fetch(`${API_BASE}/register`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        username: username,
                        password: password,
                        nickname: nickname
                    })
                });

                const data = await response.json();
                resultDiv.textContent = JSON.stringify(data, null, 2);
                resultDiv.className = `result ${data.code === 200 ? 'success' : 'error'}`;
            } catch (error) {
                resultDiv.textContent = '错误: ' + error.message;
                resultDiv.className = 'result error';
            }
        }

        async function login() {
            const username = document.getElementById('loginUsername').value;
            const password = document.getElementById('loginPassword').value;
            const resultDiv = document.getElementById('loginResult');
            
            resultDiv.textContent = '正在登录...';
            resultDiv.className = 'result';

            try {
                const response = await fetch(`${API_BASE}/login`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        username: username,
                        password: password
                    })
                });

                const data = await response.json();
                resultDiv.textContent = JSON.stringify(data, null, 2);
                resultDiv.className = `result ${data.code === 200 ? 'success' : 'error'}`;
                
                if (data.code === 200 && data.data && data.data.token) {
                    localStorage.setItem('token', data.data.token);
                    console.log('Token已保存:', data.data.token);
                }
            } catch (error) {
                resultDiv.textContent = '错误: ' + error.message;
                resultDiv.className = 'result error';
            }
        }

        async function encodePassword() {
            const password = document.getElementById('passwordToEncode').value;
            const resultDiv = document.getElementById('encodeResult');
            
            resultDiv.textContent = '正在生成...';
            resultDiv.className = 'result';

            try {
                const response = await fetch(`${API_BASE}/password/encode?password=${encodeURIComponent(password)}`);
                const data = await response.json();
                
                if (data.code === 200) {
                    resultDiv.innerHTML = `
                        <strong>原始密码:</strong> ${data.data.original}<br>
                        <strong>加密后:</strong> ${data.data.encoded}<br><br>
                        <strong>SQL更新语句:</strong><br>
                        <code>${data.data.sql}</code>
                    `;
                    resultDiv.className = 'result success';
                } else {
                    resultDiv.textContent = JSON.stringify(data, null, 2);
                    resultDiv.className = 'result error';
                }
            } catch (error) {
                resultDiv.textContent = '错误: ' + error.message + '\n\n请确保后端服务已启动！';
                resultDiv.className = 'result error';
            }
        }
    </script>
</body>
</html>