Java?Servlet實(shí)現(xiàn)表白墻的代碼實(shí)例

更新時(shí)間：2023年02月21日 10:16:07 作者：過?

最近用Servlet做了個(gè)小項(xiàng)目,分享給大家,下面這篇文章主要給大家介紹了關(guān)于Java?Servlet實(shí)現(xiàn)表白墻的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、表白墻簡介

在表白墻頁面中包含三個(gè)文本框，分別表示表白者，表白對(duì)象，表白內(nèi)容，在文本框中輸入內(nèi)容之后，內(nèi)容能夠保存，并且在下次啟動(dòng)頁面的時(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ù)庫，并且能夠關(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ù)庫。然后再向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ù)庫
        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ù)庫中取出之前存儲(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("提交失敗");
                }
            });

在每次刷新頁面時(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ù)器
        //頁面加載的時(shí)候，從服務(wù)器獲取消息列表，并且在頁面上直接顯示。
        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>