南宁网站推广排名,2023年国家免费技能培训,wordpress中文二次元,建筑工程服务有限公司目录
一、页面代码部分
二、设计程序
二、实现 doPost编辑
三、实现 doGet
四、前端代码部分
五、使用数据库存储数据 一、页面代码部分 在之前的一篇博客中#xff0c;已经写过了表白墙的页面代码实现#xff0c;这里就不再重复了
页面代码如下#xff1a;
!…目录
一、页面代码部分
二、设计程序
二、实现 doPost编辑
三、实现 doGet
四、前端代码部分
五、使用数据库存储数据 一、页面代码部分 在之前的一篇博客中已经写过了表白墙的页面代码实现这里就不再重复了
页面代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8title表白墙/title
/head
bodydiv classcontainerh1表白墙/h1p输入后点击提交会将信息显示在表格中/pdiv classrowspan谁/spaninput typetext classedit/divdiv classrow span对谁/spaninput typetext classedit/divdiv classrowspan说什么/spaninput typetext classedit/divdiv classrowinput typebutton value提 交 idsubmit/divscriptlet submitButtondocument.querySelector(#submit);submitButton.onclickfunction(){//1.先获取到编辑框的内容let editsdocument.querySelectorAll(.edit);//依靠.value来获得其输入框的值let fromedits[0].value;let toedits[1].value;let messageedits[2].value;console.log(from,to,message);//这里是对用户输入进行合法的校验看用户输入是否合法if(from||to ||message){return;}//2.根据内容构造HTML元素.row里面包含用户输入的话//createElement:创建一个元素let rowdocument.createElement(div);row.classNamerow;row.innerHTMLfrom对to说message;//3.把这个新的元素添加到DOM树上let containerdocument.querySelector(.container);container.appendChild(row);//4.清空原来的输入框for(let i0;iedits.length;i){edits[i].value;}}/scriptstyle/*去除浏览器默认样式内边距外边距内边框和外边框不会撑大盒子*/*{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 auto;}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和input的长度进行调整*/span{width:90px;font-size: 20px;}input{width:310px;height: 40px;font-size: 18px;}/*现在处理一下 提交 按钮首先提交按钮宽度和父元素一样宽其次设置字体颜色和背景颜色然后border:none:作用为了去除黑边框border-radius:设置四个角角为圆矩形font-size:设置 提交 字体的大小*/#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二、设计程序
之前写的页面有两个非常严重的问题 1、如果刷新页面 / 关闭页面 重开之前输入的消息就不见了 2、如果一个机器上输入了数据第二个机器是看不到的这些数据都是在本地浏览器中 解决思路 让服务器来存储用户提交的数据由服务器保存 当由新的浏览器打开页面的时候再从服务器获取数据 此处服务器就可以用来存档和读档的操作 写 web 程序务必要重点考虑前后端如何交互也就是约定好前后端交互的数据格式
这个过程称为 设计前后端交互接口
请求时什么样的响应是什么样的浏览器什么时候发送请求浏览器按照什么格式来解析....
那么哪些环节涉及到前后端交互呢 1、点击提交浏览器把表白信息发送到服务器这里 2、页面加载浏览器从服务器获取到表白信息 1、点击提交浏览器把表白信息发送到服务器这里 2、页面加载浏览器从服务器获取到表白信息 此处的约定没有固定的强制要求只要保证能够实现必要的需求即可此处的目的是为了前后端可以对上号 注意这里的路径得和之前约定的保持一致 二、实现 doPost
我们要先定义一个类描述请求的 body 内容方便 jackson 进行 json 解析
class Message{public String from;public String to;public String message;
}
然后使用 List 来存储数据 //使用 List 变量保存所有消息private ListMessage messagesList new ArrayList();//向服务器提交数据Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {ObjectMapper objectMapper new ObjectMapper();//把 body 中的内容读取出来解析成 message 对象Message message objectMapper.readValue(req.getInputStream(),Message.class);//此处通过一个简单粗暴的方式来完成保存messagesList.add(message);//此处的设定状态码可以省略不设置默认也是200resp.setStatus(200);}
doPost 做的事情就是把解析的 message 往 List 里面添加 三、实现 doGet
另一方面实现 doGet 也就是把 List 的结果返回给前端 响应数据也是一个 json 数据
基于 objectMapper 的 writeValue 方法就可以把 List Message 转换成 json 格式 这个方法同时完成了把 java 对象转换成 json 和把 json 字符串写到响应对象中
第一个参数是 Writer 对象表示转成的 json 字符串往哪个地方去写第二个参数就是当前存储消息的 List 意思是要把哪个对象转换成 json
如果分成两步就是这样写的 //从服务器获取数据Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {ObjectMapper objectMapper new ObjectMapper();//显示告诉浏览器数据是 json 格式并且字符集是 utf8resp.setContentType(applicaion/json; charseetutf8);objectMapper.writeValue(resp.getWriter(),messagesList);}
针对 doGet 只是把 MessageList 给转换成 json 字符串返回给浏览器
class Message{public String from;public String to;public String message;
}WebServlet(/message)
public class MessageServlet extends HttpServlet {//使用 List 变量保存所有消息private ListMessage messagesList new ArrayList();//向服务器提交数据Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {ObjectMapper objectMapper new ObjectMapper();//把 body 中的内容读取出来解析成 message 对象Message message objectMapper.readValue(req.getInputStream(),Message.class);//此处通过一个简单粗暴的方式来完成保存messagesList.add(message);//此处的设定状态码可以省略不设置默认也是200resp.setStatus(200);}//从服务器获取数据Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {ObjectMapper objectMapper new ObjectMapper();//显示告诉浏览器数据是 json 格式并且字符集是 utf8resp.setContentType(applicaion/json; charsetutf8);//objectMapper.writeValue(resp.getWriter(),messagesList);//把 java 对象转换成 json 字符串String jsonResp objectMapper.writeValueAsString(messagesList);//把字符串写回到响应 body 中resp.getWriter().write(jsonResp);}
}写到这里表白墙的后端就大功告成了我们可以打开 postman 对代码进行测试
当前这只是给前端返回 json 字符串要想成为键值对还需要额外的代码 四、前端代码部分
接下来我们来编写前端代码也就是让页面能够发起上述请求并解析响应
post 是点击提交按钮的时候发起get 是页面加载的时候发起 这个代码是在定义一个 js 对象类似于 json 的键值对
key 其实是字符串value 则是 js 中的变量/常量
js 中要求 对象中的 key 务必是 字符串所以这里的 可以省略
当前 body 是个 js 对象不是字符串网络传输只能串字符串不能传对象
所以我们需要把目前这个对象转成字符串 js 内置了转换 json 的库 //4、[新增] 给服务器发起 post 请求把上述数据提交到服务器let body {from :from,to:to,message:msg};strBody JSON.stringify(body);console.log(strBody: strBody);$.ajax({type:post,url:message,data:strBody, contentType:application/json;charsetutf8,success:function(body){console,log(数据发布成功);}});
接下来需要实现下 读档操作让 ajax 发送 GET 请求 //[新增] 在页面加载的时候发送 GET 请求从服务器获取到数据并添加到页面中$.ajax({type:get,url:message,success:function(body){//此处拿到的 body 就是一个 js 的对象数组了//本来服务器返回的是一个 json 格式的字符串但是 jquery 的 ajax 可以自动识别//自动帮我们把 json 字符串转成 js 对象数组//接下来遍历这个数组把元素取出来并且构造到页面中即可for(let message of body){//针对每个元素构造一个 divlet rowdocument.createElement(div);row.classNamerow;row.innerHTMLmessage.from 对message.to 说message.message;containerDiv.appendChild(rowDiv);}}}); 五、使用数据库存储数据
当前我们的数据是在内存变量 中保存的重启服务器就没了
要想持久化保存就需要写入文件中硬盘 1、直接使用 流对象 写入文本文件 2、借助数据库 创建数据表
此处只有一个表messagefrom ,to,message 实现数据库操作
//通过这个类把数据库连接过程封装一下
//此处把 DBUtil 作为一个工具类提供 static 方法供其它方法来调用
public class DBUtil {//静态成员是跟随类对象的类对象在整个进程中只有唯一一份//静态成员相当于也是唯一的实例单例模式饿汉模式private static DataSource dataSource new MysqlDataSource();static {//使用静态代码块针对 dataSourse 进行初始化((MysqlDataSource)dataSource).setUrl(jdbc:mysql://127.0.0.1:3306/java?charactorEncodingutf8useSSLfalse);((MysqlDataSource)dataSource).setUser(root);((MysqlDataSource)dataSource).setPassword(123456);}//通过这个方法来建立连接public static Connection getConnection() throws SQLException {return dataSource.getConnection();}//通过这个方法来断开连接释放资源public static void close(Connection connection, PreparedStatement statement, ResultSet resultSet) {//此处的三个 try catch 分开写更好避免前面的异常导致后面的代码无法执行if (resultSet ! null){try {resultSet.close();} catch (SQLException e) {throw new RuntimeException(e);}}if (statement ! null){try {statement.close();} catch (SQLException e) {throw new RuntimeException(e);}}if (connection ! null){try {connection.close();} catch (SQLException e) {throw new RuntimeException(e);}}}
}要插入的数据是三个变量要把这三个变量给填充到 Sql 中就需要占位符
class Message{public String from;public String to;public String message;
}WebServlet(/message)
public class MessageServlet extends HttpServlet {//使用 List 变量保存所有消息//private ListMessage messagesList new ArrayList();//向服务器提交数据Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {ObjectMapper objectMapper new ObjectMapper();//把 body 中的内容读取出来解析成 message 对象Message message objectMapper.readValue(req.getInputStream(),Message.class);//此处通过一个简单粗暴的方式来完成保存//messagesList.add(message);save(message);//此处的设定状态码可以省略不设置默认也是200resp.setStatus(200);}//从服务器获取数据Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {ObjectMapper objectMapper new ObjectMapper();//显示告诉浏览器数据是 json 格式并且字符集是 utf8resp.setContentType(applicaion/json; charsetutf8);//objectMapper.writeValue(resp.getWriter(),messagesList);//把 java 对象转换成 json 字符串ListMessage messagesList load();String jsonResp objectMapper.writeValueAsString(messagesList);//把字符串写回到响应 body 中resp.getWriter().write(jsonResp);}//提供一对方法//往数据库中存一条消息private void save(Message message) {//JDBC 操作//1、建立连接Connection connection null;PreparedStatement statement null;try {connection DBUtil.getConnection();//2、构造 SQL 语句String sql insert into message values(?,?,?);statement connection.prepareStatement(sql);statement.setString(1,message.from);statement.setString(2,message.to);statement.setString(3,message.message);//3、执行 SQLstatement.executeUpdate();} catch (SQLException e) {throw new RuntimeException(e);}finally {//4、关闭连接DBUtil.close(connection,statement,null);}}//从数据库中取所有消息private ListMessage load(){ListMessage messageList new ArrayList();PreparedStatement statement null;Connection connection null;ResultSet resultSet null;try {//1、和数据库建立连接connection DBUtil.getConnection();//2、构造 SQLString sql select *from message;statement connection.prepareStatement(sql);//3、执行 SQLresultSet statement.executeQuery();//4、遍历结果集合while (resultSet.next()){Message message new Message();message.from resultSet.getString(from);message.to resultSet.getString(to);message.message resultSet.getString(message);messageList.add(message);}}catch (SQLException e){e.printStackTrace();}finally {//5、需要释放资源断开连接DBUtil.close(connection,statement,resultSet);}return messageList;}
}
