目录
1.配置 Maven 项目
1.1 创建 Maven 项目
1.2 引入相关依赖
1.3 项目总结构
- 约定前后端交互接口
3.服务端代码
3.1 创建Message类
3.2 创建工具类
3.3 添加信息类（AddMessage）
3.4 查询信息类（MessageList）
- 前端代码
5.创建数据库
6.部署项目
7.效果展示
1.配置 Maven 项目 1.1 创建 Maven 项目
之后就是选择存放路径和命名，比较简单，就不做过多赘述啦！
1.2 引入相关依赖 在 pom.xml 中引入引⼊ servlet ， jackson ，mysql-connector 和 lombok 依赖：
4.0.0
org.example message_wall 1.0-SNAPSHOT war
message_wall Maven Webapp
UTF-8 1.7 1.7 org.projectlombok lombok 1.18.22 provided<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.13.2.1</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>
<!-- 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>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.11</version>
<scope>test</scope>
</dependency>
1.3 项目总结构 www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%9D%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… 🍑 Pod Pod 是 Kubernetes 的最重要也是最基本的概念，如下图所示，是Pod的组成示意图；
我们看到每个Pod都有一个特殊的被称为 “根容器” 的Pause容器对应的镜像属于Kubernetes平台的一部分，除了Pause容器，每个Pod还包含一个或多个紧密相关的用户业务容器。
🤔思考
为什么Kubernetes会设计出一个全新的Pod概念并且Pod有这样特殊的组成结构？
⭐原因一：
在一组容器作为一个单元的情况下，我们难以对“整体”简单地进行判断及有效地进行行动。
比如，一个容器死亡了，此时算是整体死亡么？是N/M的死亡率么？引入业务无关并且不易死亡的Pause容器作为Pod的根容器，以它的状态代表整个容器组的状态，就简单、巧妙地解决了这个难题。
⭐原因二：
Pod里的多个业务容器共享Pause容器的IP，共享Pause容器挂载的Volume，这样既简化了密切关联的业务容器之间的通信问题，也很好地解决了它们之间的文件共享的问题。
😏继续讲解Pod
Kubernetes为每个Pod都分配了唯一的IP地址，称之为Pod IP，一个Pod里的多个容器共享Pod IP地址。
Kubernetes要求底层网络支持集群内任意两个Pod之间的TCP/IP直接通信，这通常采用虚拟二层网络技术来实现，例如Flannel、Openvswitch等，因此我们需要牢记一点：在Kubernetes里，一个Pod里的容器与另外主机上的Pod容器能够直接通信。
Pod有两种类型：普通的Pod和机静态Pod（static Pod）
静态Pod比较特殊，它并不存在Kubernetes的etcd存储里，而是存在某个具体的Node上的一个具体文件中，并且只在此Node上启动运行。
而普通的Pod一旦被创建，就会被放入到etcd中存储，随后会被Kubernetes Master调度到某个具体的Node上并进行绑定(Binding)，随后该Pod被对应的Node上的Kubelet进程实例化成一组相关的Docker容器并启动起来。
在默认情况下，当Pod里的某个容器停止时，Kubernetes会自动检测到这个问题并且重新启动这个Pod(重启Pod里的所有容器)，如果Pod所在的Node宕机，则会将这个Node上的所有Pod重新调度到其他节点上。Pod、容器与Node的关系如下图所示：
www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… 2. 约定前后端交互接口 所谓 “前后端交互接口” 是进行 Web 开发中的关键环节，具体来说：就是允许页面给服务器发送哪些 HTTP 请求，并且每种请求预期获取什么样的 HTTP 响应。
从服务器上获取全部信息 请求：GET 响应：JSON 格式 向服务器提交信息 请求：JSON 格式 响应：JSON 格式 3.服务端代码 3.1 创建Message类 @Setter @Getter public class Message { private String from; private String to; private String message;
public Message(String from, String to, String message) {
this.from = from;
this.to = to;
this.message = message;
}
} 注意： @Setter 和 @Getter 会自动生成所有的get和set方法。
3.2 创建工具类 创建 DBUtils 类，用于连接数据库。
DBUtil 类主要实现以下功能:
创建 MysqlDataSource 实例,设置 URL , username , password 等属性. 提供 getConnection 方法,和MySQL服务器建立连接. 提供 close 方法,用来释放必要的资源. public class DBUtils { private DBUtils() { }
private static volatile MysqlDataSource mysqlDataSource;
private static volatile Connection connection;
private static MysqlDataSource getMysqlDataSource() {
if (mysqlDataSource == null) {
synchronized (DBUtils.class) {
if (mysqlDataSource == null) {
mysqlDataSource = new MysqlDataSource();
mysqlDataSource.setURL("jdbc:mysql://127.0.0.1:3306/messagewall?character=utf8&useSSL=true");
mysqlDataSource.setUser("root");
mysqlDataSource.setPassword("12345678");
}
}
}
return mysqlDataSource;
}
// 1.get connect
public static Connection getConnection() {
if (connection == null) { // 首次访问
synchronized (DBUtils.class) {
if (connection == null) {
try {
MysqlDataSource dataSource = getMysqlDataSource();
connection = (Connection) dataSource.getConnection();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
}
}
return connection;
}
// 2.提供关闭资源的方法
public static void close(ResultSet resultSet, PreparedStatement statement) throws SQLException {
if (resultSet != null) {
resultSet.close();
}
if (statement != null) {
statement.close();
}
}
} 创建 StringUtils 类，用于判空：
public class StringUtils { public static boolean hasLength(String str) { return !(str == null || str.length() == 0); } } 3.3 添加信息类（AddMessage） 用于向服务器提交信息。
@WebServlet("/message/add")
public class AddMessage extends HttpServlet {
@SneakyThrows
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
int result = -1;
// 1.得到前端参数并效验
String from = req.getParameter("from");
String to = req.getParameter("to");
String msg = req.getParameter("msg");
if (StringUtils.hasLength(from) && StringUtils.hasLength(to)
&& StringUtils.hasLength(msg)) {
// 2.将表白对象加入到集合
// 2.1 得到 Connection
Connection connection = DBUtils.getConnection();
// 2.2 拼接 sql，创建执行器
String sql = "insert into messages(from,to,message) values(?,?,?)";
PreparedStatement statement = connection.prepareStatement(sql);
statement.setString(1, from);
statement.setString(2, to);
statement.setString(3, msg);
// 2.3 执行执行器，并返回结果
result = statement.executeUpdate();
// 2.4 关闭资源
DBUtils.close(null, statement);
}
resp.setContentType("text/html; charset=utf-8");
resp.getWriter().println(result);
}
}
3.4 查询信息类（MessageList）
用于获取服务器上所有信息。
@WebServlet("/message/list") public class MessageList extends HttpServlet { @SneakyThrows @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 查询数据库中的表白列表 List list = new ArrayList<>(); // 1.得到 connection Connection connection = DBUtils.getConnection(); // 2.拼接SQL，创建执行器 String sql = "select * from messages"; PreparedStatement statement = connection.prepareStatement(sql); // 3.执行SQL，返回 resultSet 并循环将数据添加到 list 中 ResultSet resultSet = statement.executeQuery(); while (resultSet.next()) { String from = resultSet.getString("from"); String to = resultSet.getString("to"); String message = resultSet.getString("message"); list.add(new Message(from, to, message)); } // 4.关闭资源 DBUtils.close(resultSet, statement); resp.setContentType("application/json; charset=utf-8"); ObjectMapper objectMapper = new ObjectMapper(); resp.getWriter().println(objectMapper.writeValueAsString(list)); } } 4. 前端代码 www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E6%B5%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… 🍑 Label（标签） 标签(Label)是将资源进行分类的标识符
🍅 资源标签 资源标签其实就是一个键值型(key/values)数据。
标签旨在指定对象(如Pod、Service、RC等)辨识性的属性，一个资源对象可以定义任意数量的Label，同一个Label也可以被添加到仁义数量的资源对象上去，Label通常在资源对象定义时确定，也可以在对象创建后动态添加或删除，这些属性仅对用户存在特定的意义。
🍅 Label Selector（标签选择器） 标签选择器(Selector)全称为“Label Selector”，它是一种根据Label来过滤符合条件的资源对象的机制。
🍑 Pod控制器 尽管Pod是Kubernetes的最小调度单元，但用户通常不会直接部署及管理Pod对象，而是要借助于另一类抽象——控制器(Controller)对其进行管理。
用于工作负载的控制器是一种管理Pod生命周期的资源抽象，它们是Kubernetes上的一类对象，而非单个资源对象，包括ReplicationController、ReplicaSet、Deployment、Statefulset、Job等。
🍑 Server服务资源(Service) Service是建立在一组Pod对象之上的资源抽象，它通过标签选择器选定一组Pod对象，并为这组Pod对象定义一个统一的固定访问入口(通常是一个IP地址)，若Kubernetes集群存在DNS附件，它就会在Service创建时为其自动配置一个DNS名称以便客户端进行服务发现。
到达Service IP的请求将贝负载均衡至其后的端点——各个Pod对象之上，因此Service从本质上来讲是一个四层代理服务。另外，Service还可以将集群外部流量引入到集群中来。
🍑 存储卷(Volume) 存储卷(Volume)是独立于容器文件系统之外的存储空间，常用于扩展容器的存储空间为它提供持久存储能力。
Kubernetes集群上的存储大体可分为临时卷、本地卷和网络卷。临时卷和本地卷都位于Node本地，一旦Pod被调度至其他Node，此种类型的存储卷将无法访问到，因此临时卷和本地卷通常用于数据缓存，持久化的数据则需要放置于持久卷(persistent volume)之上。
www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E5%A4%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%… www.iimedia.cn/tag/%E9%87%…
表白墙 body { background-image: url(image/wall.jpeg); background-repeat: no-repeat; background-size: cover; } * { margin: 0; padding: 0; } .container { width: 400px; margin: 0 auto; } h1 { text-align: center; padding: 20px 0; color: rgb(11, 213, 248); } p { color: rgb(226, 87, 129); text-align: center; font-size: 14px; padding: 10px 0; } .row { height: 40px; width: 350px; display: flex; justify-content: center; align-items: center; } .row1 { height: 40px; display: flex; justify-content: center; align-items: center; padding-left: 20px; } span { width: 70px; line-height: 40px; } .edit { color: rgb(41, 227, 134); text-align: center; width: 261px; height: 30px; padding-right: 15px; } .submit { width: 280px; height: 40px; color: white; background-color: orange; border: none; } .submit:active { background-color: #666; } .msg { width: 100%; height: 25px; color: rgb(48, 66, 227); justify-content: center; align-items: center; text-align: center; padding-top: 10px; } </style> <script src="js/jquery-1.9.1.min.js"></script>表白墙
给他/她留下一句话吧！
<script>
// 添加表白信息
function mySubmit() {
var from = jQuery("#from");
var to = jQuery("#to");
var msg = jQuery("#message");
// 1.非空效验
if (from.val() == "" || to.val() == "" || msg.val() == "") {
alert("请输入表白信息！")
if (from.val() == "") {
from.focus();
}
if (to.val() == "") {
to.focus();
}
if (msg.val() == "") {
msg.focus();
}
return;
}
// 2.ajax 提交数据给后端
jQuery.ajax({
url: "message/add", // 提交到后端的地址
type: "POST", // 提交类型
data: {
from: from.val(),
to: to.val(),
msg: msg.val()
}, // 参数
success: function (result) { // 后端返回给前端的数据
if (result != null && result > 0) {
alert("表白成功！");
from.val('');
to.val('');
msg.val('');
// 刷新表白列表
getAllMsg();
} else {
alert("表白失败！");
}
}
});
}
// 查询所有的表白信息
function getAllMsg() {
jQuery.ajax({
url: "message/list",
type: "GET",
data: {},
success: function (result) {
if (result != null && result.length > 0) {
// 表示有表白数据
var msgHtml = "";
for (var i = 0; i < result.length; i++) {
msgHtml += '<div class="msg">' +
result[i].from + '对' +
result[i].to + '说: ' +
result[i].message + '</div>';
}
jQuery("#allMsg").html(msgHtml);
} else if (result != null && result.length == 0) {
// 没有表白数据
console.log("没有表白信息");
} else {
alert("访问出错！");
}
}
});
}
getAllMsg(); // 执行方法
</script>
-- 设置编码格式 set character_set_database=utf8; set character_set_server=utf8;
-- 创建数据库 create database if not exists messagewall;
-- 使用数据库 use messagewall;
-- 创建messages表
drop table if exists messages;
create table messages (from varchar(255), to varchar(255), message
varchar(2048));
6.部署项目
（1）在IDEA中配置Tomcat，需要先下载一个插件：
（2）然后点击 Add Configuration
（3）选择Tomcat
（4）可以改个名字，然后点击ok
（5）启动Tomcat
这样就说明启动成功啦！
（6）在浏览器输入项目对应URL
成功访问！
7.效果展示 初始界面：
