test.html 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>TaskMaster API 测试</title>
  5. <style>
  6. body { font-family: Arial, sans-serif; margin: 20px; }
  7. .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; }
  8. .result { margin-top: 10px; padding: 10px; background: #f5f5f5; }
  9. .error { background: #ffe6e6; }
  10. .success { background: #e6ffe6; }
  11. button { margin: 5px; padding: 8px 15px; }
  12. input { margin: 5px; padding: 5px; }
  13. </style>
  14. </head>
  15. <body>
  16. <h1>TaskMaster API 测试</h1>
  17. <div class="test-section">
  18. <h3>1. 用户注册</h3>
  19. <input type="email" id="regEmail" placeholder="邮箱" value="test@example.com">
  20. <input type="password" id="regPassword" placeholder="密码" value="12345678">
  21. <button onclick="testRegister()">注册</button>
  22. <div id="regResult" class="result"></div>
  23. </div>
  24. <div class="test-section">
  25. <h3>2. 用户登录</h3>
  26. <input type="email" id="loginEmail" placeholder="邮箱" value="test@example.com">
  27. <input type="password" id="loginPassword" placeholder="密码" value="12345678">
  28. <button onclick="testLogin()">登录</button>
  29. <div id="loginResult" class="result"></div>
  30. </div>
  31. <div class="test-section">
  32. <h3>3. 创建任务</h3>
  33. <input type="text" id="taskTitle" placeholder="任务标题" value="测试任务">
  34. <input type="text" id="taskDesc" placeholder="任务描述" value="这是一个测试任务">
  35. <button onclick="testCreateTask()">创建任务</button>
  36. <div id="createTaskResult" class="result"></div>
  37. </div>
  38. <div class="test-section">
  39. <h3>4. 获取任务列表</h3>
  40. <button onclick="testGetTasks()">获取任务</button>
  41. <div id="getTasksResult" class="result"></div>
  42. </div>
  43. <script>
  44. let authToken = '';
  45. async function testRegister() {
  46. const email = document.getElementById('regEmail').value;
  47. const password = document.getElementById('regPassword').value;
  48. try {
  49. const response = await fetch('/api/auth/register', {
  50. method: 'POST',
  51. headers: { 'Content-Type': 'application/json' },
  52. body: JSON.stringify({ email, password })
  53. });
  54. const data = await response.json();
  55. const resultDiv = document.getElementById('regResult');
  56. if (response.ok) {
  57. authToken = data.token;
  58. resultDiv.className = 'result success';
  59. resultDiv.innerHTML = `注册成功!<br>用户ID: ${data.userId}<br>Token: ${data.token.substring(0, 20)}...`;
  60. } else {
  61. resultDiv.className = 'result error';
  62. resultDiv.innerHTML = `注册失败: ${data.error || JSON.stringify(data)}`;
  63. }
  64. } catch (error) {
  65. document.getElementById('regResult').className = 'result error';
  66. document.getElementById('regResult').innerHTML = `请求失败: ${error.message}`;
  67. }
  68. }
  69. async function testLogin() {
  70. const email = document.getElementById('loginEmail').value;
  71. const password = document.getElementById('loginPassword').value;
  72. try {
  73. const response = await fetch('/api/auth/login', {
  74. method: 'POST',
  75. headers: { 'Content-Type': 'application/json' },
  76. body: JSON.stringify({ email, password })
  77. });
  78. const data = await response.json();
  79. const resultDiv = document.getElementById('loginResult');
  80. if (response.ok) {
  81. authToken = data.token;
  82. resultDiv.className = 'result success';
  83. resultDiv.innerHTML = `登录成功!<br>用户ID: ${data.userId}<br>Token: ${data.token.substring(0, 20)}...`;
  84. } else {
  85. resultDiv.className = 'result error';
  86. resultDiv.innerHTML = `登录失败: ${data.error || JSON.stringify(data)}`;
  87. }
  88. } catch (error) {
  89. document.getElementById('loginResult').className = 'result error';
  90. document.getElementById('loginResult').innerHTML = `请求失败: ${error.message}`;
  91. }
  92. }
  93. async function testCreateTask() {
  94. if (!authToken) {
  95. alert('请先登录!');
  96. return;
  97. }
  98. const title = document.getElementById('taskTitle').value;
  99. const description = document.getElementById('taskDesc').value;
  100. try {
  101. const response = await fetch('/api/tasks', {
  102. method: 'POST',
  103. headers: {
  104. 'Content-Type': 'application/json',
  105. 'Authorization': `Bearer ${authToken}`
  106. },
  107. body: JSON.stringify({ title, description, priority: 'medium' })
  108. });
  109. const data = await response.json();
  110. const resultDiv = document.getElementById('createTaskResult');
  111. if (response.ok) {
  112. resultDiv.className = 'result success';
  113. resultDiv.innerHTML = `任务创建成功!<br>ID: ${data.task.id}<br>标题: ${data.task.title}`;
  114. } else {
  115. resultDiv.className = 'result error';
  116. resultDiv.innerHTML = `创建失败: ${data.error || JSON.stringify(data)}`;
  117. }
  118. } catch (error) {
  119. document.getElementById('createTaskResult').className = 'result error';
  120. document.getElementById('createTaskResult').innerHTML = `请求失败: ${error.message}`;
  121. }
  122. }
  123. async function testGetTasks() {
  124. if (!authToken) {
  125. alert('请先登录!');
  126. return;
  127. }
  128. try {
  129. const response = await fetch('/api/tasks', {
  130. headers: {
  131. 'Authorization': `Bearer ${authToken}`
  132. }
  133. });
  134. const data = await response.json();
  135. const resultDiv = document.getElementById('getTasksResult');
  136. if (response.ok) {
  137. resultDiv.className = 'result success';
  138. resultDiv.innerHTML = `获取成功!<br>任务数量: ${data.tasks.length}<br>详情: ${JSON.stringify(data, null, 2)}`;
  139. } else {
  140. resultDiv.className = 'result error';
  141. resultDiv.innerHTML = `获取失败: ${data.error || JSON.stringify(data)}`;
  142. }
  143. } catch (error) {
  144. document.getElementById('getTasksResult').className = 'result error';
  145. document.getElementById('getTasksResult').innerHTML = `请求失败: ${error.message}`;
  146. }
  147. }
  148. </script>
  149. </body>
  150. </html>