项目实战_表白墙(简易版)

你能学到什么

  • 一个比较简单的项目:表白墙(简易版),浏览器:谷歌
  • 升级版将在下个博客发布

效果如下

正文

说明

我们是从0开始一步一步做这个项目的,里面的各种问题,我也会以第一人称视角来解决,希望你们看了能感同身受,有所收获。

第一步:把项目建起来


注意:

你所创建的所有package或者class 必须和启动类在同一个路径上,启动类是什么:就是一开始就自动生成的,并且以Application结尾的那个类。

所以我们必须在leavemessage_blogs下面建包,或者建类。

对于测试代码和开发的规则也是一样的,要在 leavemessage_blogs下面建包或者建类。

第二步:配置文件

由于文件不能导入,所以前端的代码直接自己新建就行了,然后复制我的代码到你的前端html文件里。注意:你新建的文件可能有一些自动生成的代码,复制我的代码直接覆盖就行了。

  • 代码如下
javascript 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <style>
        .container {
            width: 350px;
            height: 300px;
            margin: 0 auto;
            /* border: 1px black solid; */
            text-align: center;
        }

        .grey {
            color: grey;
        }

        .container .row {
            width: 350px;
            height: 40px;

            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .container .row input {
            width: 260px;
            height: 30px;
        }

        #submit {
            width: 350px;
            height: 40px;
            background-color: orange;
            color: white;
            border: none;
            margin: 10px;
            border-radius: 5px;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>留言板</h1>
        <p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
        <div class="row">
            <span>谁:</span> <input type="text" name="" id="from">
        </div>
        <div class="row">
            <span>对谁:</span> <input type="text" name="" id="to">
        </div>
        <div class="row">
            <span>说什么:</span> <input type="text" name="" id="say">
        </div>
        <input type="button" value="提交" id="submit" onclick="submit()">
        <!-- <div>A 对 B 说: hello</div> -->
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
 
        function submit(){
            //1. 获取留言的内容
            var from = $('#from').val();
            var to = $('#to').val();
            var say = $('#say').val();
            if (from== '' || to == '' || say == '') {
                return;
            }
            //2. 构造节点
            var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";
            //3. 把节点添加到页面上    
            $(".container").append(divE);

            //4. 清空输入框的值
            $('#from').val("");
            $('#to').val("");
            $('#say').val("");
            
        }
        
    </script>
</body>

</html>

搞完前端的文件配置以后我们就能测试了,启动程序,然后用浏览器访问这个html页面,看看我们复制的对不对

看到这个以后就证明我们复制的没问题,如果你此时直接在该网页输入数据测试,也是没有错误的,但那是前端的实现,一刷新就没了,我们是要使用后端实现的,所以我们还要改代码,设计后端接口,熟悉理解后端接口才是此项目的目的。

第三步:约定前后端交互接⼝

需求分析:

后端需要提供两个服务

  1. 提交留⾔: ⽤⼾输⼊留⾔信息之后, 后端需要把留⾔信息保存起来
  2. 展⽰留⾔: ⻚⾯展⽰时, 需要从后端获取到所有的留⾔信息
  • 浏览器给服务器发送⼀个 GET /message/getList 这样的请求, 就能返回当前⼀共有哪些留⾔记录. 结果以 json 的格式返回过来.

第四步:编写服务器代码

实体类代码

定义留⾔对象 MessageInfo 类,我们将实体类都单独放在包model里,这是应用分层里的规范。

java 复制代码
package com.example.leavemessage_blogs.model;

import lombok.Data;

@Data
public class MessageInfo {
    private String from;
    private String to;
    private String message;
}

controller代码

依据应用分层的概念,我们依旧是建了一个package存放controller类。

java 复制代码
package com.example.leavemessage_blogs.Controller;

import com.example.leavemessage_blogs.model.MessageInfo;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;

@RequestMapping("/message")
@RestController
public class MessageController {
    //创建一个list来储存数据
    
    public List<MessageInfo> list = new ArrayList<>();
    @RequestMapping("getList")
    public List<MessageInfo> getList(){
        return list;
    }

    @RequestMapping("/addInfo")
    public boolean addInfo(MessageInfo messageInfo){
        if(StringUtils.hasLength(messageInfo.getFrom())&&
        StringUtils.hasLength(messageInfo.getTo())&&
        StringUtils.hasLength(messageInfo.getMessage())){
            list.add(messageInfo);
            return true;
        }
        return false;
    }
}

写完controller代码后我们就能测试了

测试getList接口

可以看出来没有问题,因为此时我们还没有添加元素呢,所以返回为空

测试addInfo接口

可以看到:也没有太大的问题,如果你感觉看不到效果,不放心,你可一再次调用getList接口,看看这个信息是否被添加进来了。

为了验证,我们调用getList接口验证信息是否被添加进来了,可以看到:没有问题

第五步:修改前端代码

为什么是修改而不是编写:因为我们以后端的开发为主要,所以前端的代码能大概看懂就好,不要求掌握,以后的前端代码也是以开源的形式直接复制粘贴的。

1,添加 load 函数, ⽤于在⻚⾯加载的时候获取数据

javascript 复制代码
    load();
    function load() {
        $.ajax({
            type: "get",
            url: "/message/getList",
            success: function (result) {
                for (var message of result) {
                    var divE = "<div>" + message.from + "对" + message.to + "说:" + message.message + "</div>";
                    $(".container").append(divE);
                }
            }
        });
    }

这个代码能复制就复制,看懂个大概就行了

  • 注意:

2. 修改原来的点击事件函数submit

可以将这段代码直接覆盖掉原来的submit函数,也可以自己看着注释的思路敲一遍,这里面有很多重复的代码,能直接复制的很多,可以尝试一下,并不费劲。

javascript 复制代码
function submit(){
        //1. 获取留言的内容
        var from = $('#from').val();
        var to = $('#to').val();
        var say = $('#say').val();
        if (from== '' || to == '' || say == '') {
            return;
        }
        //在这里将请求发送到后端,也是采用ajax的方式
        $.ajax({
           type: "post",
            url: "message/addInfo",//这里的url不要弄错了
            data:{
               from:from,
                to:to,
                message:say
            },
            success:function (ret){
               //如果后端返回了true证明添加成功了,就将数据全部添加到网页上
               if(ret){
                   //这里面都是添加页面元素的操作,了解即可
                   //2. 构造节点
                   var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";
                   //3. 把节点添加到页面上
                   $(".container").append(divE);

                   //4. 清空输入框的值
                   $('#from').val("");
                   $('#to').val("");
                   $('#say').val("");
               }else{
                   alert("留言失败!")
               }
            }
        });


    }

第六步:测试

以上就是该简易表白墙的所有内容,此时我们就能启动程序,再次访问message.html页面,看看他是否能正常运行。

注意:

  • 1,此时的前端页面可能会有缓存,可以使用ctrl+F5进行强刷,然后右键查看网页源代码,看看我们的前端代码是否改过来了。
  • 2,我用的是谷歌浏览器,因为他的兼容性......在现今的浏览器中属于很nb的那种,可以去官网下载一下,很好用。

    此时意外发生了,在我填完信息之后,我点击提交按钮后,前端是没有反应的,证明有bug了。

排查bug

  • 第一步:按F12,看前端页面有没有报错,如果有大于一个报错的话,看第二个报错(原因一会儿说)
  • 第二步:看是前端的问题还是后端的问题
    如果你点了蓝色的字,会自动帮你定位错误的位置,很实用的小技巧
    之后我就看到了他给我的一个逗号标上了错误,但他也不是中文符号啊,为啥报错呢?于是我重新写了一个英文逗号,然后再在前端强刷了一下,就好了,估计是idea识别的问题吧。
  • 上面我们说到了要看第二个报错,这是因为即使程序成功运行了,也会有一个错误,所以:" 没有报错 " == " 有一个默认错误 ",如下:(所以我们通常看第二个错误)

遇到bug的处理歩奏

  • 1,按F12,看前端页面有没有报错,如果有大于一个报错的话,看第二个
  • 2,如果前端有报错,直接处理前端代码
  • 3,如果前端没有报错,那就在接受参数的函数第一行,加入执行的日志,看看参数传递到底有没有问题
  • 4,如果传参没有问题,那就是后端的问题,通过调试等方法找问题
  • 5,如果传参有问题,那就是前端的参数没有传递到后端,到前端检查问题
  • 6,另外还有一个隐藏的问题就是缓存,如果实在检查不出来问题了,那就请一下缓存试试,看是否是代码是不是没有更新,双击clean就是清理缓存。还有就是前端的强刷,也很常用,搞不出来就试试。

修复bug成功:

此时我们提交一个留言就会显示一个留言,这样就成功了,此时无论我们怎么刷新数据都不会掉了,因为此时的数据是保存在内存中的,是由后端来做的,而不是由前端直接管理,这也能作为评判我们是用后端代码实现的还是用前端代码实现的。

说到这里我们会发现,如果这样搞,那我们每次重启后端代码之后,我们以前存储的数据就会丢失,这是因为,我们将数据都储存在内存中了,那么有没有一种方式能够长久的保存我的数据呢?这样我每次启动后端的时候数据就不会丢失了。这样的方式当然是有的:那就使用数据库来存储那些信息,由于以往的单纯的sql传递十分繁琐,所以我们会使用Mybatis来操作数据库,这种方式更加方便,这也是我们的表白墙进阶要使用的方式。

如果在此过程中,遇到什么报错了,欢迎评论留言,我们一起解决。

相关推荐
安之若素^7 分钟前
启用不安全的HTTP方法
java·开发语言
ruanjiananquan9914 分钟前
c,c++语言的栈内存、堆内存及任意读写内存
java·c语言·c++
chuanauc41 分钟前
Kubernets K8s 学习
java·学习·kubernetes
一头生产的驴1 小时前
java整合itext pdf实现自定义PDF文件格式导出
java·spring boot·pdf·itextpdf
YuTaoShao1 小时前
【LeetCode 热题 100】73. 矩阵置零——(解法二)空间复杂度 O(1)
java·算法·leetcode·矩阵
zzywxc7871 小时前
AI 正在深度重构软件开发的底层逻辑和全生命周期,从技术演进、流程重构和未来趋势三个维度进行系统性分析
java·大数据·开发语言·人工智能·spring
YuTaoShao3 小时前
【LeetCode 热题 100】56. 合并区间——排序+遍历
java·算法·leetcode·职场和发展
程序员张33 小时前
SpringBoot计时一次请求耗时
java·spring boot·后端
llwszx6 小时前
深入理解Java锁原理(一):偏向锁的设计原理与性能优化
java·spring··偏向锁
云泽野7 小时前
【Java|集合类】list遍历的6种方式
java·python·list