Objetivo
1. El usuario envía datos al backend a través del frontend. Conseguido a través del Ajax.
2. El servidor recibe los datos y los verifica. Realizado por Servlet.
3. Realizar operaciones de base de datos a través de Java. Realizado a través de JDBC.
4. Obtenga el resultado de la operación de la base de datos y construya una respuesta para el usuario. Realizado a través de JSON.
Implementación frontal
<!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>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 400px;
margin: 0 auto;
}
.container h1 {
margin: 20px 0;
text-align: center;
}
.container .sub-title {
color: #666;
text-align: center;
font-size: 14px;
margin-bottom: 10px;
}
.container .row {
width: 100%;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.container span {
width: 80px;
}
.container input {
width: 200px;
height: 30px;
}
.container .row>button {
width: 280px;
height: 30px;
background-color: orange;
border: none;
color: white
}
.container .row>button:active {
background-color: #666;
}
.container .message {
padding: 20px;
text-align: center;
}
.message p {
height: 30px;
line-height: 30px;
}
</style>
<!-- 引入jQuery -->
<script src="./js/jquery-3.6.3.min.js"></script>
</head>
<body>
<div class="container">
<h1>表白墙</h1>
<p class="sub-title">输入后点击提交，会将内容显示在表格中</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="message">
<!-- <p><b>唐僧</b> 对 <b>悟空</b>说：<b>为师有点饿了.</b></p>
<p><b>唐僧</b> 对 <b>悟空</b>说：<b>为师有点饿了.</b></p>
<p><b>唐僧</b> 对 <b>悟空</b>说：<b>为师有点饿了.</b></p>
<p><b>唐僧</b> 对 <b>悟空</b>说：<b>为师有点饿了.</b></p> -->
</div>
</div>
</body>
<script>
// 1. 获取相关的元素
let submitBtnEl = document.querySelector('#submit');
let inputEls = document.querySelectorAll('input');
let messageEl = document.querySelector('.message');
// 绑定事件
submitBtnEl.onclick = function () {
// 2. 处理用户输入的内容
let sender = inputEls[0].value;
let receiver = inputEls[1].value;
let content = inputEls[2].value;
// 非空校验
if (sender == '' || receiver == "" || content == "") {
alert('请正确输入内容');
return;
}
// 3. 构造表白结果
let str = '<b>' + sender + '</b> 对 <b>' + receiver + '</b>说：<b>' + content + '.</b>'
// 4. 构建一个p标签
let messageRow = document.createElement('p');
messageRow.innerHTML = str;
// 4. 把结果加入到表白墙上
messageEl.appendChild(messageRow)
// 5. 清空输入框中的内容
inputEls.forEach(element => {
element.value = '';
});
// 处提交逻辑
// 1. 封装JSON对象
let postJson = {
"sender" : sender,
"receiver": receiver,
"content" : content
};
let jsonStr = JSON.stringify(postJson);
console.log(jsonStr);
// 2. 提交AJVA请求
$.ajax({
// 请求使用的方法
type: 'post',
// 请求的URL，注意不要加斜杠
url: 'message',
// 格式
contentType: 'application/json',
// 发送的数据
data: jsonStr,
// 成功时的回调
success : function(data) {
console.log(data);
}
})
};
// 发送请求获取已有留言
$.ajax({
// 请求使用的方法
type: 'get',
// 请求的URL，注意不要加斜杠
url: 'message',
// 回调
success: function (data) {
data.forEach(element => {
console.log(element);
// <p><b>唐僧</b> 对 <b>悟空</b>说：<b>为师有点饿了.</b></p>
// 1. 创建一个P标签
let pEl = document.createElement('p');
// 2. 构造内容
pEl.innerHTML = '<b>'+element.sender+'</b> 对 <b>'+element.receiver+'</b>说：<b>'+element.content+'.</b>'
// 3. 加入到父标签下
messageEl.appendChild(pEl);
});
// 结果是一个数组，遍历结果
// for (let index = 0; index < data.length; index++) {
// element = data[index];
// console.log(element);
// }
}
});
</script>
</html>
construir base de datos
use sqlsql;
create table message_wall(
id bigint primary key auto_increment,
sender varchar(50) not null,
receiver varchar(50) not null,
content varchar(255) not null
);
implementación de back-end
Definir la clase Mensaje correspondiente a la base de datos
public class Message {
private Long id;//对应到数据库中的主键
private String sender; //发送者
private String receiver;//接收者
private String content;//留言的内容
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getSender() {
return sender;
}
public void setSender(String sender) {
this.sender = sender;
}
public String getReceiver() {
return receiver;
}
public void setReceiver(String receiver) {
this.receiver = receiver;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
}
Obtener conexión a la base de datos
public class DBUtil {
// 声明一个数据源对象
private static DataSource dataSource = null;
// 定义数据库连接的参数
private static final String URL = "jdbc:mysql://localhost:3306/sqlsql?characterEncoding=utf8&useSSL=false";
private static final String User = "root";
private static final String password = "123456";
//在静态方法中初始化数据源对象
static {
MysqlDataSource mysqlDataSource = new MysqlDataSource();
mysqlDataSource.setURL(URL);
mysqlDataSource.setUser(User);
mysqlDataSource.setPassword(password);
dataSource = mysqlDataSource;
}
//私有化构造方法
private DBUtil(){
}
/**
* 获取数据库连接
* @return
* @throws SQLException
*/
public static Connection getConnection() throws SQLException {
//通过数据源对象，获取数据库连接对象
return dataSource.getConnection();
}
public static void close(ResultSet resultSet, PreparedStatement Statement,Connection connection){
//依次关闭并释放资源
if(resultSet != null){
try {
resultSet.close();
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
if(Statement != null){
try {
Statement.close();
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
if(connection != null){
try {
connection.close();
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
}
}
La clase Message accede a la base de datos.
public class MessageDao {
/**
* 获取所有留言数据
* @return 留言集合
*/
public List<Message> selectAll (){
//定义访问数据库的相关对象
Connection connection= null;
PreparedStatement statement = null;
ResultSet resultSet = null;
try {
//1.获取数据库连接
connection = DBUtil.getConnection();
//2.定义sql语句
String sql = "select id, sender, receiver, content from message_wall order by id desc";
//3.预处理sql语句
statement = connection.prepareStatement(sql);
//4.执行sql语句，并获取结果集
resultSet = statement.executeQuery();
//5.遍历结果集
List<Message> messageList = null;
while(resultSet.next()){
//如果list为null，初始化
if(messageList == null){
messageList = new ArrayList<>();
}
//创建一个Message对象
Message message = new Message();
message.setId(resultSet.getLong(1));
message.setSender(resultSet.getString(2));
message.setReceiver(resultSet.getString(3));
message.setContent(resultSet.getString(4));
//把对象加入list
messageList.add(message);
}
//返回结果
return messageList;
} catch (SQLException e) {
e.printStackTrace();;
}finally {
//关闭连接并释放资源
DBUtil.close(resultSet,statement,connection);
}
return null;
}
/**
* 新增一条留言记录
* @param message 留言记录
* @return 受影响的行数
*/
public int insert (Message message){
Connection connection= null;
PreparedStatement statement = null;
try {
connection = DBUtil.getConnection();
String sql = "insert into message_wall values(null,?,?,?)";
statement = connection.prepareStatement(sql);
//处理占位符
statement.setString(1,message.getSender());
statement.setString(2,message.getReceiver());
statement.setString(3,message.getContent());
//执行sql
int row = statement.executeUpdate();
return row;
} catch (SQLException e) {
e.printStackTrace();;
} finally {
DBUtil.close(null,statement,connection);
}
return -1;
}
}
lograr
@WebServlet("/message")
public class MesageServlet extends HttpServlet {
//定义数据库访问类
private MessageDao messageDao = new MessageDao();
//json转换类
private ObjectMapper objectMapper = new ObjectMapper();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 定义编码格式
req.setCharacterEncoding("UTF-8");
resp.setContentType("application/json; charset=utf-8");
// 查询数据库中的留言列表
List<Message> messages = messageDao.selectAll();
// 判断结果是否为空
if (messages == null) {
// 避免返回的是一个"null"
messages = new ArrayList<>();
}
// 将结果转为json并返回
String jsonString = objectMapper.writeValueAsString(messages);
// 返回结果
resp.getWriter().write(jsonString);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 定义编码格式
req.setCharacterEncoding("UTF-8");
resp.setContentType("application/json; charset=utf-8");
// 接收用户请求中的数据
Message message = objectMapper.readValue(req.getInputStream(), Message.class);
// 非空校验
if (message == null || message.getSender() == null || message.getSender().equals("")
|| message.getReceiver() == null || message.getReceiver().equals("")
|| message.getContent() == null || message.getContent().equals("")) {
// 返回一个错误的自定义状态码
resp.getWriter().write("{\"code\": -1}");
return;
}
// 调用DAO写入数据库
int row = messageDao.insert(message);
if (row <= 0) {
// 返回一个错误的自定义状态码
resp.getWriter().write("{\"code\": -1}");
return;
}
// 返回成功
resp.getWriter().write("{\"code\": 0}");
}
}
resultado
sigue así~