一、页面设计

但是我们可以自己思考一下，一共需要几个页面，每个页面都是干什么的，大概什么样子。

题目列表页

功能：展示出当前都有哪些项目。点击某个题目就可以跳转到题目的详情页。

题目详情页

功能：展示题目的具体信息~

接下来我们引入下载好的网页模板代码，调整出自己需要的页面。

当前是通过写死页面的方式，来显示题目的。
真实情况是需要让页面通过 Ajax 的方式从服务器来获取数据。

JS 中原生的 Ajax 是基于 XMLHttpRequest 类来实现的，用起来比较麻烦。我们使用第三方库提供的封装版本 jQuery 提供的 Ajax 函数即可。

JS 中安装第三方库非常简单，一行代码引入即可。

二、获取到后台数据

通过 makeProblemTable 函数把后台数据转换成 HTML 页面片段。

// 通过这个函数来把数据转换成 HTML 页面片段
function makeProblemTable(data) {// 获取到前台列表中的元素let problemTable = document.querySelector("#problemTable");//for (let problem of data) {let tr = document.createElement("tr");// idlet tdId = document.createElement("td");tdId.innerHTML = problem.id;tr.appendChild(tdId);// 题目let tdTitle = document.createElement("td");let a = document.createElement("a");a.innerHTML = problem.title;// 跳转到 problemDetail.html 页面a.href = 'problemDetail.html?id=' + problem.id;// 跳转到新页面a.target = '_blank';tdTitle.appendChild(a);tr.appendChild(tdTitle);// 难度let tdLevel = document.createElement("td");tdLevel.innerHTML = problem.level;tr.appendChild(tdLevel);problemTable.appendChild(tr);}
}

验证题目列表页，测试网页成功显示

点击题目标题，我们将跳转到题目详情页。
这时候需要再加一个页面 problemDetail.html

实现思路

在题目列表页的 a 标签里填地址，problemDetail.html 的路径，同时把题目 id 通过 query string 传递过去。

完成题目详情页的代码

        

代码编辑框

修改 index.html 的跳转页面

// 跳转到 problemDetail.html 页面a.href = 'problemDetail.html?id=' + problem.id;// 跳转到新页面a.target = '_blank';

遇到换行问题

从服务器获取的题目详情没有换行，HTML 不识别 \n。有两种解决方法：
① 把返回的数据中的 \n 都替换成 

② 给页面的标签里面套一层  标签，让其能够识别 \n
 
我们选择了第二种. 
// 语法就像开好一个容器，把东西放进去，最后把容器封起来。
function makeProblemDetail(problem) {// 1. 获取到 problemDesc，把题目详情填写进去// # 号表示定位到前端 id 为 problemDesc 的 div 中，准备往里面添加数据let problemDesc = document.querySelector("#problemDesc");// 题目的标题let h3 = document.createElement("h3");h3.innerHTML = problem.id + "." + problem.title + "_" + problem.level;problemDesc.appendChild(h3);// 题目的详情，pre 能识别从 Java 中的 \n 换行let pre = document.createElement("pre");let p = document.createElement("p");p.innerHTML = problem.description;pre.appendChild(p);problemDesc.appendChild(pre);
}
getProblem();
 
小结 
通过 Ajax 的方式获取到后端数据；
 再把数据填充到前端页面里面，根据不同数据填充不同的模块；
 给提交按钮注册回调函数；
 在回调函数里面，根据得到的响应决定如何显示编辑运行结果。 
引入 ace.js 
这是一个前端版本的代码编辑器，让代码编辑框更加好看。 
直接引入对应的地址即可安装。