目录
一、表白墙简介
在表白墙页面中包含三个文本框,分别表示表白者,表白对象,表白内容,在文本框中输入内容之后,内容能够保存,并且在下次启动页面的时候也能显示出之前所保存的内容。
二、代码实现
1、约定前后端交互的接口
要实现表白墙,首先就需要约定前后端的交互接口,在实际开发过程中,前端人员只负责前端开发,后端人员负责后端开发,那么就需要约定前端发送什么样的请求,后端处理请求之后再以什么格式将数据返回给前端。
那么对于 POST请求:
POST /message { from:\"XX\", to:\"XX\", message:\"xxx\" }
POST响应:
HTTP/1.1 200 OK { ok:true }
当用户点击提交按钮之后,就会向HTTP服务器发送一个请求,让服务器把这个信息存储起来。
GET 请求
GET /message
GET响应
HTTP/1.1 200 OK Content-Type:application/json { { from:\"XX\", to:\"XX\", message:\"xxx\" }, { from:\"XX\", to:\"XX\", message:\"xxx\" }, …… }
请求从服务器上获取到之前保存的所有的留言信息,响应是Json格式的数组。
2、后端代码实现
正式写代码之前的准备工作:
需要创建一个maven项目,在这个项目中先引入Servlet依赖,Mysql依赖,以及Jackson依赖并且创建出正确的目录结构。
<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/mysql/mysql-connector-java --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.47</version> </dependency> <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind --> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.13.5</version> </dependency> </dependencies>
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>
首先创建出一个message类定义from,to,message几个变量。
class Message{ public String from; public String to; public String message; }
创建DBUtil连接数据库,并且能够关闭各种资源。
public class DBUtil { private static final String url = \"jdbc:mysql://127.0.0.1:3306/message?characterEncoding=utf8&useSSL=false\"; private static final String user = \"root\"; private static final String password = \"1234\"; public volatile static DataSource dataSource; private static DataSource getDataSource(){ if(dataSource == null){ synchronized (DBUtil.class){ if(dataSource == null){ dataSource = new MysqlDataSource(); ((MysqlDataSource)dataSource).setUrl(url); ((MysqlDataSource)dataSource).setUser(user); ((MysqlDataSource)dataSource).setPassword(password); } } } return dataSource; } public static Connection getConnection() throws SQLException { return getDataSource().getConnection(); } public static void closeResource(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(); } } } }
在Mysql中创建Message表:
创建MessageServlet类,继承HttpServlet类,重写doGet方法和doPost方法。
在doPost方法中,先设置了响应的内容类型为json格式和字符集为utf-8,然后将请求信息转换成Message对象,再将Message对象的内容存入数据库。然后再向body中写入约定的POST响应的内容。
private ObjectMapper objectMapper = new ObjectMapper(); @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setContentType(\"application/json;charset=utf8\"); Message message = objectMapper.readValue(req.getInputStream(),Message.class); //将处理的请求信息存入数据库 save(message); resp.getWriter().write(\"{\\\"ok\\\":true\"); } private void save(Message message){ Connection connection = null; PreparedStatement statement = null; try { connection = DBUtil.getConnection(); String sql = \"insert into message value(?,?,?)\"; statement = connection.prepareStatement(sql); statement.setString(1,message.from); statement.setString(2,message.to); statement.setString(3,message.message); statement.executeUpdate(); } catch (SQLException e) { e.printStackTrace(); }finally { DBUtil.closeResource(connection,statement,null); } }
在doGet方法中也要先设置响应的内容格式是json,设置字符集为utf-8,然后从数据库中取出之前存储的信息存到链表中,将Message对象转换成字符串写入作为get方法响应的body中。
@Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setContentType(\"application/json;charset=utf8\"); List<Message> messages = load(); String jsonString = objectMapper.writeValueAsString(messages); System.out.println(\"jsonString:\" + jsonString); resp.getWriter().write(jsonString); } private List<Message> load(){ Connection connection = null; PreparedStatement statement = null; ResultSet resultSet = null; List<Message> list = new LinkedList<>(); try { connection = DBUtil.getConnection(); String sql = \"select * from message\"; statement = connection.prepareStatement(sql); resultSet = statement.executeQuery(); while(resultSet.next()){ Message message = new Message(); message.from = resultSet.getString(\"from\"); message.to = resultSet.getString(\"to\"); message.message = resultSet.getString(\"massage\"); list.add(message); } } catch (SQLException e) { e.printStackTrace(); }finally { DBUtil.closeResource(connection,statement,resultSet); } return list; }
3、前端代码实现
需要基于ajax能构造请求并解析响应。
把当前获取到的输入框的内容,构造成一个HTTP POST请求,然后通过ajax发给服务器。
let body = { \"from\": from, \"to\": to, \"message\": message }; $.ajax({ type: \"post\", url: \"message\", contentType: \"application/json;charset=utf8\", data: JSON.stringify(body), success: function() { alert(\"提交成功!\"); }, error: function () { alert(\"提交失败\"); } });
在每次刷新页面时,要从服务器上获取到消息,将其进行展示。
function getMessages() { $.ajax({ type: \'get\', url:\'message\', contentType: \'json\', success: function(body) { let container=document.querySelector(\'.container\'); console.log(body); for(let message of body) { let row=document.createElement(\'div\'); row.innerHTML=message.from+\'对\'+message.to+\'说:\'+message.message; row.className=\'row\'; //3.把这个新的元素添加到DOM树上 container.appendChild(row); } } });
前端完整代码:
<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>表白墙</title> </head> <body> <div class=\"container\"> <h1>表白墙</h1> <p>输入后点击提交,会将信息显示在表格中</p > <div class=\"row\"> <span>谁:</span> <input type=\"text\" class=\"edit\"> </div> <div class=\"row\" > <span>对谁:</span> <input type=\"text\" class=\"edit\"> </div> <div class=\"row\"> <span>说什么:</span> <input type=\"text\" class=\"edit\"> </div> <div class=\"row\"> <input type=\"button\" value=\"提交\" id=\"submit\"> </div> <script src=\"https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js\"></script> <script> //点击按钮提交的时候,ajax要构造数据发送给服务器 //页面加载的时候,从服务器获取消息列表,并且在页面上直接显示。 function getMessages() { $.ajax({ type: \'get\', url:\'message\', contentType: \'json\', success: function(body) { let container=document.querySelector(\'.container\'); console.log(body); for(let message of body) { let row=document.createElement(\'div\'); row.innerHTML=message.from+\'对\'+message.to+\'说:\'+message.message; row.className=\'row\'; //3.把这个新的元素添加到DOM树上 container.appendChild(row); } } }); } getMessages(); let submitButton=document.querySelector(\'#submit\'); submitButton.onclick=function(){ //1.先获取到编辑框的内容 let edits=document.querySelectorAll(\'.edit\'); //依靠.value来获得其输入框的值 let from=edits[0].value; let to=edits[1].value; let message=edits[2].value; // console.log(from,to,message); //这里是对用户输入进行合法的校验,看用户输入是否合法 if(from==\'\'||to==\' \'||message==\'\'){ return; } //2.根据内容,构造HTML元素(.row里面包含用户输入的话) //createElement:创建一个元素 let row=document.createElement(\'div\'); row.className=\'row\'; row.innerHTML=from+\'对\'+to+\'说:\'+message; //3.把这个新的元素添加到DOM树上 let container=document.querySelector(\'.container\'); container.appendChild(row); //4.清空原来的输入框 for(let i=0;i<edits.length;i++){ edits[i].value=\'\'; } // 5.把当前获取到的输入框的内容,构造成一个HTTP POST请求,然后通过ajax发给服务器 let body = { \"from\": from, \"to\": to, \"message\": message }; $.ajax({ type: \"post\", url: \"message\", contentType: \"application/json;charset=utf8\", data: JSON.stringify(body), success: function() { alert(\"提交成功!\"); }, error: function () { alert(\"提交失败\"); } }); } </script> <style> /*去除浏览器默认样式:内边距,外边距,内边框和外边框不会撑大盒子*/ *{ margin:0; padding: 0; box-sizing: border-box; } /*margin:0 auto :意思是 中央居中*/ .container{ width: 400px; margin:0 auto; } /*padding:20px auto :h1标签:上下间距20*/ h1{ text-align:center; padding:20px ; } p{ text-align:center; color:#666; padding: 10px 0; font-size:14px; } /*display:flex:基于弹性布局 justify-content:center:水平居中 align-items:center:垂直居中 */ .row{ height:50px ; display: flex; justify-content: center; align-items:center; } span{ width:90px; font-size: 20px; } input{ width:310px; height: 40px; font-size: 18px; } /* 设置提交按钮的样式 */ #submit{ width: 400px; color: white; background-color:orange; border:none; border-radius:5px; font-size: 18px; } /*点击 提交 按钮 就会改变其背景颜色*/ #submit:active{ background-color: black; } </style> </div> </body> </html>
三、效果演示
点击提交按钮之后:
做猪小侠源码的代理,提供一站式服务
如果你不懂得搭建网站或者服务器,小程序,源码之类的怎么办? 第一通过本站学习各种互联网的技术 第二就是联系客服,我帮帮你搭建(当然要收取部分的费用) 第三成为我们的代理,我们提供整套的服务。