引言

首先我认为，最清楚的就是了解了前后端进行的初步作用，前端是布置画面，制作用户的交互，后端相当于，保存你的每一步操作，每一步进行的操作，历史搜索记录，保存一些数据，以及和前端相互连接，当然这个也是针对这个小项目，要是更大的则也需要更加细化。

目录

引言

一、准备工作💖

二、编写后端代码😍

三、编写前端代码 💫 

一、准备工作💖

（一）引入依赖

pom.xml,提前下载好的依赖（假如说你是第一次下载会耗费点时间。）

    4.0.0    org.example    messageWall    1.0-SNAPSHOT            8        8                                    javax.servlet            javax.servlet-api            3.1.0            provided                                                com.fasterxml.jackson.core                jackson-databind                2.14.2                

（二）

WEB.xml

    Archetype Created Web Application

（三）静态页面（html,css)需要放到webapp目录下面（不是WEB-INF)

（四）下载SMART-Tomcat

这个是mac系统下的setting,假如是windows就可以直接点击file->setting,其余操作一致

下载成功会，对smart-tomcat进行配置，点击那个add,然后先找到下载的smart-TOMCAT

第一个是tomcat的路径需要选择好。其余的可以不动，我改的一个context path 是java,那么后续请求，要和这个路径一致

二、编写后端代码😍

此处的表白墙页面，可以输入内容，点击提交后，也可以显示内容

所以此处后端需要的工作，主要就两个内容

用户点击提交的时候，把刚才输入的内容通过网络传输给服务器，由服务器来保存这个数据

后续有页面加载的时候，此时通过网络，从服务器获取到之前保存好的内容

需要进行前后端交互接口的约定，约定好，前端会给后端发一个什么样子的Http请求，后端又回返回一个什么样的http响应

针对存档操作来说

前端发起一个HTTP请求

POST/messageWall/message->这里的路径怎么约定都可以，但是务必保证前后端一致

此处约定使用JSON格式，把数据传输到后端，前后端数据交互的时候，格式具体什么样子，随意约定。（实际上，json确实是当下最流行的一种方式）

{

from:"黑猫"

to:"白猫“

message"喵"}

服务器返回一个HTTP响应

HTTP/1.1 200 ok

针对读档操作（前端页面加载的时候，需要从服务器拿到之前已经提交的数据）

请求：

GET/messageWall/message

响应：

HTTP/1.1 200 ok

(响应的json应该是数组，使用[]表示，返回的数据会有多条）

[{

from:"黑猫"

to:"白猫"

message:"喵"

}

{

from:"白猫"

to:"黑猫"

message:"喵"

}

]

编写servlet的时候，每次修改代码，都要记得重新启动服务器（修改java代码，必然要重启，需要重新编译），修改前端代码建议也需要重启，这些静态页面可能会被tomcat给提前加载并缓存在内存中，此时修改代码，不一定会同步到内存里。

通过抓包可以确定是前端问题，还是后端的问题

如果抓包发现，ajax的http请求没发出来，大概率前端问题，假如是前端的代码问题，我们就更应该关注浏览器JS调试，可以使用F12，苹果就是点击开发，显示JS控制台

如果发现ajax的http请求发送了，内容符合要求，那么就是后端的问题

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;    @Override    public String toString() {        return "Message{" +                "from='" + from + '\'' +                ", to='" + to + '\'' +                ", message='" + message + '\'' +                '}';    }}@WebServlet("/message")public class MessageServlet extends HttpServlet {    //首先要把一个json转化为java对象    private ObjectMapper objectMapper=new ObjectMapper();    //此处把消息保存到内存中（一旦重启服务器，内存数据就会消失了。更科学的做法，应该是保存到数据库里面）    private List messageList=new ArrayList<>();    @Override    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {       //1.需要能够读取请求body,转换成java对象        Message message=objectMapper.readValue(req.getInputStream(),Message.class);        //2.得到message之后，需要把message保存到服务器中        messageList.add(message);        System.out.println("服务器收到message:"+message.toString());        //3.返回响应，（其实没啥大必要，主要是返回一个200ok就行，body可以没有）        resp.setStatus(200);                          //设置成功状态码，会更加清晰        resp.getWriter().write("ok");    }    @Override    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {      //1.把内存中的这些Message，组织成json格式，返回到响应中       String respJson=objectMapper.writeValueAsString(messageList);       //这个代码十分关键，告诉浏览器，返回的响应的body是json格式（utf8编码）       resp.setContentType("application/json; charset=utf8");       resp.getWriter().write(respJson);        // 2.针对List/数组这种，jackon会自动把数据整理成json数组，里面每个对象，又会被jsckon转换成{}json对象(json对象属性名字，也是和Message类的成员名字对应的）    }}

三、编写前端代码 💫 

这里面的get和POST方法，和后端的相互对应，前端发出post，后端去接收，并且，在服务器的日志上显示，前端的GET，被后端进行的保存，只要服务器没有关闭，就会一致保存你的记录（前端编写的就是说，让记录保存在页面上，你下次打开页面（但是服务器未关闭的情况下），就会出现

                        
        
表白墙
        
输入内容后点击提交, 信息会显示到下方表格中
        
            谁:                     
        
            对谁:                     
        
            说:                     
        
            提交        
            
        

最后你连接的过程可能有几个误区.

你的前端页面不是说你在vs打开，而是说你的页面在服务器开始启动的时候，就已经被上传到TOMCAT上了，这时候你就需要在浏览器搜索，你设置的这个东西localhosthttp://localhost:8080/messageWall/messageWall.html这里有人会疑惑，messageWall是什么，后面那个是你的前端名字，前面那个是你的url路径，你可以自己去设置,Context path(这个）

2.静态页面（html,css)需要放到webapp目录下面（不是WEB-INF)

来源地址：https://blog.csdn.net/weixin_72953218/article/details/133827710