【Java】Servlet之数据库版本的留言墙实现
- 目标
- 前端实现
- 建库
- 后端实现
-
- 定义与数据库对应的类Message
- 获取数据库连接
- Message类访问数据库
- 实现
- 结果
目标
1.用户通过前端向后端提交数据。通过Ajax实现。
2.服务器接收数据并校验。通过Servlet实现。
3.通过Java进行数据库操作。通过JDBC实现。
4.获取数据库操作的结果，并为用户构造响应。通过Json实现。
前端实现
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>
<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">
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 = '' + sender + ' 对 ' + receiver + '说：' + content + '.'
// 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);
// 唐僧 对 悟空说：为师有点饿了.
// 1. 创建一个P标签
let pEl = document.createElement('p');
// 2. 构造内容
pEl.innerHTML = ''+element.sender+' 对 '+element.receiver+'说：'+element.content+'.'
// 3. 加入到父标签下
messageEl.appendChild(pEl);
});
// 结果是一个数组，遍历结果
// for (let index = 0; index < data.length; index++) {
// element = data[index];
// console.log(element);
// }
}
});
script>
html>
建库
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
);
后端实现
定义与数据库对应的类Message
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;
}
}
获取数据库连接
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);
}
}
}
}
Message类访问数据库
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;
}
}
实现
@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}");
}
}
结果
继续加油~