Mur des confessions (version serveur)

1. Préparation

Nous avons déjà implémenté un tel mur de confession auparavant, le code frontal spécifique fait référence à l' article sur le mur de confession

, mais il y a quelques problèmes avec le mur de confession que nous avons écrit auparavant :
1. Si nous actualisons la page/rouvrons, les données précédentes disparaîtront
2. Nous ne pouvons l'utiliser que sur une seule machine,
mais les autres machines ne peuvent pas la voir. Nous allons donc résoudre ces problèmes maintenant, laisser le serveur stocker les données soumises par l'utilisateur, et lorsqu'un nouveau navigateur ouvre la page, obtenez le données du serveur. Tout d'abord, nous créons un projet Web, introduisons les dépendances associées

Créez webapp/WEB-INF/web.xml sous src et introduisez les dépendances mysql, les dépendances de servlet et les dépendances jackson sous pom.xml

    <dependencies>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.49</version>
        </dependency>
        
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</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.14.1</version>
        </dependency>
    </dependencies>

N'oubliez pas d'actualiser après avoir introduit la dépendance,
puis créez la classe servelet et spécifiez le chemin d'accès en tant que message, l'implémentation spécifique sera écrite plus tard

@WebServlet("/messagewell")
public class MessageWellServlet extends HttpServlet {
    
    
    

Ensuite, nous importons le code frontal du mur de confession que nous avons écrit auparavant dans le répertoire de l'application Web, et vous pouvez le copier dans mon article précédent

2. Interaction frontale et dorsale

Puisque nous voulons interagir avec le front-end et le back-end, nous devons nous mettre d'accord sur l'interface, sur la requête HTTP que le front-end envoie au serveur et sur la réponse HTTP que le serveur renvoie 1. Lorsque la page se charge,
le le navigateur obtient les informations de confession du serveur
Requête frontale : GET/message
Réponse : HTTP/1.1 200OK, renvoie les données sous la forme d'un tableau json

2. Soumettez les informations de confession et le navigateur enverra les informations de confession au serveur
Requête frontale : POST/message, envoyer des données sous la forme de json
Réponse : HTTP/1.1 200OK

extrémité arrière

Une fois que notre frontal a soumis les données, elles sont envoyées au serveur au format json. Nous devons créer une telle classe, puis utiliser jackson pour recevoir les données

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

Implémentons le traitement de notre serveur lorsque le frontal soumet des données

    List<Message> list = new ArrayList<>();
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        ObjectMapper objectMapper = new ObjectMapper();
        //将body中的内容进行读取
        Message message = objectMapper.readValue(req.getInputStream(),Message.class);
        //将获取到的message对象加入到成员变量list中
        list.add(message);
        //设置响应状态码
        resp.setStatus(200);
    }

Avec la base de doPost, notre méthode doGET est beaucoup plus simple, il suffit d'écrire toutes les données de la liste dans la réponse

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        //设置响应格式
        resp.setContentType("application/json; charset=utf8");
        ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(resp.getWriter(),list);
    }

Cette méthode consiste à convertir l'objet Java en une chaîne json et à l'écrire dans la réponse. Si vous pensez que cette méthode semble laborieuse, vous pouvez également la modifier

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        //设置响应格式
        resp.setContentType("application/json; charset=utf8");
        ObjectMapper mapper = new ObjectMapper();
        //将java对象转成json字符串
        String jsonResp = mapper.writeValueAsString(list);
        resp.getWriter().write(jsonResp);
    }

l'extrémité avant

Notre frontal doit envoyer deux parties de la demande :
1.post, qui est lancé lorsque nous cliquons pour soumettre les informations de confession
2.get, qui est lancé lorsque nous chargeons la page

Nous utilisons VScode pour ouvrir le code frontal et introduire les dépendances jquery

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

Ensuite, nous utilisons ajax pour construire la requête.

Jetons un coup d'œil au code frontal que nous avons écrit auparavant. Lorsque nous soumettons onclick, nous construisons simplement un div et l'ajoutons à la page. Maintenant, nous l'ajoutons et le laissons soumettre au backend

Nous construisons les données lues dans la zone de saisie dans un objet js, mais notre corps ne peut transmettre que des chaînes mais pas des objets, nous devons donc convertir l'objet en une chaîne au format json

   strBody = JSON.stringify(body);

            strBody = JSON.stringify(body);
            $.ajax({
    
    
                type: 'post',
                url: 'messagewell',
                data: strBody,
                contentType: "application/json; charset=utf8",
                success: function(body) {
    
    
                    console.log("数据提交成功");
                }
            });

Ensuite, utilisez ajax pour soumettre les données au serveur. Testons le code actuel. Nous utilisons Tomcat pour déployer et visiter.


Ensuite, nous cliquons sur Soumettre et nous voyons qu'une requête HTTP a été envoyée.


Cela prouve que le front-end et le back-end -les opérations de fin de notre soumission d'informations de confession sont correctes
Ensuite, implémentons la lecture des données du serveur lorsque nous actualisons la page, nous utilisons ajax pour envoyer la requête GET

        //当我们页面加载时，给服务器发送GET请求，获取数据，添加到页面中
        $.ajax({
    
    
            type: 'get',
            url: 'messagewell',
            success: function(body) {
    
    
                //此数body就是一个js格式的字符串，但是我们这里需要js对象数组
                //jquery会帮我们将js对象字符串解析成js对象数组
                for(let message of body) {
    
    
                    let rowDiv = document.createElement('div');
                    rowDiv.className = 'row';
                    rowDiv.innerHTML = message.from + ' 对 ' + message.to + ' 说 ' + message.message;
                    containerDiv.appendChild(rowDiv);
                }
            }
        })

Pour notre corps ici, jquery analyse la chaîne de format js dans un tableau d'objets js pour nous. Nous devons créer une balise div, y ajouter les données de chaque objet js, puis ajouter la div à la page. Maintenant, nous redémarrons le serveur pour
vérifier

Soumettons d'abord quelques éléments de données aléatoires, puis essayons d'actualiser la page.

Après l'actualisation, les données sont toujours sur la page. Lors de l'actualisation, nous envoyons une requête GET au serveur, et le

même serveur nous répond avec toutes les informations de confession. Le mur de confession de la version serveur du navigateur

est terminé. Vous devez faire attention à ce que nos données soient stockées en mémoire. Si nous redémarrons le serveur, les données précédentes disparaîtront. Si vous voulez un stockage persistant, vous pouvez avoir besoin d'une base de données

3. Version de la base de données

Nous avons seulement besoin de créer une table d'informations sur les messages ici. Il y a trois attributs (de, à, message) dans la table.

Vous devez prêter attention à certains problèmes dans le processus de création de la table, car nos mots-clés de et à sont dans notre mysql. Nous devons donc ajouter `, puis nous utilisons JDBC pour interagir avec la base de données,
car notre opération de connexion à la base de données et nos ressources de fermeture doivent être utilisées fréquemment, nous créons donc ici une classe d'outils DBUtil pour simplifier l'opération

import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;
import javax.sql.DataSource;
import java.sql.*;
//DButi作为工具类，供其他类使用
public class DBUtil {
    
    
    private static DataSource dataSource = new MysqlDataSource();
    static{
    
    
        //对datasuorce初始化
        ((MysqlDataSource)dataSource).setURL("jdbc:mysql://127.0.0.1:3306/zd?characterEncoding=utf8&useSSL=false");
        ((MysqlDataSource)dataSource).setUser("root");
        ((MysqlDataSource)dataSource).setPassword("自己的密码");
    }
    //通过该方法获取连接
    public static Connection getConnection() throws SQLException {
    
    
        return dataSource.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();
            }
        }
    }
}

Ensuite, nous implémentons deux méthodes sous la classe servlet, save () ajoute les données soumises par notre frontal à la base de données, et load () renvoie toutes les données de notre base de données au frontal.

    public void save(Message message) {
    
    
        Connection connection = null;
        PreparedStatement statement = null;
        try {
    
    
            //获取连接
            connection = DBUtil.getConnection();
            //构造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
            statement.executeUpdate();
        }catch (SQLException e) {
    
    
            e.printStackTrace();
        }finally {
    
    
            //关闭连接
            DBUtil.close(connection,statement,null);
        }
    }
    public List<Message> load() {
    
    
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        List<Message> messageList = new ArrayList<>();
        try {
    
    
            //获取连接
            connection = DBUtil.getConnection();
            //构造sql语句
            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;
    }