• 表白墙服务器版【交互接口、服务器端代码、前端代码、数据存入文件/数据库】

    文章目录

    • 一、准备工作
    • 二、约定前后端交互接口
    • 三、实现服务器端代码
    • 四、调整前端页面代码
    • 五、数据存入文件
    • 六、数据存入数据库
    • a46959635a9a4887b871e33e071411f3.png

    一、准备工作

    1) 创建 maven 项目
     
    2) 创建必要的目录 webapp, WEB-INF, web.xml；web.xml如下： 
    2.         "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
    3.         "http://java.sun.com/dtd/web-app_2_3.dtd" >
    5.      Archetype Created Web Application

    3) 引入依赖（Servlet、Jackson）

    4) 把表白墙前端页面代码拷贝到 webapp 目录中

     

    二、约定前后端交互接口

    所谓 "前后端交互接口" 是进行 Web 开发中的关键环节。

    为了完成前后端交互，要约定两个交互接口：

    1.从服务器上获取到所有消息：

    请求: GET/message

    响应: JSON 格式

    {

           {from:"xxx" ，to:"xxx", message:"xxxxxx"}

            ..............

            .............

    }

    2.往服务器上提交数据

    请求: body 也为 JSON 格式    

    POST/message

     {from:"xxx" ，to:"xxx", message:"xxxxxx"}

    响应: JSON 格式

    {ok:1}

    三、实现服务器端代码 

    1. //这个类表示一条消息的数据格式
    2. class Message{
    3.         public String from;
    4.         public String to;
    5.         public String message;
    6. }
    7. @WebServlet("/message")
    8. public class MessageServlet extends HttpServlet {
    9.     // 用于转换 JSON 字符串
    10.     private ObjectMapper objectMapper = new ObjectMapper();
    11.     // 用于保存所有的留言
    12.     private List messageList = new ArrayList<>();
    13.  
    14.     //doGet方法用来从服务器上获取消息
    15.     @Override
    16.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    17.         resp.setContentType("application/json;charset=utf-8");
    18.         //writeValue就是把messageList对象转换成json格式的字符串，并通过写入响应(resp.getWriter())返回
    19.         objectMapper.writeValue(resp.getWriter(),messageList);
    20.     }
    21.  
    22.     //doPost方法用来把客户端的数据提交到服务器
    23.     @Override
    24.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    25.         //readValue第一个参数可以支持一个字符串，也可以放inputStream对象;第二个参数是用来接收读取到的结果
    26.         //返回值放到Message对象中
    27.         //通过这个代码就完成了读取body，并且解析成json的过程
    28.         Message message = objectMapper.readValue(req.getInputStream(),Message.class);
    29.         messageList.add(message);
    30.         resp.setContentType("application/json;charset=utf-8");
    31.         resp.getWriter().write("{\"ok\":1}");
    32.     }
    33. }

    四、调整前端页面代码

    1.  
    2.     <script>
    3.         //1.在页面加载的时候访问服务器，从服务器这边获取到消息列表，并展示出来
    4.         function load(){
    5.             $.ajax({
    6.                 type:'GET',
    7.                 url:'message',
    8.                 success: function(data,status){
    9.                     let container = document.querySelector('.container');
    10.                     for(let message of data){
    11.                         let row = document.createElement('div');
    12.                         row.className = 'row';
    13.                         row.innerHTML = message.from + '对' + message.to + '说： ' + message.message;
    14.                         container.appendChild(row);
    15.                     }
    16.                 }
    17.             });
    18.         }
    19.         load();
    20.         //2.点击提交按钮的时候，把当前的数据构造成一个http请求，发送给服务器
    21.         let submitButon = document.querySelector('#submit');
    22.         submitButon.onclick = function(){
    23.             //1.先获取到编辑框中的内容
    24.             let edits = document.querySelectorAll('.edit');
    25.             console.log(edits);
    26.             let from = edits[0].value;
    27.             let to = edits[1].value;
    28.             let message = edits[2].value;
    29.             console.log(from+'对'+to+'说,'+message);
    30.             if(from == '' || to == '' || message == ''){
    31.                 return;
    32.             }   
    33.             //2.根据内容构造html元素（.row里面包含用户输入的话
    34.             let row = document.createElement('div');
    35.             row.className = 'row';
    36.             row.innerHTML = from+'对'+to+'说，'+message;
    37.             //3.把这个元素添加到DOM树上
    38.             let container = document.querySelector('.container');
    39.             container.appendChild(row);
    40.             //4.清空原来的输入框
    41.             for(let i=0; ilength; i++){
    42.                 edits[i].value = '';
    43.             }
    44.             //5.构造成一个http请求，发送给服务器
    45.             $.ajax({
    46.                 type:'POST',
    47.                 url:'message',
    48.                 //data里面就是body数据
    49.                 data: JSON.stringify({from:from, to:to, message:message}),
    50.                 contentType: "application/json;charset=utf-8",
    51.                 success: function(data,status){
    52.                     if(data.ok == 1){
    53.                         console.log('提交成功');
    54.                     }else{
    55.                         console.log('提交失败');
    56.                     }
    57.                 }
    58.             })
    59.         }
    60.     script>
    此时在浏览器通过 URL http://127.0.0.1:8080/messageWall924/表白墙.html访问服务器, 即可看
    到 。

     数据此时是存储在服务器的内存中 ( private List messages = new ArrayList(); ), 一旦服务器重启, 数据仍然会丢失。

    五、数据存入文件

    在上面的代码中，我们是把数据保存在messageList这个变量里面的，如果我们要把数据放在文件中，进行持久化存储，就不需要这变量了。

    FileWriter fileWriter = new FileWriter(filePath,true)

    java打开文件主要由三种方式：

    1.读方式打开（使用输入流对象的时候）

    2.写方式打开（使用输出流对象的时候）这种方式会清空原有内容

    3.追加写方式打开（使用输出流对象的时候） ，这种方式不会清空原有内容，而是直接在文件内容后面拼接。后面加上true就是追加写状态。

    数据存入文件完整代码如下：

    1. class Message{
    2.         public String from;
    3.         public String to;
    4.         public String message;
    5. }
    6. @WebServlet("/message")
    7. public class MessageServlet extends HttpServlet {
    8.     // 用于转换 JSON 字符串
    9.     private ObjectMapper objectMapper = new ObjectMapper();
    10.     // 用于保存所有的留言
    11. //    private List messageList = new ArrayList<>();
    12.  
    13.     //保存文件的路径
    14.     private String filePath = "d:code/java/messageWall924/messages924.txt";
    15.     //doGet方法用来从服务器上获取消息
    16.     @Override
    17.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    18.         resp.setContentType("application/json;charset=utf-8");
    19.         //writeValue就是把messageList对象转换成json格式的字符串，并通过写入响应(resp.getWriter())返回
    20.         List messageList = load();
    21.         objectMapper.writeValue(resp.getWriter(),messageList);
    22.     }
    23.     private List load(){
    24.         //把读到的数据放到List中
    25.         List messageList = new ArrayList<>();
    26.         System.out.println("开始从文件加载数据！");
    27.         //此处需要按行读取，FileReader不支持，需要套上一层BufferedReader
    28.         try(BufferedReader bufferedReader = new BufferedReader(new FileReader(filePath))){
    29.             while (true){
    30.                 String line = bufferedReader.readLine();
    31.                 if (line == null){
    32.                     break;
    33.                 }
    34.                 //读取到的内容，就解析成Message对象
    35.                 String[] tokens = line.split("\t");
    36.                 Message message = new Message();
    37.                 message.from = tokens[0];
    38.                 message.to = tokens[1];
    39.                 message.message = tokens[2];
    40.                 messageList.add(message);
    41.             }
    42.         }catch (IOException e){
    43.             e.printStackTrace();
    44.         }
    45.         return messageList;
    46.     }
    47.  
    48.     //doPost方法用来把客户端的数据提交到服务器
    49.     @Override
    50.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    51.         //readValue第一个参数可以支持一个字符串，也可以放inputStream对象;第二个参数是用来接收读取到的结果
    52.         //返回值放到Message对象中
    53.         //通过这个代码就完成了读取body，并且解析成json的过程
    54.         Message message = objectMapper.readValue(req.getInputStream(),Message.class);
    55.         //这里进行一个写文件操作
    56.         save(message);
    57.  
    58.  
    59.         resp.setContentType("application/json;charset=utf-8");
    60.         resp.getWriter().write("{\"ok\":1}");
    61.     }
    62.     private void save(Message message){
    63.         System.out.println("数据开始写入文件");
    64.         try(FileWriter fileWriter = new FileWriter(filePath,true)){
    65.             fileWriter.write(message.from + '\t' + message.to +
    66.                     '\t' + message.message + '\n');
    67.         }catch (IOException e){
    68.             e.printStackTrace();
    69.         }
    70.     }
    71. }

    六、数据存入数据库

    1) 在 pom.xml 中引入 mysql 的依赖 
    1.         
    2.             mysql
    3.             mysql-connector-java
    4.             5.1.47
    5.
    2) 创建数据库, 创建 messages 表
    1249ea2809ed445f8f5f35dc31bc20b9.png

     

     3) 创建 DBUtil 类

    DBUtil 类主要实现以下功能:
    创建 MysqlDataSource 实例, 设置 URL, username, password 等属性。
    提供 getConnection 方法, 和 MySQL 服务器建立连接。
    提供 close 方法, 用来释放必要的资源。 
    1. public class DBUtil {
    2.     private static final String URL = "jdbc:mysql://127.0.0.1:3306/messageWall924?characterEncoding=utf8&useSSL=false";
    3.     private static final String USERNAME = "root";
    4.     private static final String PASSWORD = "1234";
    5.  
    6.     private static volatile DataSource dataSource = null;
    7.  
    8.     public static DataSource getDataSource(){
    9.         if (dataSource == null){
    10.             synchronized (DBUtil.class){
    11.                 if (dataSource == null){
    12.                     dataSource = new MysqlDataSource();
    13.                     ((MysqlDataSource)dataSource).setURL(URL);
    14.                     ((MysqlDataSource)dataSource).setUser(USERNAME);
    15.                     ((MysqlDataSource)dataSource).setPassword(PASSWORD);
    16.                 }
    17.             }
    18.         }
    19.         return dataSource;
    20.     }
    21.  
    22.     public static Connection getConnection() throws SQLException {
    23.         return getDataSource().getConnection();
    24.     }
    25.  
    26.     public static void close(Connection connection, PreparedStatement statement, ResultSet resultSet){
    27.         if (resultSet != null){
    28.             try {
    29.                 resultSet.close();
    30.             } catch (SQLException e) {
    31.                 e.printStackTrace();
    32.             }
    33.         }
    34.         if (statement != null){
    35.             try {
    36.                 statement.close();
    37.             } catch (SQLException e) {
    38.                 e.printStackTrace();
    39.             }
    40.         }
    41.         if (connection != null){
    42.             try {
    43.                 connection.close();
    44.             } catch (SQLException e) {
    45.                 e.printStackTrace();
    46.             }
    47.         }
    48.     }
    49. }
    4) 修改 load 和 save 方法, 改成操作数据库 
    1.  
    2.     @Override
    3.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    4.         //readValue第一个参数可以支持一个字符串，也可以放inputStream对象;第二个参数是用来接收读取到的结果
    5.         //返回值放到Message对象中
    6.         //通过这个代码就完成了读取body，并且解析成json的过程
    7.         Message message = objectMapper.readValue(req.getInputStream(),Message.class);
    8.         //这里进行一个写数据操作
    9.         save(message);
    10.         resp.setContentType("application/json;charset=utf-8");
    11.         resp.getWriter().write("{\"ok\":1}");
    12.     }
    13.     private void save(Message message){
    14.         System.out.println("向数据库写入数据！");
    15.  
    16.         //1.先和数据库建立连接
    17.         Connection connection = null;
    18.         PreparedStatement statement = null;
    19.         try {
    20.             //1.先和数据库建立连接
    21.             connection = DBUtil.getConnection();
    22.             //2.拼装sql
    23.             String sql = "insert into message values(?,?,?)";
    24.             statement = connection.prepareStatement(sql);
    25.             statement.setString(1,message.from);
    26.             statement.setString(2,message.to);
    27.             statement.setString(3,message.message);
    28.             //执行sql
    29.             int ret = statement.executeUpdate();
    30.             if (ret == 1){
    31.                 System.out.println("插入数据库成功");
    32.             }else {
    33.                 System.out.println("插入数据库失败");
    34.             }
    35.         } catch (SQLException e) {
    36.             e.printStackTrace();
    37.         }finally {
    38.             DBUtil.close(connection,statement,null);
    39.         }
    40.     }
    1.     //doGet方法用来从服务器上获取消息
    2.     @Override
    3.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    4.         resp.setContentType("application/json;charset=utf-8");
    5.         //writeValue就是把messageList对象转换成json格式的字符串，并通过写入响应(resp.getWriter())返回
    6.         List messageList = load();
    7.         objectMapper.writeValue(resp.getWriter(),messageList);
    8.     }
    9.     private List load(){
    10.         //把读到的数据放到List中
    11.         List messageList = new ArrayList<>();
    12.         System.out.println("从数据库开始读取数据！");
    13.         Connection connection = null;
    14.         PreparedStatement statement = null;
    15.         ResultSet resultSet = null;
    16.         try {
    17.             connection = DBUtil.getConnection();
    18.             String sql = "select * from message";
    19.             statement  = connection.prepareStatement(sql);
    20.             resultSet = statement.executeQuery();
    21.             while (resultSet.next()){
    22.                 Message message = new Message();
    23.                 message.from = resultSet.getString("from");
    24.                 message.to = resultSet.getString("to");
    25.                 message.message = resultSet.getString("message");
    26.                 messageList.add(message);
    27.             }
    28.         } catch (SQLException e) {
    29.             e.printStackTrace();
    30.         }finally {
    31.             DBUtil.close(connection,statement,resultSet);
    32.         }
    33.         return messageList;
    34.     }

     

     

     

  • 相关阅读:
    [附源码]java毕业设计音乐交流平台
    SD-Branch多分支组网解决方案
    Android 9.0 设备蓝牙、位置、WIFI、NFC功能默认关闭
    NNDL实验 优化算法3D轨迹 鱼书例题3D版
    [Python]搭建虚拟环境与Django项目的创建(Windows)
    centos8同步时间安装时间校准服务
    如何设计一个分布式 ID 发号器？
    SQL之join的简单用法
    【C语言】编程题专项练习+答案
    【PickerView案例14-复习第一天内容 Objective-C语言】
  • 原文地址：https://blog.csdn.net/crazy_xieyi/article/details/127035000