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

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,高可用系列 2核4GB
简介: 表白墙服务器版【交互接口、服务器端代码、前端代码、数据存入文件/数据库】

1667916863270.jpg

一、准备工作


1) 创建 maven 项目

2) 创建必要的目录 webapp, WEB-INF, web.xml;web.xml如下:

<!DOCTYPE web-app PUBLIC
        "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
        "http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
     <display-name>Archetype Created Web Application</display-name>
</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}


三、实现服务器端代码


//这个类表示一条消息的数据格式

class Message{
        public String from;
        public String to;
        public String message;
}
@WebServlet("/message")
public class MessageServlet extends HttpServlet {
    // 用于转换 JSON 字符串
    private ObjectMapper objectMapper = new ObjectMapper();
    // 用于保存所有的留言
    private List<Message> messageList = new ArrayList<>();
    //doGet方法用来从服务器上获取消息
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/json;charset=utf-8");
        //writeValue就是把messageList对象转换成json格式的字符串,并通过写入响应(resp.getWriter())返回
        objectMapper.writeValue(resp.getWriter(),messageList);
    }
    //doPost方法用来把客户端的数据提交到服务器
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //readValue第一个参数可以支持一个字符串,也可以放inputStream对象;第二个参数是用来接收读取到的结果
        //返回值放到Message对象中
        //通过这个代码就完成了读取body,并且解析成json的过程
        Message message = objectMapper.readValue(req.getInputStream(),Message.class);
        messageList.add(message);
        resp.setContentType("application/json;charset=utf-8");
        resp.getWriter().write("{\"ok\":1}");
    }
}


四、调整前端页面代码


<script src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        //1.在页面加载的时候访问服务器,从服务器这边获取到消息列表,并展示出来
        function load(){
            $.ajax({
                type:'GET',
                url:'message',
                success: function(data,status){
                    let container = document.querySelector('.container');
                    for(let message of data){
                        let row = document.createElement('div');
                        row.className = 'row';
                        row.innerHTML = message.from + '对' + message.to + '说: ' + message.message;
                        container.appendChild(row);
                    }
                }
            });
        }
        load();
        //2.点击提交按钮的时候,把当前的数据构造成一个http请求,发送给服务器
        let submitButon = document.querySelector('#submit');
        submitButon.onclick = function(){
            //1.先获取到编辑框中的内容
            let edits = document.querySelectorAll('.edit');
            console.log(edits);
            let from = edits[0].value;
            let to = edits[1].value;
            let message = edits[2].value;
            console.log(from+'对'+to+'说,'+message);
            if(from == '' || to == '' || message == ''){
                return;
            }   
            //2.根据内容构造html元素(.row里面包含用户输入的话
            let row = document.createElement('div');
            row.className = 'row';
            row.innerHTML = from+'对'+to+'说,'+message;
            //3.把这个元素添加到DOM树上
            let container = document.querySelector('.container');
            container.appendChild(row);
            //4.清空原来的输入框
            for(let i=0; i<edits.length; i++){
                edits[i].value = '';
            }
            //5.构造成一个http请求,发送给服务器
            $.ajax({
                type:'POST',
                url:'message',
                //data里面就是body数据
                data: JSON.stringify({from:from, to:to, message:message}),
                contentType: "application/json;charset=utf-8",
                success: function(data,status){
                    if(data.ok == 1){
                        console.log('提交成功');
                    }else{
                        console.log('提交失败');
                    }
                }
            })
        }
    </script>

此时在浏览器通过 URL http://127.0.0.1:8080/messageWall924/表白墙.html 访问服务器 , 即可看

到 。

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


五、数据存入文件


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

FileWriter fileWriter = new FileWriter(filePath,true)

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


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


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


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


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

class Message{
        public String from;
        public String to;
        public String message;
}
@WebServlet("/message")
public class MessageServlet extends HttpServlet {
    // 用于转换 JSON 字符串
    private ObjectMapper objectMapper = new ObjectMapper();
    // 用于保存所有的留言
//    private List<Message> messageList = new ArrayList<>();
    //保存文件的路径
    private String filePath = "d:code/java/messageWall924/messages924.txt";
    //doGet方法用来从服务器上获取消息
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/json;charset=utf-8");
        //writeValue就是把messageList对象转换成json格式的字符串,并通过写入响应(resp.getWriter())返回
        List<Message> messageList = load();
        objectMapper.writeValue(resp.getWriter(),messageList);
    }
    private List<Message> load(){
        //把读到的数据放到List<Message>中
        List<Message> messageList = new ArrayList<>();
        System.out.println("开始从文件加载数据!");
        //此处需要按行读取,FileReader不支持,需要套上一层BufferedReader
        try(BufferedReader bufferedReader = new BufferedReader(new FileReader(filePath))){
            while (true){
                String line = bufferedReader.readLine();
                if (line == null){
                    break;
                }
                //读取到的内容,就解析成Message对象
                String[] tokens = line.split("\t");
                Message message = new Message();
                message.from = tokens[0];
                message.to = tokens[1];
                message.message = tokens[2];
                messageList.add(message);
            }
        }catch (IOException e){
            e.printStackTrace();
        }
        return messageList;
    }
    //doPost方法用来把客户端的数据提交到服务器
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //readValue第一个参数可以支持一个字符串,也可以放inputStream对象;第二个参数是用来接收读取到的结果
        //返回值放到Message对象中
        //通过这个代码就完成了读取body,并且解析成json的过程
        Message message = objectMapper.readValue(req.getInputStream(),Message.class);
        //这里进行一个写文件操作
        save(message);
        resp.setContentType("application/json;charset=utf-8");
        resp.getWriter().write("{\"ok\":1}");
    }
    private void save(Message message){
        System.out.println("数据开始写入文件");
        try(FileWriter fileWriter = new FileWriter(filePath,true)){
            fileWriter.write(message.from + '\t' + message.to +
                    '\t' + message.message + '\n');
        }catch (IOException e){
            e.printStackTrace();
        }
    }
}


六、数据存入数据库


1) 在 pom.xml 中引入 mysql 的依赖

 

<dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
        </dependency>

2) 创建数据库 , 创建 messages 表

1667917052790.jpg

3) 创建 DBUtil 类


DBUtil 类主要实现以下功能 :

创建 MysqlDataSource 实例 , 设置 URL, username, password 等属性。

提供 getConnection 方法 , 和 MySQL 服务器建立连接。

提供 close 方法 , 用来释放必要的资源。

public class DBUtil {
    private static final String URL = "jdbc:mysql://127.0.0.1:3306/messageWall924?characterEncoding=utf8&useSSL=false";
    private static final String USERNAME = "root";
    private static final String PASSWORD = "1234";
    private static volatile DataSource dataSource = null;
    public static DataSource getDataSource(){
        if (dataSource == null){
            synchronized (DBUtil.class){
                if (dataSource == null){
                    dataSource = new MysqlDataSource();
                    ((MysqlDataSource)dataSource).setURL(URL);
                    ((MysqlDataSource)dataSource).setUser(USERNAME);
                    ((MysqlDataSource)dataSource).setPassword(PASSWORD);
                }
            }
        }
        return dataSource;
    }
    public static Connection getConnection() throws SQLException {
        return getDataSource().getConnection();
    }
    public static void close(Connection connection, PreparedStatement statement, ResultSet resultSet){
        if (resultSet != null){
            try {
                resultSet.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (statement != null){
            try {
                statement.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (connection != null){
            try {
                connection.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}

4) 修改 load 和 save 方法, 改成操作数据库

@Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //readValue第一个参数可以支持一个字符串,也可以放inputStream对象;第二个参数是用来接收读取到的结果
        //返回值放到Message对象中
        //通过这个代码就完成了读取body,并且解析成json的过程
        Message message = objectMapper.readValue(req.getInputStream(),Message.class);
        //这里进行一个写数据操作
        save(message);
        resp.setContentType("application/json;charset=utf-8");
        resp.getWriter().write("{\"ok\":1}");
    }
    private void save(Message message){
        System.out.println("向数据库写入数据!");
        //1.先和数据库建立连接
        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);
            //执行sql
            int ret = statement.executeUpdate();
            if (ret == 1){
                System.out.println("插入数据库成功");
            }else {
                System.out.println("插入数据库失败");
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            DBUtil.close(connection,statement,null);
        }
    }
    //doGet方法用来从服务器上获取消息
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/json;charset=utf-8");
        //writeValue就是把messageList对象转换成json格式的字符串,并通过写入响应(resp.getWriter())返回
        List<Message> messageList = load();
        objectMapper.writeValue(resp.getWriter(),messageList);
    }
    private List<Message> load(){
        //把读到的数据放到List<Message>中
        List<Message> messageList = new ArrayList<>();
        System.out.println("从数据库开始读取数据!");
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        try {
            connection = DBUtil.getConnection();
            String sql = "select * from message";
            statement  = connection.prepareStatement(sql);
            resultSet = statement.executeQuery();
            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 {
            DBUtil.close(connection,statement,resultSet);
        }
        return messageList;
    }
相关实践学习
如何在云端创建MySQL数据库
开始实验后,系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
2月前
|
弹性计算 网络安全
阿里云国际OpenAPI多接口快速管理ECS服务器教程
阿里云国际OpenAPI多接口快速管理ECS服务器教程
|
6天前
|
缓存 监控 前端开发
探索前端性能优化:关键策略与代码实例
本文深入探讨前端性能优化的关键策略,结合实际代码示例,帮助开发者提升网页加载速度和用户体验,涵盖资源压缩、懒加载、缓存机制等技术。
|
11天前
|
Oracle 关系型数据库 数据库
Oracle数据恢复—Oracle数据库文件有坏快损坏的数据恢复案例
一台Oracle数据库打开报错,报错信息: “system01.dbf需要更多的恢复来保持一致性,数据库无法打开”。管理员联系我们数据恢复中心寻求帮助,并提供了Oracle_Home目录的所有文件。用户方要求恢复zxfg用户下的数据。 由于数据库没有备份,无法通过备份去恢复数据库。
|
2月前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
135 3
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
19天前
|
Web App开发 缓存 监控
前端性能优化实战:从代码到部署的全面策略
前端性能优化实战:从代码到部署的全面策略
20 1
|
22天前
|
前端开发 JavaScript
前端界的革命:掌握这些新技术,让你的代码简洁到让人惊叹!
前端技术的快速发展带来了许多令人惊叹的新特性。ES6及其后续版本引入了箭头函数、模板字符串等简洁语法,极大减少了代码冗余。React通过虚拟DOM和组件化思想,提高了代码的可维护性和效率。Webpack等构建工具通过模块化和代码分割,优化了应用性能和加载速度。这些新技术正引领前端开发的革命,使代码更加简洁、高效、可维护。
22 2
|
22天前
|
前端开发 JavaScript 测试技术
前端工程师的必修课:如何写出优雅、可维护的代码?
前端工程作为数字世界的门面,编写优雅、可维护的代码至关重要。本文从命名规范、模块化设计、注释与文档、遵循最佳实践四个方面,提供了提升代码质量的方法。通过清晰的命名、合理的模块划分、详细的注释和持续的学习,前端工程师可以写出高效且易于维护的代码,为项目的成功打下坚实基础。
29 2
|
28天前
|
监控 前端开发 JavaScript
前端开发的终极奥义:如何让你的代码既快又美,还不易出错?
【10月更文挑战第31天】前端开发是一个充满挑战与机遇的领域,本文从性能优化、代码美化和错误处理三个方面,探讨了如何提升代码的效率、可读性和健壮性。通过减少DOM操作、懒加载、使用Web Workers等方法提升性能;遵循命名规范、保持一致的缩进与空行、添加注释与文档,让代码更易读;通过输入验证、try-catch捕获异常、日志与监控,增强代码的健壮性。追求代码的“快、美、稳”,是每个前端开发者的目标。
34 3
|
29天前
|
前端开发 JavaScript 开发者
前端开发的终极技巧:如何让你的代码既简洁又高效,还能减少bug?
【10月更文挑战第30天】前端开发充满挑战与创新,如何编写简洁高效且少bug的代码是开发者关注的重点。本文介绍五大技巧:1. 模块化,提高代码复用性;2. 组件化,降低代码耦合度;3. 使用现代框架,提高开发效率;4. 统一代码规范,降低沟通成本;5. 利用工具,优化代码质量。掌握这些技巧,让前端开发更高效。
60 1
|
1月前
|
前端开发 JavaScript 开发者
揭秘前端高手的秘密武器:深度解析递归组件与动态组件的奥妙,让你代码效率翻倍!
【10月更文挑战第23天】在Web开发中,组件化已成为主流。本文深入探讨了递归组件与动态组件的概念、应用及实现方式。递归组件通过在组件内部调用自身,适用于处理层级结构数据,如菜单和树形控件。动态组件则根据数据变化动态切换组件显示,适用于不同业务逻辑下的组件展示。通过示例,展示了这两种组件的实现方法及其在实际开发中的应用价值。
36 1