仿微信朋友圈项目梳理

项目功能简介：

用户通过手机号验证码进行登录和注册 可以浏览动态列表中的所有动态 登录成功后用户可以发表自己的动态 也可以对自己认可欣赏的动态进行点赞和评论 也可以通过动态结识志同道合的朋友 进行聊天和探讨

  • 前端：采用Vue框架搭建 weui进行页面布局
  • 后端：采用node.js
  • 数据库：mangoDB库

1. 登录注册功能：

在这里插入图片描述

  1. 通过weui中weui-form进行的页面布局
  2. 使用 /^1[3456789]\d{9}$/ 此正则表达式验证手机号是否合法
  3. 用户点击获取验证码后按钮变成60秒倒计时
  4. 调用后端接口通过调用阿里云短信服务向用户输入的手机号码发送验证码
  5. 验证码输入后点击同意并阅读相关条款后 注册/确定按钮变成激活状态
  6. 登录成功后该页面跳转至上一需登录页面
  7. 将用户信息存入store中（Vuex）

2. 主页：

在这里插入图片描述

2.1 上半部分：

  • 头部导航 返回按钮 相机标志（见主题3）
  • 背景图 头像 用户昵称 如果用户未登录是系统随机匹配的图片

2.1.1 头部：

在这里插入图片描述
当导航条在最顶部时此导航部分为透明，并且不显示朋友圈文字，当用户向下混动一定距离时，导航部分为灰色背景色显示文字，并且相机颜色为黑色，点击相机图标跳转到发布动态页面

2.1.1.1导航栏的变色实现
  • 检测当滚动条的滚动具体大于100时为导航栏元素添加一个类名小于时取消类名
  • 使用交集选择器 判断元素具备两个类名时才添加背景颜色 隐藏文字 切换相机图片
2.1.1.2点击相机发表动态
  1. 判断用户是否登录 上面当用户登录成功后会将用户的信息存入公共可访问的store 中，所有可以在store数据中查询用户是否登录
  2. 如果未登录跳转到login登录页面 （见主题1）
  3. 若登录后跳转动态发表页面 （见主题3）

2.1.2 背景图的切换

  • 点击背景图像运用weui.actionSheet会弹出一选择框
    在这里插入图片描述
  • 点击取消后选框消失
  • 点击从相册选择 会通过ref属性 用代码进行对uploader中的单击事件的触发
  • 我们将weui-uploader这模块隐藏不显示
  • 但uploader被单击时会执行像主题3.3中的步骤进行图片的上传
onSuccess: function (ret) {// 更换用户的背景图像self.submit(ret)}
  • 上传成功后我们会触发submit函数并且将ret图片的信息作为参数进行传递
async submit (obj) {// 更新数据库中的背景图像const res = await service.post('users/update', {userId: this.$store.state.currentUser._id,bgurl: obj.data.url})// 更新本地中的北背景图像if (res.data.code === 0) {this.$store.dispatch('setUser', {...this.$store.state.currentUser,bgurl: obj.data.url})}
  • 通过调用接口 更新用户的背景图 成功后我们将调用store中的方法改变本地的背景图
  • 在调用store中的方法时我们传过去的参数中是运用对象的深拷贝（…）

2.1.3 点击头像进入用户中心

  • 判断用户如果没有登录跳转到login登录页面如果已经登录跳转到个人中心页面
  • 个人中心功能见主题4

2.2 下半部分

在这里插入图片描述

  • 动态列表
  • 点赞评论
  • 头像点击查看对方信息
  • 图片的查看

2.2.1 动态列表

  • 显示的头像信息 昵称
  • 显示帖子的内容（如果文字较多设置只显示三行超出隐藏）
 overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;
  • 显示动态中携带的图片（一张图片按照图片的最长边进行成比例缩放，，多张图片按照固定宽高设置）
 <!-- 帖子中如果有多张图片 按照列表显示 图片的尺寸都一样 --><div class="img-content" v-if="data.picList.length>1"><img v-for="imgInfo in data.picList":key="imgInfo.id":preview="data._id":src="imgInfo.url"class="img-warp"></div><!-- 如果帖子中只有一张图片 图片可以放大显示 要求狂傲不能超过200px --><div class="img-content-one" v-if="data.picList.length===1"><img:src="data.picList[0].url"class="img-warp-one":preview="data._id":style="initImgSize(data.picList[0])"></div>
  • 帖子的发表时间，通过moment来进行时间格式化

2.2.2 点赞评论

  • 点赞
    • 用户点击 - - 的时候 出现点赞评论的标识
    • 当该用户已经点过赞时，显示取消点赞，用户未点赞时，显示点赞
    • 点赞宇取消点赞都是用过点击时判断点赞还是取消来请求后端的不同接口进行修改
    • 成功后也要修改store中的本地数据
  • 评论

    • 获取当前手指的坐标 并触发bus中的showInput事件

      addComment (e) {// 获取当前点击的坐标this.data.pageY = e.pageYthis.data.clientY = e.clientYthis.$bus.$emit('showInput', this.data)}

    • 当用户触发showInput事件后显示文本框

    • 通过os进行检测用户的手机系统评论的文本框也是不同的

      this.$bus.$on('showInput', (currentData) => {if (this.$refs.inputBar) {// 显示输入框this.showInput = true// 调用输入框组件的focusInput事件，以弹起键盘this.$refs.inputBar.focusInput(currentData)// this.$refs.inputWrap.style.top = currentData.pageY + 'px'// 调整页面的位置if (os.isIOS) {this.$refs.inputWrap.style.top = currentData.pageY + 'px'// 计算页面的滚动距离setTimeout(() => {const y = currentData.pageY - window.keyboradHeightwindow.scroll(0, y)}, 300)}}})
      • 调用输入框组件的focusInput事件，以弹起键盘
      • 调整页面的位置
      • 计算页面的滚动距离

2.2.3 点击图片查看大图

在这里插入图片描述

  • 通过使用preview来实现图片的查看
  • preview作为元素的动态属性 值为每组图片公共值 这里使用发表用户的_id
  • 可以左右滑动进行切换图片

2.2.4 点击头像查看作者信息

  • 点击自己的头像则会跳转到主题4
  • 点击其他作者的头像则会跳转到用户信息（传递用户id在路径中）
    在这里插入图片描述
  • 通过传递过来的id进行查寻用户信息在此进行展示
  • 点击发消息跳转到聊天页面（传递参数用户id用户昵称到路径中）主题5

2.3 上划加载更多

2.4 下拉更新

3. 发表动态页面

在这里插入图片描述

3.1 第一部分（取消发表按钮）

3.1.1 取消按钮————回到上一页面

3.1.2 发布按钮

  • 验证文字是否为空
  • 文字的数量是否合法
  • 请求接口进行发布
  • 成功后会跳转到主页（见主题2）

3.2 第二部分（文本区域）

3.2.1 用户输入的文字数量

  • 将展示用户输入文字数量使用动态数据，通过input事件实时得到文字数量不断改变变量的值

3.2.2 限定用户输入的文字数量为100

  • 采用weui中的form文本域
  • 通过双向绑定的元素得知用户输入的文字数量，当用户输入的文字数量超过100时，获取文字的内容通过substr属性取前一百个文字复制给双向绑定的文字内容的变量造成超出100字不能输入的现象。

3.3 第三部分（上传图片）

3.3.1 采用weui中的uploader技术进行图片的上传

在weui中的this指向并不是Vue实例所以在第一行中加入const self=this 让self常量指向我们的Vue实例

  const self = thisweui.uploader('#uploader', {url: service.baseURL + '/post/uploadimg',auto: true,type: 'file',fileVal: 'image',compress: {width: 1600,height: 1600,quality: 0.8},onBeforeQueued: function (files) {// `this` 是轮询到的文件, `files` 是所有文件if (['image/jpg', 'image/jpeg', 'image/png', 'image/gif'].indexOf(this.type) < 0) {weui.alert('请上传符合条件的图片')return false // 阻止文件添加}if (this.size > 10 * 1024 * 1024) {weui.alert('请上传不超过10M的图片')return false}// 控制多元每次不能超过五张if (files.length > self.totalUploadCount) {weui.alert('最多只能上传' + self.totalUploadCount + '张图片，请重新选择')return false}// 如果已经上传五张图片 作为不能继续上传if (self.uploadCount + 1 > self.totalUploadCount) {weui.alert('最多只能上传' + self.totalUploadCount + '张图片')return false}self.uploadCount++// return true; // 阻止默认行为，不插入预览图的框架},onBeforeSend: function (data, headers) {const token = document.cookie.split('=')[1]headers['wec-access-token'] = token},onProgress: function (procent) {// console.log(this, procent)// return true; // 阻止默认行为，不使用默认的进度显示},onSuccess: function (ret) {ret.data.id = this.idself.picList.push(ret.data)},onError: function (err) {console.log('error:' + err)// return true; // 阻止默认行为，不使用默认的失败态}})
  • onBeforeQueued
    选择要上传的图片时触发（验证图片是否符合要求）
    • 验证图片的格式
    • 验证图片的大小不能超过10M
    • 控制每次选择图片不能超过五张
    • 控制如果已经选择五中图片不能继续上传
  • onBeforeSend
    图片上传前触发
    • 我们将用户登录成功后存入Local Storage中的cuser（token）放到请求头headers中
  • onSuccess
    图片上传成功后触发
    • 将图片的id存到 ret.data中
    • 将图片的所有信息添加到picList数组中

3.3.2 查看图片

在这里插入图片描述
在这里插入图片描述

  • 点击小图片时可以展现大图 点击图片时会通过e.target拿到事件源
  • 通过getAttribute（‘style’）方法获取style中属性background-image: url(“blob:http://192.168.0.107:8080/c1e0e8bf-4ac6-4184-a839-0cdcce473aa4”);
  • 通过“ " ”进行分割得到第二个元素 也就是路径
  • 将得到的路径复制给weui.gallery 他具有两个参数，一个是图片的路径，一个是删除图片我们在第二个参数中调用删除图片的函数并且将图片的信息以及查看大图的 div作为参数传递过去（见主题3.3.3）（self指向的是this Vue的实例）
 preImg (e) {const self = thisconst url = e.target.getAttribute('style').split('"')[1]var gallery = weui.gallery(url, {onDelete: function () {self.deleteImg(e.target, gallery)}})}

3.3.3 删除图片

deleteImg (target, gallery) {const self = thisweui.confirm('确认删除图片吗', () => {const id = target.getAttribute('data-id')const index = self.picList.findIndex(item => {return item.id === id})self.picList.splice(index, 1)// 删除对应的DOM元素target.remove()self.uploadCount--})gallery.hide(function () {console.log('`gallery`has been hidden')})}
  • 运用weui中的confirm确定是否对删除图片
  • 确定删除：通过id找出picList数组中与之相同的图片信息进行删除，同时将对应的DOM元素进行删除
  • 上面执行的同时会执行hide事件，将我们现实大图的div进行隐藏

4. 用户个人中心

在这里插入图片描述

  • 导航部分为公用组件 通过父子组件prop进行传值（头部导航的文字内容）
  • 点击<按钮跳转上一页面

4.1 更换头像

  • 点击用户的头像时 依靠ref属性使用代码触发隐藏的上传图片插件的单击事件，进而激活uploader进行图片的上传
  • 上传成功后分为以下两步
 onSuccess: async function (ret) {// console.log(ret)const res = await service.post('users/update', {userId: self.$store.state.currentUser._id,avatar: ret.data.url})if (res.data.code === 0) {self.$store.dispatch('setUser', {...self.$store.state.currentUser,avatar: ret.data.url})weui.toast('上传成功', 2000)}}
  • 上传下成功后在此函数中ret中就是上传成功图片的所有信息
  • 访问接口并且将用户id从store中取出以及图片的地址一并放到请求体中 更新数据库中的头像
  • 数据库中的数据更新成功后 会通过调用store中的方法来改变本地的头像地址 同样请求体中还是使用对象的深拷贝

4.2 修改用户昵称

在这里插入图片描述

  • 点击用户昵称时会跳转页面
  • 点击提交按钮 验证文本框内容不能为空
  • 请求后端接口修改数据库中的昵称
  • 成功后通过store中的方法修改本地昵称
  • 最后将文本框内容清空，提示修改成功，2秒后跳转至个人中心

4.3 更换/发表用户个性签名

在这里插入图片描述

  • 点击个性签名时会跳转页面
  • 展示已有的个性签名 可更改 可添加
  • 点击提交按钮 验证文本框内容不能为空
  • 请求后端接口修改数据库中的个性签名
  • 成功后通过store中的方法修改本地数据
  • 最后提示修改成功，2秒后跳转至个人中心

4.4 切换性别

在这里插入图片描述

  • 点击性别时会弹出选项框运用weui中的actionSheet进行性别选择
 weui.actionSheet([{label: '男',onClick: async function () {const res = await service.post('users/update', {userId: self.$store.state.currentUser._id,gender: '1'})if (res.data.code === 0) {self.$store.dispatch('setUser', {...self.$store.state.currentUser,gender: '1'})weui.toast('修改成功', 1000)}}},{label: '女',onClick: async function () {const res = await service.post('users/update', {userId: self.$store.state.currentUser._id,gender: '0'})if (res.data.code === 0) {self.$store.dispatch('setUser', {...self.$store.state.currentUser,gender: '0'})weui.toast('修改成功', 1000)}}}], [{label: '取消',onClick: function () {console.log('取消')}}])
  • 点击取消则会隐藏选项框
  • 点击男，会请求后端接口将gender属性值设置为‘1’进行更改，成功后更改本地数据
  • 点击女，会请求后端接口将gender属性值设置为‘0’进行更改，成功后更改本地数据

5. 聊天窗口

在这里插入图片描述

  • 通过用户传递过来的用户昵称显示在最上方
  • 点击返回按钮跳转上一页面
  • 运用vue-socket.io和socket.io-client实现前后端的聊天数据的交互
  • 页面加载时，首先当前用户登录socket，获取当前登录用户与当前指定用户的聊天记录

6. 页面之间切换的动画效果

我们采用animate实现页面之间的切换 animate样式官网点击查看 我们应该将样式应用到所有组件切换需要必经之路–App.vue

  • 首先我要安装animate

    $ npm install animate.css --save

  • 在main.js中引用

    import ‘animate.css’

  • 需要将运用动画的元素使用标签包裹起来

        <transition:enter-active-class="transitionIN":leave-active-class="transitionOut"><router-view/></transition>

  • 里面的enter-active-class是为要切换来的（进场）设置动画

  • leave-active-class是为要切出（出场）设置动画，两属性值均为动态

  • 考虑到不同的页面切换的动画应该不同 so我们采用侦听器来检测路由的变化进而对个别的页面做出个性动画

    // 侦听器：侦听路由的变化进而应用不同的转场动画watch: {$route (to, from) {if (to.name === 'Publish') {this.transitionIN = 'animate__animated animate__slideInUp'this.transitionOut = ''} else if (from.name === 'Publish') {this.transitionIN = ''this.transitionOut = 'animate__animated animate__slideOutDown'} else {this.transitionIN = 'animate__animated animate__slideInLeft'this.transitionOut = 'animate__animated animate__slideOutLeft'}}}
    • $route就是监测此时路由 里面的参数： to要跳转到那个路由，from是从哪里来

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/248758.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

echarts鼠标事件以及自定义数据获取

echarts鼠标事件以及自定义数据获取

事件添加方法&#xff1a; 对应官网位置&#xff1a;https://www.echartsjs.com/api.html#events 鼠标事件包括 click、dblclick、mousedown、mousemove、mouseup、mouseover、mouseout、globalout、contextmenu。 myChart.on(click, function (params) {console.log(params); …
阅读更多...
[数学]点、线、面分割问题

[数学]点、线、面分割问题

平面分割问题 p条直线相交于一点时&#xff0c;分割的图形有 2*(n-1) 个&#xff0c;此时再加一条直线&#xff0c;在 2*(n-1) 的基础上再加 n条&#xff0c;此时为2*n n条曲线&#xff0c;其中有m条相交于一点&#xff0c;每两个曲线都交于两点 平面上有n条直线&#xff0c;且…
阅读更多...
移动开发

移动开发

1.移动端基础 1.1 浏览器现状 PC端浏览器 360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器&#xff08;停止服务&#xff09;、搜狗浏览器、IE浏览器 移动端浏览器 UC、QQ浏览器、欧朋浏览器、百度手机浏览器、360、搜狗、猎豹、谷歌等其他手机自带的浏览器 国…
阅读更多...
Django之路由系统

Django之路由系统

Django的路由系统 Django 1.11版本 URLConf官方文档 URL配置(URLconf)就像Django 所支撑网站的目录。它的本质是URL与要为该URL调用的视图函数之间的映射表。 你就是以这种方式告诉Django&#xff0c;对于这个URL调用这段代码&#xff0c;对于那个URL调用那段代码。 URLconf配置…
阅读更多...
微信小程序——操作数据库

微信小程序——操作数据库

案例一&#xff1a;统计用户的访问次数 业务需求&#xff1a; 统计每个用户对程序的访问次数将访问次数存储到数据库中访问次数应该与用户进行关联 业务逻辑&#xff1a; 如果用户是第一次访问此程序&#xff0c;向数据库添加一条记录&#xff1a;{openid&#xff1a;45454…
阅读更多...
shop--12.阿里云部署以及域名绑定

shop--12.阿里云部署以及域名绑定

一、申请阿里云服务器&#xff08;1&#xff09;PC访问阿里云https://www.aliyun.com/&#xff0c;申请阿里云帐号&#xff08;可以用您的支付宝帐号登录&#xff0c;因为支付宝帐号已经进行了实名认证&#xff0c;使用起来更方便&#xff09;并登录&#xff08;2&#xff09;找…
阅读更多...
微信小程序——获取用户的运动步数

微信小程序——获取用户的运动步数

程序获取用户信息步骤 点击参考微信文档中的授权首先程序先向用户申请访问哪些权限用户做出选择后返回给程序程序携带权限访问服务器如果用户允许则返回信息如果用户为允许则不返回 自定义函数getUserRun 为获取用户的微信运动数据 页面加载调用此函数函数中执行下面操作 1…
阅读更多...
第一次个人作业

第一次个人作业

该作业所属课程&#xff1a;https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2作业要求地址&#xff1a;https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2/homework/3340团队名称&#xff1a;脑壳痛 作业的目标 1.通过测试其他组的软件项目学习其…
阅读更多...
微信小程序——解决上传并部署云函数时报错ResourceNotFound.Function, 未找到函数版本，请创建后再试。 (7f2d9d2d-5eac-4575-9n57-acd66cfa587g

微信小程序——解决上传并部署云函数时报错ResourceNotFound.Function, 未找到函数版本，请创建后再试。 (7f2d9d2d-5eac-4575-9n57-acd66cfa587g

1. 上传部署我们的云函数 2. 报错 错误信息为&#xff1a;Error: ResourceNotFound.Function, 未找到函数版本&#xff0c;请创建后再试。 (7f2d9d2d-5eac-4575-9b57-acd66cfa587e) 3. 原因 原因是可能我们在调试的时候不小心将我们开发控制台中的云函数删除了 4. 解决办法…
阅读更多...
【IT界的厨子】酱香鲈鱼

【IT界的厨子】酱香鲈鱼

食材: 前世曾经回眸的鲈鱼一条(主要选刺少的鱼&#xff0c;适合孩子吃&#xff0c;大人吃随意&#xff0c;草鱼比较大) 五花肉少许(肥一些的) 豆腐 辅料: 葱姜 蒜(选) 大料 香菜 调味: 啤酒(两罐) 黄豆酱或豆瓣酱(选) 老抽 生抽 料酒 盐 步骤: 1、鱼肉划开&#xff0c;方便炖的…
阅读更多...
for each....in、for in、for of

for each....in、for in、for of

一、一般的遍历数组的方法: var array [1,2,3,4,5,6,7]; for (var i 0; i < array.length; i) { console.log(i,array[i]); } 二、用for in的方遍历数组 for(let index in array) { console.log(index,array[index]); }; 三、forEach array.forEach(v>{ cons…
阅读更多...
Vue cli3.0创建Vue项目

Vue cli3.0创建Vue项目

创建Vue项目 在要创建项目的文件夹下面打开Powershell窗口 输入命令 vue create 项目名称 选择第二项 回车后 选择是否使用历史路由 no 回车 选择 Less 回车 选择第三个 回车 选择第一个 回车 选择第一个 回车 是否保存模板 选择no 完成啦 完成
阅读更多...
Remote desktop manager共享账号

Remote desktop manager共享账号

因为多个远程机器&#xff0c;是会用了域账号进行登录的。而域账号的密码&#xff0c;三个月之后&#xff0c;密码强制过期 添加一个新的entry&#xff0c;类型是Credential Entry&#xff0c;然后选择用户名/密码 在remote desktop编辑的页面&#xff0c;Credentials选择Crede…
阅读更多...
Mui常用的方法

Mui常用的方法

中对话框 语法&#xff1a;mui.confirm 用法 mui.confirm("确认要切换角色&#xff1f;", "提示", btnArray, function(e) {if(e.index 1) {} else {}});组件名作用alert警告框confirm确认框prompt输入对话框toast消息提示框&#xff08;自动消失&#x…
阅读更多...
java ListMapString,Object遍历的方法

java ListMapString,Object遍历的方法

java List<Map<String,Object>遍历的方法 public class Test {public static void main(String[] args) {List<Map<String, Object>> listMaps new ArrayList<Map<String, Object>>();Map<String, Object> map1 new HashMap<Strin…
阅读更多...
vue如何更换网页标签的logo

vue如何更换网页标签的logo

Vue2 版本更换图标 在我们项目的根目录下面去添加或者替换 favicon.icon文件 找到我们的 build 文件夹下面的这两个文件 进行如下配置 favicon: resolveApp(’./favicon.ico’) 刷新后发现并没有什么效果 莫慌 最后一步 重启项目 改变端口 如果重启后还没有起到作用的话就…
阅读更多...
《JavaScript高级程序设计》笔记总结

《JavaScript高级程序设计》笔记总结

在北京上班的我每天在上下班路上的时间总共是两个半小时&#xff0c;为了充实这两个多小时的时间&#xff0c;我便花了银子换得了下面这个宝贝 本书内容&#xff08;引用书中前言&#xff09; 本书提供了JavaScript开发人员必须掌握的内容&#xff0c;全面涵盖了JavaScript的…
阅读更多...
MUI H5+ 开发app基础

MUI H5+ 开发app基础

加载子页面（防止手机性能差，出现上下滑动卡顿） 其中 url 就是子页面的路径 id 为自定义 通常和页面名称一致页面的跳转和传值 切记 如果使用mui组件内的底部导航跳转的方式只能使用document获取元素的id 页面跳转传值 新页面接收参数 页面初始化 H5加载完毕 判断某个元素中是…
阅读更多...
uni-app 组件传值

uni-app 组件传值

uni-app中的组件之间的传值 我们将compontents中的test文件作为子组件 引入到index中使用 引入并使用 效果如下 父传子 首先我们在父组件中使用子组件的标签中去自定义title 在子组件中 通过props去接收并处理 效果如下&#xff1a; 子传父 子组件中 设置一个按钮…
阅读更多...
Docker 图形界面管理工具 -- Portainer

Docker 图形界面管理工具 -- Portainer

Portainer&#xff08;基于 Go&#xff09;是一个轻量级的管理界面&#xff0c;可让您轻松管理Docker主机或Swarm集群。 Portainer的使用意图是简单部署。它包含可以在任何 Docker 引擎上运行的单个容器&#xff08;Docker for Linux 和 Docker for Windows&#xff09;。 Port…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023