经过夜以继日的写代码,总算把总体的静态页面写完了,分享分享写这些页面的感受吧。
首页
这是首页的主要内容里面店铺是自己随便写的,本来是准备用node写一个接口,然后访问接口来获取这些餐厅的信息,但是因为有图片,在刚开始我以为就直接把图片在文件的路径写入MYSQL数据库然后前端获取到后端传来的数据后,通过require来引入这个路径就能完美解决这个问题,结果就是太年轻了,require内不能使用变量,万般无奈,只能暂时将这些数据写入Vuex,通过mapGetter来获取数据渲染到页面上了(反正我以后搞前端后端的接口又不需要我写(doge))。然后呢,上方的分栏主要是想练习使用以下阿里巴巴的矢量图标以及flex布局的使用,具体的功能实现就要看后面是否还有精力了(萎)。因为有之前做项目翻车的铺垫,这次使用了百分比的布局,以适配不同型号的手机,但是当我切换其他型号手机还行,一切换到IPHONE SE又翻车了,算了先不管了,至少谷歌浏览器提供的大量机型看起来适配性还不错,只是SE翻了车,其实也不算太翻车吧,只不过是一些地方感觉被压扁了,图片失真了。
玩乐
然后呢这是玩乐的页面,因为自己实在是没有什么设计头脑,就想起了QQ的说说,照着模板写了下来,感觉看起来不是很自然。当然其内部不如什么点赞的人,以及发表说说的人,还有评论都是自己写的假数据,这些都是需要后面自己写接口,目测感觉点赞与评论的功能比较难做,但不试试咋知道呢,我相信JavaScript!到时候这个页面会展示用户发布的说说,你可以对其点赞以及评论,你也可以筛选出你关注的人发布的说说,然后进行互动,我试着思考了一下如何做用户回复用户评论的功能,想着想着就睡着了。算了,先不管了,大不了到时候嘎了(doge)
我的
这是我做的个人首页,其实也是参考了小红书的个人首页,大家也可以对比一下看我做的像不像,我感觉自己做的看起来感觉很不自然,可能是尺寸这些有问题吧,毕竟没有UI设计图,都是照葫芦画瓢做出来的。到时候这个页面可以暂时自己发布的文章与自己点赞的文章,感觉关注与粉丝的功能可能会比较难做,我感觉我实现这些功能可能全靠node,反正把数据存入数据库就完啦(doge)。
店铺评价页面
这个页面呢是我设计的(完全是自己DIY出来的)页面,首先我猜给你的第一感觉应该是比较空吧,感觉白色的区域太多了,但是没办法,我的大脑只允许我做出这样的页面哈哈。这个页面主要是展示用户的评论以及评分,这个页面亮点的话,个人感觉可能就那个点赞的功能可能比较亮眼吧。
发布说说与评价页面
然后呢这2个页面主要是用户发布一些东西的页面第一个是发表说说的页面可以附带照片等,第二个页面呢是发表评论的页面,这个页面是不是内容很少?算了自己一个人开发,还是不要挖太多的坑吧,先暂时这样吧。
信息编辑
然后呢这个页面主要是展示用户个人信息的,总体写起来也没啥难度(VantUI:对对对),只是当点击不同的选项后,要展示不同的修改界面,就只需要将对于栏的title存在query中传给编辑页面即可,编辑页面再根据query参数来展示不同的内容,目前对于在编辑页面中数据的存储,我初步的方案是存在Vuex内,到时候用户所有信息都修改完毕以后再一并发给后端存入数据库。
注册与登录界面
登录与注册完成啦~因为我想实现的功能还有很多,所以在登录界面与注册界面就简单使用了vant的表单组件,所以看起来很单调,包括注册账号感觉十分草率,一般情况下应该还可以直接通过电话号码来注册,可能需要去调用一些发短信的api,总之用户的账号与密码不是小事,不会这么简单,等项目完成的差不多了,最后再来试试看能不能增加这一模块的一些功能(估计要嘎)
以上呢基本就是所有的静态页面了吧,感觉比前一个项目看起来感觉好多了,切换谷歌浏览器内不同的手机类型也有正常的呈现效果,除了IPHONESE...,主要是上一个项目翻车太严重了,上线后在自己手机上查看,不堪入眼。正所谓从哪里跌倒就要从哪里站起来。明天就要开始写一些接口了,实现用户之前互动的一些功能。冲!