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

你能学到什么

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

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

正文

说明

我们是从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://xiahunao.cn/news/3281171.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

android13 第三方桌面不能使用后台历史任务问题 任务键功能失效问题

总纲 android13 rom 开发总纲说明 目录 1.前言 2.复现现象 3.问题分析 4.解决方法 5.编译运行 6.彩蛋 1.前言 随着Android 13操作系统的发布,用户现在可以更加自由地选择和使用第三方Launcher来定制自己的设备。本文将介绍在Android 13上安装和使用第三方Launcher导致…

KubeSphere部署:(三)MySQL安装

MySQL没有什么特殊的&#xff0c;这里记录一下部署过程(本文示例中安装的版本为5.7.29)。步骤大致如下&#xff1a; 拉取docker镜像 -> 标记并推送至私有harbor -> 创建有状态负载 -> 创建服务 一、拉取镜像&#xff0c;并推送至私有harbor # 拉取镜像 docker pull …

ant-design-vue 中 table行 点击事件

在使用 AntDesign 过程中&#xff0c;需求单击表格选中。设置table的customRow属性 设置之后&#xff0c;虽说官方文档也有详细介绍如何实现该功能。但是没看太懂&#xff0c;百度后解决 <a-table:columnscolumns:data-sourcetableDatachangehandleTableChange:customRowrow…

MySQL的跳跃式索引

Skip Index Scan&#xff08;跳跃式索引&#xff09; 例如初中有个学生表&#xff0c;年级、班级、学号 符合索引。 -- 问题是下面这个查询为什么也可以用到索引。 select * from 初中学生表 where 班级 1 and 学号 001-- 思考一下这个查询比全表扫描快吗&#xff1f; sele…

Springcloud物流配送后台-计算机毕业设计源码69809

目 录 摘要 1 绪论 1.1 选题背景与意义 1.2国内外研究现状 1.3论文结构与章节安排 2 物流配送后台系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 操作可行性分析 2.2 系统流程分析 2.2.1数据增加流程 2.2.2 数据修改流程 2.2.3 数据…

find 命令必知必会,附常用精彩案例分享,收藏备用

find, 顾名思义“查找”的作用&#xff0c;作为 IT 民工&#xff0c;对于基本的 Linux 命令还是要有所掌握的&#xff0c;今天刚好用到了 find , 顺手整理一下个人常用的操作&#xff0c;以备忘&#xff0c;更全面的资料或案例大家可以自行搜索或者查阅 man find. 或者通过下面…

如何将本地代码上传到github

将本地文件上传到GitHub仓库的过程通常包括以下几个步骤&#xff1a; 一 创建GitHub仓库&#xff1a; 如果你还没有一个GitHub仓库&#xff0c;首先需要在GitHub上创建一个新的仓库。登录到你的GitHub账户&#xff0c;然后点击“New repository”按钮&#xff0c;填写仓库的相关…

流动的智慧:开创集成资产管理新局面 ——华为云ROMA Connect资产中心

ROMA Connect资产中心&#xff1a;开放生态下的轻量化集成资产管理 企业不断扩大数字化建设&#xff0c;使得相应的资产在数量和形态以及复杂度上呈指数型提升。如此丰富的高价值数据资源如何规范化管理、整合利用&#xff1f;这是很多企业反馈遇到的难题。 ROMA Connect资产…

MySQL---JDBC

一、JDBC是什么&#xff1f; JDBC(Java Database Connectivity):是Java访问数据库的解决方案。 JDBC定义了一套标准的接口&#xff0c;即访问数据库的通用API&#xff0c;不同数据库的厂商根据各自数据库的特点实现这些接口。 JDBC希望用相同的方式访问不同的数据库&#xff0c…

苹果发布iPhone AI,Apple Intelligence初版落地!未融入ChatGPT,仅面向付费开发者

本文首发于公众号“AntDream”&#xff0c;欢迎微信搜索“AntDream”或扫描文章底部二维码关注&#xff0c;和我一起每天进步一点点 苹果公司Apple Intelligence初版落地&#xff1a;iPhone AI引领智能化新篇章 在全球科技领域&#xff0c;苹果公司一直以其创新精神和前沿技术…

Potree点云可视化卡片开发指南

本文由ScriptEcho平台提供技术支持 项目地址&#xff1a;传送门 Potree点云可视化卡片开发指南 应用场景介绍 Potree点云可视化卡片是一款基于Potree库开发的Vue组件&#xff0c;它允许用户在Web应用程序中轻松嵌入和交互式可视化大规模点云数据。该卡片特别适用于需要在We…

Redis 内存淘汰策略

Redis 作为一个内存数据库&#xff0c;必须在内存使用达到配置的上限时采取策略来处理新数据的写入需求。Redis 提供了多种内存淘汰策略&#xff08;Eviction Policies&#xff09;&#xff0c;以决定在内存达到上限时应该移除哪些数据。

LLM的训练与推断

LLM的训练与推断 目前比较流行的大模型一般都是自回归模型。在推理时&#xff0c;它类似于RNN&#xff0c;每次计算下一个token的概率。也就是说&#xff0c;如果除去最开始的输入情况下&#xff0c;最终推理长度为n的话&#xff0c;就需要计算n次。但是训练却是并行化的。 在…

在国产芯片上实现YOLOv5/v8图像AI识别-【2.2】RK3588上C++开发环境准备及测试更多内容见视频

本专栏主要是提供一种国产化图像识别的解决方案&#xff0c;专栏中实现了YOLOv5/v8在国产化芯片上的使用部署&#xff0c;并可以实现网页端实时查看。根据自己的具体需求可以直接产品化部署使用。 B站配套视频&#xff1a;https://www.bilibili.com/video/BV1or421T74f 板子…

Idea包含UI内容的插件开发

Idea包含UI内容的插件开发 前言插件效果项目结构配置功能的实现找一个股票接口完成最终的页面配置Plugin.xml源码地址 前言 在这一篇文章中将会做一个包含UI内容的能看股票的插件。 插件效果 首先是在设置中配置股票的编号&#xff0c;如sh000001,sh600519。 接着在侧边栏中…

为何2024年这4款ai智能写作工具被赞为YYDS?

在数字化的大潮中&#xff0c;人工智能已经深入到我们生活的各个角落&#xff0c;当然也包括写作领域。随着ai智能写作工具的兴起&#xff0c;它们不仅显著提升了写作效率&#xff0c;还为创作打开了全新的可能性。今天&#xff0c;我们就来看看四款特别受欢迎的AI写作工具&…

干货分享 | 基于VB6.0 实现 CAN信号收发 Demo

本文主要讲的是&#xff0c;基于TSMaster 实现 TOSUN 系列 CAN/CANFD&#xff0c;LIN 设备的操作。主要给大家介绍在 TSMaster 软件里如何实现 CAN 信号收发 Demo工程。 本文关键词&#xff1a;CAN报文、VB6.0、libTSCAN 一、关于Demo工程 简要描述&#xff1a; VB6.0编程语…

Python药物副作用生物图分析算法和矩阵降维算法

&#x1f3af;要点 &#x1f3af;人体疾病模块网络结构位置与病理生物学关系 | &#x1f3af;药物与药物靶点相互作用 | &#x1f3af;细胞和蛋白质之间的作用分层 | &#x1f3af;疾病和症状之间的联系 | &#x1f3af;药物与副作用之间的联系 | &#x1f3af;生物学分析 &a…

年过30年程序员,到底要不要考虑搞点副业

一、前言 作为一名年过三十的程序员&#xff0c;我深刻体会到了职场的残酷和不确定性。在这个技术日新月异的时代&#xff0c;我们不仅要在专业领域深耕细作&#xff0c;更要敏锐地捕捉互联网的风口&#xff0c;以确保自己不被时代淘汰。程序员的黄金年龄似乎被限定在35岁之前…

事务性邮件api接口服务怎么选?怎么集成?

事务性邮件API接口安全性如何保障&#xff1f;API接口调用方法&#xff1f; 在现代企业的运营中&#xff0c;事务性邮件是确保信息及时传达和用户体验的关键环节。AokSend将探讨如何选择合适的事务性邮件API接口服务&#xff0c;以及如何有效地集成这些服务。 事务性邮件api接…