文章目录
1. 设计网页页面
1.1 列表页
只是大概模板
1.2 详情页
只是大概模板
2. 设计网页的前后端交互接口
约定交互1: 获取题目的列表
约定交互2: 获取指定题目的详情信息
约定交互3: 向服务器提交编写的代码
3. 服务器的API
由于这些前后交互需要用到 json 格式去传入数据.(可以不用,但是我这里约定了使用这样的一个格式)
3.1 导入 JackSon 库
3.2 创建 ProblemServlet 类
创建 api 包, 在包下创建 这个类
这个类对应的是交互1
package api;
import com.fasterxml.jackson.databind.ObjectMapper;
import dao.Problem;
import dao.ProblemDao;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
@WebServlet("/problem")
public class ProblemServlet extends HttpServlet {
// 这个 ObjectMapper 是 Jackson 中的一个重要的类
private final ObjectMapper objectMapper = new ObjectMapper();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setStatus(200);
resp.setContentType("application/json;charset=utf8");
// 获取全部的题目列表
ProblemDao problemDao = new ProblemDao();
List<Problem> problems = problemDao.selectAll();
// 转化成json格式字符串
String respString = objectMapper.writeValueAsString(problems);
resp.getWriter().write(respString);
}
}
3.3 测试 ProblemServlet 类
3.4 创建 DescServlet 类
同样在api包下, 创建 DescServlet 类
这个类对应交互2
package api;
import com.fasterxml.jackson.databind.ObjectMapper;
import dao.Problem;
import dao.ProblemDao;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/desc")
public class DescServlet extends HttpServlet {
private final ObjectMapper objectMapper = new ObjectMapper();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setStatus(200);
resp.setContentType("application/json;charset=utf8");
// 首先获取到id
String idString = req.getParameter("id");
if(idString == null || "".equals(idString)){
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().write("<h3>id丢失</h3>");
return;
}
int id = Integer.parseInt(idString);
// 获取对应id题目的详情页
ProblemDao problemDao = new ProblemDao();
Problem problem = problemDao.selectOne(id);
// 将problem 转成json格式字符串 写回响应
String respString = objectMapper.writeValueAsString(problem);
resp.getWriter().write(respString);
}
}
3.5 测试 DescServlet 类
3.6 创建 ResultServlet 类
同样放到 api 包里.
这个类对应的是交互3
由于这里请求也需要带着这个json格式.所以使用两个静态内部类来表示请求body和响应body的格式.
静态内部类 ResultRequest
/**
* 结果的请求body格式
*/
static class ResultRequest{
public int id;
public String code;
}
静态内部类 ResultResponse
/**
* 结果的响应body格式
*/
static class ResultResponse{
// error 0:运行成功 1: 编译出错 2: 运行出错 3:其他错误
public int error;
public String reason;
public String stdout;
}
实现 doPost
private final ObjectMapper objectMapper = new ObjectMapper();
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setStatus(200);
resp.setContentType("application/json;charset=utf8");
// 1. 读取请求正文, 按照json格式读取
String body = readBody(req);
ResultRequest resultRequest = objectMapper.readValue(body, ResultRequest.class);
// 2. 根据 id 从数据库中查找到题目的测试用例
ProblemDao problemDao = new ProblemDao();
Problem problem = problemDao.selectOne(resultRequest.id);
// 测试用例代码
String testCode = problem.getTestCode();
// 提交的代码
String requestCode = resultRequest.code;
// 3. 把用户提交的代码和测试用例的代码,给瓶装成一个完整的代码
String finalCode = mergeCode(requestCode,testCode);
// 4. 创建一个 Task 实例, 调用里面的 compileAndRun 来进行编译运行
Task task = new Task();
Question question = new Question();
question.setCode(finalCode);
Answer answer = task.compileAndRun(question);
// 5. 根据 Task 运行的结果, 包装成一个 Http 响应
ResultResponse resultResponse = new ResultResponse();
resultResponse.error = answer.getError();
resultResponse.reason = answer.getReason();
resultResponse.stdout = answer.getStdout();
String respString = objectMapper.writeValueAsString(resultResponse);
resp.getWriter().write(respString);
}
实现 readBody 方法
/**
* 读取请求的正文
* @param req 请求
* @return 以字符串形式返回
* @throws UnsupportedEncodingException 字符编码不支持的异常
*/
private String readBody(HttpServletRequest req) throws UnsupportedEncodingException {
// 1. 根据 Content-Length 获取 body 中的长度(单位是字节)
int contentLength = req.getContentLength();
// 2. 按照找个长度准备一个 byte[]
byte[] buffer = new byte[contentLength];
// 3. 通过 req 里面的 getInputStream 方法, 获取body的流对象(body比较长)
try (InputStream inputStream = req.getInputStream()){
// 4. 基于这个流对象,读取内容,将读取到内容放到byte[]数组中
inputStream.read(buffer);
} catch (IOException e) {
e.printStackTrace();
}
// 5. 把这个 byte[] 的内容构造成一个 String
return new String(buffer,"utf8");
}
实现 mergeCode 方法
/**
* 测试用例代码和提交的代码合并
* @param requestCode 提交的代码
* @param testCode 测试用例代码
* @return 返回合并后的代码
*/
private String mergeCode(String requestCode, String testCode) {
// 找到最后一个"}"的位置
int index =requestCode.lastIndexOf("}");
if (index == -1){
// 这里是不存在的情况
return null;
}
// 截取前面的代码
String curCode = requestCode.substring(0,index);
// 拼接代码
return curCode + testCode + "\n}";
}
3.7 测试 ResultServlet 类
打开postman应用
如果不会使用postman 可以看 博文 Postman的使用
3.8 这里发现 如果 id不存在 或者 code为空的时候出现服务器错误.
更改代码
并在 comon包中 创建这两个类继承 Exception
当catch到异常的时候, 设置状态码为3
3.9 再次对 ResultServlet 进行测试
