Directorio de artículos
1. Preparación
Hemos implementado un muro de confesiones de este tipo antes, el código front-end específico se refiere al artículo del muro de confesiones
, pero hay algunos problemas con el muro de confesiones que escribimos antes:
1. Si actualizamos la página/volvemos a abrir, los datos anteriores desaparecerán
2. Solo se puede operar en una sola máquina,
pero otras máquinas no pueden verlo. Entonces, resolveremos estos problemas ahora, dejemos que el servidor almacene los datos enviados por el usuario, y cuando un nuevo navegador abra la página, obtenga la datos del servidor Primero, creamos un proyecto web, introducimos dependencias relacionadas
Create webapp/WEB-INF/web.xml under src, e introducimos dependencias de mysql, dependencias de servlet y dependencias de jackson bajo pom.xml
<dependencies>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.49</version>
</dependency>
<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.1</version>
</dependency>
</dependencies>
Recuerde actualizar después de introducir la dependencia,
luego cree la clase de servicio y especifique la ruta de acceso como mensaje, la implementación específica se escribirá más adelante
@WebServlet("/messagewell")
public class MessageWellServlet extends HttpServlet {
Luego, importamos el código de front-end del muro de confesiones que escribimos antes en el directorio de la aplicación web, y puedes copiarlo en mi artículo anterior.
2. Interacción de front-end y back-end
Dado que queremos interactuar con el front-end y el back-end, debemos acordar la interfaz, qué solicitud HTTP envía el front-end al servidor y qué respuesta HTTP devuelve el servidor 1. Cuando se carga la página,
el el navegador obtiene información de confesión del servidor
Solicitud de front-end: GET/mensaje
Respuesta: HTTP/1.1 200OK, devuelve datos en forma de matriz json
2. Envíe la información de la confesión y el navegador enviará la información de la confesión al servidor
Solicitud de front-end: POST/mensaje, envíe datos en forma de json
Respuesta: HTTP/1.1 200OK
extremo posterior
Después de que nuestro front-end envíe los datos, se envían al servidor en formato json.Necesitamos crear dicha clase y luego usar jackson para recibir los datos.
class Message {
public String from;
public String to;
public String message;
}
Implementemos el procesamiento de nuestro servidor cuando el front-end envíe datos
List<Message> list = new ArrayList<>();
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
ObjectMapper objectMapper = new ObjectMapper();
//将body中的内容进行读取
Message message = objectMapper.readValue(req.getInputStream(),Message.class);
//将获取到的message对象加入到成员变量list中
list.add(message);
//设置响应状态码
resp.setStatus(200);
}
Con la base de doPost, nuestro método doGET es mucho más simple, simplemente escriba todos los datos en la lista de regreso a la respuesta
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置响应格式
resp.setContentType("application/json; charset=utf8");
ObjectMapper mapper = new ObjectMapper();
mapper.writeValue(resp.getWriter(),list);
}
Este método consiste en convertir el objeto java en una cadena json y escribirlo en la respuesta. Si cree que este método parece laborioso, también puede cambiarlo.
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置响应格式
resp.setContentType("application/json; charset=utf8");
ObjectMapper mapper = new ObjectMapper();
//将java对象转成json字符串
String jsonResp = mapper.writeValueAsString(list);
resp.getWriter().write(jsonResp);
}
Interfaz
Nuestro front-end necesita enviar dos partes de la solicitud:
1. publicar, que se inicia cuando hacemos clic para enviar la información de la confesión
2. obtener, que se inicia cuando cargamos la página
Usamos VScode para abrir el código front-end e introducir las dependencias de jquery
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
Luego usamos ajax para construir la solicitud.
Echemos un vistazo al código front-end que escribimos antes. Cuando enviamos onclick, simplemente construimos un div y lo agregamos a la página. Ahora lo agregamos y dejamos que se envíe al back-end
Construimos los datos leídos en el cuadro de entrada en un objeto js, pero nuestro cuerpo solo puede transmitir cadenas pero no objetos, por lo que necesitamos convertir el objeto en una cadena en formato json
strBody = JSON.stringify(body);
strBody = JSON.stringify(body);
$.ajax({
type: 'post',
url: 'messagewell',
data: strBody,
contentType: "application/json; charset=utf8",
success: function(body) {
console.log("数据提交成功");
}
});
Luego use ajax para enviar los datos al servidor. Probemos el código actual. Usamos tomcat para implementar y visitar.
Luego hacemos clic en enviar y vemos que se ha enviado una solicitud HTTP.
Esto prueba que el front-end y back-end -Las operaciones finales de nuestro envío de información de confesión son correctas
Siguiente, implementemos la lectura de datos del servidor cuando actualicemos la página, usamos ajax para enviar la solicitud GET
//当我们页面加载时，给服务器发送GET请求，获取数据，添加到页面中
$.ajax({
type: 'get',
url: 'messagewell',
success: function(body) {
//此数body就是一个js格式的字符串，但是我们这里需要js对象数组
//jquery会帮我们将js对象字符串解析成js对象数组
for(let message of body) {
let rowDiv = document.createElement('div');
rowDiv.className = 'row';
rowDiv.innerHTML = message.from + ' 对 ' + message.to + ' 说 ' + message.message;
containerDiv.appendChild(rowDiv);
}
}
})
Para nuestro cuerpo aquí, jquery analiza la cadena de formato js en una matriz de objetos js para nosotros. Necesitamos crear una etiqueta div, agregarle los datos de cada objeto js y luego agregar el div a la página. Ahora reiniciamos el servidor para
verificar
Primero enviemos algunos datos aleatorios y luego intentemos actualizar la página.
Después de actualizar, los datos aún están en la página. Mientras se actualiza, enviamos una solicitud GET al servidor y el
mismo servidor nos responde con toda la información de la confesión. El muro de confesiones de la versión del servidor del navegador
está completo. Debes prestar atención a que nuestros datos se almacenan en la memoria. Si reiniciamos el servidor, los datos anteriores desaparecerán. Si desea almacenamiento persistente, puede necesitar una base de datos
3. Versión de la base de datos
Solo necesitamos crear una tabla de información de mensajes aquí. Hay tres atributos (desde, hasta, mensaje) en la tabla.
Debe prestar atención a algunos problemas en el proceso de creación de la tabla, porque nuestro desde y hasta son palabras clave en nuestro mysql Entonces, necesitamos agregar `, y luego usamos JDBC para interactuar con la base de datos,
porque nuestra operación de conexión de base de datos y los recursos de cierre deben usarse con frecuencia, por lo que creamos una clase de herramienta DBUtil aquí para simplificar la operación
import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;
import javax.sql.DataSource;
import java.sql.*;
//DButi作为工具类，供其他类使用
public class DBUtil {
private static DataSource dataSource = new MysqlDataSource();
static{
//对datasuorce初始化
((MysqlDataSource)dataSource).setURL("jdbc:mysql://127.0.0.1:3306/zd?characterEncoding=utf8&useSSL=false");
((MysqlDataSource)dataSource).setUser("root");
((MysqlDataSource)dataSource).setPassword("自己的密码");
}
//通过该方法获取连接
public static Connection getConnection() throws SQLException {
return dataSource.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();
}
}
}
}
A continuación, implementamos dos métodos bajo la clase de servlet, save() agrega los datos enviados por nuestro front-end a la base de datos y load() devuelve todos los datos en nuestra base de datos al front-end.
public void save(Message message) {
Connection connection = null;
PreparedStatement statement = null;
try {
//获取连接
connection = DBUtil.getConnection();
//构造sql语句
String sql = "insert into message values(?,?,?)";
statement = connection.prepareStatement(sql);
statement.setString(1,message.from);
statement.setString(2,message.to);
statement.setString(3,message.message);
//执行sql
statement.executeUpdate();
}catch (SQLException e) {
e.printStackTrace();
}finally {
//关闭连接
DBUtil.close(connection,statement,null);
}
}
public List<Message> load() {
Connection connection = null;
PreparedStatement statement = null;
ResultSet resultSet = null;
List<Message> messageList = new ArrayList<>();
try {
//获取连接
connection = DBUtil.getConnection();
//构造sql语句
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");
messageList.add(message);
}
}catch (SQLException e) {
e.printStackTrace();
}finally {
//关闭连接
DBUtil.close(connection,statement,resultSet);
}
return messageList;
}
