正文 

当前位置： 首页 > 开发 > java教程

前端博站项目中遇到的问题总结

lsongyang lsongyang     2022-12-03     315

关键词：

 

功能一：发布评论，如下图

技术图片

功能描述：点击上面的发布按钮，可以发布评论，评论中要有发布人的姓名，回复给谁，发布的内容，以及发布的时间

问题描述：每一条留言下面都可以发布评论，因为发布一条评论需要记录很多信息（回复人，留言人，时间，内容，点赞...），想着信息多，为了方便管理，我把他们存放在一个对象中,并将这个对象，放在了data中，结果等我发布信息的时候，就会发现，如果我发布一条信息后，再去发另外一条信息，就会修改我上面一条发布的信息，并且我不能清空输入框中的信息

解决思路：其实这个问题我一开始还挺困惑的，因为我每发布一条信息都会将其push到我的渲染列表中的，而且它也可以正常渲染，那为什么会出现上面的问题呢？主要原因就是出现在我把信息都存放到了对象中，所以我每次向渲染列表中push的其实是一个对象，这样因为对象引用的关系，自然一个改变其他的都会改变了

解决办法：

1、不要把需要记录的数据存放在对象中，将其拿出来，比如内容就content:" ",记录

2、那么多信息都拿出来看着比较难受，因为有些是固定的，有写时点击发布按钮的时候才需要，所以我只把必须放在data中的属性放在data中，然后再data外面用一个属性去记录这些需要的值，在提交的时候，提交的也是外面的这个对象，那么我每次在重新发布留言的时候就不会出现上面的问题了

主要知识点：如果两个对象的引用相同，那么一个对象的属性值改变，也会改变另一个对象的属性值

功能二、点赞功能

功能描述：

1、同一个人可以给多条评论点赞，但是每条评论同一个人只能点赞一次，不可重复点赞

2、该登录者点过赞的，点赞图标为红色，鼠标移入提示已点赞，没有点赞的，点赞图标为黑色，鼠标移入提示点赞

3、点赞之后，后面的数字会+1

这个不难实现，稍微需要动点脑子的地方是：怎样知道该登录者是否已经点赞，如果已经点赞，再次点击点赞图标，不让数据增加

解决办法：

1、每一条评论用一个数组记录点赞人的姓名，每次点赞的时候查找这个数组中是否有登录者的名字，如果已经存在，就不执行操作，不存在的时候再执行操作

2、提示点赞或已点赞，这个我是用title属性实现的（不难，就不再详细说了）

功能三、显示评论发表的时间

功能描述：如果发布的时间在一个小时内，那么评论上显示的时间是：n分钟前，如果是超过一个小时，直接显示发布的日期（年月日）

解决思路：

1、后端记录每条评论发布的时间

2、用当前时间减去发布的时间，并做一些处理

3、开启一个定时器，每一秒调用一次时间处理函数

关键代码如下：

  1.  
    methods:
  2.  
    setInt()
  3.  
    clearInterval(this.timer)
  4.  
    this.timer = setInterval(this.time,1000)
  5.  
    ,
  6.  
    time(time)
  7.  
    let nowTime = new Date()
  8.  
    let lastTime = new Date(time)
  9.  
    let t = Math.floor((nowTime - lastTime)/1000)
  10.  
    let Day = Math.floor(t/86400)
  11.  
    let Hour = Math.floor(t%86400/3600)
  12.  
    let Min = Math.floor(t%86400%3600/60)
  13.  
    let str = ‘‘
  14.  
    if(Day<1&&Hour<1)
  15.  
    str = String(Min)
  16.  
    else
  17.  
    let year = lastTime.getFullYear()
  18.  
    let month = lastTime.getMonth()+1
  19.  
    let day = lastTime.getDate()
  20.  
    str = year+"年"+getTwo(month)+"月"+day+"日"
  21.  
  22.  
    function getTwo(n)
  23.  
    return n<10?‘0‘+n:‘‘+n
  24.  
  25.  
    return str
  26.  
  27.  

vue项目中遇到的问题总结(代码片段)

1 vue:无法加载文件C:\\ProgramFiles\\nodejs\\vue.ps1因为被系统禁止了。需要以管理员的身份运行vscode，再在vscode终端写上set-executionpolicyremotesigned  查看详情

vue项目中遇到的一些问题总结

一、开发环境使用Ajax请求，报错 网上查的资料，在config中的index.js这样设置proxyTable:‘/api‘:target:‘‘,//此处为你的API接口地址changeOrigin:true,pathRewrite:‘^/api‘:‘‘//这里理解为用api代替target中的地址配置完后，请求依然报... 查看详情

前端问题总结

1、npm和yarn的区别npm问题：npminstall的时候巨慢。特别是新的项目拉下来要等半天，删除node_modules，重新install的时候依旧如此。同一个项目，安装的时候无法保持一致性。由于package.json文件中版本号的特点，下面三个版本号在安... 查看详情

前端启动项目的时候遇到的问题记录

1.问题描述：在执行bowerinstall的时候报错，插件不兼容angular版本解决方法：在.bowerrc文件中添加"ignoredDependencies":["angular"]注意事项：bowerinstall后不安装angular，所以需要手动安装bowerinstallangular#version 2.gruntserve的时候报错：Runnin... 查看详情

angular5项目积累总结遇到的一些问题以及解决办法

1.项目中字符串特别是 ,替换成br之后，在页面换行无法生效？ 答：绑定元素innerHTML。 <divclass="panel-body"[innerHTML]="proTxt(iosPkg.ReleaseNotes)"></div>proTxt(txt:string){returntxt&&txt.replace(/ ? 查看详情

前端搬砖之回顾与总结：vue路由传参的方式(代码片段)

前言从17年毕业一直到现在都在前端搬砖，从小的外包公司到中大型的互联网公司都留下过搬砖的足迹。从业这三年，不管是jquery、react、vue、还是小程序啥的的项目都弄过，项目弄的虽然多了，但是却很杂，也没有一个一直维... 查看详情

远程部署遇到的问题总结

...）网关有随机数的设置，所以需要修改reids的配置。（4）项目修改配置和jar包后，需要重启，前台程序要清缓存。（5）之后还是不成功，然后发现是前后台连接的值对不上的，重新打包。（6）http://ip:port/actuator/gateway/routesget请... 查看详情

软工项目个人总结

...接个人工作总结项目总结课程建议一、相关链接饱了吗app前端：https://github.com/startproge/baolema需求分析：https://www.cnblogs.com/Clover-yee/p/11771395.htmlUML图：https://www.cnblogs.com/Clover-yee/p/11882669.html原型设计：https://www.cnblogs.com/Clover-yee/p/119... 查看详情

项目集成三方库由静态库转为动态库遇到的问题总结

项目中引入swift三方库需要使用动态库，然而oc默认使用静态库，所以在将项目三方库全变为动态库后会遇到下面几个问题1.YY系列三方库若有手动导入的，有cocoapods导入的则在编译时会包文件符号重复的错误解决方法：要么全部... 查看详情

使用electron中遇到的问题总结

...示node模块的系统渲染进程：主进程main.js:配置好重新启动前端工程会之前的错误没有了，但是出现window.requireisnotafuncti 查看详情

前端项目下载git://github.com遇到的问题处理(代码片段)

今天（2022-1-11）遇到个前端构建的问题，就好像上次遇到Maven切换http为https的感觉一样，真巧，能在这么恰当的时间遇到坑。GitHub2021年9月1日的通知：ImprovingGitprotocolsecurityonGitHub通知中有一个逐步改变的计... 查看详情

源始web开发过程中遇到的一些兼容问题

　　前端培训课程马上结束，面临着出去找工作，在这里总结一下学习到的知识，也记录下自己找工作的情况和一些面试经验。希望能够坚持下去，使自己能有所提高... 　　先来总结下在前端开发过程中容易遇到的一些兼容... 查看详情

项目easyui和js中遇到的问题总汇

近期因为项目用到EasyUi,曾经仅仅是听过，可是没有详细用过。仅仅能一边学一边做。如今将做的过程中遇到的一些难点总结例如以下，以备后用：EsayUi使用：Json格式：key:value,key:value<bodyclass="easyui-layout">  <divdata-opt... 查看详情

大数据集群常见问题总结

　　项目将近尾声，上线一切顺利，在开发过程中遇到了不少的问题，趁着空闲时间对项目中遇到的常见问题做一个总结，当作一个笔记，问题如下：java.io.IOException:Couldnotobtainblock:blk_194219614024901469_1100file=/user/hive/warehouse/src_20180... 查看详情

前端构建遇到的大小问题(代码片段)

Bootstrap构建的项目中点击a标签会出现边框的虚线，虽然不会造成错误但看上去还是不太美观所以写了一个小函数可以放在index.html中等待页面加载完了消除焦点，可能在大项目中会出现性能上的缺点<script>vargeta=document.getElemen... 查看详情

项目总结

项目前准备：一、小组沟通　　1.确立好需要做的项目　　2.分好各自负责的任务，寻找每个人的特长，做特定的模块，同时预留出方法名和变量名　　3.各自使用规范的文件分类，方便以后的合并二、小组合作　　1.建立交流群... 查看详情

前端学习---移动端vue开发踩坑记

前言：大概两个月前投身于一个项目中去，项目是一个移动端的项目，所选用的框架是时下比较流行的vue。这篇文章也是针对这个项目和以前自己学习时的一些总结，包括一些通用的移动端开发要注意的事项、vue开发遇到的一些... 查看详情

使用idea对springboot项目打war包及遇到的问题总结(代码片段)

使用maven创建的springboot项目的默认打包方式是jar包，而且springboot是自带Tomcat的。部署项目时需要打包成对应的war包，并将项目部署到服务器的Tomcat下，所以项目打包时就需要修改一些配置。主要修改pom.xml文件中的一... 查看详情