Servlet小小项目练习：表白墙页面的实现

下面我们将通过这个实例，去感受前后端交接的处理流程

首先我们先来看一个这样的html代码：

    
    
    
    


    
    
    

        
表白墙
        
输入后点击提交，会将信息显示在表格中
        

        

            谁: 
            
        
        

            对谁: 
            
        
        

            说什么: 
            
        
        

            提交
        
    

    

效果图

 

 既然是前后端的交互我们就首先要搞清楚具体的流程

 

下面是我们的要达到的效果

 

接下来让我们看看具体的代码怎么写

 

完整的servlet代码

import com.fasterxml.jackson.databind.ObjectMapper;

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.ArrayList;
import java.util.List;

// 我们后端用这个类来接收前端提交的数据
class Message {
    public String from;
    public String to;
    public String message;
}
// 这里只是把我们的数据存到了我们的内存中，服务器一重启，数据就没了
@WebServlet("/message")
public class MessageWallServlet extends HttpServlet{
    // 因为前后端提交数据的格式是json，我们用jackson这个第三方库来接收处理前端传来的json类型的数据
    private ObjectMapper objectMapper = new ObjectMapper(); // 又因为我们两个方法都有用到这个objectMapper这个类，我们把他放到
    List messages = new ArrayList<>();
    @Override // 这个接口用来前端从后端获取数据,并显示在页面上
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // super.doGet(req, resp);
        resp.setContentType("application/json; charset=utf-8");  // 设置返回的数据类型
        // 把么message对象转成json格式的字符串

        String body = objectMapper.writeValueAsString(messages);
        resp.getWriter().write(body);  // 把json格式的数据写入返回响应的body当中

    }

    @Override // 这个接口用来后端接收从前端获取到的表单数据并储存起来
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // super.doPost(req, resp);
        Message message = objectMapper.readValue(req.getInputStream(), Message.class); // 读取数据到message对象当中
        messages.add(message); // 最直接的办法就是把这个直接存到内存里
        resp.setContentType("application/json; charset=utf-8"); // 设置返回的编码格式
        // 因为前端给我的数据格式是json类型的，所以我们后端返回给前端的数据也是json类型的（为了统一格式）
        resp.setStatus(200);
        resp.getWriter().write("{\"ok\":1}");
    }
}

 前端代码：

    
    
    
    
    




    
表白墙
    

        谁
        
    

    

        对谁
        
    

    

        说什么
        
    

    

        提交