1.步骤

2.提供两个接口:

3.流程

4.代码

1.步骤

1.约定前后端交互的接口

2.开发服务器代码

a.编写servlet处理前端发来的请求

b.编写数据库代码,存储获取关键的数据

3.开发客户端代码

a.基于ajax构造请求,解析响应

b.点击按钮后,触发给服务器发送请求的行为

2.提供两个接口:

1.告诉服务器当前留言的是什么样的数据(当用户提交按钮时,会给服务器器发送一个Http请求,让服务器能把消息存下来)

2.从服务器获取到当前有哪些留言数据(当页面加载,就从服务器获取曾经存储的信息内容)

3.流程

1.登录页面

2.GET请求处理

3.Tomcat服务器提交post请求,输入信息

4.接收post请求,返回响应

5.无论怎么刷新,内容都在

4.代码

1.前端代码

在代码中加入ajax

1.点击按钮提交,要构造数据发送服务器

2.页面加载时,从服务器获取消息列表,在页面显示

<!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>
</head>
<body>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container{
            width: 100%;

        }
        h3{
            text-align: center;
            /* 上下边距20  左右0 */
            padding: 20px 0;
            font-size: 24px;
        }
        p{
            text-align: center;
            color: #999;
            padding: 10px 0;
        }
        .row{
            width: 400px;
            height: 50px;
            /*  元素居中*/
            margin: 0 auto;
            display:flex;
            justify-self:center;
            align-items: center;
        }
        /* 对齐 */
        .row span{
            width:100px;
            font-size: 20px;
        }
        .row input{
            width: 300px;
            height: 40;
            line-height: 40px;
            font-size: 20px;
            /* 缩进 */
            text-indent: 0.5em;
            /* 去掉轮廓线 */
            outline: none;
        }
        .row #submit{
            width: 200px;
            height: 40px;
            font-size: 20px;
            line-height: 40px;
            margin: 0 auto;
            color: white;
            background-color: orange;
            border: none;
            border-radius: 10px;
        }
        .row #submit:active{
            background-color:grey;
        }
    </style>
    <div class="container">
        <h3>表白墙</h3>
        <p>输入后点击提交, 会将信息显示在表格中</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>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
     
    <script>
        //页面加载时,从服务器获取消息列表,在页面显示
        function getMessages(){
            $.ajax({
                type:'get',
                url:'message',
                success:function(body){
                    let container=document.querySelector(".container");
                    for(let message of body){
                        let div=document.createElement('div');
                        div.innerHTML=message.from+'对'+message.to+'说:'+message.message;
                        div.className='row';
                        container.appendChild(div);
                    }
                }
            });
        }
        getMessages();

        //当点击submit会获取input的内容,把内容构成成div插入到页尾
        let submitBtn=document.querySelector('#submit');
        submitBtn.onclick=function(){
            //1.获取内容
            let inputs=document.querySelectorAll('input');
            let from=inputs[0].value;
            let to=inputs[1].value;
            let msg=inputs[2].value;
            if(from=='' || to=="" || msg==""){
                //用户没有填写完,先不提交数据
                return;
            }
            //2.生成新的div,把div加入的页面
            let div=document.createElement('div');
            div.innerHTML=from+'对'+to+'说:'+msg;
            div.className='row';
            let container=document.querySelector('.container');
            container.appendChild(div);
            //3.清空之前输入框的内容
            for(let i=0;i<inputs.length;i++){
                inputs[i].value='';
            }

             //4.把当前的输入框的内容,构造成HTTP post请求,通过ajax发给服务器
             let body={
                from:from,
                to:to,
                message:msg
             };
             //点击按钮提交,要构造数据发送服务器
             $.ajax({
                type:'post',
                url:'message',
                contentType:'appliaction/json;charset=utf8',
                data:JSON.stringify(body),
                    success:function(body){
                        alert("消息提交成功");
                    },
                    error:function(body){
                        alert("消息提交失败");
                    }
                
             });
        }
    </script>
</body>
</html>

2.sql创建表

create table message(`from` varchar(1024),`to` varchar(1024),message varchar(4096));

3.后端代码

MessageServlet.java

1.创建Message类,成员变量(from,to,message)

2.doPost()处理提交消息请求

1.输入字符流转成java对象

2.通过save方法存入数据库

3.通过contentType告知页面,返回的数据是json格式

4.输出

3.doGet()获取消息列表,把内容返回给客户端

1.从load方法中得到从数据库中得到的信息

2.把java对象转成json格式

3.返回数据类型,输出

4.保存消息到数据库

1.和数据库建立连接

2.构造SQL语句

3.执行SQL

4.关闭

5.从数据库中获取信息

class Message{
    public String from;
    public String to;
    public String message;
}


@WebServlet("/message")
public class MessageServlet extends HttpServlet {
    private ObjectMapper objectMapper=new ObjectMapper();

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Message message=objectMapper.readValue(req.getInputStream(),Message.class);
        save(message);
        resp.setContentType("application/json;charset=utf8");
        resp.getWriter().write("{\"ok\":true}");
    }



    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        List<Message> messages=load();
        String jsonString=objectMapper.writeValueAsString(messages);
        System.out.println("jsonString"+jsonString);
        resp.setContentType("application/json; charset=utf8");
        resp.getWriter().write(jsonString);
    }
    private void save(Message message) {
        Connection connection=null;
        PreparedStatement statement=null;
        try {
            connection=DBUtil.getConnection();
            String sql="insert into message values(?,?,?)";
            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.close(connection,statement,null);
        }
    }
    private List<Message> load() {
        List<Message> messages=new ArrayList<>();
        Connection connection=null;
        PreparedStatement statement=null;
        ResultSet resultSet=null;
        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("message");
                messages.add(message);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            DBUtil.close(connection,statement,resultSet);
        }
        return messages;
    }

}

DBUtil.java

1.构造对象

2.初始化事件源,懒汉模式的线程,要进行三步操作

3.连接

4.关闭

public class DBUtil {
    private static final String URL="jdbc:mysql://127.0.0.1:3306/java1?characterEncoding=utf8&useSSL=false";
    private static final String USERNAME="root";
    private static final String PASSWORD="123456";

    private volatile static DataSource dataSource=null;
    private static DataSource getDataSource(){
        if(dataSource==null){
            synchronized (DBUtil.class){
                if(dataSource==null){
                    dataSource=new MysqlDataSource();
                    ((MysqlDataSource)dataSource).setUrl(URL);
                    ((MysqlDataSource)dataSource).setUser(USERNAME);
                    ((MysqlDataSource)dataSource).setPassword(PASSWORD);
                }
            }
        }

        return dataSource;
    }


    public static Connection getConnection() throws SQLException {
        return getDataSource().getConnection();
    }


    public static void close(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();
            }
        }
    }

}

服务器版本的表白墙

1.步骤

2.提供两个接口:

3.流程

4.代码

1.前端代码

2.sql创建表

3.后端代码

MessageServlet.java

DBUtil.java

猜你喜欢