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

文章目录

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

一、准备工作

1) 创建 maven 项目
 
2) 定制开发创建必要的目录 webapp, WEB-INF, web.xml；web.xml如下：
  1. <!DOCTYPE web-app PUBLIC
  2.         "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
  3.         "http://java.sun.com/dtd/web-app_2_3.dtd" >
  4. <web-app>
  5.      <display-name>Archetype Created Web Application</display-name>
  6. </web-app>

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<Message> 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.  <script src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
  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; i<edits.length; 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 访问服务器, 即可看
到 。

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

五、数据存入文件

在上面的代码中，我们是把数据保存在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<Message> 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<Message> messageList = load();
  21.         objectMapper.writeValue(resp.getWriter(),messageList);
  22.     }
  23.     private List<Message> load(){
  24.         //把读到的数据放到List<Message>中
  25.         List<Message> 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 + '');
  67.         }catch (IOException e){
  68.             e.printStackTrace();
  69.         }
  70.     }
  71. }

六、数据存入数据库

1) 在 pom.xml 中引入 mysql 的依赖
  1.         <dependency>
  2.             <groupId>mysql</groupId>
  3.             <artifactId>mysql-connector-java</artifactId>
  4.             <version>5.1.47</version>
  5.         </dependency>
2) 创建数据库, 创建 messages 表

 

 3) 创建 类

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<Message> messageList = load();
  7.         objectMapper.writeValue(resp.getWriter(),messageList);
  8.     }
  9.     private List<Message> load(){
  10.         //把读到的数据放到List<Message>中
  11.         List<Message> 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.     }

 

 

 

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发