520はここにあります、JavaWeb告白壁の小さなプロジェクトを作ることを教えてください

コンテンツ

1.Mavenプロジェクトを構成します

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

1.2関連する依存関係の紹介

1.3全体的なプロジェクト構造

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

3.サーバーコード

3.1メッセージクラスを作成する

3.2ツールクラスの作成

3.3メッセージクラスの追加（AddMessage）

3.4クエリ情報クラス（MessageList）

4.フロントエンドコード

5.データベースを作成します

6.プロジェクトをデプロイします

7.エフェクト表示

---

1.Mavenプロジェクトを構成します

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

その後、ストレージパスと名前を選択します。これは比較的簡単なので、詳細には触れません。

1.2関連する依存関係の紹介

pom.xmlにservlet、  jackson、mysql-connector、およびlombokの依存関係を導入します。

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>org.example</groupId>
  <artifactId>message_wall</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>message_wall Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.7</maven.compiler.source>
    <maven.compiler.target>1.7</maven.compiler.target>
  </properties>

  <dependencies>
    <!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>1.18.22</version>
      <scope>provided</scope>
    </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.2.1</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.49</version>
    </dependency>

    <!-- 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>

    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>
  </dependencies>

  <build>
    <finalName>message_wall</finalName>
    <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
      <plugins>
        <plugin>
          <artifactId>maven-clean-plugin</artifactId>
          <version>3.1.0</version>
        </plugin>
        <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
        <plugin>
          <artifactId>maven-resources-plugin</artifactId>
          <version>3.0.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-compiler-plugin</artifactId>
          <version>3.8.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-surefire-plugin</artifactId>
          <version>2.22.1</version>
        </plugin>
        <plugin>
          <artifactId>maven-war-plugin</artifactId>
          <version>3.2.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-install-plugin</artifactId>
          <version>2.5.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-deploy-plugin</artifactId>
          <version>2.8.2</version>
        </plugin>
      </plugins>
    </pluginManagement>
  </build>
</project>

 

1.3全体的なプロジェクト構造

 

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

        いわゆる「フロントエンドとバックエンドのインタラクションインターフェイス」は、Web開発における重要なリンクです。具体的には、ページからサーバーに送信できるHTTPリクエストと、取得が期待されるHTTPレスポンスです。各リクエスト。

1. サーバーからすべての情報を取得する
   リクエスト：GET
   レスポンス：JSON形式
2. サーバーに情報を送信する
   リクエスト：JSON形式
   応答：JSON形式

3.サーバーコード

3.1メッセージクラスを作成する

@Setter
@Getter
public class Message {
    private String from;
    private String to;
    private String message;

    public Message(String from, String to, String message) {
        this.from = from;
        this.to = to;
        this.message = message;
    }
}

注： @Setterおよび@Getterは、すべてのgetメソッドとsetメソッドを自動的に生成します。

3.2ツールクラスの作成

データベースに接続するためのDBUtilsクラスを作成します。

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

• MysqlDataSourceのインスタンスを作成し、URL、ユーザー名、パスワードなどのプロパティを設定します。
• MySQLサーバーとの接続を確立するためのgetConnectionメソッドを提供します。
• 必要なリソースを解放するためのクローズメソッドを提供します。

public class DBUtils {
    private DBUtils() {
    }

    private static volatile MysqlDataSource mysqlDataSource;
    private static volatile Connection connection;

    private static MysqlDataSource getMysqlDataSource() {
        if (mysqlDataSource == null) {
            synchronized (DBUtils.class) {
                if (mysqlDataSource == null) {
                    mysqlDataSource = new MysqlDataSource();
                    mysqlDataSource.setURL("jdbc:mysql://127.0.0.1:3306/messagewall?character=utf8&useSSL=true");
                    mysqlDataSource.setUser("root");
                    mysqlDataSource.setPassword("12345678");
                }
            }
        }
        return mysqlDataSource;
    }

    // 1.get connect
    public static Connection getConnection() {
        if (connection == null) { // 首次访问
            synchronized (DBUtils.class) {
                if (connection == null) {
                    try {
                        MysqlDataSource dataSource = getMysqlDataSource();
                        connection = (Connection) dataSource.getConnection();
                    } catch (SQLException throwables) {
                        throwables.printStackTrace();
                    }
                }
            }
        }
        return connection;
    }

    // 2.提供关闭资源的方法
    public static void close(ResultSet resultSet, PreparedStatement statement) throws SQLException {
        if (resultSet != null) {
            resultSet.close();
        }
        if (statement != null) {
            statement.close();
        }
    }
}

null可能性のためにStringUtilsクラスを作成します 。

public class StringUtils {
    public static boolean hasLength(String str) {
        return !(str == null || str.length() == 0);
    }
}

3.3メッセージクラスの追加（AddMessage）

        サーバーに情報を送信するために使用されます。

@WebServlet("/message/add")
public class AddMessage extends HttpServlet {
    @SneakyThrows
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        int result = -1;
        // 1.得到前端参数并效验
        String from = req.getParameter("from");
        String to = req.getParameter("to");
        String msg = req.getParameter("msg");
        if (StringUtils.hasLength(from) && StringUtils.hasLength(to)
                && StringUtils.hasLength(msg)) {
            // 2.将表白对象加入到集合
            // 2.1 得到 Connection
            Connection connection = DBUtils.getConnection();
            // 2.2 拼接 sql，创建执行器
            String sql = "insert into messages(`from`,`to`,`message`) values(?,?,?)";
            PreparedStatement statement = connection.prepareStatement(sql);
            statement.setString(1, from);
            statement.setString(2, to);
            statement.setString(3, msg);
            // 2.3 执行执行器，并返回结果
            result = statement.executeUpdate();
            // 2.4 关闭资源
            DBUtils.close(null, statement);
        }
        resp.setContentType("text/html; charset=utf-8");
        resp.getWriter().println(result);
    }
}

3.4クエリ情報クラス（MessageList）

        サーバー上のすべての情報を取得するために使用されます。

@WebServlet("/message/list")
public class MessageList extends HttpServlet {
    @SneakyThrows
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 查询数据库中的表白列表
        List<Message> list = new ArrayList<>();
        // 1.得到 connection
        Connection connection = DBUtils.getConnection();
        // 2.拼接SQL，创建执行器
        String sql = "select * from messages";
        PreparedStatement statement = connection.prepareStatement(sql);
        // 3.执行SQL，返回 resultSet 并循环将数据添加到 list 中
        ResultSet resultSet = statement.executeQuery();
        while (resultSet.next()) {
            String from = resultSet.getString("from");
            String to = resultSet.getString("to");
            String message = resultSet.getString("message");
            list.add(new Message(from, to, message));
        }
        // 4.关闭资源
        DBUtils.close(resultSet, statement);
        resp.setContentType("application/json; charset=utf-8");
        ObjectMapper objectMapper = new ObjectMapper();
        resp.getWriter().println(objectMapper.writeValueAsString(list));
    }
}

4.フロントエンドコード

<!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>
    <style>
        body {
            background-image: url(image/wall.jpeg);
            background-repeat: no-repeat;
            background-size: cover;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 400px;
            margin: 0 auto;
        }

        h1 {
            text-align: center;
            padding: 20px 0;
            color: rgb(11, 213, 248);
        }

        p {
            color: rgb(226, 87, 129);
            text-align: center;
            font-size: 14px;
            padding: 10px 0;
        }

        .row {
            height: 40px;
            width: 350px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .row1 {
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-left: 20px;
        }

        span {
            width: 70px;
            line-height: 40px;
        }

        .edit {
            color: rgb(41, 227, 134);
            text-align: center;
            width: 261px;
            height: 30px;
            padding-right: 15px;
        }

        .submit {
            width: 280px;
            height: 40px;
            color: white;
            background-color: orange;
            border: none;
        }

        .submit:active {
            background-color: #666;
        }

        .msg {
            width: 100%;
            height: 25px;
            color: rgb(48, 66, 227);
            justify-content: center;
            align-items: center;
            text-align: center;
            padding-top: 10px;
        }
    </style>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>

<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>&nbsp;&nbsp;&nbsp;给他/她留下一句话吧！</p>
        <div class="row">
            <span style="color: rgb(236, 10, 244)">谁: </span>
            <input id="from" class="edit" type="text">
        </div>
        <div class="row">
            <span style="color: rgb(236, 10, 244)">对谁: </span>
            <input id="to" class="edit" type="text">
        </div>
        <div class="row">
            <span style="color: rgb(236, 10, 244)">说: </span>
            <input id="message" class="edit" type="text">
        </div>
        <div class="row1">
            <input type="button" value="表白" class="submit" onclick="mySubmit()">
        </div>
    </div>
    <div id="allMsg"></div>

    <script>
        // 添加表白信息
        function mySubmit() {
            var from = jQuery("#from");
            var to = jQuery("#to");
            var msg = jQuery("#message");
            // 1.非空效验
            if (from.val() == "" || to.val() == "" || msg.val() == "") {
                alert("请输入表白信息！")
                if (from.val() == "") {
                    from.focus();
                }
                if (to.val() == "") {
                    to.focus();
                }
                if (msg.val() == "") {
                    msg.focus();
                }
                return;
            }
            // 2.ajax 提交数据给后端
            jQuery.ajax({
                url: "message/add",   // 提交到后端的地址
                type: "POST", // 提交类型
                data: {
                    from: from.val(),
                    to: to.val(),
                    msg: msg.val()
                }, // 参数
                success: function (result) { // 后端返回给前端的数据
                    if (result != null && result > 0) {
                        alert("表白成功！");
                        from.val('');
                        to.val('');
                        msg.val('');
                        // 刷新表白列表
                        getAllMsg();
                    } else {
                        alert("表白失败！");
                    }
                }
            });
        }

        // 查询所有的表白信息
        function getAllMsg() {
            jQuery.ajax({
                url: "message/list",
                type: "GET",
                data: {},
                success: function (result) {
                    if (result != null && result.length > 0) {
                        // 表示有表白数据
                        var msgHtml = "";
                        for (var i = 0; i < result.length; i++) {
                            msgHtml += '<div class="msg">' +
                                result[i].from + '对' +
                                result[i].to + '说: ' +
                                result[i].message + '</div>';
                        }
                        jQuery("#allMsg").html(msgHtml);
                    } else if (result != null && result.length == 0) {
                        // 没有表白数据
                        console.log("没有表白信息");
                    } else {
                        alert("访问出错！");
                    }
                }
            });
        }
        getAllMsg(); // 执行方法

    </script>
</body>

</html>

5.データベースを作成します

        データベースを作成し、メッセージテーブルを追加します。

-- 设置编码格式
set character_set_database=utf8; 
set character_set_server=utf8;

-- 创建数据库
create database if not exists messagewall; 

-- 使用数据库
use messagewall;

-- 创建messages表
drop table if exists messages;
create table messages (`from` varchar(255), `to` varchar(255), `message` 
varchar(2048));

6.プロジェクトをデプロイします

（1）IDEAでTomcatを構成するには、最初にプラグインをダウンロードする必要があります。

（2）次に、[構成の追加]をクリックします

 （3）Tomcatを選択します

 （4）名前を変更して、[OK]をクリックします

 （5）Tomcatを起動します

 これは、起動が成功したことを意味します。

（6）ブラウザにプロジェクトの対応するURLを入力します

 成功した訪問！

7.エフェクト表示

初期インターフェース：

データベースにクエリを実行します。

 

データベースが空です！ 

情報を入力し、[告白]をクリックします。

 迅速な告白の成功！また、サーバーから取得した情報を以下に示します。

 データベース内の情報をクエリします。

 

データがデータベースに正常に書き込まれたことがわかります。 

終わりました！皆さんの幸せな520をお祈りします！