Java?Servlet實(shí)現(xiàn)表白墻的代碼實(shí)例
一、表白墻簡(jiǎn)介
在表白墻頁(yè)面中包含三個(gè)文本框,分別表示表白者,表白對(duì)象,表白內(nèi)容,在文本框中輸入內(nèi)容之后,內(nèi)容能夠保存,并且在下次啟動(dòng)頁(yè)面的時(shí)候也能顯示出之前所保存的內(nèi)容。
二、代碼實(shí)現(xiàn)
1、約定前后端交互的接口
要實(shí)現(xiàn)表白墻,首先就需要約定前后端的交互接口,在實(shí)際開發(fā)過程中,前端人員只負(fù)責(zé)前端開發(fā),后端人員負(fù)責(zé)后端開發(fā),那么就需要約定前端發(fā)送什么樣的請(qǐng)求,后端處理請(qǐng)求之后再以什么格式將數(shù)據(jù)返回給前端。
那么對(duì)于 POST請(qǐng)求:
POST /message
{
from:"XX",
to:"XX",
message:"xxx"
}POST響應(yīng):
HTTP/1.1 200 OK
{
ok:true
}當(dāng)用戶點(diǎn)擊提交按鈕之后,就會(huì)向HTTP服務(wù)器發(fā)送一個(gè)請(qǐng)求,讓服務(wù)器把這個(gè)信息存儲(chǔ)起來。
GET 請(qǐng)求
GET /message
GET響應(yīng)
HTTP/1.1 200 OK
Content-Type:application/json
{
{
from:"XX",
to:"XX",
message:"xxx"
},
{
from:"XX",
to:"XX",
message:"xxx"
},
……
}請(qǐng)求從服務(wù)器上獲取到之前保存的所有的留言信息,響應(yīng)是Json格式的數(shù)組。
2、后端代碼實(shí)現(xiàn)
正式寫代碼之前的準(zhǔn)備工作:
需要?jiǎng)?chuàng)建一個(gè)maven項(xiàng)目,在這個(gè)項(xiàng)目中先引入Servlet依賴,Mysql依賴,以及Jackson依賴并且創(chuàng)建出正確的目錄結(jié)構(gòu)。
<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/mysql/mysql-connector-java -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.47</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.13.5</version>
</dependency>
</dependencies>
web.xml中的內(nèi)容如下:
<!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>首先創(chuàng)建出一個(gè)message類定義from,to,message幾個(gè)變量。
class Message{
public String from;
public String to;
public String message;
}創(chuàng)建DBUtil連接數(shù)據(jù)庫(kù),并且能夠關(guān)閉各種資源。
public class DBUtil {
private static final String url = "jdbc:mysql://127.0.0.1:3306/message?characterEncoding=utf8&useSSL=false";
private static final String user = "root";
private static final String password = "1234";
public volatile static DataSource dataSource;
private static DataSource getDataSource(){
if(dataSource == null){
synchronized (DBUtil.class){
if(dataSource == null){
dataSource = new MysqlDataSource();
((MysqlDataSource)dataSource).setUrl(url);
((MysqlDataSource)dataSource).setUser(user);
((MysqlDataSource)dataSource).setPassword(password);
}
}
}
return dataSource;
}
public static Connection getConnection() throws SQLException {
return getDataSource().getConnection();
}
public static void closeResource(Connection connection, PreparedStatement statement, ResultSet resultSet){
if(resultSet != null){
try {
resultSet.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if(statement != null){
try {
statement.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if(connection != null){
try {
connection.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}在Mysql中創(chuàng)建Message表:

創(chuàng)建MessageServlet類,繼承HttpServlet類,重寫doGet方法和doPost方法。
在doPost方法中,先設(shè)置了響應(yīng)的內(nèi)容類型為json格式和字符集為utf-8,然后將請(qǐng)求信息轉(zhuǎn)換成Message對(duì)象,再將Message對(duì)象的內(nèi)容存入數(shù)據(jù)庫(kù)。然后再向body中寫入約定的POST響應(yīng)的內(nèi)容。
private ObjectMapper objectMapper = new ObjectMapper();
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("application/json;charset=utf8");
Message message = objectMapper.readValue(req.getInputStream(),Message.class);
//將處理的請(qǐng)求信息存入數(shù)據(jù)庫(kù)
save(message);
resp.getWriter().write("{\"ok\":true");
}
private void save(Message message){
Connection connection = null;
PreparedStatement statement = null;
try {
connection = DBUtil.getConnection();
String sql = "insert into message value(?,?,?)";
statement = connection.prepareStatement(sql);
statement.setString(1,message.from);
statement.setString(2,message.to);
statement.setString(3,message.message);
statement.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
}finally {
DBUtil.closeResource(connection,statement,null);
}
}在doGet方法中也要先設(shè)置響應(yīng)的內(nèi)容格式是json,設(shè)置字符集為utf-8,然后從數(shù)據(jù)庫(kù)中取出之前存儲(chǔ)的信息存到鏈表中,將Message對(duì)象轉(zhuǎn)換成字符串寫入作為get方法響應(yīng)的body中。
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("application/json;charset=utf8");
List<Message> messages = load();
String jsonString = objectMapper.writeValueAsString(messages);
System.out.println("jsonString:" + jsonString);
resp.getWriter().write(jsonString);
}
private List<Message> load(){
Connection connection = null;
PreparedStatement statement = null;
ResultSet resultSet = null;
List<Message> list = new LinkedList<>();
try {
connection = DBUtil.getConnection();
String sql = "select * from message";
statement = connection.prepareStatement(sql);
resultSet = statement.executeQuery();
while(resultSet.next()){
Message message = new Message();
message.from = resultSet.getString("from");
message.to = resultSet.getString("to");
message.message = resultSet.getString("massage");
list.add(message);
}
} catch (SQLException e) {
e.printStackTrace();
}finally {
DBUtil.closeResource(connection,statement,resultSet);
}
return list;
}3、前端代碼實(shí)現(xiàn)
需要基于ajax能構(gòu)造請(qǐng)求并解析響應(yīng)。
把當(dāng)前獲取到的輸入框的內(nèi)容,構(gòu)造成一個(gè)HTTP POST請(qǐng)求,然后通過ajax發(fā)給服務(wù)器。
let body = {
"from": from,
"to": to,
"message": message
};
$.ajax({
type: "post",
url: "message",
contentType: "application/json;charset=utf8",
data: JSON.stringify(body),
success: function() {
alert("提交成功!");
},
error: function () {
alert("提交失敗");
}
});在每次刷新頁(yè)面時(shí),要從服務(wù)器上獲取到消息,將其進(jìn)行展示。
function getMessages() {
$.ajax({
type: 'get',
url:'message',
contentType: 'json',
success: function(body) {
let container=document.querySelector('.container');
console.log(body);
for(let message of body) {
let row=document.createElement('div');
row.innerHTML=message.from+'對(duì)'+message.to+'說:'+message.message;
row.className='row';
//3.把這個(gè)新的元素添加到DOM樹上
container.appendChild(row);
}
}
});前端完整代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表白墻</title>
</head>
<body>
<div class="container">
<h1>表白墻</h1>
<p>輸入后點(diǎn)擊提交,會(huì)將信息顯示在表格中</p >
<div class="row">
<span>誰:</span>
<input type="text" class="edit">
</div>
<div class="row" >
<span>對(duì)誰:</span>
<input type="text" class="edit">
</div>
<div class="row">
<span>說什么:</span>
<input type="text" class="edit">
</div>
<div class="row">
<input type="button" value="提交" id="submit">
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
//點(diǎn)擊按鈕提交的時(shí)候,ajax要構(gòu)造數(shù)據(jù)發(fā)送給服務(wù)器
//頁(yè)面加載的時(shí)候,從服務(wù)器獲取消息列表,并且在頁(yè)面上直接顯示。
function getMessages() {
$.ajax({
type: 'get',
url:'message',
contentType: 'json',
success: function(body) {
let container=document.querySelector('.container');
console.log(body);
for(let message of body) {
let row=document.createElement('div');
row.innerHTML=message.from+'對(duì)'+message.to+'說:'+message.message;
row.className='row';
//3.把這個(gè)新的元素添加到DOM樹上
container.appendChild(row);
}
}
});
}
getMessages();
let submitButton=document.querySelector('#submit');
submitButton.onclick=function(){
//1.先獲取到編輯框的內(nèi)容
let edits=document.querySelectorAll('.edit');
//依靠.value來獲得其輸入框的值
let from=edits[0].value;
let to=edits[1].value;
let message=edits[2].value;
// console.log(from,to,message);
//這里是對(duì)用戶輸入進(jìn)行合法的校驗(yàn),看用戶輸入是否合法
if(from==''||to==' '||message==''){
return;
}
//2.根據(jù)內(nèi)容,構(gòu)造HTML元素(.row里面包含用戶輸入的話)
//createElement:創(chuàng)建一個(gè)元素
let row=document.createElement('div');
row.className='row';
row.innerHTML=from+'對(duì)'+to+'說:'+message;
//3.把這個(gè)新的元素添加到DOM樹上
let container=document.querySelector('.container');
container.appendChild(row);
//4.清空原來的輸入框
for(let i=0;i<edits.length;i++){
edits[i].value='';
}
// 5.把當(dāng)前獲取到的輸入框的內(nèi)容,構(gòu)造成一個(gè)HTTP POST請(qǐng)求,然后通過ajax發(fā)給服務(wù)器
let body = {
"from": from,
"to": to,
"message": message
};
$.ajax({
type: "post",
url: "message",
contentType: "application/json;charset=utf8",
data: JSON.stringify(body),
success: function() {
alert("提交成功!");
},
error: function () {
alert("提交失敗");
}
});
}
</script>
<style>
/*去除瀏覽器默認(rèn)樣式:內(nèi)邊距,外邊距,內(nèi)邊框和外邊框不會(huì)撐大盒子*/
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
/*margin:0 auto :意思是 中央居中*/
.container{
width: 400px;
margin:0 auto;
}
/*padding:20px auto :h1標(biāo)簽:上下間距20*/
h1{
text-align:center;
padding:20px ;
}
p{
text-align:center;
color:#666;
padding: 10px 0;
font-size:14px;
}
/*display:flex:基于彈性布局
justify-content:center:水平居中
align-items:center:垂直居中
*/
.row{
height:50px ;
display: flex;
justify-content: center;
align-items:center;
}
span{
width:90px;
font-size: 20px;
}
input{
width:310px;
height: 40px;
font-size: 18px;
}
/*
設(shè)置提交按鈕的樣式
*/
#submit{
width: 400px;
color: white;
background-color:orange;
border:none;
border-radius:5px;
font-size: 18px;
}
/*點(diǎn)擊 提交 按鈕 就會(huì)改變其背景顏色*/
#submit:active{
background-color: black;
}
</style>
</div>
</body>
</html>三、效果演示

點(diǎn)擊提交按鈕之后:

總結(jié)
到此這篇關(guān)于Java Servlet實(shí)現(xiàn)表白墻的文章就介紹到這了,更多相關(guān)Servlet實(shí)現(xiàn)表白墻內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Java并發(fā)容器相關(guān)知識(shí)總結(jié)
今天給大家?guī)淼奈恼率荍ava并發(fā)容器的相關(guān)知識(shí),文中有非常詳細(xì)的介紹,對(duì)正在學(xué)習(xí)Java并發(fā)容器的小伙伴們很有幫助,需要的朋友可以參考下2021-06-06
Springboot-dubbo-fescar 阿里分布式事務(wù)的實(shí)現(xiàn)方法
這篇文章主要介紹了Springboot-dubbo-fescar 阿里分布式事務(wù)的實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
Java基于線程實(shí)現(xiàn)帶有滾動(dòng)效果的Label標(biāo)簽實(shí)例
這篇文章主要介紹了Java基于線程實(shí)現(xiàn)帶有滾動(dòng)效果的Label標(biāo)簽,實(shí)例分析了java線程的使用技巧及l(fā)abel標(biāo)簽的實(shí)現(xiàn)方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
JAVA 根據(jù)設(shè)置的概率生成隨機(jī)數(shù)的方法
本篇文章主要介紹了JAVA 根據(jù)設(shè)置的概率生成隨機(jī)數(shù)的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
詳解Spring Boot 使用Spring security 集成CAS
本篇文章主要介紹了詳解Spring Boot 使用Spring security 集成CAS,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05
讀取Java文件到byte數(shù)組的三種方法(總結(jié))
下面小編就為大家?guī)硪黄x取Java文件到byte數(shù)組的三種方法(總結(jié))。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08

