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