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

1. 准备工作

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

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

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

①存档

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

②读档

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

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

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

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

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

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

2. 后端操作

非持久化保存数据:

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 {

    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 );
        //3.返回响应(不太必要,主要是返回一个200 OK就行了,body可以没有)
        resp.setStatus(200);
        resp.getWriter().write("ok");
    }


    //用来实现读档操作
    @Override
    protected 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;

    @Override
    public 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<>();    //更科学的方式,应该是保存到数据库中

    //用来实现存档操作
    @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);
        try {
            save(message);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        System.out.println("服务器收到message: "+ message );
        //3.返回响应(不太必要,主要是返回一个200 OK就行了,body可以没有)
        resp.setStatus(200);
        resp.getWriter().write("ok");
    }




    //用来实现读档操作
    @Override
    protected 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.构造SQL
        String 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.执行SQL
        statement.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.构造SQL
        String sql = "select * from message";
        PreparedStatement statement = connection.prepareStatement(sql);
        //4.执行SQL
        ResultSet 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>