前后端交互理解 简易表白墙(servlet)

news/2024/5/26 21:00:23/文章来源:https://blog.csdn.net/cidbi/article/details/136605656

前后端交互理解 简易表白墙(servlet)

文章目录

  • 前后端交互理解 简易表白墙(servlet)
    • 后端核心内容
    • 前后端交互接口约定
    • 后端代码展示

上期介绍过 Servlet API ,本篇文章目的是借助 servlet 做出一个完整的网站。在一个网站中,是由 前端+后端 组成的。其中的后端就是 java 程序员主要的工作。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

前端代码给大家准备好了代码如下:

<!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>/* * 通配符选择器, 是选中页面所有元素 */* {/* 消除浏览器的默认样式. */margin: 0;padding: 0;box-sizing: border-box;}.container {width: 600px;margin: 20px auto;}h1 {text-align: center;}p {text-align: center;color: #666;margin: 20px 0;}.row {/* 开启弹性布局 */display: flex;height: 40px;/* 水平方向居中 */justify-content: center;/* 垂直方向居中 */align-items: center;}.row span {width: 80px;}.row input {width: 200px;height: 30px;}.row button {width: 280px;height: 30px;color: white;background-color: orange;/* 去掉边框 */border: none;border-radius: 5px;}/* 点击的时候有个反馈 */.row button:active {background-color: grey;}</style>
</head>
<body><div class="container"><h1>表白墙</h1><p>输入内容后点击提交, 信息会显示到下方表格中</p><div class="row"><span>谁: </span><input type="text"></div><div class="row"><span>对谁: </span><input type="text"></div><div class="row"><span>说: </span><input type="text"></div><div class="row"><button id="submit">提交</button></div><!-- <div class="row">xxx 对 xx 说 xxxx</div> --></div><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>// 实现提交操作. 点击提交按钮, 就能够把用户输入的内容提交到页面上显示. // 点击的时候, 获取到三个输入框中的文本内容// 创建一个新的 div.row 把内容构造到这个 div 中即可. let containerDiv = document.querySelector('.container');let inputs = document.querySelectorAll('input');let button = document.querySelector('#submit');button.onclick = function() {// 1. 获取到三个输入框的内容let from = inputs[0].value;let to = inputs[1].value;let msg = inputs[2].value;if (from == '' || to == '' || msg == '') {return;}// 2. 构造新 divlet rowDiv = document.createElement('div');rowDiv.className = 'row message';rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + msg;containerDiv.appendChild(rowDiv);// 3. 清空之前的输入框内容for (let input of inputs) {input.value = '';}// 4. 把用户输入的数据, 构造出 HTTP 请求, 发送给服务器. let body = {from: from,to: to,message: msg};$.ajax({type: 'post',// url: '/messageWall/message',url: 'message',contentType: 'application/json; charset=utf8',data: JSON.stringify(body),success: function(body) {// 预期 body 中返回 okconsole.log(body);}});}// 在页面加载的时候, 发起一个 GET 请求给服务器, 从服务器拿到提交过的数据.$.ajax({type: 'get',url: 'message',success: function(body) {// 但是由于 jquery 见到响应中的 application/json , 就会自动的把响应// 转换成 js 对象数组. body 其实是 js 对象数组, 而不是 json 字符串了.// 就可以直接按照数组的方式来操作 body, 每个元素都是 js 对象// 1. 遍历数组, 取出每个 js 对象.// 2. 根据这里的 js 对象构造出 页面元素, 显示到页面上let container = document.querySelector('.container');for (let i = 0; i < body.length; i++) {let message = body[i];// 此处 message 对象, 就形如// {//   from: '黑猫',//   to: '白猫',//   message: '喵'// }// 构造出 html 元素!!// 使用浏览器提供的 api (dom api) 创建 div 标签.let div = document.createElement('div');// 设置一个 CSS 的类. 应用到 CSS 样式了.div.className = 'row';// 给 div 标签里设置内容, 此处显示一行文本.div.innerHTML = message.from + " 对 " + message.to + " 说: " + message.message;container.appendChild(div);}}});</script>
</body>
</html>

后端核心内容

下面准备开始编写后端代码。准备工作:创建项目、引入依赖、把前端静态页面放到项目中(webapp下)。

当我们用 VScode 打开前端代码,这个表白墙已经可以输入内容了,点击提交之后也能显示内容。此处,咱们后端的代码要做的工作,主要就是两个工作

  1. 用户点击提交的时候,把刚刚输入的内容通过网络传输给服务器,由服务器保存这个数据。[存档]
  2. 后续有页面加载的时候,此时就通过网络,从服务器获取到之前保存好的内容。[读档]

这里还需要进行前后端交互接口的约定。约定好,前端会给后端发一个啥样的 http 请求。后端又会返回一个啥样的 http 响应。

前后端交互接口约定

前端通过 Ajax 来发送 Http 请求,其中就有一些端口的约定,咱们后端代码需要去理解端口约定,再去编写代码。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

前后端读档功能同理,大家可以自行查看对比。前端代码只需要看个大概就ok。

后端代码展示

import com.fasterxml.jackson.databind.ObjectMapper;
import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;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 javax.sql.DataSource;
import java.io.IOException;
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;@Overridepublic String toString() {return "Message{" +"from='" + from + '\'' +", to='" + to + '\'' +", message='" + message + '\'' +'}';}
}
@WebServlet("/message")
public class messageWall extends HttpServlet {private ObjectMapper objectMapper = new ObjectMapper();@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {Message message = objectMapper.readValue(req.getInputStream(),Message.class);try {save(message);} catch (SQLException e) {throw new RuntimeException(e);}System.out.println("服务器收到请求message:" + message);resp.setStatus(200);resp.getWriter().write("ok");}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {List<Message> messageList = null;try {messageList = load();} catch (SQLException e) {throw new RuntimeException(e);}String respJson = objectMapper.writeValueAsString(messageList);resp.setContentType("application/json;charset = utf8");resp.getWriter().write(respJson);}private void save(Message message) throws SQLException {//1.创建数据源DataSource dataSource = new MysqlDataSource();((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/java_wall?characterEncoding=utf8&useSSL=false");((MysqlDataSource)dataSource).setUser("root");((MysqlDataSource)dataSource).setPassword("111111");//2.建立数据库连接Connection connection = dataSource.getConnection();//3.编写sql语句String sql = "insert into message values (?,?,?)";PreparedStatement statement = connection.prepareStatement(sql);statement.setString(1, message.from);statement.setString(2, message.to);statement.setString(3, message.message);//4.执行sql语句statement.executeUpdate();//5。释放资源statement.close();connection.close();}private List<Message> load() throws SQLException {//1.创建数据源DataSource dataSource = new MysqlDataSource();((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/java_wall?characterEncoding=utf8&useSSL=false");((MysqlDataSource)dataSource).setUser("root");((MysqlDataSource)dataSource).setPassword("111111");//2.建立数据库连接Connection connection = dataSource.getConnection();//3.构造sqlString sql = "select * from message";PreparedStatement statement = connection.prepareStatement(sql);//4.执行sqlResultSet resultSet = statement.executeQuery();//5.遍历数据List<Message> messageList = new ArrayList<>();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);}//6.释放资源 返回链表statement.close();connection.close();resultSet.close();return messageList;}
}

pom.xml代码中注入依赖有—servlet、Jackson、Mysql

<?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>messageWall</artifactId><version>1.0-SNAPSHOT</version><properties><maven.compiler.source>8</maven.compiler.source><maven.compiler.target>8</maven.compiler.target><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding></properties><dependencies><!-- 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><!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind --><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.14.2</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></dependencies></project>
nd</artifactId><version>2.14.2</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></dependencies></project>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1007268.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RabbitMQ应用场景

1、异步处理 假设想象一下我们做一个商城项目&#xff0c;在用户支付模块中&#xff0c;可能会涉及到其它业务&#xff0c;比如&#xff1a;积分折扣、消费券、短信验证等功能。我们传统的执行步骤是逐步执行&#xff0c;也就是说当用户点击支付 ----> 积分折扣 ----> 消…

Docker进阶:深入了解 Dockerfile

Docker进阶&#xff1a;深入了解 Dockerfile 一、Dockerfile 概述二、Dockerfile 优点三、Dockerfile 编写规则四、Dockerfile 中常用的指令1、FROM2、LABEL3、RUN4、CMD5、ENTRYPOINT6、COPY7、ADD8、WORKDIR9、 ENV10、EXPOSE11、VOLUME12、USER13、注释14、ONBUILD 命令15、…

区块链基础知识(上):区块链基本原理、加密哈希、公钥加密

目录 基本原理 加密哈希&#xff1a; 公钥加密&#xff1a; 希望有人向你发送只有你才能打开的加密文档/消息时使用 PKC 希望向其他人发送加密文档/消息并证明它确实由你发送时使用 PKC 使用 PKC 和加密哈希对文档/消息进行数字签名 交易哈希链使用数字签名转让数字资产所…

【洛谷 P8781】[蓝桥杯 2022 省 B] 修剪灌木 题解(模拟+差分)

[蓝桥杯 2022 省 B] 修剪灌木 题目描述 爱丽丝要完成一项修剪灌木的工作。 有 N N N 棵灌木整齐的从左到右排成一排。爱丽丝在每天傍晩会修剪一棵灌木&#xff0c;让灌木的高度变为 0 0 0 厘米。爱丽丝修剪灌木的顺序是从最左侧的灌木开始&#xff0c;每天向右修剪一棵灌木…

centos 系统 yum 无法安装(换国内镜像地下)

centos 系统 yum 因为无法连接到国外的官网而无法安装&#xff0c;问题如下图&#xff1a; 更换阿里镜像&#xff0c;配置文件路径&#xff1a;/etc/yum.repos.d/CentOS-Base.repo&#xff08;如果目录有多余的文件可以移动到子目录&#xff0c;以免造成影响&#xff09; bas…

docker使用jupyter/datascience-notebook,重置密码,并且设置各类易用参数

前言 前一篇文章写了自己安装conda环境&#xff0c;然后添加C、C语言环境等&#xff0c;那时候就在想&#xff0c;有没有现成的docker可以用&#xff0c;后来搜了一下docker的网上镜像&#xff0c;还真的有&#xff1a; 可以看到有一个人的镜像&#xff0c;星星是最多的&#x…

React-嵌套路由

1.概念 说明&#xff1a;在一级路由中又内嵌了其他路由&#xff0c;这种关系就叫做嵌套路由&#xff0c;嵌套至一级路由内的路由又称作二级路由。 2.实现步骤 说明&#xff1a;使用childen属性配置路由嵌套关系&#xff0c;使用<Outlet/>组件配置二级路由渲染的位置。…

基于springboot实现驾校信息管理系统项目【项目源码+论文说明】

基于springboot实现驾校信息管理系统演示 摘要 随着人们生活水平的不断提高&#xff0c;出行方式多样化&#xff0c;也以私家车为主&#xff0c;那么既然私家车的需求不断增长&#xff0c;那么基于驾校的考核管理也就不断增强&#xff0c;那么业务系统也就慢慢的随之加大。信息…

[保姆级教程]Windows安装MongoDB教程

文章目录 导文MongoDB安装包下载1.点击进入mongodb官网2.点击MongoDB Community Edition&#xff08;社区版&#xff09;&#xff0c;进入下图界面3.选择版本4.下载5.安装6.勾选同意协议&#xff0c;点击“Next"7.选择自定义安装8.点击“Next"9.修改到合适的地址10.点…

Tensorflow实现手写数字识别

模型架构 具有10个神经元&#xff0c;对应10个类别&#xff08;0-9的数字&#xff09;。使用softmax激活函数&#xff0c;对多分类问题进行概率归一化。输出层 (Dense):具有64个神经元。激活函数为ReLU。全连接层 (Dense):将二维数据展平成一维&#xff0c;为全连接层做准备。展…

深入了解volatile、内存屏障与happens-before规则

1、编译器优化的重排序。编译器在不改变单线程程序语义的前提下&#xff0c;可以重新安排语句的执行顺序&#xff1b;2、指令级并行的重排序。现代处理器采用了指令级并行技术来将多条指令重叠执行。如果不存在数据依赖性&#xff0c;处理器可以改变语句对应机器指令的执行顺序…

开源的python 游戏开发库介绍

本文将为您详细讲解开源的 Python 游戏开发库&#xff0c;以及它们的特点、区别和应用场景。Python 社区提供了多种游戏开发库&#xff0c;这些库可以帮助您在 Python 应用程序中实现游戏逻辑、图形渲染、声音处理等功能。 1. Pygame 特点 - 基于 Python 的游戏开发库。…

Python实时追踪关键点组成人体模型

项目背景 最近遇到这样一个需求&#xff1a; 1&#xff1a;实时追踪关键点组成人体模型&#xff08;手臂包括三个点&#xff1a;手腕&#xff0c;肘关节&#xff0c;双肩&#xff1b;腿部包括胯骨&#xff0c;膝盖&#xff0c;脚踝&#xff09; 2&#xff1a;运用追踪到的关键…

智慧城市与智慧乡村:共创城乡一体化新局面

一、引言 随着科技的不断进步和城乡发展的日益融合&#xff0c;智慧城市与智慧乡村的建设已成为推动城乡一体化发展的新引擎。智慧城市利用物联网、大数据、云计算等先进技术&#xff0c;实现城市治理、公共服务、产业发展等领域的智能化&#xff1b;而智慧乡村则借助现代科技…

组态软件的概念

一、前言 组态软件是一种用于设计、配置和管理自动化系统的软件。它可以帮助用户快速地创建和修改自动化系统的界面、逻辑和通信功能&#xff0c;从而提高生产效率和质量。 二、组态软件的定义 组态软件是一种集成开发环境&#xff0c;用于设计、配置和管理自动化系统。它通…

计讯物联智慧合杆在智慧城市中的应用

随着智慧城市数字化的建设与发展&#xff0c;5G智慧合杆不仅成为智慧城市感知网络体系的重要载体&#xff0c;也是发展智慧城市IoT的重要基础。在今年两会中&#xff0c;全国政协委员提出&#xff0c;探索“智慧灯杆5G基站”“多杆合一”试点示范&#xff0c;实现社会资源共享。…

微信小程序(五十九)使用鉴权组件时原页面js自动加载解决方法(24/3/14)

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.使用覆盖函数的方法阻止原页面的自动执行方法 2.使用判断实现只有当未登录时才进行方法覆盖 源码&#xff1a; app.json {"pages": ["pages/index/index","pages/logs/logs"],…

一张图让你学会Python

有编程基础的人一看就可以了解 Python 的用法了。真正的 30 分钟上手。 国外一高手画的&#xff0c;现把它翻译成中文&#xff0c;入门超简单 python入门神图!(看不清可以“另存为”查看)

Linux--编译链接的过程

一.gcc,g,gdb安装 命令行写gcc,g,gdb根据提示安装: sudo apt install gcc/g/gdb 二.gcc分布编译链接 编译链接的过程&#xff1a;(面试过程一个大的问题&#xff09; (1)预编译: gcc -E main.c -o main.i 用gcc预编译main.c输出main.i(2)编译: gcc -S main.i -o main.s(3)汇编…

Spring Cloud项目整合Sentinel及简单使用

说明&#xff1a;Sentinel是阿里巴巴开发的微服务治理中间件&#xff0c;可用于微服之间请求的流量管控、权限控制、熔断降级等场景。本文介绍如何在Spring Cloud项目中整合Sentinel&#xff0c;以及Sentinel的简单使用。 环境 首先搭建一个简单的微服务环境&#xff0c;有以…