1.项目介绍

此项目运用运用 vue 全家桶技术（vue+vue-cli+vuex+vue-router+node...），前后台分离和组件化的方式开发，使用WeUl基础样式库进行前台页面的搭建，后台使用的是MongoDB数据库进行编写，使用阿里云短信服务进行验证码注册。实现了下拉刷新、消息发送、大图预览、朋友圈发表。。。。

2、使用技术

MVVM 框架：Vue.js 2.0
状态管理：Vuex
页面路由：Vue-router
弹窗插件：WeUl
聊天插件：vue-socket.io
环境配置：node.js + cnpm
图片插件：vue-photo-preview

3、项目内容

3.1 登陆/注册

页面展示

代码

<div class="weui-form"><div class="weui-form__text-area"><h2 class="weui-form__title">手机号登录</h2></div><div class="weui-form__control-area"><div class="weui-cells__group weui-cells__group_form"><div class="weui-cells weui-cells_form"><div class="weui-cell weui-cell_active"><div class="weui-cell__hd"><label class="weui-label" >手机号</label></div><div class="weui-cell__bd"><input class="weui-input" type="number" v-model="mobile" pattern="[0-9]{11}" placeholder="请输入手机号"/></div></div><div class="weui-cell weui-cell_active weui-cell_vcode"><div class="weui-cell__hd"><label class="weui-label">验证码</label></div><div class="weui-cell__bd"><input autofocus class="weui-input" type="text" v-model="code" pattern="[0-9]*" id="js_input" placeholder="输入验证码" maxlength="6"/></div><div class="weui-cell__ft"><button v-show="timecode===60" class="weui-btn weui-btn_default weui-vcode-btn" @click="getCode">获取验证码</button><div v-show="timecode!==60" class="time-code weui-vcode-btn"> {{timecode}}</div></div></div></div></div></div><div class="weui-form__tips-area"><label id="weuiAgree" for="weuiAgreeCheckbox" class="weui-agree"><input id="weuiAgreeCheckbox" type="checkbox" v-model="agree" class="weui-agree__checkbox"/><span class="weui-agree__text">阅读并同意<a href="javascript:">《相关条款》</a></span></label></div><div class="weui-form__opr-area"><a :class="isSubmit?'weui-btn weui-btn_primary':'weui-btn weui-btn_primary  weui-btn_disabled'"  href="javascript:" id="showTooltips" @click="signup">注册/登录</a></div></div>

使用阿里云短信服务，输入手机号进行验证，输入合法的手机号才可以发送验证码，验证码后台验证，要输入正确的验证码才能登陆。一分钟之后要重新发送，重新获取。


async signup () {// 验证手机号if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {weui.topTips('请输入合法的手机号', 2000)return false}// 验证码if (!this.code) {weui.topTips('请填入验证码', 2000)return false}// 发送请求，注册或者登录const res = await service.post('/users/signup', {phonenum: this.mobile,code: this.code})/* 注册成功后的处理1.将登录或者注册的用户信息保存起来，以供其他页面使用2.跳转到用户本来想要请求的页面*/if (res.data.code === 0) {weui.toast('登录成功', 2000)this.$store.dispatch('setUser', res.data.data)this.$router.go(-1)}},// 验证码async getCode () {// 验证手机号if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {weui.topTips('请输入合法的手机号', 2000)return false}// 向服务器接口发送请求const res = await service.get('/users/phonecode', {phonenum: this.mobile})console.log(res)// 开启定时器，60s倒计时this.countTimeCode()},// 倒计时countTimeCode () {// 为this对象（当前的vue实例）动态添加一个属性clearFlagthis.clearFlag = setInterval(() => {if (this.timecode === 0) {this.timecode = 60// 清除定时器clearInterval(this.clearFlag)return}this.timecode--}, 1000)}},beforeDestroy () {clearInterval(this.clearFlag)
}

3.2 朋友圈列表

朋友圈列表是分组件开发，分别有列表组件、头部组件、背景图页面、下拉刷新组件、上拉刷新组件、评论组件和点赞组件。

3.2.1头部组件

<div class="header-bar" :class="headerClass"><p class="title">朋友圈</p><div class="photo-icon" @click="goPublish"></div>
</div>

向下滚动一定距离才会展示，点击相机图标进行判断如果没有登录则返回登录页面若登录则跳转到发布朋友圈页面。


goPublish () {/*** 判断用户是否登录* - 如果没有登录，跳转到登录页面* - 如果登录，则跳转到publish页面*/if (!this.$store.state.currentUser._id) {this.$router.push('login')return}this.$router.push('publish')}

3.2.2背景图页面

背景图展示和更换，若此用户没有更换过页面会展示系统默认背景图片和头像（从文件夹里自动分配），若此用户有自己的背景图和头像（数据库会有对应的数据可以拿出来进行展示），会展示自己的背景图和头像，点击背景更换。

computed: {// 设置用户的背景图像topBgImg () {const url = this.$store.state.currentUser.bgurl || require('../../assets/images/topbg.jpg')// console.log(url)return {backgroundImage: `url(${url})`}},// 设置用户头像usreAvatar () {const url = this.$store.state.currentUser.avatar || require('../../assets/images/avatar.jpg')return url},// 设置用户昵称nickname () {return this.$store.state.currentUser.nickname}}


changeBg () {const sefl = this// 弹出菜单weui.actionSheet([{label: '从相册选择',onClick: function () {// 展示一个用于选择图片的对话框sefl.$refs.uploaderBg.click()}}], [{label: '取消',onClick: function () {console.log('取消')}}])},// 更换用户的背景 图像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})}}

3.2.3列表组件

展示用户头像、帖子内容、帖子的发表时间和点赞和评论功能，实现了大图预览，可以查看朋友发表的图片的高清大图。（vue-photo-preview）


<div class="avatar-wrap"><img :src="data.user.avatar"  class="avatar" @click="goPersonPage(data.user._id)"></div><!-- 帖子的详细信息 --><div class="content-info"><!-- 用户昵称 --><p class="nickname">{{data.user.nickname}}</p><!-- 帖子内容 --><div class="post-content">{{data.content}}</div><!-- 帖子如果有多张图片，按照列表展示，图片的尺寸都一样 --><div class="img-content" v-if="data.picList.length>1"><img v-for="imgInfo in data.picList":key="imgInfo.id":src="imgInfo.url":preview="data._id"class="img-wrap"></div><!-- 帖子如果只有1张图片，图片可以放大展示，要求：宽度和高度不能超过200px --><div class="img-content-one" v-if="data.picList.length===1"><img:src="data.picList[0].url"class="img-wrap-one":preview="data._id":style="initImgSize(data.picList[0])"></div><!-- 帖子的发表时间 --><div class="time">{{formatTime(data.create)}}</div><!-- 点赞和评论功能 --><div class="opera-box" @click.stop="showPanel($event)"><div class="box-panel-wrap"><div class="box-panel animate__animated animate__bounceInRight" v-show="showOpera"><!-- 点赞和取消 --><div class="like-box" @click="operaLike"><!-- 显示一个喜欢的图标 --><div class="like-icon"></div><div class="like-text" v-if="!data.isLike">赞</div><div class="like-text" v-if="data.isLike">取消</div></div><!-- 发表评论 --><div class="comment-box" @click="addComment($event)"><div class="comment-icon"></div><div class="comment-text">评论</div></div></div></div></div><!-- 赞和评论的展示列表 --><div class="comment-list"v-show="data.likes.length>0 || data.comments.length>0"><!-- 赞的展示区域 --><div class="like-content" v-show="data.likes.length>0"><!-- 赞的图标 --><div class="like-heart-icon"></div><!-- 赞的作者 --><span  class="like-nickname"v-for="(item,index) in data.likes":key="index">{{item.nickname ||item.user.nickname}}</span></div><!-- 评论展示区域 --><div class="comment-item  scale-1px-top"v-for="(item,index) in data.comments":key="index"><!-- 评论作者 --><div class="comment-nickname one-line">{{item.user.nickname}}:</div><!-- 评论内容 --><div>{{item.content}}</div></div></div></div>

3.2.4点赞组件

点赞喜欢的帖子，通知vuex的store更新朋友圈的列表的数据


// 点赞和取消点赞operaLike () {if (this.data.isLike) {// 取消点赞this.removeLike()} else {// 点赞this.addLike()}},// 取消点赞async removeLike () {const res = await service.post('likecomment/removelike', {postId: this.data._id})if (res.data.code === 0) {this.$store.dispatch('removeLike', {pid: this.data._id,user: this.$store.state.currentUser})}},// 点赞async addLike () {const res = await service.post('likecomment/addlike', {postId: this.data._id})if (res.data.code === 0) {this.$store.dispatch('addLike', {pid: this.data._id,user: this.$store.state.currentUser})}}

3.2.5评论组件

点击评论获取用户点击的位置，展示文本框，输入内容成功评论。对安卓系统和iOS系统进行了判断，根据系统的不同展示位置也不同。使用了vuex公交车,进行数据传值，更新展示到页面。

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

 <div ref="inputWrap" class="input-wrap ios":style="{zIndex:showInput?'999':'-1',opacity:showInput?'1':'0'}"v-if="iosInput"><inputbar ref="inputBar" :option="option" @publish="publish"></inputbar></div><!-- 安卓 --><div ref="inputWrap" class="input-wrap android":style="{zIndex:showInput?'999':'-1',bottom:showInput?'0':'-60'}"v-if="androidInput"><inputbar ref="inputBar" :option="option" @publish="publish"></inputbar></div>

// 发表评论
async publish (data) {const res = await service.post('likecomment/addcomment', {postId: data.data._id,content: data.value})if (res.data.code === 0) {this.showInput = falsethis.$store.dispatch('addComment', {pid: res.data.data.post, // 帖子的idcontent: data.value,user: this.$store.state.currentUser})}}

3.3发表朋友圈

点击列表页的相机图标，跳转到发布朋友圈页面。动态内容限制在200字以内，上传图片限制在五张，上传的图片可以预览，删除。

oninput () {if (this.content.length > 200) {this.content = this.content.substr(0, 200)}this.letterCount = this.content.length},// 查看大图preImg (e) {const self = thisconst style = e.target.getAttribute('style')const url = style.split('"')[1]var gallery = weui.gallery(url, {onDelete: function () {self.deleteImg(e.target, gallery)}})},// 删除图片deleteImg (target, gallery) {const self = thisweui.confirm('确定删除该图片？', () => {// 从数组picList中删除图片const id = target.dataset.idconst 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')})}

const self = thisweui.uploader('#uploader', {url: service.baseURL + '/post/uploadimg',auto: true,type: 'file', // 将图片文件上传，而不是base64再上传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// return false; // 阻止文件上传},onProgress: function (procent) {// console.log(this, procent)// return true; // 阻止默认行为，不使用默认的进度显示},onSuccess: function (ret) {ret.data.id = this.idself.picList.push(ret.data)// console.log(this, ret)// return true; // 阻止默认行为，不使用默认的成功态},onError: function (err) {console.log(this, err)// return true; // 阻止默认行为，不使用默认的失败态}})

3.4个人信息

此页面展示了个人详细信息，可点击修改个人资料。


<div class="panel"><!-- 头像 --><a class="weui-cell  weui-cell_access" href="javascript:" @click="uploadavatar"><div class="weui-cell__bd"><p>头像</p></div><img :src="myUser.avatar" class="avatar" alt=""><div class="weui-cell__ft"></div><div id="uploaderavatar" class="weui-uploader__input-box" style="display:none"><input ref="uploaderavatar" class="weui-uploader__input" type="file" accept="image/*" capture="camera" multiple="" /></div></a><!-- 昵称 --><a class="weui-cell  weui-cell_access" href="javascript:" @click="changname"><div class="weui-cell__bd"><p class="name">昵称</p></div><div class="weui-cell__ft">{{myUser.nickname}}</div></a><!-- 个性签名 --><a class="weui-cell  weui-cell_access" href="javascript:" @click="changdesc"><div class="weui-cell__bd"><p class="name">个性签名</p></div><div class="weui-cell__ft">{{myUser.desc}}</div></a><!-- 性别 --><a class="weui-cell  weui-cell_access" href="javascript:" @click="changgender"><div class="weui-cell__bd"><p class="name">性别</p></div><div class="weui-cell__ft">{{myUser.gender==='1'?'男':'女'}}</div></a><!-- 电话号码 --><a class="weui-cell  weui-cell_access" href="javascript:"><div class="weui-cell__bd"><p class="name">电话号码</p></div><div>{{myUser.phoneNum}}</div></a></div>

3.4.1 消息列表

点击私信进入消息列表页面，展示与好友们的聊天的最后一条消息，可以通过关键字进行消息搜索，点击与该好友的聊天内容，进入到与好友的聊天页面。

<div class="weui-search-bar" id="searchBar" :class="searchBarClass"><form class="weui-search-bar__form"><div class="weui-search-bar__box"><i class="weui-icon-search"></i><input v-model="keyword" type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" @input="searchChat($event)" required/><a href="javascript:"  @click="clearSearch" class="weui-icon-clear" id="searchClear"></a></div><label class="weui-search-bar__label" id="searchText"><i class="weui-icon-search"></i><span>搜索</span></label></form><a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a></div>


async fetchData () {this.loading = trueconst res = await service.get('message/getchatlist', {keyword: this.keyword})if (res.data.code === 0) {this.loading = falsethis.dataList = res.data.data}},searchChat () {this.fetchData()}

3.5好友名片

3.6 聊天页面

点击好友名片中的发消息可以与好友进行聊天进入到聊天页面。获取与好友的历史聊天记录展示到页面。默认情况下只显示文本框，点击加号显示更多内容，可以发送图片。运用vue-socket.io和socket.io-client插件，实现了聊天的实时通讯。


created () {if (this.$store.state.currentUser && this.$store.state.currentUser._id) {// 登录socketthis.$socket.emit('login', this.$store.state.currentUser)}// 获取历史聊天数据this.fetchData()},
sockets: {// 接收消息recieveMsg: function (obj) {if (obj.fromUser._id === this.toUserId) {this.addMessage({content: obj.content,fromUser: obj.fromUser,main: false})}},/*** 服务器掉之后，客户端会重新连接，连接成功后会触发下面的事件* 我们就在这个事件中，重新登录*/reconnect (obj) {if (this.$store.state.currentUser && this.$store.state.currentUser._id) {// 登录socketthis.$socket.emit('login', this.$store.state.currentUser)}}}

// 获取聊天记录async fetchData () {const res = await service.get('message/getchathistory', {toUser: this.toUserId})if (res.data.code === 0) {this.dataList = (res.data.data)}},// 发表文字内容async publish (data) {// 将当前的消息储存到数据库const res = await service.post('message/addmsg', {content: { type: 'str', value: data.value },toUser: this.toUserId})// 将当前的消息储存到dataList中this.addMessage({content: { type: 'str', value: data.value },fromUser: this.$store.state.currentUser,mine: true})if (res.data.code !== 0) {weui.topTips('消息发送失败')}}

// 上传图片成功之后，将图片作为一条消息async uploaded (data) {// 将当前的消息储存到数据库const res = await service.post('message/addmsg', {content: { type: 'pic', value: data.data },toUser: this.toUserId})// 将当前的消息储存到dataList中this.addMessage({content: { type: 'pic', value: data.data },fromUser: this.$store.state.currentUser,mine: true})if (res.data.code !== 0) {weui.topTips('图片发送失败')}}

Vue仿微信朋友圈项目相关推荐

仿微信朋友圈项目梳理
项目功能简介: 用户通过手机号验证码进行登录和注册可以浏览动态列表中的所有动态登录成功后用户可以发表自己的动态也可以对自己认可欣赏的动态进行点赞和评论也可以通过动态结识志同道合的朋友进行聊天 ...
vue仿微信朋友圈动态页面
现在只写出动态页面,等到前端页面写完,后端写完,到时候贴出来
vue整合uniapp_uni-app仿微信App界面|vue+uniapp聊天室|仿微信朋友圈
项目简介基于uni-app+vue+vuex+uniPop+swiper等技术开发的仿微信聊天室uniapp-chatroom项目,类似vue及小程序api语法使开发更加方便,实现了发送图文消息.表 ...
Android仿微信朋友圈7实现点赞功能
前言: 之前一直有朋友问我点赞怎么实现?今天趁着休息时间整理出来,其实点赞的功能和用户评论差不多,都是显示一个用户列表,只不过评论有评论内容和回复评论功能.实现点赞的思路如下: 1.当用户点击点赞按钮 ...
仿微信朋友圈【九宫格的实现】
仿微信朋友圈[九宫格的实现] 标签: 九宫格自定义viewgroup 2017-04-18 18:39 561人阅读评论(0) 收藏举报分类: Android(25) 版权声明:本 ...
android从九宫格全屏预览,仿微信朋友圈展示图片的九宫格图片展示控件，支持点击图片全屏预览大图...
AssNineGridView 仿微信朋友圈展示图片的九宫格图片展示控件,支持点击图片全屏预览大图(可自定义). 写在前面这是一个九宫格控件,本来是很久之前就写好了,现在才开源出来,也是看了很多优秀 ...
Android仿微信朋友圈2自定义点赞评论弹框
最近在做类似微信朋友圈点赞评论的功能,有个点赞评论弹框交互,感觉效果很好,点击评论按钮弹框从按钮左边弹出,遇到了3个问题(弹出动画不对.弹框布局没有适配.弹出的位置显示不对),动画和布局好解决,弹出的 ...
混合开发之仿微信朋友圈
转载于:Android 混合开发之仿微信朋友圈 - CSDN博客 https://blog.csdn.net/u013144863/article/details/53230786 开发之前大约从去 ...
Android仿微信朋友圈发图片和文字
Android仿微信朋友圈发图片和文字的一个开源项目,其在github上的项目主页是:https://github.com/zhangphil/FangWeiXinPengYouQuanFaTuPia ...
Android仿微信朋友圈6之实现消息提醒功能
之前有朋友问我消息提醒咋实现,我一直没有整理出来,今天就放出来.微信朋友圈的消息提醒就是收到朋友的评论后背景底部显示消息条数和评论用户,顶部是一张相册背景和当前用户昵称头像. 1.消息提醒的布局如下: ...

Vue仿微信朋友圈项目