仿微信项目

登录

登录页面:验证码利用阿里云的短信服务,获取到验证码,通过对手机号和验证码的验证,实现登录,登录成功之后做了两件事,将登陆或者注册的用户的信息,保存起来以供其他页面使用,第二件事就是跳转到用户想要跳转的页面去。

跳转到其他页面这里好解决

this.$router.go(-1)

保存其他用户的信息这里用了vuex,这样的话就可以在其他页面使用,方便信息的管理和共享

发表心情

用户必须是登录状态

发表文字内容,限制了只能发表200个字

oninput () {
      if (this.content.length > 200) {
        this.content = this.content.substr(0, 200)
      }
      this.letterCount = this.content.length
    }

发表图片,这里用了weui的插件,对图片的格式,大小格式,上传的图片数量都做了限制

在上传图片之前把保存在本地的用户信息放在请求头中,以便后台识别

上传图片成功之后将图片的路径保存下来

上传图片成功之后,还能查看大图,将不喜欢的图片进行删除,在这里我们用了  vue-photo-preview  

最后去请求后台,把数据保存在本地

朋友圈

1、关于用户信息的显示

 如果用户没有设置过背景图像、头像、昵称等信息,就显示默认的,否则就显示用户自己设置的

 如何知道用户是否自己设置过

每个新用户登录成功之后,后台系统会默认分配一个头像,昵称,背景图片,

  2、更换背景图像

 为top-img添加单击事件,在单击事件中,弹出一个菜单,供用户选择

 用户从相册中选了了图片后,将图片上传,服务器返回上传成功的信息

 根据服务器返回的图片url,更新用户背景图像:1)更新数据库中用户的背景图像;2)更换页面上用户的背景图像

3.对于用户发表的图片做的处理

     

4.对内容文件太多做的处理

5.点赞,将点赞传到vuex中,通知vuex更新朋友圈的数据

      

6.评论,当用户点击评论的时候,获取当前点击的坐标,然后去触发父组件的showInput 事件,他的作用是显示用于输入内容的文本框,对于文本框的显示还根据是安卓还是ios系统做了判断

       

7.向上刷新朋友圈的历史数据,每页默认只展示5条数据,数据加载完毕去通知下拉刷新组件,在加载更多内容

8.下拉获取最近数据,向下拉动时,小圆球跟着滚动,手指松开屏幕后,圆球归位,加载最新数据

个人信息

获取vuex中存储的个人信息,遍历显示在页面上

更新头像,弹出一个选择图片的,上传图片,然后更换成功

更换昵称,点击昵称跳转到更新昵称页面,保存的时候同时更新数据和本地存储的昵称

更新个性签名,点击个性签名,跳转到更新页面,保存的时候同时更新数据和本地存储的个性签名

修改性别,点击时弹出供选择性别的框框

私信

点击私信跳转到消息列表,展示与朋友们聊天的最后一条消息,在搜索框能够根据关键词搜索到与朋友的聊天信息,点击与好友的任何一个消息,就可以进入与朋友的聊天界面

    

好友名片

在朋友圈页面点击好友头像,进入到好友名片页面,在跳转的同时,将该用户的id传过去,然后根据id查询好友的所有信息,展示在页面点击发消息,可以跟好友进行聊天

获取与好友的历史聊天记录,展示在页面,默认情况下只显示输入文本框,点击加号按钮,显示更多面板,可以选择发图片,运用  socket.io-client  、vue-socket.io  插件,时事通讯

   

猜你喜欢

转载自blog.csdn.net/WenR_zt/article/details/106325669