延吉建设局网站,一个网站可以有几个关键词,字体logo在线生成器,html5制作网页的详细步骤文章目录 一、前端二、前置知识三、代码1、后端2、前端3、总结 四、存入数据库1、引入 mysql 的依赖#xff0c;mysql 驱动包2、创建数据库数据表3、调整上述后端代码3.1 封装数据库操作#xff0c;和数据库建立连接3.2 调整后端代码 一、前端
!DOCTYPE html
ht… 文章目录 一、前端二、前置知识三、代码1、后端2、前端3、总结 四、存入数据库1、引入 mysql 的依赖mysql 驱动包2、创建数据库数据表3、调整上述后端代码3.1 封装数据库操作和数据库建立连接3.2 调整后端代码 一、前端
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title表白墙/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 800px;margin: 0 auto;}.container h2 {text-align: center;margin: 30px;}.row {height: 50px;display: flex;justify-content: center;margin-top: 5px;line-height: 50px;}.row span {height: 50px;width: 100px;line-height: 50px;}.row input {height: 50px;width: 300px;line-height: 50px;}.row button {height: 50px;width: 400px;margin: 10px 0px;color: white;background-color: orange;border: none;border-radius: 10px;}.row button:active {background-color: grey;}/style
/head
bodydiv classcontainerh2表白墙/h2div classrowspan谁/spaninput typetext idfrom/divdiv classrowspan对谁/spaninput typetext idto/divdiv classrowspan说/spaninput typetext idmessage/divdiv classrowbutton提交/button/div/divscript srchttps://code.jquery.com/jquery-3.7.1.min.js/scriptscriptlet container document.querySelector(.container);let fromInput document.querySelector(#from);let toInput document.querySelector(#to);let messageInput document.querySelector(#message);let button document.querySelector(button);button.onclick function() {let from fromInput.value;let to toInput.value;let message messageInput.value;if(from || to || message||) {return;}let newDiv document.createElement(div);newDiv.className row;newDiv.innerHTML from 对 to 说 message;container.appendChild(newDiv);fromInput.value ;toInput.value ;messageInput.value ; }/script
/body
/html二、前置知识 pom.xml 里面的依赖确保了在开发阶段项目能够编译和运行但在部署到Tomcat服务器时Tomcat会提供这些类因此不需要将它们打包到最终的WAR文件中。 运行项目一般是两级路径
第一级Context path context path代表了当前的 webapp(网站)一个 tomcat 上是可以同时部署多个 webapp(网站)的webapps 目录下的每个目录都是一个单独的 webapp所以有的资料也把tomcat叫做容器。 如何确定 Context path 1如果是通过 startup.bat 启动的 tomcatwebapps 里对应的 war 包名/目录名就是这个 webapp 的 Context path 2如果是通过 smart tomcat 启动 tomcat是在启动的配置项中手动指定的 Context path(这种是另外的一种运行 tomcat 的方式)第二级路径就是 ServletPath 这个是根据代码中的 WebServlet 注解来确定的或者就是 webapp下面的静态文件/目录
以下是完整项目的目录 三、代码
1、后端
创建 Message.java 和 MessageServlet.java
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.util.ArrayList;
import java.util.List;// 对应到前端传来的请求 body 格式
// 此处要保证每个属性名字和 JSON 里的 key 对应
// 同时要保证这几个格式是 public 或者提供 public 的 getter 方法
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();ListMessage messageList new ArrayList();// 负责实现让服务器从客户端拿数据Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 1. 把 body 的 json 数据解析出来, json格式的字符串(通过输入流获取) - 对象Message message objectMapper.readValue(req.getInputStream(), Message.class);// 2. 把这个数据保存起来最简单的是保存到内存中messageList.add(message);System.out.println(message: message);// 3. 返回成功的响应resp.setContentType(application/json;charsetutf8); // application/json;charsetutf8resp.getWriter().write({\ok\: 1});}// 负责实现让客户端从服务器拿数据Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setContentType(application/json;charsetutf8);// 对象 - json格式的字符串String respString objectMapper.writeValueAsString(messageList);resp.getWriter().write(respString);}
}2、前端
事实上只有注释行为新的步骤也就是第103行后面才是更新的代码前面和上面的前端代码一样。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title表白墙/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 800px;margin: 0 auto;}.container h2 {text-align: center;margin: 30px;}.row {height: 50px;display: flex;justify-content: center;margin-top: 5px;line-height: 50px;}.row span {height: 50px;width: 100px;line-height: 50px;}.row input {height: 50px;width: 300px;line-height: 50px;}.row button {height: 50px;width: 400px;margin: 10px 0px;color: white;background-color: orange;border: none;border-radius: 10px;}.row button:active {background-color: grey;}/style
/head
bodydiv classcontainerh2表白墙/h2div classrowspan谁/spaninput typetext idfrom/divdiv classrowspan对谁/spaninput typetext idto/divdiv classrowspan说/spaninput typetext idmessage/divdiv classrowbutton提交/button/div/divscript srchttps://code.jquery.com/jquery-3.7.1.min.js/scriptscriptlet container document.querySelector(.container);let fromInput document.querySelector(#from);let toInput document.querySelector(#to);let messageInput document.querySelector(#message);let button document.querySelector(button);button.onclick function() {let from fromInput.value;let to toInput.value;let message messageInput.value;if(from || to || message||) {return;}let newDiv document.createElement(div);newDiv.className row;newDiv.innerHTML from 对 to 说 message;container.appendChild(newDiv);fromInput.value ;toInput.value ;messageInput.value ;// 新的步骤将刚才输入框里取得的数据构造成 POST 请求提交给后端服务器// jsonlet messageJson {// 字符串: 变量from: from,to: to,message: message};$.ajax({type: post,// 相对路径url: message,// 绝对路径// url: /MessageWall1/message,contentType: application/json;charsetutf8,data: JSON.stringify(messageJson), // JSON 转成 JSON 格式的字符串success: function() {alert(提交成功);},// 返回状态码不是2xx就触发此函数error: function() {alert(提交失败);}});}// 这个函数在页面加载/刷新的时候调用通过这个函数从服务器获取到当前的消息列表显示在页面上function load() {$.ajax({type: get,url: message,success: function(body) {// 此处 body 已经是 json , ajax 会根据contentType自动转换let container document.querySelector(.container);for(let message of body) {let newDiv document.createElement(div);newDiv.className row;newDiv.innerHTML message.from 对 message.to 说 message.message;container.appendChild(newDiv);}}});}// 函数调用写在这里就表示页面加载的时候来执行load();/script
/body
/htmljson的key只能是字符串类型.此处写的 from其实是from .只不过咱们这里图省事,把省略了 json中表示字符串,单弓|号或者双引号都行. 3、总结
打开页面/刷新页面先执行前端load()load()会执行ajaxajax会发生一个HTTP请求给服务器GET /message这里面的success先不执行后面才会执行这个HTTP请求通过网络发送给tomcat进一步触发doGet方法doGet方法执行里面的逻辑将List转换成JSON构造HTTP响应返回给客户端客户端收到返回数据触发回调函数也就是successsuccess执行里面的逻辑将服务器返回的数据(body)显示到页面上
四、存入数据库
当服务器重启List 里面的数据会丢失应该怎样解决这个问题 关键是要把数据存储在服务器的硬盘上面 1、存入文件里面使用 IO 流来写文件/读文件 2、存入数据库里面使用 MYSQLJDBC JDBCJava Database Connectivity是Java编程语言中用于执行SQL语句的一组API应用程序接口。它为数据库访问提供了一种标准的方法使得Java程序可以与各种关系型数据库进行交互而无需关心具体的数据库实现细节。 这里使用存入数据库的方式来解决问题
1、引入 mysql 的依赖mysql 驱动包
!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java --
dependencygroupIdmysql/groupIdartifactIdmysql-connector-java/artifactIdversion5.1.49/version
/dependency2、创建数据库数据表
create database MessageWall;
use MessageWall;drop table if exists MessageWall;
create table MessageWall (from varchar(100),to varchar(100),message varchar(1024)
);3、调整上述后端代码
3.1 封装数据库操作和数据库建立连接
新建一个类 DBUtil.java
import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;
//import com.mysql.jdbc.Connection;import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;// 通过这个类完成建立数据库的连接的过程
// 建立连接需要使用 DataSource并且一个程序有一个 DataSource 实例即可这里用单例模式来实现
public class DBUtil {private static DataSource dataSource null;private static DataSource getDataSource() {if (dataSource null) {dataSource new MysqlDataSource();((MysqlDataSource)dataSource).setURL(jdbc:mysql://127.0.0.1/messagewall?characterEncodingutf8useSSLfalse);((MysqlDataSource)dataSource).setUser(root);((MysqlDataSource)dataSource).setPassword(1234);}return dataSource;}public static Connection getConnection() throws SQLException {return getDataSource().getConnection();}public static void close(Connection connection, PreparedStatement preparedStatement, ResultSet resultSet) {// 后创建的先释放// 此处分开写 try-catch 是因为一个地方异常了不会影响其他的 close 执行if (resultSet ! null) {try {resultSet.close();} catch (SQLException e) {e.printStackTrace();}}if (preparedStatement ! null) {try {preparedStatement.close();} catch (SQLException e) {e.printStackTrace();}}if (connection ! null) {try {connection.close();} catch (SQLException e) {e.printStackTrace();}}}
}3.2 调整后端代码
MessageServlet.java
WebServlet(/message)
public class MessageServlet extends HttpServlet {private ObjectMapper objectMapper new ObjectMapper();// ListMessage messageList new ArrayList();// 负责实现让服务器从客户端拿数据Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 1. 把 body 的 json 数据解析出来, json格式的字符串(通过输入流获取) - 对象Message message objectMapper.readValue(req.getInputStream(), Message.class);// 2. 把这个数据保存起来最简单的是保存到内存中// messageList.add(message);save(message);System.out.println(message: message);// 3. 返回成功的响应resp.setContentType(application/json;charsetutf8); // application/json;charsetutf8resp.getWriter().write({\ok\: 1});}// 负责实现让客户端从服务器拿数据Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setContentType(application/json;charsetutf8);// 对象 - json格式的字符串ListMessage messageList load();String respString objectMapper.writeValueAsString(messageList);resp.getWriter().write(respString);}// 把当前的消息存到数据库中private void save(Message message) {Connection connection null;PreparedStatement statement null;try {// 1.和数据库建立连接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.执行SQL语句int ret statement.executeUpdate();if (ret ! 1) {System.out.println(插入失败);} else {System.out.println(插入成功);}} catch (SQLException e) {e.printStackTrace();} finally {// 4.关闭连接DBUtil.close(connection, statement, null);}}// 从数据库查询到记录private ListMessage load() {Connection connection null;PreparedStatement statement null;ResultSet resultSet null;ListMessage messageList new ArrayList();try {// 1.建立连接connection DBUtil.getConnection();// 2.构造SQL语句String sql select * from message;statement connection.prepareStatement(sql);// 3.执行SQLresultSet statement.executeQuery(sql);// 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;}
}
