【JavaEE】简单前后端分离小项目-表白墙

原创

已于 2023-06-04 08:41:59 修改 · 1.7k 阅读

标签

#java-ee #servlet #java

于 2023-06-02 14:19:13 首次发布

本文详细介绍了使用JavaEE和Servlet实现一个简单的前后端分离的表白墙项目。通过JSON格式交换数据，实现了页面刷新不丢失信息，以及GET和POST请求的处理。前端利用Ajax进行异步通信，动态展示表白内容，同时提供了错误检查和用户体验优化。

plus版表白墙！✿✿ヽ(°▽°)ノ✿

文章目录

JavaEE & 简单前后端分离小项目 - 表白墙

1. body格式约定 - 应用层协议

2. 后端处理请求

2.1 模板

2.2 doGet方法

2.3 doPost方法

3. 前端制作请求并解析响应

3.1 原前端页面的代码

3.2 刷新时发送GET请求

3.3 点击发送时构造Post请求

3.4 再优化

4. 测试

JavaEE & 简单前后端分离小项目 - 表白墙

在前面的学习中，我们已经制作了表白墙的页面，并且学习了HTTP、Tomcat、Servlet的知识，而这些知识，就相当于一句英语句子的单词或者字母，通过这些，就可以开始做一些小项目了！

JavaEE & Servlet的API详解_s:103的博客-CSDN博客

JavaScript实战训练小项目 & WebAPI_s:103的博客-CSDN博客

而我对表白墙的优化就是，服务器不关闭，刷新也不会把之前填的都删除

1. body格式约定 - 应用层协议

这里，body我采取的格式是json
- 应用层协议没有什么必须不必须的，只是json流行，整齐，有api（解析和包装和包装得好），程序员爱好等等…

在这里插入图片描述

通过前端代码，并且根据实际上所实现的功能，得出json应该有的键值对：
在这里插入图片描述

以此构造后端对象：

class Love {
   
   
    public String from;
    public String to;
    public String love;

    @Override
    public String toString() {
   
   
        return "Love{" +
            "from='" + from + '\'' +
            ", to='" + to + '\'' +
            ", love='" + love + '\'' +
            '}';
    }
}

2. 后端处理请求

2.1 模板

与json对应的对象Love

class Love {
   
   
    public String from;
    public String to;
    public String love;

    @Override
    public String toString() {
   
   
        return "Love{" +
                "from='" + from + '\'' +
                ", to='" + to + '\'' +
                ", love='" + love + '\'' +
                '}';
    }
}

Servlet程序（/love），继承HttpServlet
- doGet方法 => 浏览器访问前端页面，后端应该响应已有的“甜言蜜语”集合，即Love集合（list）
- doPost方法 => 浏览器前端页面发送“甜言蜜语”，后端应该将这段“甜言蜜语”放进Love集合
ObjectMapper则是，json转换器

@WebServlet("/love")
public class ShowLove extends HttpServlet {
   
   
    private ObjectMapper objectMapper = new ObjectMapper();
    private List<Love> list = new ArrayList<>();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
   
   
        

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
   
   
		
    }
}

注意：

要引入一些依赖（刷新触发加载）

其他设置跟之前一样，不做讲解

JavaEE & Servlet的API详解_s:103的博客-CSDN博客

JavaEE & Tomcat & Servelet第一个helloworld程序_s:103的博客-CSDN博客

2.2 doGet方法

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
   
   
    //如果有输入操作互动的操作，在这里refresh是不合理的，因为写着写着就刷新了，体验不好
    // 所以在这里设置refresh没用！

    //转换为json字符串！
    String result = objectMapper.writeValueAsString(list);
    resp.setContentType("application/json; charset=utf8");
    resp.getWriter().write(result);

}

将Love集合list，通过ObjectMapper调用writeValueAsString方法去转化为json字符串
设置响应的格式为json，字符集为utf8
获取响应的输出流，将后端代码的json字符串输出出去，投喂给请求发起者的前端代码

在这里插入图片描述

2.3 doPost方法

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
   
   
    Love love = objectMapper.readValue(req.getInputStream(), Love.class);
    list.add(love);
    //默认返回的就是200 ok的空body报文
}