文章
文章用户商城文档资讯沸点导航
!
也想出现在这里？ 联系我们吧
广告区块

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

文章目录

  • 一、准备工作
  • 二、约定前后端交互接口
  • 三、实现服务器端代码
  • 四、调整前端页面代码
  • 五、数据存入文件
  • 六、数据存入数据库
  • 表白墙服务器版【交互接口、服务器端代码、前端代码、数据存入文件/数据库】

一、准备工作

1)
创建
maven
项目
2)
创建必要的目录
webapp, WEB-INF, web.xml；web.xml如下： 
  1. /div>
  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
    7. 

    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
表
表白墙服务器版【交互接口、服务器端代码、前端代码、数据存入文件/数据库】

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.     }
表白墙服务器版【交互接口、服务器端代码、前端代码、数据存入文件/数据库】

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/crazy_xieyi/article/details/127035000
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯
个人中心
购物车
优惠劵
有新私信 私信列表
搜索

  • 扫码打开当前页

返回顶部