-
Notifications
You must be signed in to change notification settings - Fork 13
/
Copy path问答.html
278 lines (254 loc) · 14.8 KB
/
问答.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header>
<h1>实现大家欲望的好帮手</h1>
</header>
<main role="main" class="App-main">
<div class="QuestionList">
<div class="QuestionId" role="region" aria-label="问题列表">
<div class="QuestionList-question" role="list">
<div role="listitem"></div>
</div>
</div>
</div>
</main>
<form id="add-question-form">
<label for="question">提问:</label>
<input type="text" id="question" required>
<label for="detail">内容</label>
<input type="text" id="detail" required>
<label for="author">作者</label>
<input type="text" id="author" required>
<label for="author_email">作者邮箱</label>
<input type="text" id="author_email" required>
<button type="submit">提交</button>
<div class="css-1qli810"></div>
<p></p>
</form>
<script>
document.addEventListener('DOMContentLoaded', () => {
const addQuestionForm = document.getElementById('add-question-form');
const questionList = document.querySelector(".QuestionList-question");
// 用于存储已加载的问题
let loadedQuestions = [];
async function fetchQuestions() {
loadedQuestions = [];
const response = await fetch("https://hduhelp.woshiluo.com/api/question", { method: "GET" });
const data = await response.json();
data.forEach(question => {
loadedQuestions.push(question);
renderQuestion(question);
});
}
// 渲染问题
function renderQuestion(question) {
const questionItem = document.createElement("div");
questionItem.className = "jsNavigable css-1cdnuuo";
// 遍历 answers 数组，并生成每个答案的 HTML
const answersHtml = question.answers?.map((answer, index) => `
<div class="answer" data-index="${index}">
<p><strong>作者:</strong> ${answer.author_name} (${answer.author_email})</p>
<p><strong>内容:</strong> ${answer.content}</p>
<p><strong>创建时间:</strong> ${new Date(answer.created_at).toLocaleString()}</p>
${answer.is_best ? '<p><strong>最佳回答</strong></p>' : ''}
<button type="button" class="delete-answer-button">删除</button>
</div>
`).join('') || '';
questionItem.innerHTML = `
<div class="css-1qli810"></div>
<div class="css-199kefw">
<div class="css-1pysja1">
<div>
<div class="css-z0zq5j">问题</div>
ID:${question.id}
</div>
</div>
<div class="question-details">
<h2>${question.title}</h2>
<p>内容: ${question.detail}</p>
<p>作者: ${question.author}</p>
<p>创建时间: ${question.created_at}</p>
<p>作者邮箱: ${question.author_email}</p>
<div class="answers">
<h3>回答:</h3>
${answersHtml} <!-- 显示所有答案 -->
</div>
<button type="button" class="edit-button" data-id="${question.id}">编辑</button>
<button type="button" class="delete-button" data-id="${question.id}">删除</button>
</div>
<div class="css-zkfaav">
<div>
<a type="button" class="Button css-2wizbk FEfUrdfMIKpQDJDqkjte Button--withIcon Button--withLabel RuuQ6TOh2cRzJr6WlyQp">
<span style="display: inline-flex; align-items: center;">
​
<svg width="1.2em" height="1.2em" viewBox="0 0 24 24" class="ZDI ZDI--PencilFill24 Button-zi " fill="currentColor">
<path d="m7.841 20.043-4.328 1.18a.6.6 0 0 1-.737-.736l1.18-4.324a1.2 1.2 0 0 1.314-.539l8.094-7.995a.9.9 0 0 1 1.268.003l2.736 2.736a.9.9 0 0 1 .004 1.268l-7.196 7.296-.802.802a1.2 1.2 0 0 1-.533.31ZM19.703 4.81l-.514-.513a2.542 2.542 0 0 0-3.595 0l-.999 1.067a.9.9 0 0 0 .02 1.252l2.77 2.768a.9.9 0 0 0 1.25.02l1.068-.999a2.542 2.542 0 0 0 0-3.594Z">
</path>
</svg>
</span>写回答
</a>
<form id="add-answer-form-${question.id}" class="answer-form">
<input type="text" id="author-name" placeholder="作者名" required>
<input type="email" id="author-email" placeholder="邮箱" required>
<input type="text" id="answer" placeholder="答案内容" required>
<label>
<input type="checkbox" id="is-best-answer">最佳回答
</label>
<button type="submit">提交</button>
</form>
</div>
</div>
`;
// 添加表单提交事件
const form = questionItem.querySelector(`#add-answer-form-${question.id}`);
form.addEventListener('submit', async (event) => {
event.preventDefault(); // 阻止默认表单提交行为
const authorName = form.querySelector('#author-name').value; // 获取作者名
const authorEmail = form.querySelector('#author-email').value; // 获取作者邮箱
const answerInput = form.querySelector('#answer').value; // 获取答案输入框的值
const isBest = form.querySelector('#is-best-answer').checked; // 获取最佳答案复选框的状态
const currentTimestamp = new Date().toISOString(); // 获取当前时间的 ISO 字符串
const response = await fetch(`https://hduhelp.woshiluo.com/api/question/${question.id}/answer`, {
method: "POST",
headers: {
'Content-Type': 'application/json' // 设置请求头
},
body: JSON.stringify({
content: answerInput,
author_name: authorName,
author_email: authorEmail,
created_at: currentTimestamp, // 添加创建时间
is_best: isBest // 添加最佳答案标志
})
});
if (response.ok) {
const newAnswer = await response.json();
question.answers.push(newAnswer); // 将新答案添加到 question.answers
renderQuestion(question); // 重新渲染问题以显示新答案
} else {
console.error("提交答案失败", response.statusText);
}
});
questionList.appendChild(questionItem); // 追加到问题列表中
}
// 添加事件委托以处理答案删除操作
document.body.addEventListener('click', (event) => {
if (event.target.classList.contains('delete-answer-button')) {
const answerDiv = event.target.closest('.answer'); // 找到当前答案的 DIV
const index = answerDiv.getAttribute('data-index'); // 获取答案的索引
const questionDetails = answerDiv.closest('.question-details'); // 找到问题详情的容器
answerDiv.remove(); // 从 DOM 中移除答案
}
});
// 删除问题功能
document.body.addEventListener('click', (event) => {
if (event.target.classList.contains('delete-button')) {
const element = event.target;
const id = element.getAttribute('data-id');
const questionDetails = element.closest('.question-details');
questionDetails.remove(); // 移除 DOM 元素
}
});
// 编辑问题功能
document.body.addEventListener('click', (event) => {
if (event.target.classList.contains('edit-button')) {
const element = event.target;
const id = element.getAttribute('data-id');
const questionDetails = element.closest('.question-details');
// 获取当前显示的问题或答案的信息
const titleElement = questionDetails.querySelector('h2');
const title = titleElement ? titleElement.textContent : '';
const detailElement = questionDetails.querySelector('p:nth-of-type(1)');
const detail = detailElement ? detailElement.textContent.replace('内容: ', '') : '';
const authorElement = questionDetails.querySelector('p:nth-of-type(2)');
const author = authorElement ? authorElement.textContent.replace('作者: ', '') : '';
const authorEmailElement = questionDetails.querySelector('p:nth-of-type(4)');
const authorEmail = authorEmailElement ? authorEmailElement.textContent.replace('作者邮箱: ', '') : '';
// 创建一个表单
const editForm = document.createElement('form');
editForm.className = 'edit-form'; // 添加类名以便后续操作
editForm.innerHTML = `
<label for="edit-title">标题:</label>
<input type="text" id="edit-title" value="${title}" required>
<br>
<label for="edit-detail">内容:</label>
<textarea id="edit-detail">${detail}</textarea>
<br>
<label for="edit-author">作者:</label>
<input type="text" id="edit-author" value="${author}" required>
<br>
<label for="edit-author-email">作者邮箱:</label>
<input type="email" id="edit-author-email" value="${authorEmail}" required>
<br>
<button type="submit">保存</button>
`;
// 替换当前显示的信息为表单
questionDetails.innerHTML = '';
questionDetails.appendChild(editForm);
// 处理表单提交
editForm.addEventListener('submit', (e) => {
e.preventDefault();
const editTitle = document.getElementById('edit-title').value;
const editDetail = document.getElementById('edit-detail').value;
const editAuthor = document.getElementById('edit-author').value;
const editAuthorEmail = document.getElementById('edit-author-email').value;
// 更新显示的信息
questionDetails.innerHTML = `
<h2>${editTitle}</h2>
<p>内容: ${editDetail}</p>
<p>作者: ${editAuthor}</p>
<p>创建时间: ${new Date().toLocaleString()}</p>
<p>作者邮箱: ${editAuthorEmail}</p>
<button type="button" class="edit-button" data-id="${id}">编辑</button>
<button type="button" class="delete-button" data-id="${id}">删除</button>
`;
// 移除表单
const editFormElement = questionDetails.querySelector('.edit-form');
if (editFormElement) {
editFormElement.remove();
}
});
}
});
// 添加问题
addQuestionForm.addEventListener('submit', async (event) => {
event.preventDefault();
const questionInput = document.getElementById('question');
const questionText = questionInput.value.trim();
const detailInput = document.getElementById('detail');
const detailText = detailInput.value.trim();
const authorInput = document.getElementById('author');
const authorText = authorInput.value.trim();
const author_emailInput = document.getElementById('author_email');
const author_emailText = author_emailInput.value.trim();
const currentTime = new Date().toISOString(); // 获取当前时间
if (questionText === '') return;
const response = await fetch('https://hduhelp.woshiluo.com/api/question', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ title: questionText, detail: detailText, author: authorText, author_email: author_emailText, created_at: currentTime })
});
if (!response.ok) throw new Error('Failed to add question');
questionInput.value = '';
detailInput.value = '';
authorInput.value = '';
author_emailInput.value = '';
await fetchQuestions();
});
fetchQuestions();// 初始化加载问题列表
});
</script>
</body>
<footer>
<div class="footcontent">孩子不懂事，做着玩的</div>
</footer>
</html>