6月1日
在使用html文件完成了前端视图层的代码编写之后，各个页面包含的数据内容得以很好地展现。接下来我进行了与后端对接的工作，主要完成的内容是将html文件替换成jsp文件，在jsp页面中优化html页面的展示，并为完成后端代码编写工作的组员提供controller层后端接口。由于前端并未获得后端产生的数据，所以需要在各个controller文件的函数中自己输入测试数据以存入session，再进行前端跳转是否正常、是否与后端传入session数据对应的检测。
html文件与jsp文件的转换：
使用html文件可以在编写视图层代码的过程中易于调试，而在与后端实现更好的对接时需要使用jsp文件，使得页面中的数据更好地获取与展现。实现html文件到jsp文件的转换，首先需要加入jsp的头部声明与jsp常用工具c的声明：
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>以岗位推荐和岗位搜索中多条岗位信息的展示为例，使用工具c进行循环与条件的判断，以实现前端组件可以根据后端数据的情况来展示。这部分的html代码在之前的博客有提到，替换为jsp代码后的情况如下：
<c:forEach var="jd" items="${sessionScope.jdList}" varStatus="no">
<div class="col-12 col-lg-6" style="display: inline">
<div class="card">
<div class="card-header">
<ul class="nav nav-pills card-header-pills pull-right" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab-${no.count*3}">公司信息</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-${no.count*3+1}">岗位信息</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-${no.count*3+2}">岗位描述</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="tab-${no.count*3}" role="tabpanel">
<h1 class="card-title">${jd.getPositionName()}</h1>
<p class="card-text">${jd.getCompanyName()}</p>
<a href="${pageContext.request.contextPath}/toDetailsPage${jd.getPositionId()}" class="btn btn-primary">查看详情</a>
</div>
<div class="tab-pane fade" id="tab-${no.count*3+1}" role="tabpanel">
<div class="admin-task-bd">
<p>工作城市：${jd.getAddress()}</p>
<p>公司性质：${jd.getCompanyInfo()}</p>
<p>招聘名额：
<c:if test="${jd.getHeadCount()<0}">
若干人
</c:if>
<c:if test="${jd.getHeadCount()>0}">
${jd.getHeadCount()}
</c:if>
</p>
<p>薪资：${jd.getSalary()}</p>
</div>
<a href="${pageContext.request.contextPath}/toDetailsPage${jd.getPositionId()}" class="btn btn-primary">查看详情</a>
</div>
<div class="tab-pane fade" id="tab-${no.count*3+2}" role="tabpanel">
<p class="card-text">${jd.getJobDescription()}</p>
<a href="${pageContext.request.contextPath}/toDetailsPage${jd.getPositionId()}" class="btn btn-primary">查看详情</a>
</div>
</div>
</div>
</div>
</div>
</c:forEach>前后端对接的工作内容：
以岗位搜索中选择城市的按钮为例，在前端文件中更换href的路径，以此跳转至后端controller层，前端代码的编写方式如下：
<a class="dropdown-item" style="display: inline" href="${pageContext.request.contextPath}/selectCity北京"> 北京</a>
<a class="dropdown-item" style="display: inline" href="${pageContext.request.contextPath}/selectCity上海"> 上海</a>
<a class="dropdown-item" style="display: inline" href="${pageContext.request.contextPath}/selectCity广州"> 广州</a>
<a class="dropdown-item" style="display: inline" href="${pageContext.request.contextPath}/selectCity深圳"> 深圳</a>而在后端controller层需要编写函数，以@RequestMapping注解的形式接收此跳转，并获取cityName的值。在函数内进行数据的获取与处理，并在此为后端的组员备注需要获取与传递的数据形式，最后调用return "searchPage"可以回到前端的searchPage.jsp页面：
@RequestMapping("/selectCity{cityName}")
public String selectCity(@PathVariable String cityName, HttpSession session) {
//将cityName设为筛选城市
if (cityName.equals("全部")) {
cityName = null;
}
session.setAttribute("cityName",cityName);
//后端需要实现：通过城市、行业、最低薪资查找得出结果返回到list里面
return "searchPage";
}后端controller层的定义以及前后端对接测试代码的编写：
编写AllController文件，为后端设置跳转路径，并进行数据的request、response简单处理测试。controller方法的定义如下：
@Controller
public class AllController {
@RequestMapping("/toLogin")
public String toLogin(HttpSession session);
@RequestMapping("/toRegister")
public String toRegister(HttpSession session);
@RequestMapping("/login")
public String login(String phoneNumber, String password, HttpSession session);
@RequestMapping("/register")
public String register(String username, String phoneNumber, String password, String passwordCheck, HttpSession session);
@RequestMapping("/toRecommendPage")
public String toRecommendPage(HttpSession session);
@RequestMapping("/toRecommendPage1")
public String toRecommendPage1(HttpSession session);
@RequestMapping("/toSearchPage{pageId}")
public String toSearchPage(@PathVariable int pageId,HttpSession session);
@RequestMapping("/toDetailsPage{positionId}")
public String toDetailsPage(@PathVariable int positionId, HttpSession session);
@RequestMapping("/addToCollection{positionId}")
public String addToCollection(@PathVariable int positionId, HttpSession session);
@RequestMapping("/cancelCollection{positionId}")
public String cancelCollection(@PathVariable int positionId, HttpSession session);
@RequestMapping("/selectCity{cityName}")
public String selectCity(@PathVariable String cityName, HttpSession session);
@RequestMapping("/selectIndustry{industry}")
public String selectIndustry(@PathVariable String industry, HttpSession session);
@RequestMapping("/selectMinSalary{minSalary}")
public String selectMinSalary(@PathVariable String minSalary, HttpSession session);
@RequestMapping("/aboutUs")
public String aboutUs(HttpSession session);
@RequestMapping("/toProfile")
public String toAnalyse(HttpSession session);
@RequestMapping("/uploadFile")
public String uploadFile(HttpSession session);
@RequestMapping("/toIndustryAnalyse{industry}")
public String toIndustryAnalyse(@PathVariable String industry, HttpSession session);
}我在负责前端工作的同时，需要在controller层中设置自测数据，观察在前后端对接的过程中，前端的显示是否正确。以进入到岗位详情页面为例，需要完成的函数编写如下：
@RequestMapping("/toDetailsPage{positionId}")
public String toDetailsPage(@PathVariable int positionId, HttpSession session) {
//根据某一岗位id获取到该条岗位信息详情，将jd放入session中
System.out.println(positionId);
Jd jd = new Jd();
jd.setPositionId(positionId);
jd.setCompanyName("杭州科技有限公司");
jd.setPositionName("软件工程师");
jd.setAddress("杭州");
jd.setCompanyInfo("民营公司,电子技术/半导体/集成电路");
jd.setHeadCount(10);
jd.setSalary("6-8千/月");
jd.setJobDescription("JobDescription");
jd.setUrl("https://msearch.51job.com/jobs/hangzhou/131327734.html?rc=03");
session.setAttribute("jd",jd);
//查询收藏表有没有收藏这个岗位，有就把isCollection设为true，否则设为false
//session.setAttribute("isCollection",true);
return "details";
}经过了如上的前端优化以及与后端对接的工作，我们成功地将所有前端页面与后端框架相连接起来，并为实现后端编码工作的组员提供了结构的规范，最终完成了前端数据的展示以及项目前后端代码的对接。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
