秦皇岛网站建设企业,html个人简历完整代码,网站开发常用哪几种语言,买域名去哪个网站好文章目录 前言效果展示事前准备HTML、CSS、JavaScript分别负责哪些HTML和CSS构架出页面的基本结构和样式JavaScript 实现行为和交互实现服务器端的业务代码整理pom.xmlweb.xmlmessageWall.htmlMessageServlet.java 前言 前面我们学习了 Java 中知名的 HTTP 服务器 tomcat 的安… 文章目录 前言效果展示事前准备HTML、CSS、JavaScript分别负责哪些HTML和CSS构架出页面的基本结构和样式JavaScript 实现行为和交互实现服务器端的业务代码整理pom.xmlweb.xmlmessageWall.htmlMessageServlet.java 前言 前面我们学习了 Java 中知名的 HTTP 服务器 tomcat 的安装和使用还学习了 servlet 相关 API 的学习今天这篇文章我们将运用前面学习的 HTTP 知识、tomcat和servlet来实现一个简单的表白墙网站。 效果展示 我先为大家展示一下这个表白墙网站完成之后的最终效果。 首先当我们访问表白墙网站的 HTML 页面的时候得到的是这个结果。 当我们输入信息并且提交的时候会将输入的信息进行处理然后显示在这个页面的下面。 然后我们就可以根据上面的效果来逐步实现代码。 事前准备 在这里我给大家说明一下要想实现网站不仅需要后端的知识还需要一些像什么 HTML、CSS、JavaScript这样的前端知识而很多人可能还没接触过前端大家不用慌我也是刚接触前端本篇文章我将为大家简单的介绍一下关于前端的时候让大家大概知道我前段的每一段代码都是干啥的就行了。并且我也是一个前端小白如果我的分享有错误的话欢迎大家在评论区或者私信我指出来我在这里谢谢大家了。 首先我们需要创建出一个 Maven 项目然后根据 tomcat 的要求创建出符合要求的目录结构以及配置一些文件中的内容。 创建出符合 tomcat 标准的目录结构。 在 web.xml 文件中填写内容。这个文件中的内容大家可以直接复制粘贴。 !DOCTYPE web-app PUBLIC-//Sun Microsystems, Inc.//DTD Web Application 2.3//ENhttp://java.sun.com/dtd/web-app_2_3.dtd web-appdisplay-nameArchetype Created Web Application/display-name /web-app创建出一个 MessageServlet.java 文件用来写我们的后端主要的代码。 HTML、CSS、JavaScript分别负责哪些 HTML、CSS 和 JavaScript 是构建网页的三种主要技术它们分别负责网页的结构、样式和行为。 HTML (HyperText Markup Language)HTML 是网页的基础它负责创建和组织网页的内容。HTML 是一种标记语言它使用各种标签来定义网页中的不同元素例如标题、段落、链接、图片等。 CSS (Cascading Style Sheets)CSS 负责网页的样式和布局。它可以改变文本的颜色、字体和大小也可以调整元素的位置、大小和边距等。 JavaScriptJavaScript 负责网页的行为和交互。它可以动态地更改网页的内容、响应用户的点击和输入甚至加载新的内容。 简单的讲HTML的作用就是决定你这个网页有哪些基本的结构就是一个人有一个嘴巴、两个眼睛、一个鼻子CSS则是决定你某一结构的具体样式和布局就是一个人是双眼皮、高鼻梁、小嘴巴而JavaScript则决定你网页的行为和交互你怎么吃饭的、怎么呼吸的。 HTML和CSS构架出页面的基本结构和样式 当做好前面的准备之后我们就需要实现表白墙网站的第一步显示出基本页面。这个显示出页面主要用到了 HTML和CSS的知识。我们的这个 html 文件需要放在 webapp 目录下。 !DOCTYPE html html langen headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title表白墙/titlestyle/* * 通配符选择器, 是选中页面所有元素 */* {/* 消除浏览器的默认样式. */margin: 0;padding: 0;box-sizing: border-box;}.container {width: 600px;margin: 20px auto;}h1 {text-align: center;}p {text-align: center;color: #666;margin: 20px 0;}.row {/* 开启弹性布局 */display: flex;height: 40px;/* 水平方向居中 */justify-content: center;/* 垂直方向居中 */align-items: center;}.row span {width: 80px;}.row input {width: 200px;height: 30px;}.row button {width: 280px;height: 30px;color: white;background-color: orange;/* 去掉边框 */border: none;border-radius: 5px;}/* 点击的时候有个反馈 */.row button:active {background-color: grey;}/stylescript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/script /head body/body /htmlCSS中的通配符选择器*它选中了页面上的所有元素然后将所有元素的margin外边距、padding内边距设置为0并将box-sizing属性设置为border-box。 这段代码的目的主要是重置网页上所有元素的默认样式。在很多情况下浏览器会对HTML元素应用默认样式这些默认样式可能会影响到网页的布局和元素的尺寸。通过将margin和padding设置为0可以消除元素之间的间距margin和内部填充padding而将box-sizing设置为border-box可以使元素的宽度和高度包括其边框和内边距。 它定义了一个名为.container的类。这个类设置了一个元素的宽度为600像素并将外边距margin设置为20像素且上下外边距为自动auto使得这个元素在页面上居中。 用于设置HTML文档中的h1和p元素的样式。也就是h1标签和p标签。 h1元素内的文本应该居中显示text-align: center;。p元素内的文本也应该居中显示颜色为#666一个深灰色并且上下边距为20px。 用于设置一个名为.row的类的样式。这段代码使用Flexbox模型来定义行内元素的布局和对齐方式。 display: flex;这会使得元素变为弹性容器其子元素会按Flexbox模型布局。height: 40px;这会设置元素的高度为40像素。justify-content: center;这会使得行内元素在主轴水平方向上居中对齐。align-items: center;这会使得行内元素在交叉轴垂直方向上居中对齐。 所有属于.row类的元素的span子元素其宽度将被设置为80px。 所有属于.row类的元素的input子元素其宽度将被设置为200px高度将被设置为30px。这个就是我们输入框的相关属性。 所有属于.row类的元素的button子元素其宽度将被设置为280px高度将被设置为30px文本颜色将被设置为白色背景颜色将被设置为橙色边框将被移除并且边框半径用于创建圆角将被设置为5px。这个就是点击按钮的相关属性。 JavaScript 实现行为和交互 上面主要用到了我们的 HTML 和 CSS 相关的知识基本构建出了页面的基本结构和样式而接下来我们将使用 JavaScript 来完成提交信息这个动作。 首先需要构建出container类中的各个输入框的行为。 div classcontainerh1表白墙/h1p输入内容后点击提交, 信息会显示到下方表格中/pdiv classrowspan谁: /spaninput typetext/divdiv classrowspan对谁: /spaninput typetext/divdiv classrowspan说: /spaninput typetext/divdiv classrowbutton idsubmit提交/button/div!-- div classrowxxx 对 xx 说 xxxx/div --/divdiv class“container”开始一个容器div用于包装整个页面的内容。创建出container这个类。h1表白墙创建一个主标题显示“表白墙”字样。p输入内容后点击提交, 信息会显示到下方表格中创建一个段落用于向用户说明他们可以输入表白信息然后点击提交按钮信息会显示在下方的表格中。div class“row”开始一个行div用于包装每一条表白信息。span谁: 创建一个标签span显示“谁”字样用于提示用户输入表白者的名字。input type“text”创建一个文本输入框用户可以在这里输入他们的名字。test表示输入的是文本。div class“row”开始最后一个行div。button id“submit”提交创建一个按钮id为“submit”用于提交表单。按钮上显示“提交”字样。 以上的JavaScript完成了输入框和提交按钮的行为而JavaScript还需要完成点击提交按钮之后将数据经过处理然后显示在页面上。 scriptlet containerDiv document.querySelector(.container);]let inputs document.querySelector(.input);let button document.querySelector(#submit);button.onclick function() {//获取到三个输入框的内容let from inputs[0];let to inputs[1];let message input[2];//判断是否未输入if (from || to || message ) {return;}//创建出一个新的元素let rowDiv document.createElement(div);//定义出rowDiv的类名rowDiv.className row message;//为rowDiv中插入元素rowDiv.innerHtml from 对 to 说: msg;//将这个新创建的元素添加到containerDiv类的末尾containerDiv.appendChild(rowDiv);//将输入框中的内容置为空for (let input of inputs) {input.value ;}//构造出一个对象用来存储刚才输入框输入的内容并且这个内容是以json的格式存在的let requestBody {from: from,to: to,message: message}//通过我们前面引入的Jackson依赖使用JSON中的stringify方法将对象转换为jsonlet jsonString JSON.stringify(requestBody);//$是我们前面引入的jQuery依赖中的全局变量通过这个$可以调用jQuery中的很多方法//通过这个ajax方法构造请求并且发送给服务器$.ajax({type: post,url: message,contentType: application/json; charsetutf8;data: jsonString,success: function(responseBody) {console.log(responseBody);}});} /scriptAjax属于第三方库所以我们要想使用的话就需要引入相关依赖。引入jQuery库。https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js 实现服务器端的业务 当前端构造出 post 请求发送给服务器服务器接收到这个请求之后就需要根据这个发送来的请求做出业务处理。因为我们使用的是 Servlet 实现的所以就需要先引入 Servlet 依赖。 因为前端构造请求的数据格式是 json 的数据格式所以要想在 Java 中使用 json也就需要引入 json 库或者包装了 json 库的其他库。 引入Jackson依赖。 当引入 Servlet 和 Jackson 依赖之后我们服务端就可以通过 Servlet 的相关 API 做出相应的业务处理了。 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;class Message {public String from;public String to;public String message;Overridepublic String toString() {return Message{ from from \ , to to \ , message message \ };} } WebServlet(/message) public class MessageServlet extends HttpServlet {private ObjectMapper objectMapper new ObjectMapper();Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//设置相应的状态码resp.setStatus(200);//通过ObjectMapper中的readValue方法将json数据转换为Java对象Message message objectMapper.readValue(req.getInputStream(), Message.class);//将客户端输入的信息进行存储save(message);System.out.println(message);resp.getWriter().write(ok);} }当客户端进行提交请求之后前端会将输入的信息传给服务器那么当服务器接收到这个请求之后应该将输入存储在哪个地方呢如果只是拿一个简单的 List 容器存储数据话那么这个数据就是存储在内存中的当服务器重启之后之前存储的数据就会消失那么该如何存储才能保证数据的持久性呢这里想到的肯定就是数据库了数据库天然支持数据存储的持久性所以我们这里选择使用 MySQL 数据库来实现数据的存储。 -- 创建数据库 create database if not exists message_wall;-- 选中数据库 use message_wall;-- 为了防止这个表存在对我们的数据库造成影响我们先删除数据库 drop table if exists message;-- 创建表 create table message(from varchar(1024), to varchar(1024), message varchar(1024));当创建完成数据库和表之后我们继续要引入 MySQL 依赖然后实现 JDBC 编程了。 这里因为我的 MySQL 版本是 MySQL8所以依赖选择的也是 MySQL8 版本大家需要根据自己的 MySQL 版本来导入对应的依赖。 import com.fasterxml.jackson.databind.ObjectMapper; import com.mysql.cj.jdbc.MysqlDataSource;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 javax.sql.DataSource; import java.io.IOException; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.SQLException;class Message {public String from;public String to;public String message;Overridepublic String toString() {return Message{ from from \ , to to \ , message message \ };} } WebServlet(/message) public class MessageServlet extends HttpServlet {private ObjectMapper objectMapper new ObjectMapper();private DataSource dataSource new MysqlDataSource();Overridepublic void init() throws ServletException {((MysqlDataSource)dataSource).setURL(jdbc:mysql://127.0.0.1:3306/message_wall?characterEncodingutf8useSSlfalse);((MysqlDataSource)dataSource).setUser(root);((MysqlDataSource)dataSource).setPassword(*******); //这里是我们的MySQL密码}Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//设置相应的状态码resp.setStatus(200);//通过ObjectMapper中的readValue方法将json数据转换为Java对象Message message objectMapper.readValue(req.getInputStream(), Message.class);//将客户端输入的信息进行存储try {save(message);} catch (SQLException e) {throw new RuntimeException(e);}System.out.println(message);resp.getWriter().write(ok);}private void save(Message message) throws SQLException {Connection connection dataSource.getConnection();String sql insert into message values(?, ?, ?);PreparedStatement statement connection.prepareStatement(sql);statement.setString(1, message.from);statement.setString(2, message.to);statement.setString(3, message.message);statement.executeUpdate();statement.close();connection.close();} } 当实现完成将客户端输入的数据存储进MySQL数据库之后当我们进入这个网站的时候还需要将数据库已经存在的信息给读取到页面上所以当我们访问这个网站的时候浏览器会向服务器发送一个 Ajax 请求当服务器接收到这个 Ajax 请求的时候就会将数据库中的数据给返回给客户端。 $.ajax({type: get,url: message,success: function(body) {let containerDiv document.querySelector(.container);for (let i 0; i body.length; i) {let message body[i];let div document.createElement(div);div.className row;div.innerHTML message.from 对 message.to 说 message.message;containerDiv.appendChild(div);}}});我们这个标签放在 script 标签下当访问这个 html 文件的时候就会自动向服务器发送一个请求。 而当我们的服务器接收到这个请求的时候便会将数据库中存在的数据返回给客户端。 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setStatus(200);resp.setContentType(application/json; charsetutf8);ListMessage messageList null;try {messageList load();} catch (SQLException e) {throw new RuntimeException(e);}String jsonString objectMapper.writeValueAsString(messageList);resp.getWriter().write(jsonString);}private ListMessage load() throws SQLException {Connection connection dataSource.getConnection();String sql select * from message;PreparedStatement statement connection.prepareStatement(sql);ResultSet resultSet statement.executeQuery();ListMessage messageList new ArrayList();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);}statement.close();connection.close();return messageList;}代码整理 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_wall1/artifactIdversion1.0-SNAPSHOT/versionpropertiesmaven.compiler.source8/maven.compiler.sourcemaven.compiler.target8/maven.compiler.targetproject.build.sourceEncodingUTF-8/project.build.sourceEncoding/propertiesdependencies!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind --dependencygroupIdcom.fasterxml.jackson.core/groupIdartifactIdjackson-databind/artifactIdversion2.14.2/version/dependency!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api --dependencygroupIdjavax.servlet/groupIdartifactIdjavax.servlet-api/artifactIdversion3.1.0/versionscopeprovided/scope/dependency!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java --dependencygroupIdmysql/groupIdartifactIdmysql-connector-java/artifactIdversion8.0.28/version/dependency/dependencies /projectweb.xml !DOCTYPE web-app PUBLIC-//Sun Microsystems, Inc.//DTD Web Application 2.3//ENhttp://java.sun.com/dtd/web-app_2_3.dtd web-appdisplay-nameArchetype Created Web Application/display-name /web-appmessageWall.html !DOCTYPE html html langen headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title表白墙/titlestyle/* * 通配符选择器, 是选中页面所有元素 */* {/* 消除浏览器的默认样式. */margin: 0;padding: 0;box-sizing: border-box;}.container {width: 600px;margin: 20px auto;}h1 {text-align: center;}p {text-align: center;color: #666;margin: 20px 0;}.row {/* 开启弹性布局 */display: flex;height: 40px;/* 水平方向居中 */justify-content: center;/* 垂直方向居中 */align-items: center;}.row span {width: 80px;}.row input {width: 200px;height: 30px;}.row button {width: 280px;height: 30px;color: white;background-color: orange;/* 去掉边框 */border: none;border-radius: 5px;}/* 点击的时候有个反馈 */.row button:active {background-color: grey;}/stylescript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/script /head body div classcontainerh1表白墙/h1p输入内容后点击提交, 信息会显示到下方表格中/pdiv classrowspan谁: /spaninput typetext/divdiv classrowspan对谁: /spaninput typetext/divdiv classrowspan说: /spaninput typetext/divdiv classrowbutton idsubmit提交/button/div!-- div classrowxxx 对 xx 说 xxxx/div -- /divscript// 实现提交操作. 点击提交按钮, 就能够把用户输入的内容提交到页面上显示.// 点击的时候, 获取到三个输入框中的文本内容// 创建一个新的 div.row 把内容构造到这个 div 中即可.let containerDiv document.querySelector(.container);let inputs document.querySelectorAll(input);let button document.querySelector(#submit);button.onclick function() {// 1. 获取到三个输入框的内容let from inputs[0].value;let to inputs[1].value;let msg inputs[2].value;if (from || to || msg ) {return;}// 2. 构造新 divlet rowDiv document.createElement(div);rowDiv.className row message;rowDiv.innerHTML from 对 to 说: msg;containerDiv.appendChild(rowDiv);// 3. 清空之前的输入框内容for (let input of inputs) {input.value ;}// 4. 把用户填写的内容, 发送给服务器. 让服务器来保存.// $ 是 jquery 提供的全局变量. ajax 就是 $ 的一个方法.// ajax 的参数是一个 js 对象, 可以有很多属性let requestBody {from: from, // from 变量里的值, 就是第一个输入框的内容, 张三to: to, // to 变量的值, 就是第二个输入框的内容, 李四message: msg // msg 变量的值, 就是第三个输入框的内容, 我喜欢你很久了};// 上述 body 是一个 js 对象, 还需要转成 json 字符串.let jsonString JSON.stringify(requestBody);$.ajax({type: post,url: message,contentType: application/json; charsetutf8,data: jsonString,success: function(responseBody) {// 这个回调就是收到响应之后要执行的代码了.// 前端使用 console.log 打印日志到控制台. (chrome 开发者工具的控制台)console.log(responseBody: responseBody);}});}$.ajax({type: get,url: message,success: function(body) {let containerDiv document.querySelector(.container);for (let i 0; i body.length; i) {let message body[i];let div document.createElement(div);div.className row;div.innerHTML message.from 对 message.to 说 message.message;containerDiv.appendChild(div);}}});/script /body /htmlMessageServlet.java import com.fasterxml.jackson.databind.ObjectMapper; import com.mysql.cj.jdbc.MysqlDataSource; import sun.dc.pr.PRError;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 javax.sql.DataSource; 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 Message {public String from;public String to;public String message;Overridepublic String toString() {return Message{ from from \ , to to \ , message message \ };} } WebServlet(/message) public class MessageServlet extends HttpServlet {private ObjectMapper objectMapper new ObjectMapper();private DataSource dataSource new MysqlDataSource();Overridepublic void init() throws ServletException {((MysqlDataSource)dataSource).setURL(jdbc:mysql://127.0.0.1:3306/message_wall?characterEncodingutf8useSSlfalse);((MysqlDataSource)dataSource).setUser(root);((MysqlDataSource)dataSource).setPassword(lmh041105666);}Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setStatus(200);resp.setContentType(application/json; charsetutf8);ListMessage messageList null;try {messageList load();} catch (SQLException e) {throw new RuntimeException(e);}String jsonString objectMapper.writeValueAsString(messageList);resp.getWriter().write(jsonString);}Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//设置相应的状态码resp.setStatus(200);//通过ObjectMapper中的readValue方法将json数据转换为Java对象Message message objectMapper.readValue(req.getInputStream(), Message.class);//将客户端输入的信息进行存储try {save(message);} catch (SQLException e) {throw new RuntimeException(e);}System.out.println(message);resp.getWriter().write(ok);}private ListMessage load() throws SQLException {Connection connection dataSource.getConnection();String sql select * from message;PreparedStatement statement connection.prepareStatement(sql);ResultSet resultSet statement.executeQuery();ListMessage messageList new ArrayList();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);}statement.close();connection.close();return messageList;}private void save(Message message) throws SQLException {Connection connection dataSource.getConnection();String sql insert into message values(?, ?, ?);PreparedStatement statement connection.prepareStatement(sql);statement.setString(1, message.from);statement.setString(2, message.to);statement.setString(3, message.message);statement.executeUpdate();statement.close();connection.close();} }