网站运营成功案例,网站内容营销,wordpress 上传pdf,响应式网站建设策划你能学到什么
一个比较简单的项目#xff1a;表白墙#xff08;简易版#xff09;#xff0c;浏览器#xff1a;谷歌升级版将在下个博客发布
效果如下
正文
说明
我们是从0开始一步一步做这个项目的#xff0c;里面的各种问题#xff0c;我也会以第一人称视角来解…你能学到什么
一个比较简单的项目表白墙简易版浏览器谷歌升级版将在下个博客发布
效果如下
正文
说明
我们是从0开始一步一步做这个项目的里面的各种问题我也会以第一人称视角来解决希望你们看了能感同身受有所收获。
第一步把项目建起来 注意
你所创建的所有package或者class 必须和启动类在同一个路径上启动类是什么就是一开始就自动生成的并且以Application结尾的那个类。 所以我们必须在leavemessage_blogs下面建包或者建类。 对于测试代码和开发的规则也是一样的要在 leavemessage_blogs下面建包或者建类。
第二步配置文件
由于文件不能导入所以前端的代码直接自己新建就行了然后复制我的代码到你的前端html文件里。注意你新建的文件可能有一些自动生成的代码复制我的代码直接覆盖就行了。 代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title留言板/titlestyle.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
/headbodydiv classcontainerh1留言板/h1p classgrey输入后点击提交, 会将信息显示下方空白处/pdiv classrowspan谁:/span input typetext name idfrom/divdiv classrowspan对谁:/span input typetext name idto/divdiv classrowspan说什么:/span input typetext name idsay/divinput typebutton value提交 idsubmit onclicksubmit()!-- divA 对 B 说: hello/div --/divscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js/scriptscriptfunction submit(){//1. 获取留言的内容var from $(#from).val();var to $(#to).val();var say $(#say).val();if (from || to || say ) {return;}//2. 构造节点var divE divfrom 对 to 说: say/div;//3. 把节点添加到页面上 $(.container).append(divE);//4. 清空输入框的值$(#from).val();$(#to).val();$(#say).val();}/script
/body/html搞完前端的文件配置以后我们就能测试了启动程序然后用浏览器访问这个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;
}
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 ListMessageInfo list new ArrayList();RequestMapping(getList)public ListMessageInfo 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 divfrom 对 to 说: say/div;//3. 把节点添加到页面上$(.container).append(divE);//4. 清空输入框的值$(#from).val();$(#to).val();$(#say).val();}else{alert(留言失败)}}});}第六步测试
以上就是该简易表白墙的所有内容此时我们就能启动程序再次访问message.html页面看看他是否能正常运行。
注意
1此时的前端页面可能会有缓存可以使用ctrlF5进行强刷然后右键查看网页源代码看看我们的前端代码是否改过来了。2我用的是谷歌浏览器因为他的兼容性……在现今的浏览器中属于很nb的那种可以去官网下载一下很好用。 此时意外发生了在我填完信息之后我点击提交按钮后前端是没有反应的证明有bug了。
排查bug
第一步按F12看前端页面有没有报错如果有大于一个报错的话看第二个报错原因一会儿说 第二步看是前端的问题还是后端的问题 如果你点了蓝色的字会自动帮你定位错误的位置很实用的小技巧 之后我就看到了他给我的一个逗号标上了错误但他也不是中文符号啊为啥报错呢于是我重新写了一个英文逗号然后再在前端强刷了一下就好了估计是idea识别的问题吧。上面我们说到了要看第二个报错这是因为即使程序成功运行了也会有一个错误所以“ 没有报错 ” “ 有一个默认错误 ”如下所以我们通常看第二个错误
遇到bug的处理歩奏
1按F12看前端页面有没有报错如果有大于一个报错的话看第二个2如果前端有报错直接处理前端代码3如果前端没有报错那就在接受参数的函数第一行加入执行的日志看看参数传递到底有没有问题 4如果传参没有问题那就是后端的问题通过调试等方法找问题5如果传参有问题那就是前端的参数没有传递到后端到前端检查问题6另外还有一个隐藏的问题就是缓存如果实在检查不出来问题了那就请一下缓存试试看是否是代码是不是没有更新双击clean就是清理缓存。还有就是前端的强刷也很常用搞不出来就试试。
修复bug成功
此时我们提交一个留言就会显示一个留言这样就成功了此时无论我们怎么刷新数据都不会掉了因为此时的数据是保存在内存中的是由后端来做的而不是由前端直接管理这也能作为评判我们是用后端代码实现的还是用前端代码实现的。 说到这里我们会发现如果这样搞那我们每次重启后端代码之后我们以前存储的数据就会丢失这是因为我们将数据都储存在内存中了那么有没有一种方式能够长久的保存我的数据呢这样我每次启动后端的时候数据就不会丢失了。这样的方式当然是有的那就使用数据库来存储那些信息由于以往的单纯的sql传递十分繁琐所以我们会使用Mybatis来操作数据库这种方式更加方便这也是我们的表白墙进阶要使用的方式。 如果在此过程中遇到什么报错了欢迎评论留言我们一起解决。
