内存版本的表白墙
(1)创建一个空项目
(2)配置pom.xml文件,reload一下
<dependencies>
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.15.2</version>
</dependency>
<!-- 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>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
</dependencies>
<!-- 打包为war包-->
<packaging>war</packaging>
(3)准备以下文件
index.html
<!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;
}
.container {
width: 400px;
margin: 0 auto;
}
h1 {
text-align: center;
padding: 20px 0;
}
p {
color: #666;
text-align: center;
font-size: 14px;
padding: 10px 0;
}
.row {
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
span {
width: 100px;
line-height: 40px;
}
.edit {
width: 200px;
height: 30px;
}
.submit {
width: 304px;
height: 40px;
color: white;
background-color: orange;
border: none;
}
.submit:active {
background-color: #666;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div id="container" class="container">
<h1>表白墙</h1>
<p>输入后点击提交, 会将信息显示在表格中</p>
<div class="row">
<span>谁: </span>
<input id="from" class="edit" type="text">
</div>
<div class="row">
<span>对谁: </span>
<input id="to" class="edit" type="text">
</div>
<div class="row">
<span>说什么: </span>
<input id="message" class="edit" type="text">
</div>
<div class="row">
<input type="button" value="提交" class="submit"
onclick="addmsg()">
</div>
<div id="allMsg">
</div>
</div>
<script>
function addmsg(){
// 1.得到输入控件
var from = jQuery("#from");
var to = jQuery("#to");
var message = jQuery("#message");
// 2.非空效验
if(from.val().trim()==""){
// 未输入任何信息
alert("抱歉:请先输入姓名!");
from.focus();
return false;
}
if(to.val().trim()==""){
// 未输入任何信息
alert("抱歉:请先输入表白人姓名!");
to.focus();
return false;
}
if(message.val().trim()==""){
// 未输入任何信息
alert("抱歉:请先输入表白内容!");
message.focus();
return false;
}
// 3.将结果提交给后端
jQuery.ajax({
url:"addmsg",
type:"POST",
data:{
"username":from.val(),
"touser":to.val(),
"msg":message.val()
},
success:function(res){
if(res.code==200 && res.data==1){
alert("恭喜:表白成功!");
// 4.将新加入的表白信息加入到页面中
location.href = location.href; // 刷新当前页面
}else{
alert("抱歉:表白失败!"+res.msg);
}
}
});
}
// 查询所有表白信息
function initList(){
jQuery.ajax({
url:"getlist",
type:"GET",
data:{
},
success:function(res){
var showHtml = "";
if(res.code==200 && res.data.length>0){
// 有数据
for(var i =0;i<res.data.length;i++){
var item = res.data[i];
showHtml += '<div class="row">';
showHtml += item.username+'对'+item.toUser+
"说"+item.msg;
showHtml += '</div>';
}
}else{
showHtml = '<div class="row"><h3>暂无表白数据!</h3></div>';
}
jQuery("#allMsg").html(showHtml);
}
});
}
initList();
</script>
</body>
</html>
web.xml
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
<display-name>Archetype Created Web Application</display-name>
</web-app>
jquery.min.js这个在网上搜一下,
(4)Message实体类,
public class Message {
private String username;//谁
private String toUser;//对谁
private String msg;//说什么
public String getUsername() {
return username;
}
public void setUsername(String userName) {
this.username = username;
}
public String getToUser() {
return toUser;
}
public void setToUser(String toUser) {
this.toUser = toUser;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
}
(5)AppVar全局类
public class AppVar {
// 存储所有的表白数据
public static List<Message> MESSAGE_LIST = new ArrayList<Message>();
public static ObjectMapper OBJECTMAPPER = new ObjectMapper();
}
(6)AddMessageServlet ,添加一个表白信息
@WebServlet("/addmsg")
public class AddMessageServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("application/json;charset=utf-8");
//一会存放json格式的数据
HashMap<String, Object> result = new HashMap();
//获取前端页面信息,getParameter中的参数是
/**
data:{
"username":from.val(),
"touser":to.val(),
"msg":message.val()
},
*/
String username = req.getParameter("username");
String touser = req.getParameter("touser");
String msg = req.getParameter("msg");
if (username == null || username.equals("") || touser == null ||
touser.equals("") || msg == null || msg.equals("")) {
result.put("code", -1);
result.put("msg", "非法参数");
result.put("data", "");
} else {
//表白成功的信息放到列表里
Message message = new Message();
message.setUsername(username);
message.setToUser(touser);
message.setMsg(msg);
AppVar.MESSAGE_LIST.add(message);
result.put("code", 200);
result.put("msg", "");
result.put("data", 1);
}
resp.getWriter().write(AppVar.OBJECTMAPPER.writeValueAsString(result));
}
}
(7)MassageServlet,自动获取列表中的表白信息
@WebServlet("/getlist")
public class MassageServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("application/json;charset=utf-8");
Map<String,Object> map = new HashMap<String, Object>();
map.put("code", 200);
map.put("msg", "");
map.put("data", AppVar.MESSAGE_LIST);
resp.getWriter().write(AppVar.OBJECTMAPPER.writeValueAsString(map));
// resp.getWriter().write(AppVar.OBJECTMAPPER.writeValueAsString(AppVar.MESSAGE_LIST));
}
}
(8)配置
![K(%FTSE9]6BWI8GO F N X U ! [ Z 5 ‘ G 2 M U Z R L A 8 A 3 M ! [ @ 0 H A FNXU%O.png](https://img-blog.csdnimg.cn/img_convert/fc8344278faf7bd51af59d80826d4d92.png#averageHue=#6a6b56&clientId=u61a4ff9c-78d2-4&from=paste&height=738&id=u377b76f4&originHeight=922&originWidth=1361&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=136331&status=done&style=none&taskId=u85f9e06f-8b0d-4673-892f-3f3166b1193&title=&width=1088.8) ![Z5`G{~2MUZ_RLA8A3M%GRGO.png](https://img-blog.csdnimg.cn/img_convert/69eb2d947b9dd47634379549226a4edd.png#averageHue=#538b5b&clientId=u61a4ff9c-78d2-4&from=paste&height=158&id=uaf923d8a&originHeight=198&originWidth=574&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=10966&status=done&style=none&taskId=u6d03f50b-3fd7-4368-b363-38fef5709d7&title=&width=459.2) ![@}0HA FNXU![Z5‘G 2MUZRLA8A3M![@0HAZ@6W380EVJKMKQ$TL.png](https://img-blog.csdnimg.cn/img_convert/d929f6bd428259872e653646a5fe83f0.png#averageHue=#3e4244&clientId=u61a4ff9c-78d2-4&from=paste&height=574&id=uaa925f06&originHeight=718&originWidth=1338&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=92561&status=done&style=none&taskId=u745972ef-a954-4595-99a0-58eac29a8dc&title=&width=1070.4)
(9)点击运行
数据库版本的表白墙
在数据库中创建一个表来存储表白墙信息
CREATE TABLE `message_wall` (
`id` bigint NOT NULL AUTO_INCREMENT,
`sender` varchar(50) NOT NULL,
`receiver` varchar(50) NOT NULL,
`content` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
);
按照上面的方法创建新项目
配置pom.xml文件,reload一下,MySQL为5.0的把mysql依赖换成5.1.49的
<dependencies>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<!-- <version>5.1.49</version> -->
<version>8.0.33</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.15.1</version>
</dependency>
</dependencies>
准备以下文件
![]JT3XIR5{EN4)8A%@})`{R.png
messagewall.html
<!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="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>
编写DBUtil类,关于数据库的连接和资源关闭
public class DBUtil {
private static final String URL = "jdbc:mysql://127.0.0.1:3306/myjava?characterEncoding=utf-8";
private static final String USER = "root";
private static final String PASSWORD = "123456";
private static DataSource dataSource = null;
// static方法,在类加载时执行一次
static {
MysqlDataSource mysqlDataSource = new MysqlDataSource();
mysqlDataSource.setURL(URL);
mysqlDataSource.setUser(USER);
mysqlDataSource.setPassword(PASSWORD);
dataSource = mysqlDataSource;
}
private DBUtil(){
}
/**
* @Description: 连接数据库
* @author: longyushuang
* @date: 2023/6/28 18:43
* @Param:
* @Return:
*/
public static Connection getConnection () throws SQLException {
// 通过数据源对象,获取数据库连接对象
return dataSource.getConnection();
}
// 关闭数据库资源
public static void close(ResultSet resultSet, PreparedStatement statement, Connection connection) throws SQLException {
if (resultSet != null){
resultSet.close();
}
if (statement != null){
statement.close();
}
if (connection != null){
connection.close();
}
}
}
Message实体类
public class Message {
private Long id; // 对应到数据中的主键
private String sender; // 发送者
private String receiver; // 接收者
private String content; // 留言内容
public void setId(Long id) {
this.id = id;
}
public void setSender(String sender) {
this.sender = sender;
}
public void setReceiver(String receiver) {
this.receiver = receiver;
}
public void setContent(String content) {
this.content = content;
}
public Long getId() {
return id;
}
public String getSender() {
return sender;
}
public String getReceiver() {
return receiver;
}
public String getContent() {
return content;
}
}
MessageDao操作数据库,包括查看所有留言信息和插入一条信息
public class MessageDao {
/**
* @Description: 查看所有留言
* @author: longyushuang
* @date: 2023/6/28 18:56
* @Param:
* @Return:
*/
public List<Message> selectAll() throws SQLException {
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();
List<Message> messages = null;
// 5. 遍历结果集
while (resultSet.next()) {
// 如果List为空,则初始化
if (messages == null) {
messages = new ArrayList<Message>();
}
// 创建一个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
messages.add(message);
}
// 返回结果
return messages;
} catch (SQLException e) {
throw new RuntimeException(e);
} finally {
// 关闭连接并释放资源
DBUtil.close(resultSet, statement, connection);
}
}
public int insert(Message message) throws SQLException {
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());
int row = statement.executeUpdate();
return row;
} catch (SQLException e) {
throw new RuntimeException(e);
}finally {
DBUtil.close(null,statement,connection);
}
}
}
MessageServlet
@WebServlet("/message")
public class MessageServlet 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");
// 查询数据库中的留言列表
try {
List<Message> messages = messageDao.selectAll();
// 判断结果是否为空
if (messages == null){
// 避免返回的是一个"null"
messages = new ArrayList<Message>();
}
// 返结果转为json并返回
String jsonString = objectMapper.writeValueAsString(messages);
// 返回结果
resp.getWriter().write(jsonString);
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
// 插入一条信息
@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() == null
|| message.getReceiver() == null || message.getSender().equals("") ||
message.getReceiver().equals("") || message.getContent().equals("")){
// 返回一个错误的自定义状态码
resp.getWriter().write("{\"code\": -1}");
}
int row;
// 调用DAO写入数据库
try {
row = messageDao.insert(message);
} catch (SQLException e) {
throw new RuntimeException(e);
}
if (row <= 0){
// 返回一个错误的自定义状态码
resp.getWriter().write("{\"code\": -1}");
}
// 返回成功
resp.getWriter().write("{\"code\": 0}");
}
}