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

你能学到什么

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

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

正文

说明

我们是从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>AB : 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里,这是应用分层里的规范。

在这里插入图片描述

在这里插入图片描述

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类。
在这里插入图片描述

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 函数, ⽤于在⻚⾯加载的时候获取数据

    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函数,也可以自己看着注释的思路敲一遍,这里面有很多重复的代码,能直接复制的很多,可以尝试一下,并不费劲。

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来操作数据库,这种方式更加方便,这也是我们的表白墙进阶要使用的方式。

在这里插入图片描述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/388796.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

经验分享:大数据多头借贷风险对自身的不利影响?

在现代金融体系中&#xff0c;大数据技术的应用使得多头借贷成为一种普遍现象。多头借贷指的是个人或企业在短时间内同时或近期内申请多笔贷款或信用产品&#xff0c;这种行为可能带来一系列财务和信用风险。以下是大数据多头借贷风险对个人自身可能产生的不利影响&#xff1a;…

如何编写一个多线程、非阻塞的python代码

一、【写在前面】 最近csdn每天写两篇文章有推广券&#xff0c;趁这个机会写一个python相关的文章吧。 一般我们的任务都可以分为计算密集型任务和IO密集型任务。 python因为全局GIL锁的存在&#xff0c;任何时候只有一个python线程在运行&#xff0c;所以说不能利用多核CPU…

数字的位操作——326、504、263、190、191、476、461、477、693

326. 3 的幂&#xff08;简单&#xff09; 给定一个整数&#xff0c;写一个函数来判断它是否是 3 的幂次方。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 整数 n 是 3 的幂次方需满足&#xff1a;存在整数 x 使得 n 3x 示例 1&#xff1a; 输入&a…

程序员面试题------N皇后问题算法实现

N皇后问题是一个著名的计算机科学问题&#xff0c;它要求在NN的棋盘上放置N个皇后&#xff0c;使得它们之间不能相互攻击&#xff0c;即任意两个皇后都不能处于同一行、同一列或同一斜线上。这个问题可以看作是一个回溯算法问题&#xff0c;通过逐步尝试不同的放置位置&#xf…

订单状态统计业务

文章目录 概要整体架构流程技术细节小结 概要 订单状态统计是电子商务、供应链管理、客户服务等多个领域中的一项核心业务需求. 需求分析以及接口设计 技术细节 1.Controller层: ApiOperation("各个状态的订单统计")GetMapping("/statistics")public Re…

检索增强生成(RAG):智能内容生成的新纪元

引言 在大 AI 时代&#xff0c;生成式人工智能&#xff08;GenAI&#xff09;模型&#xff0c;尤其是大型语言模型&#xff08;LLM&#xff09;&#xff0c;已经展现出了令人瞩目的能力。然而&#xff0c;这些模型在提供信息的准确、即时、专业、权威等方面仍存在局限。检索增…

用Python打造精彩动画与视频,3.2 基本的剪辑和合并操作

3.2 基本的剪辑和合并操作 在这一节中&#xff0c;我们将学习如何使用 MoviePy 库对视频进行基本的剪辑和合并操作。MoviePy 是一个用于视频编辑的 Python 库&#xff0c;可以轻松地实现视频的剪辑、合并、添加音频等操作。 准备工作 首先&#xff0c;确保你已经安装了 Movi…

c++----类与对象(下)

当我们简单的学习了上一篇日期类。简单的理解并且使用了我们前面学习的知识。当然这还只是我们c的九牛一毛。并且我们的类与对象的知识还没学习完。今天我们来把类与对象的知识完善一下。 初始化列表 那么今天我们就不讲废话了&#xff0c;我们直接来主题。首先我们可以看到我…

防火墙Firewalld(iptables)

目录 一、Linux防火墙基础 1.什么是防火墙 2.防火墙的功能 3.防火墙的类型 二、Linux防火墙工具 1.iptables 2. netfilter 3.四表五链结构 3.1四表 3.2五链 3.3总结 4.数据包过滤的匹配流程 4.1规则表之间的顺序 4.2规则链之间的顺序 4.3规则链内的匹配顺序 …

项目实战_表白墙(升级版)

你能学到什么 表白墙&#xff08;升级版&#xff09;Mybatis的一些简单应用 正文 前⾯的案例中, 我们写了表⽩墙, 但是⼀旦服务器重启, 数据就会丢失. 要想数据不丢失, 需要把数据存储在数据库中&#xff0c;接下来咱们借助MyBatis来实现数据库的操作。 数据准备 如果我们…

Kubernetes Prometheus 系列 | AlertManager实现企业微信报警

helm部署prometheusgrafana直通车&#xff08;与本文章关联&#xff09; 首先注册企业微信&#xff1a;https://work.weixin.qq.com/ 目录 一、第一种根据企业id&#xff0c;应用secret等绑定二、第二种方式-添加群聊天机器人webhook&#xff08;推荐&#xff09; 前言&#x…

AI Agent学习系列:利用扣子智能体快速生成字体大小可控的金句海报

像这样的金句海报是如何生成的&#xff1f; 利用智能体可以轻松实现&#xff0c;还能控制字体大小&#xff0c;下面就介绍这个智能体的搭建过程。 一、创建扣子bot 打开扣子&#xff0c;点击“创建Bot”&#xff0c;手动创建一个bot。 在Bot创建页面输入Bot名称&#xff0c;比…

【项目实战】—— 高并发内存池

文章目录 什么是高并发内存池&#xff1f;项目介绍一、项目背景二、项目目标三、核心组件四、关键技术五、应用场景六、项目优势 什么是高并发内存池&#xff1f; 高并发内存池是一种专门设计用于高并发环境下的内存管理机制。它的原型是Google的一个开源项目tcmalloc&#xff…

SAP MM学习笔记50 - 分割评价(分别评估)

上一章讲了两个不太常用的物料类型&#xff0c;UNBW 和 NLAG。 学它的主要目的就是应付客户&#xff0c;因为根本就不好用&#xff0c;而客户还会很好奇的问这是啥东西呢&#xff1f; SAP MM学习笔记49 - UNBW - 非评价品目&#xff08;未评估物料&#xff09;&#xff0c;NL…

【Golang 面试 - 基础题】每日 5 题(九)

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/UWz06 &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏…

主题巴巴WordPress主题合辑打包下载+主题巴巴SEO插件

主题巴巴WordPress主题合辑打包下载&#xff0c;包含博客一号、博客二号、博客X、门户一号、门户手机版、图片一号、杂志一号、自媒体一号、自媒体二号和主题巴巴SEO插件。

【LLM大模型】AI大模型大厂面试真题:「2024大厂大模型技术岗内部面试题+答案」

AI大模型岗的大厂门槛又降低了&#xff01;实在太缺人了&#xff0c;大模型岗位真的强烈建议各位多投提前批&#xff0c;▶️众所周知&#xff0c;2025届秋招提前批已经打响&#xff0c;&#x1f64b;在这里真心建议大家6月7月一定要多投提前批&#xff01; &#x1f4bb;我们…

html实现酷炫美观的可视化大屏(十种风格示例,附源码)

文章目录 完整效果演示1.蓝色流线风的可视化大屏1.1 大屏效果1.2 大屏代码1.3 大屏下载 2.地图模块风的可视化大屏2.1 大屏效果2.2 大屏代码2.3 大屏下载 3.科技轮动风的可视化大屏3.1 大屏效果3.2 大屏代码3.3 大屏下载 4.蓝色海洋风的可视化大屏4.1 大屏效果4.2 大屏代码4.3 …

createObjectURL的部分使用讲解

URL.createObjcetURL的部分详解 文章目录 URL.createObjcetURL的部分详解1. 为什么要使用createObjectURL2. createObjectURL的基本用法3. 转换后的文件进行展示或下载展示下载 首先&#xff0c;想记录一下这点是因为之前关于pdf文件的下载和预览&#xff0c;后端返回工作流时的…

正点原子imx6ull-mini-Linux驱动之阻塞IO和非阻塞IO实验(12)

阻塞和非阻塞 IO 是 Linux 驱动开发里面很常见的两种设备访问模式&#xff0c;在编写驱动的时候 一定要考虑到阻塞和非阻塞。本章我们就来学习一下阻塞和非阻塞 IO&#xff0c;以及如何在驱动程序中 处理阻塞与非阻塞&#xff0c;如何在驱动程序使用等待队列和 poll 机制。 1&…