网站建设搭配百度小程序开发教程

当前位置： 首页 > news >正文

网站建设搭配,百度小程序开发教程,怎么制作网站开发设计,电影网站建站文章目录1 表白墙页面构建2 Servlet 回顾3 表白墙后端程序实现3.1 我们需要做什么#xff1f;3.2 实现细节4 实现结果写在最后1 表白墙页面构建 该页面由标题、文本、三个 input 输入框与一个提交按钮构成#xff0c;整体比较简单#xff0c;相关样式文件和页面代码会在后面… 文章目录1 表白墙页面构建2 Servlet 回顾3 表白墙后端程序实现3.1 我们需要做什么3.2 实现细节4 实现结果写在最后1 表白墙页面构建 该页面由标题、文本、三个 input 输入框与一个提交按钮构成整体比较简单相关样式文件和页面代码会在后面给出。 我们需要解决的核心问题就是考虑如何让表白信息在页面上显示出来 显然我们可以使用 JavaScript 中的选择器选中三个输入框并对提交按钮添加点击监听事件。当我们点击按钮的时候获取三个输入框的内容并将输入框的内容以自己定义的格式插入到 html 中并在浏览器上显示出来~ 需要注意的是如果用户还未写完内容即三个输入框中的内容没有输入完整则不能进行提交~ 页面构建代码如下 messageWall.html !DOCTYPE html html langen headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title表白墙/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: 60px;font-size: 20px;}.row input {width: 300px;height: 40px;line-height: 40px;font-size: 20px;text-indent: 0.5em;/* 去掉输入框的轮廓线 /outline: none;}.row #submit {width: 300px;height: 40px;font-size: 20px;line-height: 40px;margin: 0 auto;color: white;background-color: #fa8497;/ 去掉边框 /border: none;border-radius: 10px;}.row #submit:active {background-color: gray;} /style div classcontainerh3小黄圆圆表白墙/h3p输入后点击提交, 会将信息显示在表格中/pdiv classrowspan谁: /spaninput typetext/divdiv classrowspan对谁: /spaninput typetext/divdiv classrowspan说: /spaninput typetext/divdiv classrowbutton idsubmit提交/button/div /divscript// 当用户点击 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 ) {// 用户还没填写完, 暂时先不提交数据.return;}// 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 ;}} /script /body /html来一个简单的测试~  至此程序都没有什么问题。但是当我们点击页面刷新的时候数据表白信息就丢失了。原因很简单~ 没有实现数据的持久化 怎么解决呢显然我们可以通过服务器来对数据实现持久化存储这就需要用到我们的 Servlet 了。  简而言之就是通过 Servlet 程序处理页面的请求将请求数据中的表白信息持久化存储到数据库中当再次刷新页面的时候从服务器中拉取数据~ 2 Servlet 回顾 Servlet是什么 Servlet是JavaEE规范之一规范就是接口Servlet是JavaWeb的三大组件之一三大组件分别是Servlet程序、Filter过滤器、Listener监听器Servlet是运行在服务器上的一个java小程序可以接收客户端发来的请求并响应数据给客户端 其他内容可以参考笔者的 JavaWeb 专栏的 Servlet 部分这里不再赘述Servlet 核心编程 与笔者前面文章不同的是这次我们使用 maven 来导入相关的依赖在本 Demo 中我们主要使用了 Servletmysql 以及 jackson 来解析 json 数据相关依赖核心代码如下 pom.xml ?xml version1.0 encodingUTF-8? project xmlnshttp://maven.apache.org/POM/4.0.0xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersiongroupIdorg.example/groupIdartifactIdmessage_wall/artifactIdversion1.0-SNAPSHOT/versionpropertiesmaven.compiler.source8/maven.compiler.sourcemaven.compiler.target8/maven.compiler.target/propertiesdependencies!– https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api –dependencygroupIdjavax.servlet/groupIdartifactIdjavax.servlet-api/artifactIdversion3.1.0/versionscopeprovided/scope/dependency!– 用于解析 json 的依赖 –!– https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind –dependencygroupIdcom.fasterxml.jackson.core/groupIdartifactIdjackson-databind/artifactIdversion2.12.7.1/version/dependency!– 引入 mysql 驱动包 –!– https://mvnrepository.com/artifact/mysql/mysql-connector-java –dependencygroupIdmysql/groupIdartifactIdmysql-connector-java/artifactIdversion5.1.47/version/dependency/dependencies/project3 表白墙后端程序实现 3.1 我们需要做什么 核心让表白数据不丢失 我们就需要通过服务器来保存上述程序的消息数据做到持久化存储~ 那么问题来了~ 客户端 和 服务端该如何交互呢   试想一个场景你来到一个陌生的国家想要买一张回国的机票。但是你给路人说“你好~请问机场怎么走” 路人“What can I do for you?” 这里我们做出如下假设 你不会说英语路人不会说中文你听不懂英语路人听不懂中文。 路人表示“你说什么我完全听不懂的吖。” 而如果我们想让后端服务器能够正确的提供给客户端需要的服务就需要前后端都能听得懂说得通。因此有必要统一语言即自定义应用层协议规范请求和响应的数据组织形式 那么再回到问题本身。我们要写一个服务器服务器是干什么的既然是服务器服务器就应该提供服务。试想一个这样的场景你想要洗衣服但是家里只提供给你了个智能电饭煲~ 有如下的功能 煲汤做饭粥 显然电饭煲再智能它也是没有办法帮你洗衣服滴~ 对于前后端的交互来说我们也需要约定好都需要什么样的功能能提供什么样的功能即约定好前后端交互的接口定好相应的规范~
小结约定前后端交互的接口自定义应用层协议~ 对于表白墙来说主要提供如下两个接口 告诉服务器当前留言了一个怎么样的数据当用户点击提交按钮的时候就会给服务器发送一个 http 请求服务器将这个消息保存下来。从服务器获取到当前都有哪些留言数据当页面加载就需要从服务器获取曾经存储的数据。 如何约定协议呢 只需要约定好客户端应该发送一个怎么样的 http请求 服务器返回一个怎么样的 http响应。只要前后端都按照这个约定去做就好常见的可以使用 json 等 这里我们采用的就是 json 格式
3.2 实现细节 修改前端代码使用 ajax 构造请求 点击提交的时候ajax 要构造数据发送给服务器页面加载的时候从服务器获取消息列表并在界面显示 JavaScript 的代码修改如下 script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js/script scriptfunction getMessages(){\(.ajax({type: get,url: message,success: function(body){// 当前 body 已经是一个 js 对象数组了ajax 会根据响应的 content type 自动解析// 如果服务器返回的 content-type 已经是 application/json 了ajax 就会把 body 自动转成 js 的对象// 如果客户端没有自动转也可以通过 JSON.parse() 手动转换// 依次来取数组中的每个元素let container document.querySelector(.container);for(let message of body){let div document.createElement(div);div.innerHTML message.from 对 message.to 说: message.message;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 ) {// 用户还没填写完, 暂时先不提交数据.return;}// 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,message: msg}\).ajax({type: post,url: message,contentType: application/json;charsetutf8,data: JSON.stringify(body),success: function(){alert(消息提交成功);},error: function(){alert(消息提交失败);}});} /script构建相应的类方便存储 json 对应的数据这里需要属性和 key 名称一致便于 jackson 自动读取数据存储到该类的对象中~ Message.java 这里使用 public 修饰完全是为了图方便读者可以自行封装并提供相应的 get、set 方法结果也是一样滴~ class Message{public String from;public String to;public String message; }创建数据库与相应的表 create database message_wall; use message_wall; create table message(from varchar(1024), to varchar(1024), message varchar(4096) );DBUtil.java 用于操作获取数据库资源的工具类注意考虑线程安全问题~ 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;/** author 兴趣使然黄小黄* version 1.0* 方便与数据库之间的操作/ SuppressWarnings({all}) public class DBUtil {private static final String URL jdbc:mysql://127.0.0.1:3306/message_wall?characterEncodingutf8useSSLfalse;private static final String USER_NAME 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(USER_NAME);((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();}}} } Servlet 程序的实现 具体可见代码注释~ 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;/** author 兴趣使然黄小黄* version 1.0* servlet程序 实现表白墙后台逻辑/ class Message{public String from;public String to;public String message; }SuppressWarnings({all}) WebServlet(/message) public class MessageServlet extends HttpServlet {private ObjectMapper objectMapper new ObjectMapper(); // 用于解析 jsonOverrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 处理提交消息请求Message message objectMapper.readValue(req.getInputStream(), Message.class); // 读取 jsonsave(message); // 存储// 通过 ContentType 来告知页面, 返回的数据是 json 格式.// 有了这样的声明, 此时 jquery ajax 就会自动的帮我们把字符串转成 js 对象.// 如果没有, jquery ajax 就只是当成字符串来处理的~~resp.setContentType(application/json; charsetutf8);resp.getWriter().write({ \ok: true });}Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 获取到消息列表. 只要把消息列表中的内容整个的都返回给客户端即可// 此处需要使用 ObjectMapper 把 Java 对象, 转成 JSON 格式字符串~ListMessage messages load(); // 获取数据String jsonString objectMapper.writeValueAsString(messages);System.out.println(jsonString: jsonString);resp.setContentType(application/json; charsetutf8);resp.getWriter().write(jsonString);}/** 将一条消息保存到数据库中* param message 要保存的数据/private void save(Message message){Connection connection null;PreparedStatement statement null;try {// 1. 和数据库连接connection DBUtil.getConnection();// 2. 构造 sqlString 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) {e.printStackTrace();} finally {// 4. 释放资源DBUtil.close(connection, statement, null);}}/** 从数据库中获取到所有的表白信息* return 返回一个List存储的就是表白信息*/private ListMessage load(){ListMessage messages new ArrayList();Connection connection null;PreparedStatement statement 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);messages.add(message);}} catch (SQLException e) {e.printStackTrace();} finally {// 4. 释放资源DBUtil.close(connection, statement, resultSet);}return messages;} } 4 实现结果 启动 Tomcat 服务器访问表白墙页面后我们依次在页面中插入三条数据后刷新页面结果如下图所示 使用Fiddler进行抓包请求和响应数据正常~ 我们在数据库中查看也能找到相应的数据~ 写在最后 本文相关代码已上传 gitee如有需要请自取JavaEE-表白墙Demo  以上便是本文的全部内容啦创作不易如果你有任何问题欢迎私信感谢您的支持