懺悔ウォールサーバー版 [インタラクティブインターフェース、サーバーサイドコード、フロントエンドコード、ファイル/データベースに保存されたデータ]

記事ディレクトリ

• 1.準備
• 2.合意されたフロントエンドとバックエンドの対話インターフェース
• 3. サーバー側コードを実装する
• 4番目に、フロントエンドページのコードを調整します
• 五、データ保存ファイル
• 6. データはデータベースに保存されます
• 

---

1.準備

1) Mavenプロジェクト を作成する

2) 必要なディレクトリ webapp、WEB-INF、web.xml を作成します。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>

3) 依存関係を導入する (サーブレット、ジャクソン)

4) 告白ウォールのフロントエンド ページ コードを webapp ディレクトリにコピーします。

2.合意されたフロントエンドとバックエンドの対話インターフェース

いわゆる「フロントエンドとバックエンドの対話インターフェース」は、 Web開発における重要なリンクです。

フロントエンドとバックエンドの対話を完了するには、2 つの対話型インターフェイスについて合意する必要があります。

1. サーバーからすべてのメッセージを取得します。

リクエスト：GET /メッセージ

レスポンス：JSON形式

{

       {from:"xxx" ，to:"xxx", message:"xxxxxx"}

        …………

        …………

}

2. サーバーにデータを送信する

Request : bodyもJSON形式    

投稿/メッセージ

 {from:"xxx" ，to:"xxx", message:"xxxxxx"}

レスポンス：JSON形式

{OK:1}

3. サーバー側コードを実装する

//这个类表示一条消息的数据格式
class Message{
        public String from;
        public String to;
        public String message;
}
@WebServlet("/message")
public class MessageServlet extends HttpServlet {
    // 用于转换 JSON 字符串
    private ObjectMapper objectMapper = new ObjectMapper();
    // 用于保存所有的留言
    private List<Message> messageList = new ArrayList<>();

    //doGet方法用来从服务器上获取消息
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/json;charset=utf-8");
        //writeValue就是把messageList对象转换成json格式的字符串，并通过写入响应(resp.getWriter())返回
        objectMapper.writeValue(resp.getWriter(),messageList);
    }

    //doPost方法用来把客户端的数据提交到服务器
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //readValue第一个参数可以支持一个字符串，也可以放inputStream对象;第二个参数是用来接收读取到的结果
        //返回值放到Message对象中
        //通过这个代码就完成了读取body，并且解析成json的过程
        Message message = objectMapper.readValue(req.getInputStream(),Message.class);
        messageList.add(message);
        resp.setContentType("application/json;charset=utf-8");
        resp.getWriter().write("{\"ok\":1}");
    }
}

4番目に、フロントエンドページのコードを調整します

 <script src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        //1.在页面加载的时候访问服务器，从服务器这边获取到消息列表，并展示出来
        function load(){
            $.ajax({
                type:'GET',
                url:'message',
                success: function(data,status){
                    let container = document.querySelector('.container');
                    for(let message of data){
                        let row = document.createElement('div');
                        row.className = 'row';
                        row.innerHTML = message.from + '对' + message.to + '说： ' + message.message;
                        container.appendChild(row);
                    }
                }
            });
        }
        load();
        //2.点击提交按钮的时候，把当前的数据构造成一个http请求，发送给服务器
        let submitButon = document.querySelector('#submit');
        submitButon.onclick = function(){
            //1.先获取到编辑框中的内容
            let edits = document.querySelectorAll('.edit');
            console.log(edits);
            let from = edits[0].value;
            let to = edits[1].value;
            let message = edits[2].value;
            console.log(from+'对'+to+'说,'+message);
            if(from == '' || to == '' || message == ''){
                return;
            }   
            //2.根据内容构造html元素（.row里面包含用户输入的话
            let row = document.createElement('div');
            row.className = 'row';
            row.innerHTML = from+'对'+to+'说，'+message;
            //3.把这个元素添加到DOM树上
            let container = document.querySelector('.container');
            container.appendChild(row);
            //4.清空原来的输入框
            for(let i=0; i<edits.length; i++){
                edits[i].value = '';
            }
            //5.构造成一个http请求，发送给服务器
            $.ajax({
                type:'POST',
                url:'message',
                //data里面就是body数据
                data: JSON.stringify({from:from, to:to, message:message}),
                contentType: "application/json;charset=utf-8",
                success: function(data,status){
                    if(data.ok == 1){
                        console.log('提交成功');
                    }else{
                        console.log('提交失败');
                    }
                }
            })
        }
    </script>

このとき、ブラウザ でhttp://127.0.0.1:8080/messageWall924/confession wall.htmlという URLから サーバーにアクセスすると、

に 。

 データはサーバーのメモリに保存され ( private List<Message> messages = new ArrayList<Message>(); )、サーバーが再起動すると、データは失われます。

五、データ保存ファイル

In the above code, we save the data in the variable messageList. データをファイルに保存して永続的に保存する場合、この変数は必要ありません。

FileWriter fileWriter = new FileWriter(filePath,true)

Java でファイルを開く主な方法は 3 つあります。

1. 読み取りモードで開く (入力ストリーム オブジェクトを使用する場合)

2. 書き込みモードを開く (出力ストリーム オブジェクトを使用する場合) このメソッドは、元のコンテンツをクリアします。

3.追加の書き込みメソッドが開かれます (出力ストリーム オブジェクトを使用する場合)。このメソッドは元のコンテンツをクリアしませんが、ファイル コンテンツの背後に直接スプライシングします。その後に true を追加して、書き込み状態を追加します。

データ ストレージ ファイルの完全なコードは次のとおりです。

class Message{
        public String from;
        public String to;
        public String message;
}
@WebServlet("/message")
public class MessageServlet extends HttpServlet {
    // 用于转换 JSON 字符串
    private ObjectMapper objectMapper = new ObjectMapper();
    // 用于保存所有的留言
//    private List<Message> messageList = new ArrayList<>();

    //保存文件的路径
    private String filePath = "d:code/java/messageWall924/messages924.txt";
    //doGet方法用来从服务器上获取消息
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/json;charset=utf-8");
        //writeValue就是把messageList对象转换成json格式的字符串，并通过写入响应(resp.getWriter())返回
        List<Message> messageList = load();
        objectMapper.writeValue(resp.getWriter(),messageList);
    }
    private List<Message> load(){
        //把读到的数据放到List<Message>中
        List<Message> messageList = new ArrayList<>();
        System.out.println("开始从文件加载数据！");
        //此处需要按行读取，FileReader不支持，需要套上一层BufferedReader
        try(BufferedReader bufferedReader = new BufferedReader(new FileReader(filePath))){
            while (true){
                String line = bufferedReader.readLine();
                if (line == null){
                    break;
                }
                //读取到的内容，就解析成Message对象
                String[] tokens = line.split("\t");
                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;
    }

    //doPost方法用来把客户端的数据提交到服务器
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //readValue第一个参数可以支持一个字符串，也可以放inputStream对象;第二个参数是用来接收读取到的结果
        //返回值放到Message对象中
        //通过这个代码就完成了读取body，并且解析成json的过程
        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)){
            fileWriter.write(message.from + '\t' + message.to +
                    '\t' + message.message + '\n');
        }catch (IOException e){
            e.printStackTrace();
        }
    }
}

6. データはデータベースに保存されます

1) pom.xmlにmysql の 依存関係を導入する

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
        </dependency>

2） データベース を 作成し、 メッセージ テーブルを作成します

 3) DBUtilクラスを作成する

DBUtil クラスは、主に次の関数を実装します 。

MysqlDataSourceの インスタンスを 作成し、URL、ユーザー名、パスワードなどのプロパティ を 設定します 。

MySQLサーバーとの接続を確立する getConnection メソッド を 提供します。

必要なリソースを解放する close メソッドを 提供します。

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

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

4) load メソッドと save メソッドを変更してデータベースを操作する

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //readValue第一个参数可以支持一个字符串，也可以放inputStream对象;第二个参数是用来接收读取到的结果
        //返回值放到Message对象中
        //通过这个代码就完成了读取body，并且解析成json的过程
        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("向数据库写入数据！");

        //1.先和数据库建立连接
        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);
            //执行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);
        }
    }

    //doGet方法用来从服务器上获取消息
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/json;charset=utf-8");
        //writeValue就是把messageList对象转换成json格式的字符串，并通过写入响应(resp.getWriter())返回
        List<Message> messageList = load();
        objectMapper.writeValue(resp.getWriter(),messageList);
    }
    private List<Message> load(){
        //把读到的数据放到List<Message>中
        List<Message> 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;
    }