代码案例—— web版表白墙及文件上传

最新推荐文章于 2022-11-23 12:01:55 发布

同学潘

最新推荐文章于 2022-11-23 12:01:55 发布

阅读量2.5k

点赞数

分类专栏： JavaWeb 文章标签：前端 html 服务器后端 servlet

本文链接：https://blog.csdn.net/m0_46468731/article/details/125160199

版权

本文介绍了一个web版表白墙的实现，通过服务器端存储数据解决了数据丢失问题，利用MySQL数据库持久化留言信息。同时讲解了文件上传的核心方法，包括HttpServletRequest和Part类的使用，提供代码示例展示如何通过网页提交图片到服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现一个 web 表白墙

由于博主之前学前端的时候写的表白墙数据不能保存😅😅，所以此次是把之前实现的表白墙程序修改成服务器版本，这样即使页面关闭，表白墙的内容也不会丢失，那么为实现数据做到"持久化"存储，因此我这里用数据库来存储信息。

准备工作

创建 maven 项目
创建必要的目录webapp，WEB-INF，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 Application</display-name>
</web-app>

调整 pom.xml
引入依赖，配置生成 war 包，以及 war 包名字

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

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>
<dependencies>
 <!-- 加入 servlet 依赖 -->
    <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
        <!-- servlet 版本和 tomcat 版本有对应关系，切记 -->
        <version>3.1.0</version>
        <!-- 这个意思是我们只在开发阶段需要这个依赖，部署到 tomcat 上时就不需要了 -->
        <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.12.6.1</version>
    </dependency>
    <!--引入mysql驱动包-->
    <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>5.1.47</version>
    </dependency>
</dependencies>
</project>

把之前实现的表白墙前端页面拷贝到 webapp 目录中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表白墙</title>
</head>
<body>
	<style>
	* {
     
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	.container {
     
		width: 100%;
	}
	h3 {
     
		text-align: center;
		padding: 30px 0;
		font-size: 24px;
	}
	p {
     
		text-align: center;
		color: #999;
		padding: 10px 0;
	}
	.row {
     
		width: 400px;
		height: 50px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.row span {
     
		width: 70px;
	}
	.row input {
     
		width: 300px;
		height: 30px;
		font-size: 15px;
		text-indent: 0.5em;
		outline:none ;
	}
	.row #btn {
     
		width:300px;
		height: 40px;
		font-size: 20px;
		line-height: 40px; 
		margin: 0 auto;
		color: white;
		background-color: orange;
		border:none;
		border-radius: 10px;
	}
	.row #btn:active {
      
		background-color: gray;
	}
</style>
	<div class