使用Servlet实现表白墙网站(前后端互联)小项目,Mac的M1(没有setting)在哪里找到Setting页面,下载smart tomcat及smart tomcat的配置。(二)

简介: 使用Servlet实现表白墙网站(前后端互联)小项目,Mac的M1(没有setting)在哪里找到Setting页面,下载smart tomcat及smart tomcat的配置。

三、编写前端代码 💫

这里面的get和POST方法,和后端的相互对应,前端发出post,后端去接收,并且,在服务器的日志上显示,前端的GET,被后端进行的保存,只要服务器没有关闭,就会一致保存你的记录(前端编写的就是说,让记录保存在页面上,你下次打开页面(但是服务器未关闭的情况下),就会出现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
    <style>
        /* * 通配符选择器, 是选中页面所有元素 */
        * {
            /* 消除浏览器的默认样式. */
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container {
            width: 600px;
            margin: 20px auto;
        }
        h1 {
            text-align: center;
        }
        p {
            text-align: center;
            color: #666;
            margin: 20px 0;
        }
        .row {
            /* 开启弹性布局 */
            display: flex;
            height: 40px;
            /* 水平方向居中 */
            justify-content: center;
            /* 垂直方向居中 */
            align-items: center;
        }
        .row span {
            width: 80px;
        }
        .row input {
            width: 200px;
            height: 30px;
        }
        .row button {
            width: 280px;
            height: 30px;
            color: white;
            background-color: orange;
            /* 去掉边框 */
            border: none;
            border-radius: 5px;
        }
        /* 点击的时候有个反馈 */
        .row button:active {
            background-color: grey;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入内容后点击提交, 信息会显示到下方表格中</p>
        <div class="row">
            <span>谁: </span>
            <input type="text">
        </div>
        <div class="row">
            <span>对谁: </span>
            <input type="text">
        </div>
        <div class="row">
            <span>说: </span>
            <input type="text">
        </div>
        <div class="row">
            <button id="submit">提交</button>
        </div>
        <!-- <div class="row">
            xxx 对 xx 说 xxxx
        </div> -->
    </div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        // 实现提交操作. 点击提交按钮, 就能够把用户输入的内容提交到页面上显示. 
        // 点击的时候, 获取到三个输入框中的文本内容
        // 创建一个新的 div.row 把内容构造到这个 div 中即可. 
        let containerDiv = document.querySelector('.container');
        let inputs = document.querySelectorAll('input');
        let button = document.querySelector('#submit');
        button.onclick = function() {
            // 1. 获取到三个输入框的内容
            let from = inputs[0].value;
            let to = inputs[1].value;
            let msg = inputs[2].value;
            if (from == '' || to == '' || msg == '') {
                return;
            }
            // 2. 构造新 div
            let rowDiv = document.createElement('div');
            rowDiv.className = 'row message';
            rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + msg;
            containerDiv.appendChild(rowDiv);
            // 3. 清空之前的输入框内容
            for (let input of inputs) {
                input.value = '';
            }
            // 4. 把用户输入的数据, 构造出 HTTP 请求, 发送给服务器. 
            let body = {
                //后三个变量是三个输入框的内容,前面的是字符串,后面的是变量名字
                from: from,
                to: to,
                message: msg
            };
            //1.ajax会根据输入的参数构造出http请求,发给服务器
            //2.服务器会执行对应的doPost方法
            $.ajax({
                type: 'post',
                //url;'message'这个和下面写法相同,只不过是相对路径还是绝对路径,相对路径的基准路径,就是html所在路径,写了相对路径message,相当于在message基础上,再加一层/messageWall/message
                // url: '',/Users/lcl/messageWall/src/main/java/MessageServlet.java
                url: 'message',
                contentType: 'application/json; charset=utf-8',
                //js,中对象虽然和json非常相似,但是仍然是两个不同的东西,js标准库,提供了JSON.stringify方法,把js对象转换成json字符串(writeValueAsString)
                //还提供了JSON.parse,把json字符串转换成js对象(readValue)
                data: JSON.stringify(body),
                //3.响应回来之后,执行刚才设计好的success回调函数
                success: function(body) {
                    // 预期 body 中返回 ok
                    console.log(body);
                }
            });
        }
        //页面加载的时候,发送一个GET请求给服务器,从服务器拿到提交过的数据
        $.ajax({
            type:'get',
            url:'message',
            success:function (body) {
                //此时也需要把这个json字符串,反向转换回js对象数组,但是实际上,jQuery自动帮我们做好了这里的解析操作(  resp.setContentType("application/json; charset=utf8");由于这个操作,服务器返回响应,所以它会转换成js对象数组),此时形参body,已经是js的对象数组了,不需要我们使用JSON.parse进行解析
                //此时就可以直接按照数组的方式来操作body,每个元素都是js对象
                //1.遍历数组,取出每个js对象
                //2.根据这里的js对象构造出页面元素,显示到页面上
                //经典的循环,定义变量使用let,而不是int,js表示数字是number类型,包含了int和double
                //刚创建出的div,还需要加入到页面才能显示出来
                //这个可以根据选择器,找到那个元素(相当于去派出所)
                let container=document.querySelector('.container');
                for(let i=0;i<body.length;i++){
                    let message=body[i];
                    //此处message对象,就形如
                   /*{
                        from:""
                        to:""
                        message:""
                   }*/
                   // 构造出html元素,使用浏览器提供的api
                    //html中的每个元素,同时都可以映射js中的一个对象
                    //通过对象的属性,也就能获取到页面的内容
                    //修改对象的属性,也就能更新页面的内容,这样也被叫做"文档对象模型"(文档html,js对象)
                    let div=document.createElement('div');
                    //设置一个css的类,应用到css样式了
                    div.className='row';
                    //给div标签设置内容,此处显示一行文本,终点理解前后端交互流程
                    div.innerHTML=message.from+"对"+message.to+"说:"+message.message;
                    //上户口的意思
                    container.appendChild(div);
                }
            }
        })
    </script>
</body>
</html>

最后你连接的过程可能有几个误区.

1.你的前端页面不是说你在vs打开,而是说你的页面在服务器开始启动的时候,就已经被上传到TOMCAT上了,这时候你就需要在浏览器搜索,你设置的这个东西这里有人会疑惑,messageWall是什么,后面那个是你的前端名字,前面那个是你的url路径,你可以自己去设置,Context path(这个)

2.静态页面(html,css)需要放到webapp目录下面(不是WEB-INF)

相关文章
|
27天前
|
前端开发 安全 测试技术
Postman Mac 版安装终极指南:从下载到流畅运行,一步到位
Postman 是 API 开发与测试的高效工具,支持各类 HTTP 请求调试与团队协作。本文详解 Mac 版下载、安装步骤,助你快速上手。同时推荐一体化 API 协作平台 Apifox,集文档、调试、测试于一体,提升开发效率与团队协同能力。
|
27天前
|
缓存 Java 应用服务中间件
Spring Boot配置优化:Tomcat+数据库+缓存+日志,全场景教程
本文详解Spring Boot十大核心配置优化技巧,涵盖Tomcat连接池、数据库连接池、Jackson时区、日志管理、缓存策略、异步线程池等关键配置,结合代码示例与通俗解释,助你轻松掌握高并发场景下的性能调优方法,适用于实际项目落地。
252 4
|
4月前
|
Java 应用服务中间件 Linux
在Java 12环境中配置和部署Apache Tomcat的步骤。
这段部署Tomcat的冒险旅程充满技术挑战,但同时也像游戏一样充满乐趣。它需要你提前准备,仔细执行,并随时准备解决意外情况。成功后,你就可以在这匹强壮的网络野马上,带着你的Java应用,冲向Web开发的璀璨星空。
143 56
|
5月前
|
Java 应用服务中间件 Maven
在IntelliJ IDEA中如何配置使用Maven以创建Tomcat环境
所以,别担心这些工具看起来有些吓人,实际上这些都是为了帮助你更好的完成工作的工具,就像超市里的各种烹饪工具一样,尽管它们看起来可能很复杂,但只要你学会用,它们会为你烹饪出一道道美妙的食物。这就是学习新技能的乐趣,让我们一起享受这个过程,攀登知识的高峰!
343 27
|
5月前
|
Java 应用服务中间件 Apache
在IntelliJ IDEA中使用Maven配置Tomcat环境
此配置方法具有较高的实用性,简单易懂。遵循以上步骤,您将能顺利在IntelliJ IDEA中使用Maven配置Tomcat环境,从而进行Web项目的开发和调试。
529 18
|
5月前
|
关系型数据库 MySQL Java
安装和配置JDK、Tomcat、MySQL环境,以及如何在Linux下更改后端端口。
遵循这些步骤,你可以顺利完成JDK、Tomcat、MySQL环境的安装和配置,并在Linux下更改后端端口。祝你顺利!
377 11
|
Java 应用服务中间件 Maven
【项目启动】 tomcat启动,项目无法启动,无法正常访问/项目可以启动,报错:java.lang.ClassNotFoundException: ContextLoaderListener
使用maven搭建项目(这个错误和是不是使用maven搭建项目没有关系),然后部署到tomcat中运行。   出现问题1: tomcat跑起来了,但是启动时间很短,没有报错,项目不能正常访问 项目启动时间很短,并且没有报错 并且项目无法正常访问   发现问题过程: 查看tomcat下,发现这个项目在tomcat的webapps下部署的仅仅是项目的部分文件,有好多的东西并没有部署进来 我们发现tomcat下部署的本项目中 并没有lib依赖包库 等目录。
2709 0
|
7月前
|
网络协议 Java 应用服务中间件
框架源码私享笔记(01)Tomcat核心架构功能 | 配置详解
本文首先分享了《活出意义来》一书序言中的感悟,强调成功如同幸福,不是刻意追求就能得到,而是全心投入时的副产品。接着探讨了Tomcat的核心功能与架构解析,包括网络连接器(Connector)和Servlet容器(Container),并介绍了其处理HTTP请求的工作流程。文章还详细解释了Tomcat的server.xml配置文件,涵盖了从顶级容器Server到子组件Connector、Engine、Host、Context等的配置参数及作用,帮助读者理解Tomcat的内部机制和配置方法。
|
6月前
|
Java 关系型数据库 MySQL
JDK、Tomcat、MariaDB数据库和Profile多环境的配置与使用
以上就是JDK、Tomcat、MariaDB数据库和Profile多环境的配置与使用的基本步骤。这些步骤可能会因为你的具体需求和环境而有所不同,但是基本的思路是一样的。希望这些信息能够帮助你更好地理解和使用这些工具。
207 17
|
安全 应用服务中间件 网络安全
Tomcat如何配置PFX证书?
【10月更文挑战第2天】Tomcat如何配置PFX证书?
673 7