前后端交互【3】

沉燃
207 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。 在前后端交互【2】中，第二点如何分析前端传过来的数据没有写明白，今天在继续捋捋，再说说如何将后台的数据返回给前端，后端传过来的数据如何解析。

传纸条 image.png

同学A传给同学B的纸条上的信息，同学B是经过眼睛看，大脑分析才能回复在纸条上，再传回给同学A，那么前端后台没有人一样的眼睛和大脑，如何知道前端传过来的数据是做什么用，该如何用？

1、后台如何分析前端传过来的数据

通常是采用三层架构来处理：a、控制层（controller）：控制层的职能是负责读取视图表现层的数据，控制用户的输入，并调用业务层的方法。b、业务层（service）：业务层需要根据系统的实际业务需求进行逻辑代码的编写，有些业务逻辑需要通过与数据交互的，则业务逻辑层需要调用数据访问层的相关方法实现，对于一些不需要与数据库进行交互的，直接编写业务代码，将执行的结果反馈给控制层。c、数据访问层（dao）：负责与数据库的数据交互，将数据进行存储读取操作。 image.png

控制层 接收前端传过来的数据，不做其他操作，只把数据交给业务逻辑层处理

TestService testService = new TestService();
protected void doPost(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException{
    String testName= request.getParameter("name");
    String testAge= request.getParameter("age");
    testService .doService(testName，testAge);
}

业务逻辑层 对数据访问层进行组装和处理，添加事务支持，保证原子性。

public class TestService {
     TestDao testDao = new TestDao();
      public boolean doService(String name,String age){
           testDao .doDao1();
           testDao.doDao2(name,age);
           return true;
      }
}

数据访问层 对数据库进行操作

public class TestDao{
      public boolean doDao1(){
             String sql ="select * from ...."；
             return true;
      }
       public boolean doDao2(String name,String age){
             String sql ="insert into ...."；
             return true;
      }
}
2、如何将后端的数据返回给前端
隐式对象
输入/输出对象requestresponseout
作用域通信对对象pageContextrequestsessionapplication
Servlet对象pageconfig
错误对象exception
request、session、application：

相同点： 可以存储属性 不同点： request中存储的数据仅在一个请求中可用。
session中存储的数据在一个会话的有效期内可用。
application中存储的数据在整个web项目中可用。

image.png

image.png

image.png 使用打印流就不能跳转页面，不然不能输出。所以传递数据通常使用Ajax，输出的数据会封装到Ajax的回调函数中，传递数据的格式一般使用json。

protectded void doGet(HttpServletRequest request,HttpServletResponse response)
      throws ServletException,IOException){
      PrintWriter out=response.getWriter();
      out.print("<div>222222222222</div>");
      }
  }

image.png 后台使用打印流输出的数据会作为回调函数的参数被接收。

$.post(
     "add",
     {"user":user,"age":age},
     function(result){
         if(result.msg){
              if(result.user !=null){
                  window.location.replace("per.jsp");
              }
         }else{
         alert("error");
         }
     },"json"
)
3、后台传递给前端的数据前端如何解析

image.png 用jstl语句和EL表达式接收域对象（pageContext，request，session，application）中的数据并处理。
使用Ajax的回调函数来接收out输出的数据并进行处理。

image.png

4、小结

还记得传纸条么？前后端交互其实很像，只不过其中的过程抽象化了，同学A是前端，同学B是后台，同学A写完纸条，拜托同学传递就是前端封装好数据，更根据传给同学B这个接口传递纸条这个数据，同学B顺利拿到数据后，通过眼睛接收数据查看纸条，眼睛就像控制层，接收数据后，传递给大脑，大脑就像业务逻辑层，调动大脑的各个部分，就像数据访问层，，组织好语言后写到纸条上，封装好然后返回数据。
写到这里就写完啦，总感觉自己知道的和写出来的一点都不符合，文笔也干瘪，后续会继续把文章修修改改，期望能越写越好。
感谢阅读，如若有错，还请指正。

avatar
文章
阅读
粉丝