用Servlet实现一个简单的表白墙

1. 准备工作

创建项目,引入依赖......

将静态页面放到项目中(放在webapp目录下):

当前,这个表白墙页面,已经可以输入内容,点击提交之后也能显示内容,后续后端要做的工作即:

①存档

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

②读档

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

都需要进行前后端交互接口的约定.

约定好,前端会给后端发起一个什么样的HTTP请求,后端返回什么样的HTTP响应.

html中的每个元素,同时都可以映射到js中的一个对象.(文档-对象模型)

通过对象的属性,就能获取到页面的内容.

修改对象的属性,也就能更新页面的内容.

2. 后端操作

非持久化保存数据:

class Message{public String from;public String to;public String message;@Overridepublic String toString() {return "Message{" +"from='" + from + '\'' +", to='" + to + '\'' +", message='" + message + '\'' +'}';}
}@WebServlet("/message")
public class MessageServlet extends HttpServlet {private ObjectMapper objectMapper = new ObjectMapper();//此处把消息保存到内存中(一旦重启服务器,内存数据就没了)private List<Message> messageList = new ArrayList<>();    //更科学的方式,应该是保存到数据库中//用来实现存档操作@Overrideprotected 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 );//3.返回响应(不太必要,主要是返回一个200 OK就行了,body可以没有)resp.setStatus(200);resp.getWriter().write("ok");}//用来实现读档操作@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//把我们内存中的这些Message,组织成json格式,返回到响应中.String respJson = objectMapper.writeValueAsString(messageList);//告诉浏览器,返回的响应的body是一个json格式.resp.setContentType("application/json;charset=utf8");resp.getWriter().write(respJson);}
}

持久化保存数据:

class Message{public String from;public String to;public String message;@Overridepublic String toString() {return "Message{" +"from='" + from + '\'' +", to='" + to + '\'' +", message='" + message + '\'' +'}';}
}@WebServlet("/message")
public class MessageServlet extends HttpServlet {private ObjectMapper objectMapper = new ObjectMapper();//此处把消息保存到内存中(一旦重启服务器,内存数据就没了)//private List<Message> messageList = new ArrayList<>();    //更科学的方式,应该是保存到数据库中//用来实现存档操作@Overrideprotected 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);try {save(message);} catch (SQLException e) {e.printStackTrace();}System.out.println("服务器收到message: "+ message );//3.返回响应(不太必要,主要是返回一个200 OK就行了,body可以没有)resp.setStatus(200);resp.getWriter().write("ok");}//用来实现读档操作@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//把我们内存中的这些Message,组织成json格式,返回到响应中.List<Message> messageList = null;try {messageList = load();} catch (SQLException e) {e.printStackTrace();}String respJson = objectMapper.writeValueAsString(messageList);//告诉浏览器,返回的响应的body是一个json格式.resp.setContentType("application/json;charset=utf8");resp.getWriter().write(respJson);}//通过jdbc,往数据库中存一个数据.private void save(Message message) throws SQLException {//1.创建数据源DataSource dataSource = new MysqlDataSource();((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/java108?characterEncoding=utf8&useSSL=false");((MysqlDataSource) dataSource).setUser("root");((MysqlDataSource) dataSource).setPassword("808250");//2.建立连接Connection connection = dataSource.getConnection();//3.构造SQLString sql = "insert into message values(?,?,?)";PreparedStatement statement = connection.prepareStatement(sql);statement.setString(1,message.from);statement.setString(2,message.to);statement.setString(3,message.message);//4.执行SQLstatement.executeUpdate();//5.释放资源,关闭连接statement.close();connection.close();}private List<Message> load() throws SQLException {//1.创建数据源DataSource dataSource = new MysqlDataSource();((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/java108?characterEncoding=utf8&useSSL=false");((MysqlDataSource) dataSource).setUser("root");((MysqlDataSource) dataSource).setPassword("808250");//2.建立连接Connection connection = dataSource.getConnection();//3.构造SQLString sql = "select * from message";PreparedStatement statement = connection.prepareStatement(sql);//4.执行SQLResultSet resultSet = statement.executeQuery();//5.遍历结果集合List<Message> messageList = new ArrayList<>();while (resultSet.next()){Message message = new Message();message.from = resultSet.getString("from");message.to = resultSet.getString("to");message.message = resultSet.getString("message");messageList.add(message);}//6.关闭连接,释放资源resultSet.close();;statement.close();connection.close();return messageList;}
}

2.1 存档(非持久化保存数据)

针对存档操作来说,前端发起一个HTTP请求.

此处约定使用json格式,把数据输出到后端.

让服务器返回一个HTTP响应. HTTP/1.1 200OK.

当前这个程序并不能在服务器重启之后保存数据,也就是把数据保存在了内存里,这样的设定并不科学.应该让数据持久化保存.

在刚才的代码基础上,引入数据库,来保存上述数据.

2.2 读档

前端页面加载的时候,需要从服务器拿到之前已经提交的数据.

响应的json应该是数组了,返回的数据会有多条.

2.3 用数据库-持久化保存数据

2.3.1 引入数据库的依赖(驱动包)

<!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
<dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.32</version>
</dependency>