devbox
算法创新者
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【JavaEE】基于Servlet与MySQL实现一个简易网站_mysql怎么创建网站java

作者：算法创新者 | 2024-02-05 20:48:09

赞

踩

mysql怎么创建网站java

目录

前言

一、实现表白墙的前期准备工作

1、约定前后端交互的接口 

1.1、接口一：页面获取当前所有的留言消息

1.2、接口二：提交新消息给服务器

二、前端和后端代码的实现 

1、数据的永久化保存 

2、小结

前言

之前小编在写前端页面的时候，实现了一个表白墙页面，但是这个页面中的数据只会在本次打开的页面中保存下来，下次重新打开或者刷新，之前的聊天记录就不存在了。还有就是我们写的这个页面只能在你本地的电脑上运行，其他人的电脑无法访问到这个页面。本章博客就是要实现一个后端的服务器来解决这两个问题，让用户可以访问到这个页面并且使用户的数据可以永久保存。 

一、实现表白墙的前期准备工作

  1.  创建一个maven项目，引入依赖
  2. 在main目录下创建webapp目录，以及在webapp目录下创建WEB-INF目录，并且在WEB-INF目录下创建web.xml文件。
  3. 将前端页面拷贝到webapp目录下
  4. 配置smart servlet的name为message_wall.

下面我们就可以运行服务器就可以访问到我们的前端页面。

1、约定前后端交互的接口 

以上步骤完成之后，就要写后端服务器代码，但是写之前先要明确前后端交互的接口，也就是网页给服务器要发送什么样请求，服务器要给网页返回什么样的响应。

✨这里分为两个时机给服务器发送请求

  1. 页面加载完毕之后，需要给服务器发送一个请求，获取到当前页面的留言数据都有什么。
  2. 用户点击提交的时候，就需要告诉服务器，当前用户发了什么样的消息。

在交互的过程中，又涉及到一些问题，前端提交的数据是有哪些字段，什么格式；后端返回的响应有那些字段，是什么格式，这些都是需要程序员来设定的。

这里给出一份约定方式，但是并不是唯一的约定方式。

1.1、接口一：页面获取当前所有的留言消息

1️⃣请求：GET/message

2️⃣响应：HTTP/1.1  200  ok

                Content-Type:application/json

json中使用[ ]表示数组，[ ]中的每个元素，是一个json对象（{}），每个对象里，又有三个属性（from，to，message）。

  1. //由于获取的当前页面的所有留言，所以使用一个数组
  2. [
  3.     {
  4.         from:"从哪里来",
  5.         to:  "到哪里去",
  6.         message:"消息是啥"
  7.     },
  8.  
  9.     {
  10.         from:"从哪里来",
  11.         to:  "到哪里去",
  12.         message:"消息是啥"
  13.     },
  14.  
  15.     {
  16.         from:"从哪里来",
  17.         to:  "到哪里去",
  18.         message:"消息是啥"
  19.     },
  20.  
  21. ]

1.2、接口二：提交新消息给服务器

1️⃣请求：POST/message

            Content-Type:application/json

  1.     {
  2.         from:"从哪里来",
  3.         to:  "到哪里去",
  4.         message:"消息是啥"
  5.     }

2️⃣响应：HTTP/1.1  200  OK 

 

二、前端和后端代码的实现 

✨前端代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>表白墙</title>
  8.     <!-- 引入 jquery -->
  9.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  10.     <style>
  11.         /* * 通配符选择器, 是选中页面所有元素 */
  12.         * {
  13.             /* 消除浏览器的默认样式. */
  14.             margin: 0;
  15.             padding: 0;
  16.             box-sizing: border-box;
  17.         }
  18.  
  19.         .container {
  20.             width: 600px;
  21.             margin: 20px auto;
  22.         }
  23.  
  24.         h1 {
  25.             text-align: center;
  26.         }
  27.  
  28.         p {
  29.             text-align: center;
  30.             color: #666;
  31.             margin: 20px 0;
  32.         }
  33.  
  34.         .row {
  35.             /* 开启弹性布局 */
  36.             display: flex;
  37.             height: 40px;
  38.             /* 水平方向居中 */
  39.             justify-content: center;
  40.             /* 垂直方向居中 */
  41.             align-items: center;
  42.         }
  43.  
  44.         .row span {
  45.             width: 80px;
  46.         }
  47.  
  48.         .row input {
  49.             width: 200px;
  50.             height: 30px;
  51.         }
  52.  
  53.         .row button {
  54.             width: 280px;
  55.             height: 30px;
  56.             color: white;
  57.             background-color: orange;
  58.             /* 去掉边框 */
  59.             border: none;
  60.             border-radius: 5px;
  61.         }
  62.  
  63.         /* 点击的时候有个反馈 */
  64.         .row button:active {
  65.             background-color: grey;
  66.         }
  67.     </style>
  68. </head>
  69. <body>
  70.     <div class="container">
  71.         <h1>表白墙</h1>
  72.         <p>输入内容后点击提交, 信息会显示到下方表格中</p>
  73.         <div class="row">
  74.             <span>谁: </span>
  75.             <input type="text">
  76.         </div>
  77.         <div class="row">
  78.             <span>对谁: </span>
  79.             <input type="text">
  80.         </div>
  81.         <div class="row">
  82.             <span>说: </span>
  83.             <input type="text">
  84.         </div>
  85.         <div class="row">
  86.             <button id="submit">提交</button>
  87.         </div>
  88.         <div class="row">
  89.             <button id="revert">撤销</button>
  90.         </div>
  91.         <!-- <div class="row">
  92.             xxx 对 xx 说 xxxx
  93.         </div> -->
  94.     </div>
  95.  
  96.     <script>
  97.         // 实现提交操作. 点击提交按钮, 就能够把用户输入的内容提交到页面上显示. 
  98.         // 点击的时候, 获取到三个输入框中的文本内容
  99.         // 创建一个新的 div.row 把内容构造到这个 div 中即可. 
  100.         let containerDiv = document.querySelector('.container');
  101.         let inputs = document.querySelectorAll('input');
  102.         let button = document.querySelector('#submit');
  103.         button.onclick = function() {
  104.             // 1. 获取到三个输入框的内容
  105.             let from = inputs[0].value;
  106.             let to = inputs[1].value;
  107.             let msg = inputs[2].value;
  108.             if (from == '' || to == '' || msg == '') {
  109.                 return;
  110.             }
  111.             // 2. 构造新 div
  112.             let rowDiv = document.createElement('div');
  113.             rowDiv.className = 'row message';
  114.             rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + msg;
  115.             containerDiv.appendChild(rowDiv);
  116.             // 3. 清空之前的输入框内容
  117.             for (let input of inputs) {
  118.                 input.value = '';
  119.             }
  120.             // 4. 通过 ajax 构造 post 请求, 把这个新的消息提交给服务器. 
  121.             let body = {//构造一个json格式的对象
  122.                 "from": from,//from是从第一个from输入框中读出的数据
  123.                 "to": to,//to是从第二个to输入框中读出的数据
  124.                 "message": msg//message表示从第三个框中读出的数据
  125.             };
  126.             $.ajax({
  127.                 type: 'post',
  128.                 url: 'message',
  129.                 contentType: "application/json;charset=utf8",
  130.                 data: JSON.stringify(body),//这里传的是stringify函数转换body对象之后的json格式字符串
  131.                 success: function(body) {
  132.                     // 这是响应成功返回之后, 要调用的回调. 
  133.                     console.log("消息发送给服务器成功!");
  134.                 }
  135.             });
  136.         }
  137.         let revertButton = document.querySelector('#revert');
  138.         revertButton.onclick = function() {
  139.             // 删除最后一条消息. 
  140.             // 选中所有的 row, 找出最后一个 row, 然后进行删除
  141.             let rows = document.querySelectorAll('.message');
  142.             if (rows == null || rows.length == 0) {
  143.                 return;
  144.             }
  145.             containerDiv.removeChild(rows[rows.length - 1]);
  146.         }
  147.  
  148.         // 在页面加载的时候, 希望能够从服务器获取到所有的消息, 并显示在网页中. 
  149.         $.ajax({
  150.             type: 'get',
  151.             url: 'message',  // url 都是使用相对路径的写法. 相对路径意味着工作路径就是当前文件所在的路径. 
  152.                              // 当前文件所在路径是 /message_wall/ , 因此此时构造的请求就是 /message_wall/message
  153.             success: function(body) {
  154.                 // body 是收到的响应的正文部分. 如我们之前的约定, body 应该是 json 数组
  155.                 // 由于响应的 Content-Type 是 application/json, 此时收到的 body 会被 jquery 自动的把它从 字符串 
  156.                 // 转成 js 对象数组. 此处就不需要手动的进行 JSON.parse 了. 
  157.                 // 此处的 body 已经是一个 JSON.parse 之后得到的 js 对象数组了. 
  158.                 // 就需要遍历这个 body 数组, 取出每个元素, 再依据这样的元素构造出 html 标签, 并添加到页面上. 
  159.                 let container = document.querySelector('.container');
  160.                 for (let message of body) {
  161.                     let rowDiv = document.createElement('div');
  162.                     rowDiv.className = "row";
  163.                     rowDiv.innerHTML = message.from + " 对 " + message.to + " 说: " + message.message;
  164.                     container.appendChild(rowDiv);
  165.                 }
  166.             }
  167.         });
  168.     </script>
  169. </body>
  170. </html>

✨后端代码，这是一个不能让数据永久保存的写法。对接口1和接口2都进行了实现。

  1. import com.fasterxml.jackson.databind.ObjectMapper;
  2.  
  3. import javax.servlet.ServletException;
  4. import javax.servlet.annotation.WebServlet;
  5. import javax.servlet.http.HttpServlet;
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;
  8. import java.io.IOException;
  9. import java.util.ArrayList;
  10. import java.util.List;
  11.  
  12.  
  13. class Message{
  14.     public String from;
  15.     public String to;
  16.     public String message;
  17. }
  18.  
  19. @WebServlet("/message")
  20. public class MessageServlet extends HttpServlet {
  21.     private ObjectMapper objectMapper = new ObjectMapper();
  22.     private List<Message>  messageList = new ArrayList<>();
  23.     @Override
  24.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  25.         //通过这个方法来处理"获取所有留言消息"
  26.         //需要返回一个json字符串数组，Jackson直接帮我们处理好了格式。
  27.  
  28.         //这里使用objectMapper将messageList转成json格式的字符串，由于messageList是一个ArrayList,底层是一个数组，所以转出来的结果也是json一个数组
  29.         String respString = objectMapper.writeValueAsString(messageList);
  30.         //这个list中的每一个元素，就是数组中的每一个元素。
  31.         resp.setContentType("application/json;charset=utf8");
  32.         //最后将Jason字符串整体返回响应即可
  33.         resp.getWriter().write(respString);
  34.  
  35.     }
  36.  
  37.     @Override
  38.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  39.         //通过这个方法来处理"提交新消息"
  40.         //通过这个方法，将提交的信息按照Message类的格式解析 ，用message对象接收
  41.         Message message = objectMapper.readValue(req.getInputStream(),Message.class);
  42.         //将这个解析完成的消息，放在ArrayList数据结构中。保存在了服务器中
  43.         messageList.add(message);
  44.         System.out.println("消息提交成功");
  45.  
  46.         //响应只是返回200报文，body为空，此时不需熬额外处理，默认就是返回200.
  47.     }
  48. }

这个时候，前端和后端已经搭建完成，这个时候我们在浏览器上输入127.0.0.1:8080/message_wall/message_wall.html。就可以访问到这个页面

这个时候，在对话框中输入内容，点击提交之后，数据就会保存在服务器的messageList对象中。下一次打开这页面或者刷新之后，这个留言是一直存在的，但是当服务器重启之后，之前的留言就不存在了，因为我们使用的是Arraylist来存储数据，这样存储的数据只是在内存中，内存中的数据会随着程序的开启和关闭而消失，并不能永久保存。想要永久保存就需要使用数据库或者将数据存储成文件的格式，这两种方案都会将数据存储在硬盘中。这里我们使用数据库来将数据永久保存。

1、数据的永久化保存 

1️⃣引入数据库依赖

这里我们在中央仓库中输入MySQL。找到Mysql Connector Java。

 进入之后，选择5.1系列的版本，点击之后，将Maven中的代码拷贝到pom.xml中。就算引入数据依赖成功。

 2️⃣创建数据库和数据表

 这里创建数据表的时候，需要注意的是from和to 是关键字，需要使用反引号（`)，将其引住。

 3️⃣编写数据库代码

  1. import com.fasterxml.jackson.databind.ObjectMapper;
  2. import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;
  3.  
  4. import javax.servlet.ServletException;
  5. import javax.servlet.annotation.WebServlet;
  6. import javax.servlet.http.HttpServlet;
  7. import javax.servlet.http.HttpServletRequest;
  8. import javax.servlet.http.HttpServletResponse;
  9. import javax.sql.DataSource;
  10. import java.io.IOException;
  11. import java.sql.Connection;
  12. import java.sql.PreparedStatement;
  13. import java.sql.ResultSet;
  14. import java.sql.SQLException;
  15. import java.util.ArrayList;
  16. import java.util.List;
  17.  
  18.  
  19. class Message{
  20.     public String from;
  21.     public String to;
  22.     public String message;
  23. }
  24.  
  25. @WebServlet("/message")
  26. public class MessageServlet extends HttpServlet {
  27.     private ObjectMapper objectMapper = new ObjectMapper();
  28.  
  29.     @Override
  30.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  31.         //通过这个方法来处理"获取所有留言消息"
  32.         //需要返回一个json字符串数组，Jackson直接帮我们处理好了格式。
  33.         //创建一个load方法从数据库中加载数据，传递给messageList对象
  34.         List<Message> messageList = load();
  35.         String respString = objectMapper.writeValueAsString(messageList);
  36.         //这个list中的每一个元素，就是数组中的每一个元素。
  37.         resp.setContentType("application/json;charset=utf8");
  38.         //最后将Jason字符串整体返回响应即可
  39.         resp.getWriter().write(respString);
  40.  
  41.     }
  42.  
  43.     @Override
  44.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  45.         //通过这个方法来处理"提交新消息"
  46.         //通过这个方法，将提交的信息按照Message类的格式解析 ，用message对象接收
  47.         Message message = objectMapper.readValue(req.getInputStream(),Message.class);
  48.  
  49.         save(message);
  50.         System.out.println("消息提交成功");
  51.  
  52.         //响应只是返回200报文，body为空，此时不需熬额外处理，默认就是返回200.
  53.     }
  54.  
  55.     //使用这个方法从数据库中查询所有所有记录
  56.     private List<Message> load()  {
  57.         List<Message> messageList = new ArrayList<>();
  58.         DataSource dataSource = new MysqlDataSource();
  59.         ((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/message_wall?characterEncoding=utf8&useSSL=false");
  60.         ((MysqlDataSource)dataSource).setUser("root");
  61.         ((MysqlDataSource)dataSource).setPassword("991218zf");
  62.  
  63.         try{
  64.             //建立连接
  65.             Connection connection = dataSource.getConnection();
  66.             String sql = "select * from message";
  67.             PreparedStatement statement = connection.prepareStatement(sql);
  68.             //执行这个sql语句
  69.             ResultSet resultSet = statement.executeQuery();
  70.  
  71.             while(resultSet.next()){
  72.                 Message message = new Message();
  73.                 //这里参数中from与列名中的from是匹配的
  74.                 message.from = resultSet.getString("from");
  75.                 message.to = resultSet.getString("to");
  76.                 message.message = resultSet.getString("message");
  77.                 messageList.add(message);
  78.             }
  79.             resultSet.close();
  80.             statement.close();
  81.             connection.close();
  82.         }catch(SQLException e){
  83.             e.printStackTrace();
  84.         }
  85.         return messageList;
  86.     }
  87.     //使用这个方法向数据库中存入一条记录
  88.     private void save(Message message)  {
  89.         DataSource dataSource = new MysqlDataSource();
  90.         ((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/message_wall?characterEncoding=utf8&useSSL=false");
  91.         ((MysqlDataSource)dataSource).setUser("root");
  92.         ((MysqlDataSource)dataSource).setPassword("991218zf");
  93.  
  94.         try{
  95.             //建立连接
  96.             Connection connection = dataSource.getConnection();
  97.             String sql = "insert into message values(?,?,?)";
  98.             PreparedStatement statement = connection.prepareStatement(sql);
  99.             statement.setString(1,message.from);
  100.             statement.setString(2,message.to);
  101.             statement.setString(3,message.message);
  102.             //执行这个sql语句
  103.             statement.executeUpdate();
  104.             statement.close();
  105.             connection.close();
  106.         }catch(SQLException e){
  107.             e.printStackTrace();
  108.         }
  109.     }
  110. }

✨这里需要注意的是executeQuery方法和executeUpdate方法的执行。

  1. executeQuery方法是用来执行查询操作的，当select对数据库做查询时，用该方法，且executeQuery方法会建立一个ResultSet的对象保存查询的结果。
  2. Insert、Update、delete等操作，可用executeUpdate方法执行。

2、小结

上面的代码，就构成了一个简单的网站，将来写的很多复杂的网站，都是这样一套逻辑

  1. 约定前后端交互接口
  2. 实现服务器代码（通常会操作数据库）
  3. 实现客户端代码（通常会使用ajax构造请求，并使用一些js的web api操作页面内容）

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/算法创新者/article/detail/61686
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号