情人节到了,手把手教你做一个表白墙,附有详细步骤

之前博主已经写过一个表白墙页面版的了,上次的比较简单,只是单纯地使用前端知识来完成的,有兴趣的可以看一下

??前 端 简 易 实 现 表 白 墙??

正因为只是利用前端知识来实现的,即所有数据在浏览器关闭后会丢失。这次,我们带领大家实现一个可以前后端交互的表白墙,这种表白墙的数据可以存储在服务器上,因此可以实现持久化保存~下面,让我们开始吧!

??服务器版本表白墙

  • ?? 配置Maven项目
    • 1. 创建Maven项目
    • 2. 引入依赖
    • 3. 构造目录
  • ?? 约定前后端交互接口
  • ?? 实现服务器端代码
  • ?? 调整前端页面代码
  • ?? 将数据进行持久化存储
    • 1. 将数据写入文件中
    • 2. 将数据保存到数据库中
      • (1)引入数据库jar包
      • (2)建库建表
      • (3)和数据库建立连接
    • 3. 总结

?? 配置Maven项目

1. 创建Maven项目

在这里插入图片描述

首先我们需要新建一个Maven项目,保存路径根据自己情况设置就行,其他的不用修改,这一步比较简单,就不细说了

2. 引入依赖

我们需要在pom.xm中引入两个依赖,一个是Servlet依赖,一个是Jackon依赖:



    4.0.0

    org.example
    messagewall
    1.0-SNAPSHOT

    
    
        javax.servlet
        javax.servlet-api
        3.1.0
        provided
    
    
    
        com.fasterxml.jackson.core
        jackson-databind
        2.13.1
    




3. 构造目录

在这里插入图片描述
我们构造如图所示的版本的目录结构即可,然后在web.xml中加上如下内容:



    Archetype Created Web Application

?? 约定前后端交互接口

所谓 “前后端交互接口” 是进行 Web 开发中的关键环节,具体来说:就是允许页面给服务器发送哪些 HTTP 请求,并且每种请求预期获取什么样的 HTTP 响应。此步是网页开发中最关键最有难度的步骤,要好好学哦!

  1. 第一个交互接口:当页面这里用户点击提交的时候,就要给服务器发送一个请求,把这次留言的信息传给服务器
  2. 第二个交互接口:当页面加载的时候,就需要给服务器发送一个请求,把之前已经保存在服务器上的信息获取下来,展示到页面上

接口格式可以约定如下:
在这里插入图片描述

?? 实现服务器端代码

在约定好前后端交互的接口后,我们就可以创建一个类来实现服务器端的代码了。
相关代码如下(附有注释)

import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.util.List;

class Message {//表示其中一条请求的Jackon数据格式
    public String from;
    public String to;
    public String message;
}

@WebServlet("/message")
public class MessageServlet extends HttpServlet {
    private ObjectMapper objectMapper = new ObjectMapper();
    private List messageList = new ArrayList<>();

    // 这个方法用来处理, 从服务器获取到消息数据
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/json;charset=utf-8");
        objectMapper.writeValue(resp.getWriter(), messageList);
    }

    // 这个方法用来处理, 从客户端提交数据给服务器
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Message message = objectMapper.readValue(req.getInputStream(), Message.class);
        messageList.add(message);
        resp.setContentType("application/json;charset=utf-8");
        resp.getWriter().write("{"ok": 1}");
    }
}

?? 调整前端页面代码

当前服务器已经准备好接收浏览器的请求了,那么接下来我们就需要修改前端代码来真的构造出这个请求。
具体需求:

  1. 在页面加载的时候,访问服务器,从服务器这边获取到消息列表,并展示出来
  2. 点击提交按钮的时候,把当前的数据构造成一个HTTP请求,发送给服务器

具体思路:
要想进行这个前后端交互的过程,我们就需要使用到ajax,因此,我们需要引入jQuery来确保能使用ajax,然后我们就可以编写相关代码了。
完整的html代码如下:




    
    
    
    Document


    

表白墙

输入后点击提交, 会将信息显示在表格中

谁:
对谁:
说什么:

写完后用Smart Tomcat进行打包部署后,我们在表白墙中输入内容后就可以保存到服务器中,这样在页面刷新时就不会丢失了:在这里插入图片描述
在这里插入图片描述
当前服务器是把数据给保存到了messageList变量中,变量就是位于内存中,此时此刻,一旦程序重启(服务器重启),内存中的东西就没了,那么如何让做到让服务器重启后数据还能不丢失呢?此时此刻我们就需要对数据进行持久化存储了

?? 将数据进行持久化存储

1. 将数据写入文件中

使数据进行持久化存储有两种方法,其中一种就是将数据写入文件中,此时我们就要用到前面的文件操作相关知识了。
相关代码如下(注意改动位置)

class Message {//表示其中一条请求的Jackon数据格式
    public String from;
    public String to;
    public String message;
}

@WebServlet("/message")
public class MessageServlet extends HttpServlet {
    private ObjectMapper objectMapper = new ObjectMapper();
    //此处填要保存文件的路径
    private String filePath = "此处填自己希望把文件保存的位置的路径即可";

    // 这个方法用来处理, 从服务器获取到消息数据
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/json;charset=utf-8");
    }

    // 这个方法用来处理, 从客户端提交数据给服务器
    @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=utf-8");
        resp.getWriter().write("{"ok": 1}");
    }

    private void save(Message message) {
        System.out.println("向文件中写入数据!");
        try (FileWriter fileWriter = new FileWriter(filePath, true)) {
            // 写入文件的格式也有很多方式. 可以直接写 json, 也可以使用行文本(每个记录占一行, 字段之间使用分隔符区分)
            fileWriter.write(message.from + "	" + message.to + "	" + message.message + "
");
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

注意:
其中append中的参数设置为true的作用是将文件的打开方式设置为追加写的方式打开(使用输出流对象的时候),这样不会清空文件原有的内容,而是直接往最后来拼接
验证程序:在这里插入图片描述
在这里插入图片描述
当我们在页面中输入数据并提交后,可以看到编译器中已经提示向文件中写入数据了在这里插入图片描述
我们打开文件,同样可以看到已经保存好的数据,此时表示我们的数据已经可以持久化保存了,但当我们刷新页面后,可以看到页面上仍然没有任何东西:在这里插入图片描述
原因是此时我们只实现了将数据保存,而没有实现当页面刷新后把保存好的数据加载出来,那么我们只需要把文件中的数据加载回来显示到响应中即可。
我们需要构建一个load方法:

import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

class Message {//表示其中一条请求的Jackon数据格式
    public String from;
    public String to;
    public String message;
}

@WebServlet("/message")
public class MessageServlet extends HttpServlet {
    private ObjectMapper objectMapper = new ObjectMapper();
    //此处填要保存文件的路径
    private String filePath = "此处填自己希望把文件保存的位置的路径即可";

    // 这个方法用来处理, 从服务器获取到消息数据
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/json;charset=utf-8");
        List messageList = load();
        objectMapper.writeValue(resp.getWriter(), messageList);
    }

    private List load() {
        // 这个方法负责读文件, 把读到的数据获取到之后, 放到 List 中
        List messageList = new ArrayList<>();
        System.out.println("从文件加载!");
        //此处我们需要按行读取. FileReader 本身不支持. 需要套上一层BufferedReader
        //当然这里使用 Scanner 也行
        try (BufferedReader bufferedReader = new BufferedReader(new FileReader(filePath))) {
            while (true) {
                String line = bufferedReader.readLine();
                if (line == null) {
                    break;
                }
                // 如果读取到 line 的内容, 就把 line 解析成一个 Message 对象
                String[] tokens = line.split("	");
                Message message = new Message();
                message.from = tokens[0];
                message.to = tokens[1];
                message.message = tokens[2];
                messageList.add(message);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        return messageList;
    }
    // 这个方法用来处理, 从客户端提交数据给服务器
    @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=utf-8");
        resp.getWriter().write("{"ok": 1}");
    }

    private void save(Message message) {
        System.out.println("向文件中写入数据!");
        try (FileWriter fileWriter = new FileWriter(filePath, true)) {
            // 写入文件的格式也有很多方式. 可以直接写 json, 也可以使用行文本(每个记录占一行, 字段之间使用分隔符区分)
            fileWriter.write(message.from + "	" + message.to + "	" + message.message + "
");
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

接下来我们使用Smart Tomcat重新打包部署程序,打开页面后刷新一下,就可以看到之前已经保存在文件中的数据了:在这里插入图片描述

2. 将数据保存到数据库中

除了将数据写入文件进行保存,我们也可以把数据保存到数据库中。

(1)引入数据库jar包

在使用数据库进行保存时,首先我们就需要先引入数据库的jar包,方法为从Maven的中央仓库中引入

  
    
        mysql
        mysql-connector-java
        5.1.47
    

(2)建库建表

引入jar包后,我们就可以写相关代码了,但在这之前,我们应该先在mysql中创建相关的数据库和数据表:

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

注意,由于from和to为数据库中的关键字,为了防止冲突,应该加上反引号

(3)和数据库建立连接

有了数据库和数据表后,我们就可以开始编写相关代码了,首先我们应该先和数据库建立好连接,此时我们应该先创建一个DBUtil类,编写相关代码:

import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;

import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class DBUtil {
    private static final String URL = "此处填自己的数据库路径";
    private static final String USERNAME = "填自己数据库用户名";
    private static final String PASSWORD = "填自己数据库密码";

    private static volatile DataSource dataSource = null;

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

然后可以编写相关JDBC代码了(从数据库中读取相关数据和写入相关数据)

import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

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 doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/json;charset=utf-8");
        List messageList = load();
        objectMapper.writeValue(resp.getWriter(), messageList);
    }

    private List load() {
        List messageList = new ArrayList<>();
        System.out.println("从数据库读取数据!");

        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");
                messageList.add(message);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DBUtil.close(connection, statement, resultSet);
        }
        return messageList;
    }

    // 这个方法用来处理, 从客户端提交数据给服务器
    @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=utf-8");
        resp.getWriter().write("{"ok": 1}");
    }

    private void save(Message message) {
        System.out.println("向数据库中写入数据!");

        Connection connection = null;
        PreparedStatement statement = null;
        try {
            // 1. 先和数据库建立连接
            connection = DBUtil.getConnection();
            // 2. 构造拼装 SQL
            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);
            // 3. 执行 SQL
            int ret = statement.executeUpdate();
            if (ret == 1) {
                System.out.println("插入成功!");
            } else {
                System.out.println("插入失败!");
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DBUtil.close(connection, statement, null);
        }
    }
}

验证程序
在这里插入图片描述
!
编译器中成功显示向数据库中写入数据并插入成功了!在这里插入图片描述
可以看到也我们成功将数据插入数据库中了!

3. 总结

当前我们的场景中,通过写文件方式存储数据要比存入数据库更简单一些;持久化存储,不仅仅是写数据库这一种办法,写文件有的时候也是简单有效的;一般来说,如果问题场景本身就比较简单,数据格式也不复杂,数据量也不大。这种直接就写文件即可,如果问题场景比较复杂(数据需要进行一系列计算加工),写数据库更合适~

那么,本篇博客到此就结束啦!博主已经将实现一个可前后端交互的表白墙的总体思路交给大家了,大家可以根据自己的需求加上各种图片哦,快去试试吧??

你可能感兴趣的