终于让Web前端和Tomcat(Java服务器)和MySQL(数据库)连在一起了

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,高可用系列 2核4GB
简介: 终于让Web前端和Tomcat(Java服务器)和MySQL(数据库)连在一起了

文章目录


一、先在Web前端来个表单

二、添加Tomcat依赖

三、引入jdbc和dbutils

四、编写Servlet类

五、关联模块


《踩坑+排雷新版IDEA2021.1创建配置Javaweb项目并部署在Tomcat容器》


一、先在Web前端来个表单


如图在web项目目录下创建一个html文件。


b501fff4fe604ec0baf0235a81f4f175.png


文件内容可以参考如下。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <form action="add" method="post">
    姓名:<input type="text" name="name"/>
    密码:<input type="password" name="password"/>
    地址:<input type="text" name="address"/>
    手机号:<input type="text" name="phone"/>
    <button type="submit">添加</button>
  </form>
</body>
</html>


之后记得把Tomcat启动的页面设置为该页面。


二、添加Tomcat依赖


为什么要添加这个依赖呢?其实是因为后面我们写关于HTTP的Java类需要用到Tomcat中的jar包。


a391057241204cbeaa8b166b29c5b8cb.pnge18781cee6544aba9d46f373028667de.png


点击后将Tomcat添加进来后点击Apply,然后就可以点击OK。


三、引入jdbc和dbutils


关于jdbc:《新年迈出Java后台服务器与数据库交互第一步&2022最新通用Java8&jdbc8连接mysql8》


关于dbutils:《Apache-DBUtils实现CRUD操作,已封装的API实现jdbc对数据库进行操作》


四、编写Servlet类


在当前Module的src下创建Servlet类,如下图。


c71e2b10d4e84fcd90b83c76a356320f.png


jdbcUtils类:


package com.yeman.jdbc;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
/**
 * @Author: Yeman
 * @Date: 2022-02-09-18:40
 * @Description:
 */
public class JdbcUtils {
    public static Connection getConnection() {
        Connection conn = null;
        try {
            String user = "root";
            String password = "123456";
            String url = "jdbc:mysql://localhost:3306/test";
            String driverClass = "com.mysql.cj.jdbc.Driver";
            Class.forName(driverClass);
            conn = DriverManager.getConnection(url, user, password);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            return conn;
        }
    }
}


AddServlet类:


package com.yeman.Servlets;
import com.yeman.jdbc.JdbcUtils;
import org.apache.commons.dbutils.DbUtils;
import org.apache.commons.dbutils.QueryRunner;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.UnsupportedEncodingException;
import java.sql.Connection;
import java.sql.SQLException;
/**
 * @Author: Yeman
 * @Date: 2022-02-09-18:12
 * @Description:
 */
public class AddServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws UnsupportedEncodingException {
        req.setCharacterEncoding("UTF-8");
        String name = req.getParameter("name");
        String password = req.getParameter("password");
        String address = req.getParameter("address");
        String phone = req.getParameter("phone");
        Connection conn = null;
        try {
            conn = JdbcUtils.getConnection();
            QueryRunner qr = new QueryRunner();
            String sql = "insert into user(name,password,address,phone) values(?,?,?,?)";
            int update = qr.update(conn, sql, name, password, address, phone);
            if (update != 0){
                System.out.println("添加成功!");
            }else System.out.println("添加失败!");
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            try {
                if (conn != null) DbUtils.close(conn);
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}


五、关联模块


打开web.xml。


dc12ae77b3094e7b9abdb2592111c4f7.png


可参考代码如下。


<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>AddServlet</servlet-name>
        <servlet-class>com.yeman.Servlets.AddServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>AddServlet</servlet-name>
        <url-pattern>/add</url-pattern>
    </servlet-mapping>
</web-app>


然后将下图文件夹删除。


abb885fdb947485e9c5b62a61451c4c7.png


然后如下如所示。


47778e43830447a8b558b8d250f6ee6e.pnga6c573fb20af4127a8845ed8604c3f50.png


之后添加。


403304b840734f23b3b4f358bea402a9.png


至此服务器就可以获取到web前端的表单数据并且写入数据库中了。


相关实践学习
如何快速连接云数据库RDS MySQL
本场景介绍如何通过阿里云数据管理服务DMS快速连接云数据库RDS MySQL,然后进行数据表的CRUD操作。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
1月前
|
NoSQL Java 关系型数据库
Liunx部署java项目Tomcat、Redis、Mysql教程
本文详细介绍了如何在 Linux 服务器上安装和配置 Tomcat、MySQL 和 Redis,并部署 Java 项目。通过这些步骤,您可以搭建一个高效稳定的 Java 应用运行环境。希望本文能为您在实际操作中提供有价值的参考。
147 26
|
3月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
3月前
|
前端开发 开发工具 git
如何清理 docker 磁盘空间+修改 Gitea 服务器的 Webhook 设置+前端一些好学好用的代码规范-git hook+husky + commitlint
如何清理 docker 磁盘空间+修改 Gitea 服务器的 Webhook 设置+前端一些好学好用的代码规范-git hook+husky + commitlint
50 5
|
3月前
|
存储 NoSQL 前端开发
前端轻量级数据库mongodb
【10月更文挑战第2天】MongoDB 是一个基于分布式文件存储的开源数据库系统,不属于前端轻量级数据库,而是后端数据库。它使用 BSON 格式存储数据,支持复杂的数据结构,适用于内容管理系统、物联网等领域。MongoDB 通过动态模式和面向对象的数据存储方式,提供了灵活的数据模型。在 Web 应用中,它通常作为后端存储,通过 API 与前端交互,实现高效的数据管理和实时更新。
|
3月前
|
NoSQL 前端开发 MongoDB
前端的全栈之路Meteor篇(三):运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例
MiniMongo 是 Meteor 框架中的客户端数据库组件,模拟了 MongoDB 的核心功能,允许前端开发者使用类似 MongoDB 的 API 进行数据操作。通过 Meteor 的数据同步机制,MiniMongo 与服务器端的 MongoDB 实现实时数据同步,确保数据一致性,支持发布/订阅模型和响应式数据源,适用于实时聊天、项目管理和协作工具等应用场景。
|
5月前
|
前端开发 应用服务中间件 nginx
前端服务器部署方式
【8月更文挑战第25天】前端服务器部署方式
145 1
|
4月前
|
关系型数据库 Java MySQL
"解锁Java Web传奇之旅:从JDK1.8到Tomcat,再到MariaDB,一场跨越数据库的冒险安装盛宴,挑战你的技术极限!"
【9月更文挑战第6天】在Linux环境下安装JDK 1.8、Tomcat和MariaDB是搭建Java Web应用的关键步骤。本文详细介绍了使用apt-get安装OpenJDK 1.8、下载并配置Tomcat,以及安装和安全设置MariaDB(MySQL的开源分支)的方法。通过这些步骤,您可以快速构建一个稳定、高效的开发和部署环境,并验证各组件是否正确安装和运行。这为您的Java Web应用提供了一个坚实的基础。
65 0
|
5月前
|
前端开发 大数据 数据库
🔥大数据洪流下的决战:JSF 表格组件如何做到毫秒级响应?揭秘背后的性能魔法!💪
【8月更文挑战第31天】在 Web 应用中,表格组件常用于展示和操作数据,但在大数据量下性能会成瓶颈。本文介绍在 JavaServer Faces(JSF)中优化表格组件的方法,包括数据处理、分页及懒加载等技术。通过后端分页或懒加载按需加载数据,减少不必要的数据加载和优化数据库查询,并利用缓存机制减少数据库访问次数,从而提高表格组件的响应速度和整体性能。掌握这些最佳实践对开发高性能 JSF 应用至关重要。
81 0
|
5月前
|
存储 设计模式 运维
Angular遇上Azure Functions:探索无服务器架构下的开发实践——从在线投票系统案例深入分析前端与后端的协同工作
【8月更文挑战第31天】在现代软件开发中,无服务器架构因可扩展性和成本效益而备受青睐。本文通过构建一个在线投票应用,介绍如何结合Angular前端框架与Azure Functions后端服务,快速搭建高效、可扩展的应用系统。Angular提供响应式编程和组件化能力,适合构建动态用户界面;Azure Functions则简化了后端逻辑处理与数据存储。通过具体示例代码,详细展示了从设置Azure Functions到整合Angular前端的全过程,帮助开发者轻松上手无服务器应用开发。
42 0
|
5月前
|
前端开发 JavaScript API
Web服务器与前端技术的集成
【8月更文第28天】随着Web开发技术的发展,现代前端框架如React、Vue.js等已经成为构建复杂Web应用的标准工具。为了提供更好的用户体验,这些前端应用通常需要与后端Web服务器进行紧密集成。本文将详细介绍如何将React和Vue.js与后端Web服务器无缝集成,以创建高性能且用户友好的Web应用。
92 0