前后端交互学习

---

title: 前后端交互学习
date: 2019-11-22

原本在个人博客上写了一些博文，现转移到CSDN上

前后端交互学习

前后端数据传输

• Dao层：
  
• JS代码

$(".finish").click(()=> {
    conceptObj.classifications = this.cls;
    conceptObj.name = $("#nameInput").val();

(获取数据存储到conceptObj中)

let formData=new FormData();

（定义formData，用于存储获取的数据）

if ((oid === "0") || (oid === "") || (oid == null)) {
    let file = new File([JSON.stringify(conceptObj)],'ant.txt',{
        type: 'text/plain',
    });
    formData.append("info", file);

（将conceptObj转为string放到file中，然后追加到formData中存起来）

$.ajax({
    url: "/repository/addConcept",
    type: "POST",
    cache: false,
    processData: false,
    contentType: false,
    async: false,
    data: formData,
    success: function (result) {

        if (result.code == "0") {
            alert("Create Success");

            window.location.href = "/repository/concept/" + result.data;
            //window.location.reload();
        }
    }
})

（ajax代码，url中/repository/addConcept为与controller进行连接的语句）

• Controller接口

@RequestMapping(value = "/addConcept",method = RequestMethod.POST)
public JsonResult addConcept(HttpServletRequest request) throws IOException {

    MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
    MultipartFile file=multipartRequest.getFile("info");
    String model=IOUtils.toString(file.getInputStream(),"utf-8");
    JSONObject jsonObject=JSONObject.parseObject(model);
    ConceptAddDTO conceptAddDTO=JSONObject.toJavaObject(jsonObject,ConceptAddDTO.class);

    HttpSession session=request.getSession();

    if(session.getAttribute("uid")==null){
        return ResultUtils.error(-1,"no login");
    }
    String uid=session.getAttribute("uid").toString();

    System.out.println("add concept & semantic");


    Concept concept = repositoryService.insertConcept(conceptAddDTO,uid);
    userService.conceptPlusPlus(uid);
    return ResultUtils.success(concept.getOid());
}

（HttpServletRequest request中的request为js中传输来的formdata，第一句将request进行强制类型转换，转换为MultipartHttpServletRequest类型的数据，下面仍是几个转换）

Concept concept = repositoryService.insertConcept(conceptAddDTO,uid);

（这一句将数据按照conceptAddDTO的格式插入到数据库中，利用insertConcept）

利用thymeleaf来实现按照id生成不同的页面

• Create-concept.js

success: function (result) {

    if (result.code == "0") {
        alert("Create Success");

        window.location.href = "/repository/concept/" + result.data;
        //window.location.reload();
    }
}

当创建成功后弹出创建成功对话框，并跳转到上面那个链接，链接位于controller中

• RepositoryRestController.java

@RequestMapping(value="/concept/{id}",method = RequestMethod.GET)
public ModelAndView getConceptPage(@PathVariable("id") String id,HttpServletRequest req){
    return repositoryService.getConceptPage(id,req);
}

在这个controller中调用service中的getconceptpage方法，在这个方法中绑定从js中拿到的并在各个后台文件中规定的数据

• RepositoryService.java

modelAndView.setViewName("conceptInfo");

首先将后台与前台页面绑定，通过设置View的name这样在conceptInfo页面拿到的数据就是从这个service里的数据，然后再设置model的值

modelAndView.addObject("classifications", classResult);
modelAndView.addObject("image", htmlLoadPath+concept.getImage());
modelAndView.addObject("year", Calendar.getInstance().getWeekYear());
modelAndView.addObject("date", sdf.format(concept.getCreateTime()));
modelAndView.addObject("related", relateArray);
modelAndView.addObject("user", userJson);
modelAndView.addObject("lastModifier", modifierJson);
modelAndView.addObject("lastModifyTime", lastModifyTime);

绑定需要的数据，在html中使用

• conceptInfo.html

<title th:text="${info.name}+' | C | OpenGMS'">Concept & Semantic | OpenGMStitle>

通过在通过th:text+”${info.name}”绑定拿到的数据

• 注：js与后台enetity绑定中数组的绑定
  就是写包含多个属性的对象，赋值后push到包含多个属性的对象中

/*classinfo 类似于reference,将选择的model的oid放到classinfo中*/
themeObj.classinfo = new Array();
var cla = {};
cla.mcname = $("#catagoryname").val();
cla.modelsoid = this.moid;
themeObj.classinfo.push(cla);

/*dataclassinfo 类似于reference,将选择的model的oid放到dataclassinfo中*/
themeObj.dataclassinfo = new Array();
var dcla = {};
cla.dcname = $("#categoryname2").val();
cla.datasoid = this.doid;
themeObj.dataclassinfo.push(dcla);