引言
首先我认为，最清楚的就是了解了前后端进行的初步作用，前端是布置画面，制作用户的交互，后端相当于，保存你的每一步操作，每一步进行的操作，历史搜索记录，保存一些数据，以及和前端相互连接，当然这个也是针对这个小项目，要是更大的则也需要更加细化。
目录
一、准备工作💖
（一）引入依赖
pom.xml,提前下载好的依赖（假如说你是第一次下载会耗费点时间。）
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>org.example</groupId> <artifactId>messageWall</artifactId> <version>1.0-SNAPSHOT</version> <properties> <maven.compiler.source>8</maven.compiler.source> <maven.compiler.target>8</maven.compiler.target> </properties> <dependencies> <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api --> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> <scope>provided</scope> </dependency> <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind --> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.14.2</version> </dependency> </dependencies> </project>
（二）
web.xml
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd" > <web-app> <display-name>Archetype Created Web Application</display-name> </web-app>
（三）静态页面（html,css)需要放到webapp目录下面（不是WEB-INF)
（四）下载SMART-TOMCAT
这个是mac系统下的setting,假如是windows就可以直接点击file->setting,其余操作一致
下载成功会，对smart-tomcat进行配置，点击那个add,然后先找到下载的smart-TOMCAT
第一个是tomcat的路径需要选择好。其余的可以不动，我改的一个context path 是java,那么后续请求，要和这个路径一致
二、编写后端代码😍
此处的表白墙页面，可以输入内容，点击提交后，也可以显示内容
所以此处后端需要的工作，主要就两个内容
1.用户点击提交的时候，把刚才输入的内容通过网络传输给服务器，由服务器来保存这个数据
2.后续有页面加载的时候，此时通过网络，从服务器获取到之前保存好的内容
需要进行前后端交互接口的约定，约定好，前端会给后端发一个什么样子的http请求，后端又回返回一个什么样的http响应
1.针对存档操作来说
前端发起一个HTTP请求
POST/messageWall/message->这里的路径怎么约定都可以，但是务必保证前后端一致
此处约定使用json格式，把数据传输到后端，前后端数据交互的时候，格式具体什么样子，随意约定。（实际上，json确实是当下最流行的一种方式）
{ from:"黑猫" to:"白猫“ message"喵"}
服务器返回一个HTTP响应
HTTP/1.1 200 ok
2.针对读档操作（前端页面加载的时候，需要从服务器拿到之前已经提交的数据）
请求：
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<Message> 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类的成员名字对应的） } }
