基于servlet编写的表白墙项目(后端代码 含数据库操作)

前提准备
项目前端代码和效果
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表白墙</title><style>/* * 通配符选择器, 是选中页面所有元素 */* {/* 消除浏览器的默认样式. */margin: 0;padding: 0;box-sizing: border-box;}.container {width: 600px;margin: 20px auto;}h1 {text-align: center;}p {text-align: center;color: #666;margin: 20px 0;}.row {/* 开启弹性布局 */display: flex;height: 40px;/* 水平方向居中 */justify-content: center;/* 垂直方向居中 */align-items: center;}.row span {width: 80px;}.row input {width: 200px;height: 30px;}.row button {width: 280px;height: 30px;color: white;background-color: orange;/* 去掉边框 */border: none;border-radius: 5px;}/* 点击的时候有个反馈 */.row button:active {background-color: grey;}</style>
</head>
<body><div class="container"><h1>表白墙</h1><p>输入内容后点击提交, 信息会显示到下方表格中</p><div class="row"><span>谁: </span><input type="text"></div><div class="row"><span>对谁: </span><input type="text"></div><div class="row"><span>说: </span><input type="text"></div><div class="row"><button id="submit">提交</button></div><!-- <div class="row">xxx 对 xx 说 xxxx</div> --></div><script>// 实现提交操作. 点击提交按钮, 就能够把用户输入的内容提交到页面上显示. // 点击的时候, 获取到三个输入框中的文本内容// 创建一个新的 div.row 把内容构造到这个 div 中即可. let containerDiv = document.querySelector('.container');let inputs = document.querySelectorAll('input');let button = document.querySelector('#submit');button.onclick = function() {// 1. 获取到三个输入框的内容let from = inputs[0].value;let to = inputs[1].value;let msg = inputs[2].value;if (from == '' || to == '' || msg == '') {return;}// 2. 构造新 divlet rowDiv = document.createElement('div');rowDiv.className = 'row message';rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + msg;containerDiv.appendChild(rowDiv);// 3. 清空之前的输入框内容for (let input of inputs) {input.value = '';}}</script>
</body>
</html>

创建项目和引入依赖
去maven库下载servlet和json需要的依赖

<dependencies><!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api --><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.2</version></dependency></dependencies>

我们再将项目部署到tomcat上
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

当前 这个表白墙页面 已经可以输入内容 点击提交也能显示内容 我们要做的后端代码工作就是

  1. 用户点击提交的时候 把刚才输入的内容通过网络传输给服务器 由服务器保存这个数据(存档)
  2. 后续由页面加载 就通过网络获取之前保存的内容(读档)

需要进行前后端交互接口的约定 约定好 前端会给后端发一个什么样的http请求 后端又会返回一个什么样的http响应

第一步
针对存档操作来说前端发起一个HTTP请求
POST /messageWall(路径)

{from : "小红"to : "小明"message : "你好" 
}

(此处约定使用的json格式 把数据传到后端)
然后服务器返回了一个HTTP响应
HTTP/1.1 200OK

第二步
针对读档操作(前端页面加载的时候 需要从服务器拿到之前已经提交的数据)
GET /messageWall
响应:
HTTP/1.1 200 OK

{{from : "小红"to : "小明"message : "你好"}	 {from : "小明"to : "小红"message : "你好"}
}

此处响应的就是json数组 里面的数据会有多条

我们创建一个MessageServlet类 来编写后端代码


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;//定义要将json对象转化成的java类
class Message{public String from;public String to;public String message;public String toString() {return "Message{" +"from='" + from + '\'' +", to='" + to + '\'' +", message='" + message + '\'' +'}';}
}
@WebServlet("/message")
public class MessageWall extends HttpServlet {//定义一个Object类来接受我们的json对象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);//3.返回响应resp.setStatus(200);}//实现读档功能@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//把内存中的Message 组成json返回到响应中//针对List这种jackson会自动整理成json数组//里面的每个元素又会被jackson转换成{}json对象String respJson = objectMapper.writeValueAsString(messageList);//告诉浏览器返回的响应body是一个json格式utf8编码resp.setContentType("application/json; charset=utf8");resp.getWriter().write(respJson);}
}

通过这个代码就实现了后端的逻辑 通过进一步编写前端代码把HTTP请求发出来 并处理HTTP响应
我们通过vs打开并编写前端代码

先让js代码发起"存档"请求 需要前端后端通过http交互 要使用ajax
我们可以在网络上找一个jquery地址
在这里插入图片描述

将其粘贴到前端代码上 接下来我们就可以使用相关的方法了
在这里插入图片描述
我们在后面加上
在这里插入图片描述
这一步代码 前面代表的是key 后面的是value
key只能是字符串类型 而value则可以是其他各种类型(数字 字符串 其他对象 数组)在这里的value相当于是三个变量里三个输入框的内容

在这里插入图片描述
这里的url相对路径带 / 开头
如果是绝对路径则 不带 / 开头
在js里 js对象虽然格式上和json相似 但是仍然是不同的所以我们通过js标准库 里面有JSON.stringify方法 把js对象转换成json字符串 还有JSON.parse方法 把json字符串转换成js对象
用户点击提交按钮 触发js提交数据的代码

在这里插入图片描述
执行流程
在这里插入图片描述
在页面加载的时候 发起一个GET请求给服务器 从服务器拿到提交过的数据
在这里插入图片描述

$.ajax({type:'get',url:'message',success: function(body){//但是由于jquery自动帮助做好了json字符串转换成js对象数组所以此时的body已经是js数组了不需要使用JSON.parse进行解析//1.遍历数组 取出每个js对象//2.根据这里的js对象构造出页面元素显示到页面上let container =document.querySelector('.container');for(let i = 0; i < body.length; i++){let message = body[i];let div = document.createElement('div');div.className = 'row';div.innerHTML = message.from + "对" + message.to + "说:" + message.message;container.appendChild(div);} }})

效果
在这里插入图片描述
这时我们就将服务器提交过的数据显示到了页面上
即使我们将页面关闭再打开还是能拿到之前的数据

输入的内容通过网络传输给服务器 由服务器保存这个数据 但是我们重启的服务器的时候内存刷新之前的数据就没有了 所以我们可以使用数据库将数据存起来

数据库版本

1.引入数据库的依赖(驱动包)
同样使用maven 把数据库驱动包下载
在这里插入图片描述
选择合适自己数据库的版本
在这里插入图片描述
在之前的代码加上
在这里插入图片描述

2.创建数据库数据表
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.编写代码
JDBC操作数据库 完成这里的数据存和取出

import com.fasterxml.jackson.databind.ObjectMapper;
import com.mysql.jdbc.Connection;
import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;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 javax.sql.DataSource;
import java.io.IOException;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;//定义要将json对象转化成的java类
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 MessageWall extends HttpServlet {//定义一个Object类来接受我们的json对象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) {throw new RuntimeException(e);}System.out.println("服务器收到message:"+ message);//3.返回响应resp.setStatus(200);}//实现读档功能@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//把内存中的Message 组成json返回到响应中//针对List这种jackson会自动整理成json数组//里面的每个元素又会被jackson转换成{}json对象List<Message> messageList = null;try {messageList = load();} catch (SQLException e) {throw new RuntimeException(e);}String respJson = objectMapper.writeValueAsString(messageList);//告诉浏览器返回的响应body是一个json格式utf8编码resp.setContentType("application/json; charset=utf8");resp.getWriter().write(respJson);}private void save(Message message) throws SQLException {//通过jdbc 往数据库中存一个数据//1.创建数据源DataSource dataSource= new MysqlDataSource();((MysqlDataSource) dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/message_test?characterEncoding=utf8&useSSL=false");((MysqlDataSource) dataSource).setUser("root");((MysqlDataSource) dataSource).setPassword("123456");//2.建立连接Connection 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/message_test?characterEncoding=utf8&useSSL=false");((MysqlDataSource) dataSource).setUser("root");((MysqlDataSource) dataSource).setPassword("123456");//2.建立连接Connection 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;}
}

这样我们可以直接从数据库加入数据
在这里插入图片描述
然后就可以服务器重新加载时读取之前的数据
在这里插入图片描述
也可以在客户端写入数据 保存到数据库
在这里插入图片描述
数据库就会保存
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/682340.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

java并发编程的艺术

java并发编程的艺术

java并发编程的艺术 第一章–并发的挑战 1。上下文切换 上下文切换是由于多任务操作系统需要管理多个线程或进程的并发 第二章—java并发机制的底层实现原理 java代码编译成字节码&#xff0c;然后被类加载器加载到jvm中&#xff0c;jvm执行&#xff0c;最终转换为汇编指令在cp…
阅读更多...
Intercepter拦截器

Intercepter拦截器

注册拦截器
阅读更多...
C语言——枚举类型

C语言——枚举类型

&#x1f4dd;前言&#xff1a; 在之前的文章中我们已经讲解了自定义类型中的结构体类型和联合体类型&#xff0c;现在我们再充分学习一下C语言中的枚举类型&#xff1a; 1&#xff0c;什么是枚举类型 2&#xff0c;枚举类型的定义和变量的声明 3&#xff0c;对变量进行赋值 &a…
阅读更多...
455. Assign Cookies(分发饼干)

455. Assign Cookies(分发饼干)

题目描述 假设你是一位很棒的家长&#xff0c;想要给你的孩子们一些小饼干。但是&#xff0c;每个孩子最多只能给一块饼干。 对每个孩子 i&#xff0c;都有一个胃口值 g[i]&#xff0c;这是能让孩子们满足胃口的饼干的最小尺寸&#xff1b;并且每块饼干 j&#xff0c;都有一个…
阅读更多...
每日OJ题_位运算⑦_力扣面试题 17.19. 消失的两个数字

每日OJ题_位运算⑦_力扣面试题 17.19. 消失的两个数字

目录 力扣面试题 17.19. 消失的两个数字 解析代码 力扣面试题 17.19. 消失的两个数字 面试题 17.19. 消失的两个数字 难度 困难 给定一个数组&#xff0c;包含从 1 到 N 所有的整数&#xff0c;但其中缺了两个数字。你能在 O(N) 时间内只用 O(1) 的空间找到它们吗&#xff…
阅读更多...
OpenCompass 大模型评测

OpenCompass 大模型评测

在浦语的大模型评测教程课程中&#xff0c;你可能需要完成的任务包括&#xff1a; 先修知识准备&#xff1a;这里你需要理解并掌握深度学习、NLP和PyTorch等相关知识。因为这些都是进行大模型评测的基础。模型理解&#xff1a;你需要对你要评测的模型有一个全面的理解&#xf…
阅读更多...
FPGA实现ISP用于无人车、无人机配送的方案调研

FPGA实现ISP用于无人车、无人机配送的方案调研

查到一个always 奥唯思公司做的用FPGA实现ISP的方案&#xff0c;采用易灵思钛金16nm的FPGA Ti60F225&#xff0c;通过MIPI CSI RX采集图像传感器的数据&#xff0c;在FPGA内部经过一系列复杂的ISP运算后&#xff0c;再通过MIPI CSI TX将图像数据发送给后端。 一套完整的ISP&a…
阅读更多...
【LeetCode】53. 最大子数组和（中等）——代码随想录算法训练营Day31

【LeetCode】53. 最大子数组和（中等）——代码随想录算法训练营Day31

题目链接&#xff1a;53. 最大子数组和 题目描述 代码 测试用例 测试结果 测试结果 53. 最大子数组和 中等 相关标签 相关企业 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返…
阅读更多...
uni-app生命周期 不说废话，直击重点 这篇就够了！

uni-app生命周期 不说废话，直击重点 这篇就够了！

一、生命周期说明 uni-app的生命周期分为应用生命周期、页面生命周期、组件生命周期&#xff08;Vue的生命周期&#xff09; 二、应用生命周期 应用生命周期函数表&#xff1a; 函数名说明onLaunch初始化完成时触发&#xff08;全局只触发一次&#xff09;onShow启动或者从后…
阅读更多...
【算法分析与设计】环形链表

【算法分析与设计】环形链表

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;算法分析与设计 ⛺️稳中求进&#xff0c;晒太阳 题目 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次…
阅读更多...
实景剧本杀小程序：创新体验，沉浸式推理乐趣

实景剧本杀小程序：创新体验，沉浸式推理乐趣

随着科技的飞速发展&#xff0c;人们对于娱乐方式的追求也在不断升级。传统的桌面剧本杀游戏已经不能满足玩家的需求&#xff0c;他们渴望更加真实、刺激的游戏体验。正是这种需求推动下&#xff0c;实景剧本杀小程序应运而生&#xff0c;为玩家带来前所未有的推理乐趣。 实景…
阅读更多...
【基础】第K大与第K小数

【基础】第K大与第K小数

说明 给定一个长度为N(0< n< 10000)的序列&#xff0c;保证每一个序列中的数字a[i]是正整数 &#xff0c;编程要求求出整个序列中第k大的数字减去第k小的数字的值m&#xff0c;并判断m是否为质数。(0< k< n) 输入数据 第一行为2个数n&#xff0c;k&#xff08;…
阅读更多...
ChatGPT高效提问—prompt常见用法（续篇八）

ChatGPT高效提问—prompt常见用法（续篇八）

ChatGPT高效提问—prompt常见用法（续篇八） 1.1 对抗 ​ 对抗是一个重要主题，深入探讨了大型语言模型（LLM）的安全风险。它不仅反映了人们对LLM可能出现的风险和安全问题的理解，而且能够帮助我们识别这些潜在的风险，并通过切实可行的技术手段来规避。 ​ 截至目前，网络…
阅读更多...
【Android】使用Android Studio打包APK文件

【Android】使用Android Studio打包APK文件

文章目录 1. 新建项目2. 打包生成APK3. 安装APK 1. 新建项目 打包APK之前&#xff0c;首先需要新建项目&#xff0c;有基础的可以跳过。 无基础的可以参考&#xff1a;使用Android Studio运行Hello World项目 2. 打包生成APK 1.找到Build -> Generate Signed Bundle or …
阅读更多...
AMD FPGA设计优化宝典笔记（4）复位桥

AMD FPGA设计优化宝典笔记（4）复位桥

高亚军老师的这本书《AMD FPGA设计优化宝典》&#xff0c;他主要讲了两个东西&#xff1a; 第一个东西是代码的良好风格&#xff1b; 第二个是设计收敛等的本质。 这个书的结构是一个总论&#xff0c;加上另外的9个优化&#xff0c;包含的有&#xff1a;时钟网络、组合逻辑、触…
阅读更多...
机器视觉范例及深入

机器视觉范例及深入

1.做一个魔法棒吧 获得了物体的坐标后&#xff0c;可以用它来完成一些有趣的事情&#xff0c;例如把物体当作“笔”在图像 上绘制出图样。我们可以选择一种颜色的黏土&#xff0c;将其固定在任意棒状物&#xff08;例如铅笔&#xff09;的一端 并揉成球形&#xff0c;做一个 …
阅读更多...
函数求导法则【高数笔记】

函数求导法则【高数笔记】

【分类】 1. 四则运算求导 2. 复合运算求导 3. 整体思想求导 #整体思想求导本质是运用复合运算求导&#xff0c;只不过是对复合运算求导的一种精炼 #无论是具体函数还是抽象函数求导&#xff0c;方法是一致的 【四则运算求导】 加&#xff0c;减&#xff0c;乘&#xff0c;除&a…
阅读更多...
Java基于微信小程序的电子竞技信息交流平台

Java基于微信小程序的电子竞技信息交流平台

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…
阅读更多...
Promise与async await的作用及应用场景

Promise与async await的作用及应用场景

在Web前端开发中&#xff0c;处理异步操作是非常常见的需求。为了解决这个问题&#xff0c;ES6引入了Promise和后续的async await。本文将介绍Promise和async await的作用&#xff0c;以及在实际开发中的应用场景。 一、Promise的作用及应用场景 Promise是一个表示异步操作最…
阅读更多...
【程序设计竞赛】C++与Java的细节优化

【程序设计竞赛】C++与Java的细节优化

必须强调下&#xff0c;以下的任意一种优化&#xff0c;都应该是在本身采用的算法没有任何问题情况下的“锦上添花”&#xff0c;而不是“雪中送炭”。 如果下面的说法存在误导&#xff0c;请专业大佬评论指正 读写优化 C读写优化——解除流绑定 在ACM里&#xff0c;经常出现…
阅读更多...
最新文章

Copyright @ 2022~2023