【JavaEE】表白墙案例 -- 前后端的交互过程

表白墙需求分析

功能要求如下:

• 可以输入数据, 有两个人, 说的人, 对谁说. 说的信息
• 具有提交按钮, 提交之后, 在提交后面可现实一条完成 谁对谁说什么
• 数据可以保存, 重新进入网址后可以显示之前的数据

前端的页面设计 – 针对本地主机的测试

1. 页面主体 – html

2. 页面样式 – css

3. 描述页面的一些行为 – JavaScript

页面表现

后端的准备工作

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 Applicationdisplay-name>
web-app>

3. 调整 pom.xml

   • 导入Servlet依赖
   • 导入Jackson依赖
   • 配置生成 war 包, 以及 war 包名字

<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.0modelVersion>

    <groupId>org.examplegroupId>
    <artifactId>hello_servletartifactId>
    <version>1.0-SNAPSHOTversion>

    <properties>
        <maven.compiler.source>17maven.compiler.source>
        <maven.compiler.target>17maven.compiler.target>
    properties>

    <dependencies>
        
        <dependency>
            <groupId>org.apache.mavengroupId>
            <artifactId>maven-coreartifactId>
            <version>3.1.0version>
        dependency>
        <dependency>
            <groupId>javax.servletgroupId>
            <artifactId>javax.servlet-apiartifactId>
            <version>3.1.0version>
        dependency>

        
        <dependency>
            <groupId>com.fasterxml.jackson.coregroupId>
            <artifactId>jackson-databindartifactId>
            <version>2.1.4version>
        dependency>

    dependencies>

    <packaging>warpackaging>
    <build>
        <finalName>
            servlet
        finalName>

        <plugins>
            <plugin>
                <groupId>org.apache.maven.pluginsgroupId>
                <artifactId>maven-war-pluginartifactId>
                <version>3.1.0version>
            plugin>
        plugins>
    build>


project>

4. 导入表白墙的html文件到webapp目录当中

前后端交互前的共性约定

为什么需要约定?

• 前端的网页提供用户输入的界面
• 用户输入完成后, 点击提交按钮, 页面显示语句; 并将数据发送给服务器, 后端需要将此时提交的数据保存起来, 以供后续用户重新进入网页的时候也能看见之前的数据
• 用户一开始打开网页的时候, 后端需要将数据发送给前端, 前端拿到数据之后, 需要将数据处理, 最后在页面上显示数据
• 综上所述, 前后端需要进行数据的交互, 只有对数据的组织方式做好共性的约定, 双方才能知道如何处理数据, 才能进行通信

对于数据的组织手段

• xml 格式
• json格式
• protobuf

对于上述的方法, 都可以使用, 具体使用哪个不重要, 重要的是双方要约定好使用统一的格式!

通常都是使用 json 格式来组织数据~

数据交互的代码编写

数据的具体约定

1. 针对于存档操作
   • 前端发起一个HTTP请求
     • POST /messageWall/message(这里的路径随便, 但是要求前后端一致) 协议号
     • body 格式如下
   • 后端返回一个HTTP响应
     • HTTP/1.1 200 OK
2. 针对于读档操作
   • 网页初次加载的时候, 前端发起一个HTTP请求
     • GET /messageWall/message 协议号
   • 后端返回一个HTTP响应
     • body 的数据格式是一个 json 数组的字符串

后端代码的实现

存档过程

• 后端代码

/**
  * @description: 该方法是处理的是存档操作
  **/
 @Override
 protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
     // 1. 将 json 转化为Java对象
     Message message = objectMapper.readValue(req.getInputStream(), Message.class);
     // 2. 将 Java 对象转存
     listMessage.add(message);
     // 打印日志
     System.out.println("服务端收到一条数据: " + message);
     // 3. 返回响应. (其实不太必要, 主要是返回一个 200 OK 就行了, body 可以没有
     resp.setStatus(200);
     resp.getWriter().write("ok");
 }

• 前段代码

读档操作

• 后端代码

 /**
  * @description: 该方法处理的读档操作
  **/
 @Override
 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
     String respJson = objectMapper.writeValueAsString(listMessage);
     resp.setContentType("application/json; charset=utf8");
     resp.getWriter().write(respJson);
 }

• 前段代码

---

通过前后端的配合, 即可完成想要的效果, 但是还有数据永久性的问题(此时后端只是将数据存储在了内存), 想要持久化, 需要搭配数据库

后端搭配数据库, 将数据持久化

1. 引入数据库的依赖包(驱动包)

<dependency>
    <groupId>mysqlgroupId>
    <artifactId>mysql-connector-javaartifactId>
    <version>5.1.49version>
dependency>

2. 创建数据库和数据表

3. 编写代码

数据库存档

数据库读档操作

代码获取地址

https://gitee.com/jie-c-language/java_idea/tree/master/messageWall