【JavaEE】Servlet：表白墙

embedded/2024/11/26 23:52:53/

文章目录

  • 一、前端
  • 二、前置知识
  • 三、代码
    • 1、后端
    • 2、前端
    • 3、总结
  • 四、存入数据库
    • 1、引入 mysql 的依赖，mysql 驱动包
    • 2、创建数据库数据表
    • 3、调整上述后端代码
      • 3.1 封装数据库操作，和数据库建立连接
      • 3.2 调整后端代码

一、前端

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表白墙</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 800px;margin: 0 auto;}.container h2 {text-align: center;margin: 30px;}.row {height: 50px;display: flex;justify-content: center;margin-top: 5px;line-height: 50px;}.row span {height: 50px;width: 100px;line-height: 50px;}.row input {height: 50px;width: 300px;line-height: 50px;}.row button {height: 50px;width: 400px;margin: 10px 0px;color: white;background-color: orange;border: none;border-radius: 10px;}.row button:active {background-color: grey;}</style>
</head>
<body><div class="container"><h2>表白墙</h2><div class="row"><span>谁</span><input type="text" id="from"></div><div class="row"><span>对谁</span><input type="text" id="to"></div><div class="row"><span>说</span><input type="text" id="message"></div><div class="row"><button>提交</button></div></div><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script><script>javascript">let container = document.querySelector('.container');let fromInput = document.querySelector('#from');let toInput = document.querySelector('#to');let messageInput = document.querySelector('#message');let button = document.querySelector('button');button.onclick = function() {let from = fromInput.value;let to = toInput.value;let message = messageInput.value;if(from=='' || to=='' || message=='||') {return;}let newDiv = document.createElement('div');newDiv.className = 'row';newDiv.innerHTML = from + "对" + to + "说" + message;container.appendChild(newDiv);fromInput.value = '';toInput.value = '';messageInput.value = ''; }</script>
</body>
</html>

二、前置知识

pom.xml 里面的依赖确保了在开发阶段项目能够编译和运行，但在部署到Tomcat服务器时，Tomcat会提供这些类，因此不需要将它们打包到最终的WAR文件中。

运行项目一般是两级路径：

  1. 第一级：Context path：
    context path代表了当前的 webapp(网站)，一个 tomcat 上是可以同时部署多个 webapp(网站)的，webapps 目录下的每个目录都是一个单独的 webapp，所以有的资料也把tomcat叫做容器。
    如何确定 Context path：
    （1）如果是通过 startup.bat 启动的 tomcat，webapps 里对应的 war 包名/目录名就是这个 webapp 的 Context path；
    （2）如果是通过 smart tomcat 启动 tomcat，是在启动的配置项中手动指定的 Context path(这种是另外的一种运行 tomcat 的方式)
  2. 第二级路径：就是 ServletPath
    这个是根据代码中的 @WebServlet 注解来确定的或者就是 webapp下面的静态文件/目录

以下是完整项目的目录：

三、代码

1、后端

创建 Message.java 和 MessageServlet.java

java">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;// 对应到前端传来的请求 body 格式
// 此处要保证每个属性名字和 JSON 里的 key 对应
// 同时要保证这几个格式是 public 或者提供 public 的 getter 方法
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();List<Message> messageList = new ArrayList<>();// 负责实现让服务器从客户端拿数据@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 1. 把 body 的 json 数据解析出来, json格式的字符串(通过输入流获取) -> 对象Message message = objectMapper.readValue(req.getInputStream(), Message.class);// 2. 把这个数据保存起来，最简单的是保存到内存中messageList.add(message);System.out.println("message: " + message);// 3. 返回成功的响应resp.setContentType("application/json;charset=utf8"); // application/json;charset=utf8resp.getWriter().write("{\"ok\": 1}");}// 负责实现让客户端从服务器拿数据@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setContentType("application/json;charset=utf8");// 对象 -> json格式的字符串String respString = objectMapper.writeValueAsString(messageList);resp.getWriter().write(respString);}
}

2、前端

事实上只有注释行为新的步骤（也就是第103行）后面才是更新的代码，前面和上面的前端代码一样。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表白墙</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 800px;margin: 0 auto;}.container h2 {text-align: center;margin: 30px;}.row {height: 50px;display: flex;justify-content: center;margin-top: 5px;line-height: 50px;}.row span {height: 50px;width: 100px;line-height: 50px;}.row input {height: 50px;width: 300px;line-height: 50px;}.row button {height: 50px;width: 400px;margin: 10px 0px;color: white;background-color: orange;border: none;border-radius: 10px;}.row button:active {background-color: grey;}</style>
</head>
<body><div class="container"><h2>表白墙</h2><div class="row"><span>谁</span><input type="text" id="from"></div><div class="row"><span>对谁</span><input type="text" id="to"></div><div class="row"><span>说</span><input type="text" id="message"></div><div class="row"><button>提交</button></div></div><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script><script>javascript">let container = document.querySelector('.container');let fromInput = document.querySelector('#from');let toInput = document.querySelector('#to');let messageInput = document.querySelector('#message');let button = document.querySelector('button');button.onclick = function() {let from = fromInput.value;let to = toInput.value;let message = messageInput.value;if(from=='' || to=='' || message=='||') {return;}let newDiv = document.createElement('div');newDiv.className = 'row';newDiv.innerHTML = from + "对" + to + "说" + message;container.appendChild(newDiv);fromInput.value = '';toInput.value = '';messageInput.value = '';// 新的步骤，将刚才输入框里取得的数据构造成 POST 请求，提交给后端服务器// jsonlet messageJson = {// 字符串: 变量from: from,to: to,message: message};$.ajax({type: 'post',// 相对路径url: 'message',// 绝对路径// url: '/MessageWall1/message',contentType: 'application/json;charset=utf8',data: JSON.stringify(messageJson), // JSON 转成 JSON 格式的字符串success: function() {alert("提交成功");},// 返回状态码不是2xx就触发此函数error: function() {alert("提交失败");}});}// 这个函数在页面加载/刷新的时候调用，通过这个函数从服务器获取到当前的消息列表，显示在页面上function load() {$.ajax({type: 'get',url: 'message',success: function(body) {// 此处 body 已经是 json , ajax 会根据contentType自动转换let container = document.querySelector('.container');for(let message of body) {let newDiv = document.createElement('div');newDiv.className = 'row';newDiv.innerHTML = message.from + " 对 " + message.to + " 说 " + message.message;container.appendChild(newDiv);}}});}// 函数调用写在这里就表示页面加载的时候来执行load();</script>
</body>
</html>

json的key只能是字符串类型.此处写的 from其实是"from" .只不过咱们这里图省事,把"省略了
json中表示字符串,单弓|号或者双引号都行.
在这里插入图片描述

在这里插入图片描述

3、总结

  1. 打开页面/刷新页面，先执行前端load()；
  2. load()会执行ajax，ajax会发生一个HTTP请求给服务器，GET /message，这里面的success先不执行，后面才会执行
  3. 这个HTTP请求通过网络发送给tomcat，进一步触发doGet方法，doGet方法执行里面的逻辑，将List转换成JSON，构造HTTP响应返回给客户端
  4. 客户端收到返回数据触发回调函数，也就是success，success执行里面的逻辑，将服务器返回的数据(body)显示到页面上

四、存入数据库

当服务器重启，List 里面的数据会丢失，应该怎样解决这个问题？
关键是要把数据存储在服务器的硬盘上面
1、存入文件里面，使用 IO 流来写文件/读文件
2、存入数据库里面，使用 MYSQL+JDBC

JDBC（Java Database Connectivity）是Java编程语言中用于执行SQL语句的一组API（应用程序接口）。它为数据库访问提供了一种标准的方法，使得Java程序可以与各种关系型数据库进行交互，而无需关心具体的数据库实现细节。

这里使用存入数据库的方式来解决问题：

1、引入 mysql 的依赖，mysql 驱动包

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

2、创建数据库数据表

create database MessageWall;
use MessageWall;drop table if exists MessageWall;
create table MessageWall (`from` varchar(100),`to` varchar(100),message varchar(1024)
);

3、调整上述后端代码

3.1 封装数据库操作，和数据库建立连接

新建一个类 DBUtil.java

java">import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;
//import com.mysql.jdbc.Connection;import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;// 通过这个类完成建立数据库的连接的过程
// 建立连接需要使用 DataSource，并且一个程序有一个 DataSource 实例即可，这里用单例模式来实现
public class DBUtil {private static DataSource dataSource = null;private static DataSource getDataSource() {if (dataSource == null) {dataSource = new MysqlDataSource();((MysqlDataSource)dataSource).setURL("jdbc:mysql://127.0.0.1/messagewall?characterEncoding=utf8&useSSL=false");((MysqlDataSource)dataSource).setUser("root");((MysqlDataSource)dataSource).setPassword("1234");}return dataSource;}public static Connection getConnection() throws SQLException {return getDataSource().getConnection();}public static void close(Connection connection, PreparedStatement preparedStatement, ResultSet resultSet) {// 后创建的先释放// 此处分开写 try-catch 是因为一个地方异常了不会影响其他的 close 执行if (resultSet != null) {try {resultSet.close();} catch (SQLException e) {e.printStackTrace();}}if (preparedStatement != null) {try {preparedStatement.close();} catch (SQLException e) {e.printStackTrace();}}if (connection != null) {try {connection.close();} catch (SQLException e) {e.printStackTrace();}}}
}

3.2 调整后端代码

MessageServlet.java

java">@WebServlet("/message")
public class MessageServlet extends HttpServlet {private ObjectMapper objectMapper = new ObjectMapper();// List<Message> messageList = new ArrayList<>();// 负责实现让服务器从客户端拿数据@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 1. 把 body 的 json 数据解析出来, json格式的字符串(通过输入流获取) -> 对象Message message = objectMapper.readValue(req.getInputStream(), Message.class);// 2. 把这个数据保存起来，最简单的是保存到内存中// messageList.add(message);save(message);System.out.println("message: " + message);// 3. 返回成功的响应resp.setContentType("application/json;charset=utf8"); // application/json;charset=utf8resp.getWriter().write("{\"ok\": 1}");}// 负责实现让客户端从服务器拿数据@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setContentType("application/json;charset=utf8");// 对象 -> json格式的字符串List<Message> messageList= load();String respString = objectMapper.writeValueAsString(messageList);resp.getWriter().write(respString);}// 把当前的消息存到数据库中private void save(Message message) {Connection connection = null;PreparedStatement statement = null;try {// 1.和数据库建立连接connection = DBUtil.getConnection();// 2.构造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);// 3.执行SQL语句int ret = statement.executeUpdate();if (ret != 1) {System.out.println("插入失败");} else {System.out.println("插入成功");}} catch (SQLException e) {e.printStackTrace();} finally {// 4.关闭连接DBUtil.close(connection, statement, null);}}// 从数据库查询到记录private List<Message> load() {Connection connection = null;PreparedStatement statement = null;ResultSet resultSet = null;List<Message> messageList = new ArrayList<>();try {// 1.建立连接connection = DBUtil.getConnection();// 2.构造SQL语句String sql = "select * from message";statement = connection.prepareStatement(sql);// 3.执行SQLresultSet = statement.executeQuery(sql);// 4.遍历结果集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 {// 5.关闭连接DBUtil.close(connection, statement, resultSet);}return messageList;}
}

http://www.ppmy.cn/embedded/140760.html

相关文章

基于微信小程序的空巢老人健康管理系统

基于微信小程序的空巢老人健康管理系统

摘 要 随着社会老龄化程度不断加深&#xff0c;空巢老人的健康管理成为一个日益重要的问题。为了更好地关注和管理空巢老人的健康状况&#xff0c;本文利用Spring Boot框架和MySQL数据库&#xff0c;结合微信小程序等技术&#xff0c;设计并实现了一套基于微信小程序的空巢老人…
阅读更多...
PostgreSQL技术内幕19：逻辑备份工具pg_dump、pg_dumpall

PostgreSQL技术内幕19：逻辑备份工具pg_dump、pg_dumpall

文章目录 0.简介1. 使用方法1.1 pg_dump1.2 pg_dumpall 2.逻辑备份原理概述3.代码分析3.1 pg_dump3.2 pg_dumpall 0.简介 上一篇文章介绍了逻辑备份和物理备份概念&#xff0c;主要介绍了PG的物理备份工具&#xff0c;本文主要介绍PG逻辑备份工具g_dump和pg_dumpall&#xff0…
阅读更多...
2024年11月21日Github流行趋势

2024年11月21日Github流行趋势

项目名称&#xff1a;twenty 项目维护者&#xff1a;charlesBochet, lucasbordeau, Weiko, FelixMalfait, bosiraphael项目介绍&#xff1a;正在构建一个由社区支持的现代化Salesforce替代品。项目star数&#xff1a;21,798项目fork数&#xff1a;2,347 项目名称&#xff1a;p…
阅读更多...
aws建立多区域只读库

aws建立多区域只读库

文章目录 一、Aurora数据库创建多区域注意项&#xff1a;二、aws-rds多区域只读库建立三、cli 创建实例: 一、Aurora数据库创建多区域注意项&#xff1a; aurora数据库 开启跨区域必须是主库不低于db.r5.large规格, 目标区域規格使用db.r5.large&#xff0c;使用低于此规格的将…
阅读更多...
MongoDB相关问题

MongoDB相关问题

视频教程 【GeekHour】20分钟掌握MongoDB Complete MongoDB Tutorial by Net Ninja MongoDB开机后调用缓慢的原因及解决方法 问题分析&#xff1a; MongoDB开机后调用缓慢&#xff0c;通常是由于以下原因导致&#xff1a; 索引重建&#xff1a; MongoDB在启动时会重建索引…
阅读更多...
利用 GitHub 和 Hexo 搭建个人博客【保姆教程】

利用 GitHub 和 Hexo 搭建个人博客【保姆教程】

利用 GitHub 和 Hexo 搭建个人博客 利用 GitHub 和 Hexo 搭建个人博客一、前言二、准备工作&#xff08;一&#xff09;安装 Node.js 和 Git&#xff08;二&#xff09;注册 GitHub 账号 三、安装 Hexo&#xff08;一&#xff09;创建博客目录&#xff08;二&#xff09;安装 H…
阅读更多...
Leetcode146. LRU 缓存(HOT100)

Leetcode146. LRU 缓存(HOT100)

链接 代码&#xff1a; class LRUCache { private:struct Node{int key,val;Node* left,*right;Node(int _key,int _val):key(_key),val(_val){}}*L,*R;unordered_map<int,Node*> hash;int n;public:void remove(struct Node* p){p->left->right p->right;p-…
阅读更多...
Docker部署Canal实现将Mysql数据同步至ES

Docker部署Canal实现将Mysql数据同步至ES

目录 Canal 是什么？一、安装docker1.安装2.启动二、安装docker-compose1.卸载旧版本2.下载最新版3.授权4.检查版本三、配置MySQL1.开启 Binlog 写入，配置 binlog-format 为 ROW 模式2.授权 canal 有 slave 的权限四、创建docker网络五、部署canal-admin1.在数据库中创建canal…
阅读更多...
最新文章

Copyright @ 2022~2023