一个能够自己添加题库的做题app的实现需要具备以下要素：
1. 数据库
构建一个数据库来存储题目信息。可以使用MySQL或SQLite等关系型数据库，或是使用NoSQL数据库来存储题目信息。将每个题目的题干、选项以及答案等信息存储进数据库表中。
2. 后端
构建后端接口来让前端调用，查询数据库中存储的题目信息并返回给前端。
3. 前端
构建前端页面来呈现题目信息，包括题干、选项等。同时要让用户能够输入答案并提交答案，同时也要展示答案的正确性。
这里针对以上的三个要素进行更详细的阐述：
1. 数据库
构建数据库时可以采用关系型数据库，例如MySQL或SQLite。维护一个题目表，包含题目的ID、题目、正确答案等字段。除此之外，还需要一个选项表，存储题目的选项。
例如，在MySQL中可以这样设计表：
```
题目表:
CREATE TABLE questions (
id INT PRIMARY KEY AUTO_INCREMENT,
question VARCHAR(255) NOT NULL,
answer CHAR(1) NOT NULL
);
选项表:
CREATE TABLE options (
id INT PRIMARY KEY AUTO_INCREMENT,
question_id INT,
option_text VARCHAR(255) NOT NULL,
is_answer CHAR(1) NOT NULL
);
```
2. 后端
后端需要提供查询题目信息的接口，并将查询结果返回给前端。在这里可以使用Node.js或Java等技术，同时也要对接数据库。例如在Node.js中可以这样编写后端代码：
```
const express = require('express');
const mysql = require('mysql');
const app = express();
const connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : 'password',
database : 'database',
});
connection.connect();
app.get('/questions', (req, res) => {
connection.query('SELECT * FROM questions', (error, results, fields) => {
if (error) throw error;
res.send(results);
});
});
app.get('/options/:question_id', (req, res) => {
connection.query(`SELECT * FROM options WHERE question_id = ${req.params.question_id}`, (error, results, fields) => {
if (error) throw error;
res.send(results);
});
});
app.listen(3000, () => {
console.log('Server listening on port 3000!')
});
```
从以上代码可以看出，当前端请求'/questions'时，后端就会查询出所有题目，并将结果返回；当请求'/options/:question_id'时，后端则会查询出对应题目的所有选项。
3. 前端
前端需要提供用户输入答案的UI，并调用后端接口获取题目和选项的信息。同时还需要对用户的答案进行验证，同时展示正确答案和用户答案是否正确。使用React、Vue或Angular等技术可以轻松实现。
例如，在React中可以这样编写代码：
```
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const App = () => {
const [questions, setQuestions] = useState([]);
const [options, setOptions] = useState([]);
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
const [userAnswers, setUserAnswers] = useState([]);
useEffect(() => {
axios.get('/questions').then(res => {
setQuestions(res.data);
setCurrentQuestionIndex(0);
});
}, []);
useEffect(() => {
if (questions.length > 0) {
axios.get(`/options/${questions[currentQuestionIndex].id}`).then(res => {
setOptions(res.data);
});
}
}, [currentQuestionIndex]);
const handleOptionClick = (option) => {
setUserAnswers([
...userAnswers,
{
question_id: questions[currentQuestionIndex].id,
answer: option.is_answer,
},
]);
if (currentQuestionIndex < questions.length - 1) {
setCurrentQuestionIndex(currentQuestionIndex + 1);
}
};
const renderOptions = () => {
return options.map(option => (
));
};
const renderReview = () => {
return questions.map((question, index) => (
{question.question}
Your answer: {userAnswers[index].answer ? 'Correct' : 'Incorrect'}
Correct answer: {question.answer}
));
};
return (
{questions.length > 0 && (
{questions[currentQuestionIndex].question}
- {renderOptions()}
)}
{currentQuestionIndex === questions.length && (
Review
{renderReview()}
)}
);
};
export default App;
```
从以上代码可以看出，前端使用了useState和useEffect来管理题目、选项、当前题目编号和用户答案等状态。同时，使用axios来调用后端接口获取题目信息和选项信息，并将用户答案存储起来以便后续展示正确答案和用户答案。最后，根据用户完成的状态展示相应的UI，可以让用户回顾自己的错误答案以帮助学习。
