经过夜以继日的敲代码,第二阶段也算是落下帷幕了,此阶段主要是通过nodejs来开发接口,以达到前后端进行交互的目的。
登录接口的设计
这一阶段一开始,我最先实现的功能就是登录与注册,这一个环节是最最最重要的,我的实现思路十分简单,也就简单模拟一下登录与注册吧。
登录与注册接口的设计
注册与登录接口呢主要是接收前端传来的数据,然后再将数据存入数据库
这一环节遇到的困难呢,在刚开始做的时候,我就在考虑我前端如何将数据传给后端,首先,我就是直接在axios中添加了data属性,结果后端怎么找都找不到我传过去的数据,因为在之前的项目中我传递数据是用的一个第三方库qs,这个库呢十分方便,只需要在axios中使用该库的一个api(stringify(你要传递的数据)),传递的数据是对象的格式,然后后端就可以在req.body上获取到我们传递的参数。我呢就想试试其他的方式来传数据,结果就是试了很多都没成功(希望能有大佬指点指点),最后还是使用这个第三方库(开摆~)。然后,后端接收到用户的相关数据以后,将其存入数据库,然后再使用一个第三库jsonwebtoken来生成token,因为之前做项目时,自己用过这个库,所以直接copy的。然后呢这个token最好是将用户的密码给抹掉,以保护账号安全,然后前端接收到token以后,再将其存入内存中,然后呢这个token就是用户是否登录的令牌啦~
用户信息的展示与修改
这个环节呢主要是完成的个人中心与信息编辑页面数据的展示
经过上一次项目这一次我学聪明了很多,因为上一次我是第一次做这种比较大的项目,所以很多东西用起来都不是很灵活,包括axios没有二次封装(这个太致命了,后面项目上线的时候,因为每个页面使用的接口有很多,所以导致后面将本地连接换为服务器的公网ip时超级痛苦,而且上线后还有bug。泪目~),向后端请求的次数很多等等...但是这次我在做这个环节的时候,最先想起来就是尽可能的减少向后端发送请求,所以将后端获取用户信息的接口设计完以后呢,我前端请求这个接口获取到数据以后将其存储在vuex内,这样不管我后面随便哪个页面需要使用用户信息的时候,都可以直接去vuex内获取(上一个项目就是没有想到vuex,所以发送请求的位置超级多)。有想法以后我就开始实现,一切正常,正当我准备骄傲的时候,bug出现了。这也算是一个比较容易出现的bug吧。我在用户信息编辑页面刷新时(因为此页面会展示用户的一些旧信息),数据莫名其妙消失了,这可把我搞奇怪了,后面通过不断思考,才想起来,我数据是存储在vuex里面的,页面刷新后,数据丢失是正常的现象啊,随后我就立刻思考出了解决的方案,直接将用户的信息存入内存,这样我vuex每次从内存里面读数据不就行了吗?当然还有其他解决方案,比如使用一些第三方库等。说干就干,我首先就是将mutations内操作state之前将数据存入内存,然后再将数据给state,state内数据是直接从内存里面的读取的,注意要添加一个空对象,当没有从内存中读取用户信息的时候使用空对象。搞完以后,我就开始刷新网页,嗯~真不错bug解决了。这样以后我就能自由的根据用户的操作来对信息进行修改啦。当用户修改完所有信息以后,将信息一致发给后端存入数据库,后端接口没什么难点,反正就一些基本操作。然后将个人中心,信息编辑这些页面中需要后端数据地方更改为使用后端数据。这样以后页面就活起来啦。
店铺评价页面
最先设计了发表评价的接口,包括了用户的信息以及店铺的信息,没什么难度。包括最后用户输入完评价打完分以后将数据给后端,都没啥太大的问题,问题主要出现在了我要实现的对评价点赞功能的实现。我最开始的思路呢就是创建一个数据库充当一个缓存的角色,用户点击点赞按钮以后将店铺信息,用户信息,评论信息存入数据库,本来在之前项目里我就做个类似的功能,以为这一次可以照搬前一个项目的思路,结果就是报错,很明显这一次和上一次是不一样的,这一次的点赞是不需要进行详细页才能点赞而是直接点击评论下方的点赞按钮就可以直接点赞,而上一个项目的点赞功能是需要点进某一个文章以后才可以点赞的。所以不管是后端接口还是数据库的设计都是不一样的。意识到这一点以后我就重新开始思考了,首先我在后端接口设计就和前一次不一样,数据库的设计上,我设置了用户名项,店铺id号,用户点赞情况,评论的id号,然后再设计一个点赞的接口,当用户点赞访问接口以后,就会首先去数据库里面找是否含有点赞的记录,如果没有就重新插入数据,如何有就直接更改点赞情况的值即可。有了思路以后,我很快就做出来了,后端接口返回的数据中包含用户点赞的情况,所以利用这一点我就可以判断用户是否已经对某条评论点赞,如果点赞了,就更改点赞的样式,如果此时用户再次点击点赞按钮,就会取消点赞(和抖音的评论点赞有点像)。本来一开始还一切正常,直到恍惚间,我刷新了一下网页,发现,我前面所说的所有功能都消失了(寄),我下意识反应过来是不是在网页挂载后的生命周期钩子中调用一下点赞的api就行了?我试了一下,发现自己愚蠢了,因为这个api是为实现点赞这一个功能的,如果挂载时就调用这个api,不就是我挂载的时候就触发了点赞的功能?而且控制台还报了很多的错误。我瞬间慌了神,冷静下来以后我就思考,我是不是需要一个接口来返回用户的点赞情况?然后再根据点赞的情况重新渲染页面呢?我感觉就应该去试一下,首先呢我就设计了返回点赞情况的接口(上述数据库的数据),当我前端获取到数据以后,再来根据结果渲染页面。结果呢还是失败了,因为我一开始我在子组件中判断是否已经点赞就是根据点赞那个接口返回的数据来判断是否已经点赞,这样一来证明我前面写的必须得重新推翻再写,然后我又思考,因为我是把一个一个得评论封装成组件的,所以当父组件访问获取点赞状态的接口获取到的数据我就全部传给子组件,然后再在子组件中来过滤出我需要的数据,再进行渲染,一开始也没啥毛病,但是刷新以后,父组件给子组件传递的数据就丢失了,为了解决这个毛病我也是试了很多方法,包括我使用全局事件总线,子组件将相关的信息传给父组件,但很快就被推翻了,因为父组件中只使用了一个子组件然后使用for循环,很明显不能使用此方法,也就是说必须在子组件中去判断点赞的情况,我上网查了一下资料,发现了因为我传递过去的是一个对象,所以要深度监听它,不然数据就会丢失。为了使数据不丢失,我先在子组件的data属性内写入了点赞状态与评论id2个属性,然后监听父组件传来的数据,然后加入deep属性,在handler函数内将新值赋给data的属性值,当我刷新页面,数据就保存下来了,而且点赞的功能也实现了。