当前位置: article > 正文

项目实战_表白墙（简易版）

作者：Li_阴宅 | 2024-08-08 23:30:28

踩

项目实战_表白墙（简易版）

你能学到什么

一个比较简单的项目：表白墙（简易版），浏览器：谷歌
升级版将在下个博客发布

效果如下
在这里插入图片描述

正文

说明

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

第一步：把项目建起来

在这里插入图片描述

注意：

你所创建的所有package或者class 必须和启动类在同一个路径上，启动类是什么：就是一开始就自动生成的，并且以Application结尾的那个类。
所以我们必须在leavemessage_blogs下面建包，或者建类。
在这里插入图片描述
对于测试代码和开发的规则也是一样的，要在 leavemessage_blogs下面建包或者建类。

第二步：配置文件

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

在这里插入图片描述

代码如下

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

搞完前端的文件配置以后我们就能测试了，启动程序，然后用浏览器访问这个html页面，看看我们复制的对不对
在这里插入图片描述

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

在这里插入图片描述

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

需求分析：
后端需要提供两个服务

提交留⾔: ⽤⼾输⼊留⾔信息之后, 后端需要把留⾔信息保存起来
展⽰留⾔: ⻚⾯展⽰时, 需要从后端获取到所有的留⾔信息

浏览器给服务器发送⼀个 GET /message/getList 这样的请求, 就能返回当前⼀共有哪些留⾔记录. 结果以 json 的格式返回过来.

第四步：编写服务器代码

实体类代码

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

在这里插入图片描述

package com.example.leavemessage_blogs.model;

import lombok.Data;

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

1
2
3
4
5
6
7
8
9
10
11

controller代码

依据应用分层的概念，我们依旧是建了一个package存放controller类。
在这里插入图片描述

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;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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

测试getList接口

可以看出来没有问题，因为此时我们还没有添加元素呢，所以返回为空
在这里插入图片描述

测试addInfo接口

可以看到：也没有太大的问题，如果你感觉看不到效果，不放心，你可一再次调用getList接口，看看这个信息是否被添加进来了。
在这里插入图片描述
为了验证，我们调用getList接口验证信息是否被添加进来了，可以看到：没有问题

第五步：修改前端代码

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

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

    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);
                }
            }
        });
    }
1
2
3
4
5
6
7
8
9
10
11
12
13

在这里插入图片描述

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

注意：

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

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

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("留言失败！")
               }
            }
        });


    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

第六步：测试

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

注意：

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

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

排查bug

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

遇到bug的处理歩奏

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

修复bug成功：

此时我们提交一个留言就会显示一个留言，这样就成功了，此时无论我们怎么刷新数据都不会掉了，因为此时的数据是保存在内存中的，是由后端来做的，而不是由前端直接管理，这也能作为评判我们是用后端代码实现的还是用前端代码实现的。
说到这里我们会发现，如果这样搞，那我们每次重启后端代码之后，我们以前存储的数据就会丢失，这是因为，我们将数据都储存在内存中了，那么有没有一种方式能够长久的保存我的数据呢？这样我每次启动后端的时候数据就不会丢失了。这样的方式当然是有的：那就使用数据库来存储那些信息，由于以往的单纯的sql传递十分繁琐，所以我们会使用Mybatis来操作数据库，这种方式更加方便，这也是我们的表白墙进阶要使用的方式。

在这里插入图片描述

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Li_阴宅/article/detail/950357