Target
1. The user submits data to the backend through the frontend. Achieved through Ajax.
2. The server receives the data and verifies it. Realized by Servlet.
3. Perform database operations through Java. Realized through JDBC.
4. Get the result of the database operation and construct a response for the user. Realized through JSON.
Front-end implementation
<!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>
Build database
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
);
backend implementation
Define the class Message corresponding to the database
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;
}
}
Get database connection
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);
}
}
}
}
The Message class accesses the database
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;
}
}
accomplish
@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}");
}
}
result
Keep going~