写一个可以按章节筛选题目的前后端代码
时间: 2023-05-27 11:06:46 浏览: 59
前端代码:
```html
<!-- 章节筛选 -->
<label for="chapter-select">选择章节:</label>
<select id="chapter-select">
<option value="">全部</option>
<option value="chapter1">第一章</option>
<option value="chapter2">第二章</option>
<option value="chapter3">第三章</option>
</select>
<!-- 题目列表 -->
<ul id="question-list"></ul>
<script>
const chapterSelect = document.getElementById('chapter-select');
const questionList = document.getElementById('question-list');
// 初始化题目列表
function initQuestionList() {
// 获取所有题目数据
fetch('/api/questions')
.then(response => response.json())
.then(data => {
// 渲染所有题目
renderQuestions(data);
});
}
// 渲染题目列表
function renderQuestions(questions) {
questionList.innerHTML = '';
questions.forEach(question => {
// 如果章节没有被选择或者选择全部,则渲染所有题目
if (!chapterSelect.value || question.chapter === chapterSelect.value) {
const li = document.createElement('li');
li.textContent = question.title;
questionList.appendChild(li);
}
});
}
// 监听章节选择变化
chapterSelect.addEventListener('change', () => {
// 获取符合条件的题目数据
fetch(`/api/questions?chapter=${chapterSelect.value}`)
.then(response => response.json())
.then(data => {
// 渲染符合条件的题目
renderQuestions(data);
});
});
// 初始化题目列表
initQuestionList();
</script>
```
后端代码:
```javascript
const express = require('express');
const app = express();
// 所有题目数据
const questions = [
{ title: '题目1', chapter: 'chapter1' },
{ title: '题目2', chapter: 'chapter2' },
{ title: '题目3', chapter: 'chapter3' },
{ title: '题目4', chapter: 'chapter1' },
{ title: '题目5', chapter: 'chapter2' },
{ title: '题目6', chapter: 'chapter3' },
];
// 获取符合条件的题目数据
function getQuestionsByChapter(chapter) {
if (chapter) {
return questions.filter(question => question.chapter === chapter);
} else {
return questions;
}
}
// 获取所有题目数据的 API
app.get('/api/questions', (req, res) => {
const chapter = req.query.chapter;
const filteredQuestions = getQuestionsByChapter(chapter);
res.json(filteredQuestions);
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)