表白墙网站练习【前端+后端+数据库】

开发该表白墙（简单网站）的基本步骤：
1.约定前后端交互接口
2.开发服务器代码

1. 编写Servlet能够处理前端发来的请求
2. 编写数据库代码，来获取/存储关键数据

3.开发客户端代码

1. 基于ajax能够构造请求以解析响应
2. 能够响应用户的操作（点击提交按钮之后，触发服务器发送请求的行为）

MVC

Model（操作数据存取的逻辑） View（给用户展示的界面） Controller（控制器，处理请求之后的关键逻辑）

【view->controller->model】

具体效果

由于主要代码是控制后端，前端界面美化就没有很详细的搞。

通过输入三条信息，然后展示在当前界面，通过后端连接数据库实现刷新该页面，或者重启服务器，用户之前输入的内容不消失的功能。

刷新、重启服务器刷新之后

可以通过MySQL查询存入数据库的信息

具体代码实现

项目目录结构【Maven】

源代码

DBUtil

import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;public class DBUtil {private static final String URL="jdbc:mysql://127.0.0.1:3306/sunyuhang?characterEncoding=utf8&useSSL=false";private static final String USERNAME = "root";private static final String PASSWORD ="111111";private volatile static DataSource dataSource = null;private static DataSource getDataSource(){if (dataSource == null){synchronized (DBUtil.class) {if (dataSource == null) {dataSource = new MysqlDataSource();((MysqlDataSource) dataSource).setUrl(URL);((MysqlDataSource) dataSource).setUser(USERNAME);((MysqlDataSource) dataSource).setPassword(PASSWORD);}}}return dataSource;}public static Connection getConnection() throws SQLException{return getDataSource().getConnection();}public static void close(Connection connection, PreparedStatement statement, ResultSet resultSet){if (resultSet != null){try {resultSet.close();} catch (SQLException e) {e.printStackTrace();}}if (statement !=null){try {statement.close();} catch (SQLException e) {e.printStackTrace();}}if (connection!=null){try {connection.close();} catch (SQLException e) {e.printStackTrace();}}}
}

massageServlet

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.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;class Message{public String from;public String to;public String message;
}@WebServlet("/message")
public class massageServlet extends HttpServlet {private ObjectMapper objectMapper = new ObjectMapper();//改成数据库就不需要这个变量了// private List messages  = new ArrayList<>();@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//处理提交消息请求Message  message = objectMapper.readValue(req.getInputStream(),Message.class);//最简单的方法就是保存到内存中//messages.add(message);//告知页面 返回的数据是 json  格式//有了这样的声明 jQuery Ajax  就会自动帮我们把字符串转换成 js 对象//没有的话 jQuery ajax 就会当成普通字符串来处理save(message);resp.setContentType("application/json;charset=utf8");resp.getWriter().write("{\"ok\":true}");}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//获取消息列表  只要把消息列表中的内容整个返回给客户端即可List messages = load();String jsonString = objectMapper.writeValueAsString(messages);System.out.println("jsonString:"+jsonString);resp.setContentType("application/json;charset=utf8");resp.getWriter().write(jsonString);}private void save(Message message){//把一条消息保存到数据库中Connection connection= null;PreparedStatement statement = null;try {//1.和数据库建立连接connection = DBUtil.getConnection();//2.构造 SQLString sql = "insert into message values(?,?,?)";statement = connection.prepareStatement(sql);statement.setString(1,message.from);statement.setString(2,message.to);statement.setString(3,message.message);//3.执行SQLstatement.executeUpdate();} catch (SQLException e) {e.printStackTrace();}finally {DBUtil.close(connection, statement,null);}}private List load(){//从数据库中获取到所有的消息List messages = new ArrayList<>();Connection connection = null;PreparedStatement statement = null;ResultSet resultSet = null;try {connection = DBUtil.getConnection();String sql = "select * from message";statement = connection.prepareStatement(sql);resultSet = statement.executeQuery();while (resultSet.next()){Message message = new Message();message.from = resultSet.getString("from");message.to = resultSet.getString("to");message.message = resultSet.getString("message");messages.add(message);}} catch (SQLException e) {e.printStackTrace();}finally {DBUtil.close(connection,statement,resultSet);}return messages;}
}

message_wall.html

将输入的数据按照json格式构造post请求

表白墙
谁
对谁
说什么
提交

web.xml【固定格式不必细究】

Archetype Created Web Application

pom.xml【通过maven中央仓库依赖导入】

4.0.0org.example20221116Message_wall1.0-SNAPSHOT88mysqlmysql-connector-java5.1.47com.fasterxml.jackson.corejackson-databind2.12.6.1javax.servletjavax.servlet-api3.1.0provided