目录
1. 创建Maven 项目
2.源代码
2.1 web.xml
2.2 pom.xml
2.3 ConfessionServelet 类
2.4 DBUtil 类
2.5 confessWall.html
3. smart Tomcat 部署
4.效果
展示
表白墙
1. 创建Maven 项目
使用 IDEA 创建一个 Maven 项目
1) 菜单 -> 文件 -> 新建项目 -> Maven
2) 项目创建完毕
创建好之后，会生成一些默认的目录
3）添加文件
我们需要手动添加6个文件，
一个是在java 路径下建一个ConfessionServlet 文件，用来存放服务器代码。
在Java路径下创建 DBUtil 文件，用来与MySQL之间的交互
然后再 main 路径下创建一个webapp文件夹
再在webapp文件夹下创建一个WEB_INF文件夹 、一个 .html文件（用来存放客户端代码）、 一个 .jpg 文件（存放背景图，可以根据自己的喜好来选择图片）
在WEB_INF文件夹下创建 web.xml 文件
2.源代码
2.1 web.xml
Archetype Created Web Application2.2 pom.xml
在pom.xml文件下增加以下代码片段，如果代码出现报红出错状态的话，点击右上角Maven 的刷新图标，等待即可。
javax.servletjavax.servlet-api3.1.0providedcom.fasterxml.jackson.corejackson-databind2.12.6.1mysqlmysql-connector-java5.1.472.3 ConfessionServelet 类
用来存在服务器代码。
其中 @WebServlet(“/confession”) 是客户端向服务器约定好的请求方式
import com.fasterxml.jackson.databind.ObjectMapper;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 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 Confession {public String from;public String to;public String confession;}@WebServlet("/confession")public class ConfessionServlet extends HttpServlet {private ObjectMapper objectMapper = new ObjectMapper();@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//处理提交消息请求Confession confession = objectMapper.readValue(req.getInputStream(),Confession.class);//保存到内存中// 通过 ContentType 来告知页面, 返回的数据是 json 格式.// 有了这样的声明, 此时 jquery ajax 就会自动的帮我们把字符串转成 js 对象.// 如果没有, jquery ajax 就只是当成字符串来处理的save(confession);resp.setContentType("application/json; charset=utf8");resp.getWriter().write("{\"ok\":true}");}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//获取到消息列表，只要把消息列表中的内容整个都返回给客户端即可//此处需要使用objectMapper 把 Java 对象，转换成json 格式的字符串List confessions = load();String jsonString = objectMapper.writeValueAsString(confessions);System.out.println("jsonString: " + jsonString);resp.setContentType("application/json; charset=utf8");resp.getWriter().write(jsonString);}private void save(Confession confession){//把第一条消息保存到数据库中Connection connection = null;PreparedStatement statement = null;//1.和数据库建立连接try {connection = DBUtil.getConnection();//2.构造 SQLString sql = "insert into confession values(" /> load() {//从数据库中获取到所有的消息List confessions = new ArrayList();Connection connection = null;PreparedStatement statement = null;ResultSet resultSet = null;try {connection = DBUtil.getConnection();String sql = "select * from confession";statement = connection.prepareStatement(sql);resultSet = statement.executeQuery();while (resultSet.next()) {Confession confession = new Confession();confession.from = resultSet.getString("from");confession.from = resultSet.getString("to");confession.from = resultSet.getString("confession");confessions.add(confession);}} catch (SQLException throwables) {throwables.printStackTrace();} finally {DBUtil.close(connection, statement, resultSet);}return confessions;}}2.4 DBUtil 类
这个类是用来与Mysql 建立连接，将表白的话存放到 Mysql 中，使用到的是JDBC编程。
使用JDBC基本流程:
1.创建数据源
2.和数据库建立连接
3.构造sq|语句
4.执行sq|语句
5.如果是查询语句,需要遍历结果集.如果是插入/删除/修改,则不需要
6.关闭连接,释放资源
import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;import javax.sql.DataSource;import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;public class DBUtil {//与数据库建立连接private static final String URL = "jdbc:mysql://127.0.0.1:3306/java?characterEncoding=utf8&useSSL=false";private static final String USERNAME = "root";private static final String PASSWORD = "123456";private volatile static DataSource dataSource = null;private static DataSource getDataSource() {if (dataSource == null) {synchronized (DBUtil.class) {if (dataSource == null) {dataSource = new MysqlDataSource();((MysqlDataSource)dataSource).setUrl(URL);((MysqlDataSource)dataSource).setUser(USERNAME);((MysqlDataSource)dataSource).setPassword(PASSWORD);}}}return dataSource;}public static Connection getConnection() throws SQLException {return getDataSource().getConnection();}public static void close(Connection connection, PreparedStatement statement, ResultSet resultSet) {if (resultSet != null) {try {resultSet.close();} catch (SQLException e) {e.printStackTrace();}}if (statement != null) {try {statement.close();} catch (SQLException e) {e.printStackTrace();}}if (connection != null) {try {connection.close();} catch (SQLException e) {e.printStackTrace();}}}}在上述代码中
2.5 confessWall.html
这个代码是客户端代码
表白墙 /* 整个页面放背景图的，html, 不可少*/html,body {height: 100%;}body {background-image: url(wall.jpg);background-repeat: no-repeat;background-position: center center;background-size: cover;}* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 100%;}h3 {text-align: center;padding: 30px 0;font-size: 24px;color: black;}p {text-align: center;color: rgb(241, 236, 35);padding: 10px 0;}.row {width: 400px;height: 50px;margin: 0 auto;display: flex;justify-content: center;align-items: center;}.row span {width: 60px;font-size: 20px;/* color: azure; */}.row input {width: 300px;height: 40px;line-height: 40px;font-size: 20px;text-indent: 0.5em;/* 去掉输入框的轮廓线 */outline: none;}.row #submit {width: 200px;height: 40px;font-size: 20px;line-height: 40px;margin: 0 auto;color: white;background-color: rgb(241, 238, 35);/* 去掉框的轮廓线 */border: none;border-radius: 10px;}.row #submit:active {background-color: gray;}表白墙
欢迎来到表白墙，勇敢说出你心灵深处的爱吧！
谁：对谁：说：//加入Ajax的代码，此处加入的逻辑有两部分//1) 点击按钮提交的时候，Ajax 要构造数据发送给服务器，// 2） 页面加载的时候，从服务器获取消息列表，并在界面上显示function getMessages() {$.ajax({type: 'get',url: 'confession',success: function(body) {//当前body 已经是一个js 对象数组了，Ajax 会根据响应的 content type 来进行解析//如果服务器返回的content-type 已经是application/json 了，Ajax就会把body自动转换成js对象//如果客户端没有自动链接，也可以通过JSON.parse() 这个函数自动转换//依次来取数组转换的每个元素let container = document.querySelector('.container');for (let confession of body) {let div = document.createElement('div');div.innerHTML = from + ' 对 ' + to + ' 说: ' + msg;div.className = 'row';container.appendChild(div);}}});}//加上函数调用getMessages();// 当用户点击 submit, 就会获取到 input 中的内容, 从而把内容构造成一个 div, 插入到页面末尾let submitBtn = document.querySelector('#submit');submitBtn.onclick = function() {// 1.获取到3个input中的内容let inputs = document.querySelectorAll('input');let from = inputs[0].value;let to = inputs[1].value;let msg = inputs[2].value;if (from == '' || to == '' || msg == '') {//用户没填写完，暂时部提交数据ruturn;}// 2. 生成一个新的 div, 内容就是 input 里的内容. 把这个新的 div 加到页面中. let div = document.createElement('div');div.innerHTML = from + ' 对 ' + to + ' 说: ' + msg;div.className = 'row';let container = document.querySelector('.container');container.appendChild(div);// 3. 清空之前输入框的内容. for (let i = 0; i < inputs.length; i++) {inputs[i].value = '';}//4.把当前获取到的输入框内容，构造成一个HTTP post 请求，通过Ajax 发送给服务器let body = {from: from,to: to,confession: msg};$.ajax({type: "post",url: "confession",contentType: "application/json;charset=utf8",data: JSON.stringify(body),success: function(body) {alert("表白成功");},error: function() {alert("表白失败");}})}在上述代码中
3. smart Tomcat 部署
4.效果
因为我们已经约定好交互方式并且部署好了，所以就可以生成连接：（因为没有与云服务器连接，所以你们只能直接创建项目来部署，不然直接使用我的连接是打不开的）
http://127.0.0.1:8080/confession_wall/confessWall.html
表白的数据存储在数据库
